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);

1. 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);

2. 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”
• Element 用法: $(”div”) 返回值 集合元素
  • 说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div, input, a 等等.
• class 用法: $(”.myClass”) 返回值集合元素
  • 说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
• * 用法: $(”*”) 返回值集合元素
  • 说明: 匹配所有元素,多用于结合上下文来搜索
• 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.练习

1. 给网页中所有的<p>元素添加onclick事件
2. 使一个特定的表格隔行变色
3. 对多选框进行操作, 输出选中的多选框的个数

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。