1.简介
jQuery是目前最受欢迎的JavaScript的库,简化了JavaScript的开发工作,并且基本解决了在不同浏览器中的兼容性问题,提供了大量的使用方法。
2.HelloWorld
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HelloWorld</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//使用$()代替window.onload
$(function(){
//使用选择器获取按钮对象,随后绑定单击响应函数
$("#btnId").click(function(){
//弹出Hello
alert('Hello');
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
说明:JS中
window.onload(){}和Jquery中
$(function(){})的区别?
①
加载的顺序不同:
window.onload(){}在整个网页加载完成之后加载,包括图片,视频
(
包括外部资源)
。
$(function(){})是在文本加载完成之后加载
(
不包括外部资源)
。
②
写的次数不同:window.onload(){}可以多次执行,而$(function(){});只可以执行一次,如果多次执行,后面的将把前面的覆盖。
③
书写的方式不同:window.onload(){}只有这一种写法,而
$();一共有三种表示方式:
$(function(){}) ; jQuery(function(){}) ;
$(document).ready(function(){});
3.核心函数
(1) 核心函数
$是jQuery的核心函数,jQuery的核心功能都是通过这个函数实现的 。
四种方法:
$(function(){}) :相当于window.onload = function(){}
$(“选择器”) :根据选择器返回一个jQuery对象
$(“html代码”) :使用原始的html代码创建对象
$(DOM对象) :将DOM对象转换成一个jQuery对象
(2) jQuery对象和DOM对象
① DOM对象 :
通过原生JS获取到对象,是DOM对象。
② jQuery对象 :
通过jQuery核心函数包装过的对象时jQuery对象。
③ 比较
dom对象和jQuery对象不能互相调用方法和属性
dom对象命名上没有特殊要求。
jQuery对象的名字习惯上加一个$作为前缀。
④ 转换
dom --> jQuery :
var $obj = $(domObj);
jQuery --> dom :
var domObj = $obj[0];
jQuery对象的本质实际上就是一个DOM对象的数组,所以将jQuery对象转换为dom对象,只需要从数组中取出dom对象可。
(3) jQuery 选择器
jQuery选择器集合了CSS和xPath选择器的语法。利用jQuery选择器,可以非常便捷和快速的找出特定的DOM元素。
①
语法: $(selector) 。
例如 :
【1】
$(“#id”) 根据id获取指定元素
【2】
$(“.class”)根据类名获取指定元素
【3】
$(“tagName”)根据标签名获取指定元素
②
query选择器分类:
【1】 基本选择器
【2】 层次选择器
【3】 过滤选择器(可以分为 基本,内容,可见性,属性,子元素,表单,表单对象属性)
③ Jquery选择器练习:
说明1:
不论是在Jquery中还是DOM中,this代表的始终是DOM对象,想要获取属性的值,可以用alert(this.innerHTML)或者alert($this.val()) : (适用于点击获取当前属性的值 );
alert(this.value):(适用于在下拉菜单中获取选中属性的值 );
说明2:
Jquery文档中几个比较常用的属性:
【1】each()可用于遍历获取元素的选中值。
$("#sendBtn").click(function(){
$items.filter(":checked").each(function(){
alert(this.value);
});
});
【2】attr() 方法设置或返回被选元素的属性值。
$("button").click(function(){
$("img").attr("width","180");
});
4.Jquery对象
(1) DOM查询
eq(index) : 查询指定索引的元素
first() : 查询第一个元素
find(选择器) : 在当前元素的后代元素中查找
children(选择器) :在当前元素的子元素中查找
filter(选择器) :从当前对象中筛选出符合条件的元素
not(选择器) :从当前对象中删除调用符合条件的元素
parent() : 获取当前元素的父元素
parents(选择器) : 获取当前元素的祖先元素
add() : 向对象中添加指定的元素
(2) DOM增删改
根据父子关系插入节点:
向父节点的后边插入子节点:append() appendTo()
向父节点的前边插入字节:prepend() prependTo()
根据兄弟节点关系插入节点:
向一个节点的前边插入一个节点:before() insertBefore()
向一个节点的后边插入一个节点:after() insertAfter()
替换节点:replaceWith() replaceAll()
删除一个节点:remove()
清空一个节点:empty()
获取元素内部的html代码:html()
获取元素内部的文本内容:text()
设置元素内部的html代码:html("代码")
设置或读取元素的指定的属性:attr()
读取属性值:attr("属性名")
设置属性值:attr("属性名","属性值")
5. 样式操作
(1) 类操作
添加一个或多个类:addClass()
删除一个或多个类:removeClass();
切换一个或多个类:toggleClass();
判断是否包含某个类:hasClass();
(2) 样式操作
读取:css("background-color");
设置:css("color","#bfa");
获取或设置一个元素的高度和宽度:height() width()
获取和设置一个元素的位置:offset();
(3) 显示隐藏
隐藏一个元素:hide()
显示一个元素:show()
切换元素的显示状态:toggle()
(4)
样式操作代码练习
6.事件
(1) 事件的绑定和解绑
① 绑定
直接通过对应事件的方法绑定 :对象.click(function(){});
通过bind()方法 :对象.bind("事件字符串",function(){});
绑定一个一次性的事件 :对象.one("事件字符串",function(){});
为现有的以及后边添加的元素都绑定一个指定事件 :对象.live("事件字符串",function(){});
② 解绑 :
解除指定事件 :unbind("事件名")
解除所有事件 :unbind()
(2) 事件的冒泡
事件的冒泡指,当一个元素上绑定的事件被触发,这时它祖先元素上的同类事件也会被触发,在jQuery中解决冒泡问题只需要在响应函数的最后 return false;
(3) 事件对象
浏览器在调用响应函数时,会将一个事件对象作为实参传递进响应函数,事件对象中封装了当前事件相关的一些属性:
比如: 鼠标指针的坐标 ,键盘的那个按键被按下 ,我们如果想获取到这个对象,只需要在响应函数中定义一个形参:
btn.onclick = function(event){};