jQuery实战教程
1. jQuery是什么
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team。
其宗旨是——WRITE LESS,DO MORE.即写更少的代码,做更多的事。
它是轻量级的js库(压缩后只有21k),还兼容各种浏览器。
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
2. jQuery第一个例子
<!--引入jquery的js库-->
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<script language="JavaScript">
$(document).ready(function(){//等待dom元素加载完毕,类似window.onload;
alert("您好,我是张三丰");
});
</script>
3. 什么是jQuery对象?
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是jQuery 独有的. 如果一个对象是jQuery 对象, 那么它就可以使用jQuery 里的方法。
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。
4. DOM对象转成jQuery对象
对于已经是一个DOM对象,只需要用$()
把DOM对象包装起来,就可以获得一个jQuery对象了。即$(DOM对象)
。
//<input type="text" name="username" id="username" value="张老师"/>
//获取DOM对象
var username=docunent.getElementById("username");
alert(username.value);
//转化为jquery对象
var $username=$(username);
alert("^^^"+$username.val());
转换后就可以使用jQuery 中的方法了。
两种转换方式将一个jQuery对象转换成DOM对象:[index]
和.get(index)
;
- jQuery对象是一个数组对象,可以通过
[index]
的方法,来得到相应的DOM对象;
//<input type="text" name="username" id="username" value="张老师"/>
//获取JQuery对象
var $username=$("#username")
alert($username.val));
//转化为DOM对象
var username=$username[0l;
alert(username.value);
- jQuery本身提供,通过
.get(index)
方法,得到相应的DOM对象;
//转化为DOM对象
var username1=username.get(0) ;
alert(username1.value) ;
5. jQuery的选择器
选择器是jQuery 的根基在jQuery 中, 对事件处理, 遍历DOM和Ajax操作都依赖于jQuery选择器的优点。
简洁的写法:
$(“#id”) 等价于document.getElementById("id");
$(“tagName”) 等价于document.getElementsByTagName("tagName");
5.1基本选择器
基本选择器是jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素id, class 和标签名来查找DOM元素。
#id
用法:$(”#myDiv”)
返回值 单个元素的组成的集合- 说明: 这个就是直接选择html中的
id=”myDiv”
- 说明: 这个就是直接选择html中的
Element
用法:$(”div”)
返回值 集合元素- 说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如
div, input, a
等等.
- 说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如
class
用法:$(”.myClass”)
返回值集合元素- 说明: 这个标签是直接选择html代码中
class=”myClass”
的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
- 说明: 这个标签是直接选择html代码中
*
用法:$(”*”)
返回值集合元素- 说明: 匹配所有元素,多用于结合上下文来搜索
selector1, selector2, selectorN
用法:$(”div,span,p.myClass”)
返回值集合元素- 说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中
p.myClass
是表示匹配元素p class=”myClass”
- 说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中
5.2 层次选择器
如果想通过DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
- ancestor descendant
- 用法:
$(”form input”)
; 返回值集合元素 - 说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的
”parent > child”
区分开.
- 用法:
- parent > child
- 用法:
$(”form > input”)
; 返回值集合元素 - 说明: 在给定的父元素下匹配所有子元素.
- 注意:要区分好后代元素与子元素
- 用法:
- prev+ next
- 用法:
$(”label + input”)
; 返回值集合元素 - 说明: 匹配所有紧接在prev元素后的next元素
- 用法:
- prev~ siblings
- 用法:
$(”form ~ input”)
; 返回值集合元素 - 说明: 匹配prev元素之后的所有siblings 元素.
- 注意: 是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
- 注意:
(“prev~ div”)
选择器只能选择“# prev”
元素后面的同辈元素; 而jQuery 中的方法siblings()
与前后位置无关, 只要是同辈节点就可以选取
- 用法:
5.3 过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM 元素, 该选择器都以:
开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.
5.4.1 基本过滤选择器
- :first
- 用法:
$(”tr:first”)
返回值单个元素的组成的集合 - 说明: 匹配找到的第一个元素
- 用法:
- :last
- 用法:
$(”tr:last”)
返回值集合元素 - 说明: 匹配找到的最后一个元素.与
:first
相对应.
- 用法:
- :not(selector)
- 用法:
$(”input:not(:checked)”)
返回值集合元素 - 说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的
type=”checkbox”
).
- 用法:
- :even
- 用法:
$(”tr:even”)
返回值集合元素 - 说明: 匹配所有索引值为偶数的元素,从0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
- 用法:
- :odd
- 用法:
$(”tr:odd”)
返回值集合元素 - 说明: 匹配所有索引值为奇数的元素,和
:even
对应,从0 开始计数.
- 用法:
- :eq(index)
- 用法:
$(”tr:eq(0)”)
返回值集合元素 - 说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
- 用法:
- :gt(index)
- 用法:
$(”tr:gt(0)”)
返回值集合元素 - 说明: 匹配所有大于给定索引值的元素.
- 用法:
- :lt(index)
- 用法:
$(”tr:lt(2)”)
返回值集合元素 - 说明: 匹配所有小于给定索引值的元素.
- 用法:
5.5 属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
- [attribute]
- 用法:
$(”div[id]“)
; 返回值集合元素 - 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
- 用法:
- [attribute=value]
- 用法:
$(”input[name='newsletter']“).attr(”checked”, true);
返回值集合元素 - 说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有name 属性是newsletter 的input 元素.
- 用法:
- [attribute!=value]
- 用法:
$(”input[name!='newsletter']“).attr(”checked”, true);
返回值集合元素 - 说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素.此选择器等价于
:not([attr=value])
,要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
.之前看到的:not
派上了用场.
- 用法:
- [attribute^=value]
- 用法:
$(”input[name^=‘news’]“)
返回值集合元素 - 说明: 匹配给定的属性是以某些值开始的元素.
- 用法:
- [attribute$=value]
- 用法:
$ (”input[name$=‘letter’]“)
返回值集合元素 - 说明: 匹配给定的属性是以某些值结尾的元素.
- 用法:
- [attribute
*
=value]- 用法:
$(”input[name*=‘man’]“)
返回值集合元素 - 说明: 匹配给定的属性是以包含某些值的元素.
- 用法:
- [attributeFilter1][attributeFilter2][attributeFilterN]
- 用法:
$ (”input[id][name$=‘man’]“)
返回值集合元素 - 说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有id 属性,并且它的name 属性是以man 结尾的元素.
- 用法:
9.练习
- 给网页中所有的
<p>
元素添加onclick事件 - 使一个特定的表格隔行变色
- 对多选框进行操作, 输出选中的多选框的个数
10.jQuery 中的DOM 操作
DOM(Document Object Model—文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件
- append(content) : 向每个匹配的元素的内部的结尾处追加内容
- appendTo(content) : 将每个匹配的元素追加到指定的元素中的内部结尾处
- prepend(content) : 向每个匹配的元素的内部的开始处插入内容
- prependTo(content) : 将每个匹配的元素插入到指定的元素内部的开始处
10.1.JQuery 中的DOM 操作应用
10.2.外部插入节点
- after(content) :在每个匹配的元素之后插入内容
- before(content):在每个匹配的元素之前插入内容
以上方法不但能将新创建的DOM 元素插入到文档中, 也能对原有的DOM 元素进行移动.
10.3.创建节点
- 创建节点: 使用jQuery 的工厂函数
$(): $(html)
; 会根据传入的html 标记字符串创建一个DOM 对象, 并把这个DOM 对象包装成一个jQuery对象返回. - 注意:
- 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
- 当创建单个元素时, 需注意闭合标签和使用标准的XHTML 格式. 例如创建一个
<p>
元素, 可以使用$(“<p/>”)
或$(“<p></p>”)
, 但不能使用$(“<p>”)
或$(“</P>”)
- 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建。
10.4.删除节点
- remove(): 从DOM 中删除所有匹配的元素, 传入的参数用于根据jQuery 表达式来筛选元素. 当某个节点用
remove()
方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用。 - empty(): 清空节点–清空元素中的所有后代节点(不包含属性节点)。
10.5.复制节点
- clone(): 克隆匹配的DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为。
- clone(true): 复制元素的同时也复制元素中的的事件。
<button>保存</button>
<p>段落</p>
$("button").click(function(){
alert("点击按钮");
});
//克隆节点,不克隆事件
$("button").clone().appendTo("p");
//克隆节点,克隆事件
$("button").clone(true).appendTo("p");
10.6.练习
11.属性操作
- attr(): 获取属性和设置属性
- 当为该方法传递一个参数时, 即为某元素的获取指定属性
- 当为该方法传递两个参数时, 即为某元素设置指定属性的值
- jQuery 中有很多方法都是一个函数实现获取和设置. 如:
attr(), html(), text(), val(), height(), width(), css() 等
.
- removeAttr(): 删除指定元素的指定属性
$(“div”).html(“<p>奥运接受了</p>");
$(“div”).html();
12.样式操作
- 获取class 和设置class : class 是元素的一个属性, 所以获取class 和设置class 都可以使用
attr()
方法来完成. - 追加样式:
addClass()
- 移除样式:
removeClass()
- 从匹配的元素中删除全部或指定的class
- 切换样式:
toggleClass()
- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
- 判断是否含有某个样式:
hasClass()
- 判断元素中是否含有某个class, 如果有, 则返回true; 否则返回false
13.设置获取HTML,文本和值
- 读取和设置某个元素中的HTML 内容:
html()
- 该方法可以用于XHTML, 但不能用于XML 文档
- 读取和设置某个元素中的文本内容:
text()
- 该方法既可以用于XHTML 也可以用于XML 文档.
- 读取和设置某个元素中的值:
val()
- 该方法类似JavaScript 中的value 属性.
- 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组。
14.常用的遍历节点方法
- 取得匹配元素的所有子元素组成的集合:
children()
- 该方法只考虑子元素而不考虑任何后代元素.
- 取得匹配元素后面紧邻的同辈元素的集合:
next()
- 取得匹配元素前面紧邻的同辈元素的集合:
prev()
- 取得匹配元素前后所有的同辈元素:
siblings()
<input type="button" value="查找所有子元素" id="b2"/>
<input type="button" value="获取后面的同辈元素" id="b3"/>
<input type="button" value="获取前面的同辈元素" id="b4"/>
11. 练习
15. 事件
提供可以绑定的事件有:
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。