jQuery

jQuery

一、jQuery是什么

jQuery是美国人John Resig创建的轻量级js库，压缩后才21k，还兼容各种浏览器。它的宗旨是“写更少的代码，做更多的事情” 。借助它，我们能更轻松地处理HTML文档、操作事件、实现动画效果，还能方便地为网站添加AJAX交互功能。而且它文档超全，插件也多，用起来特别方便。

二、第一个jQuery例子

使用jQuery时，得先引入它的js库文件。引入后，用$(document).ready(function(){})这个函数，它和window.onload类似，能确保DOM元素加载完毕后再执行里面的代码。比如下面这段代码，页面加载完就会弹出“您好,我是张三丰”的提示框。

<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<script language="JavaScript">
    $(document).ready(function(){
        alert("您好,我是张三丰");
    });
</script>复制

三、jQuery对象

（一）什么是jQuery对象

jQuery对象是用jQuery包装DOM对象后生成的。只有jQuery对象才能用jQuery里的方法，而且jQuery对象不能用DOM对象的方法，DOM对象也不能用jQuery的方法，用错会报错。

（二）对象转换

1. DOM转jQuery：把DOM对象放在$()里就能转成jQuery对象，比如$(DOM对象)。假设页面有个id为username的输入框，获取DOM对象后就能这样转换：

<input type="text" name="username" id="username" value="张老师" />
<script>
    //获取DOM对象
    var username = document.getElementById("username");
    alert(username.value);
    //转化为jquery对象
    var $username = $(username);
    alert($username.val());
</script>复制

2. jQuery转DOM：有两种办法。一是像操作数组那样用[index]，二是用get(index)方法 。还是以获取id为username的输入框为例：

<input type="text" name="username" id="username" value="张老师" />
<script>
    //获取JQuery对象
    var $username = $("#username");
    alert($username.val());
    //转化为DOM对象
    var username = $username[0];
    alert(username.value);
    //或者用get方法
    var username1 = $username.get(0);
    alert(username1.value);
</script>复制

四、jQuery选择器

选择器是jQuery的核心，不管是处理事件、遍历DOM，还是进行Ajax操作都得靠它。它写法简洁，比原生JavaScript选择元素方便多了。

（一）基本选择器

1. 按id选：$("#id")，比如$("#myDiv")，能选中id为myDiv的元素，返回的是单个元素组成的集合。
2. 按标签名选：$(“tagName”)，像$(“div”)，会选中页面所有div标签元素，返回集合。
3. 按class选：$(“.myClass”)，能选中class为myClass的所有元素，也是返回集合。
4. 选所有元素：$(“*”)，能匹配页面上的所有元素，一般结合其他条件用。
5. 组合选择器：$(”selector1, selector2, selectorN”) ，像$(”div,span,p.myClass”)，会把每个选择器匹配到的元素合并后返回。

（二）层次选择器

1. 选后代元素：ancestor descendant，比如$(”form input”)，能选中form元素下的所有input后代元素。
2. 选子元素：parent > child，$(”form > input”)就只会选中form元素的直接子元素input 。
3. 选相邻元素：prev + next，$(”label + input”)会选中紧挨着label元素后面的input元素。
4. 选兄弟元素：prev ~ siblings，$(”form ~ input”)能选中form元素后面的所有同辈input元素。

（三）过滤选择器

这类选择器都以 : 开头，通过特定规则筛选元素，又细分好几种。

1. 基本过滤
   • :first：匹配找到的第一个元素，如$(”tr:first”)。
   • :last：匹配最后一个元素，和:first相反。
   • :not(selector)：去除和给定选择器匹配的元素，比如$(”input:not(:checked)”)能选中没被勾选的input复选框。
   • :even：匹配索引值为偶数的元素，从0开始计数，像表格里第一行tr的索引就是0，算偶数。
   • :odd：匹配奇数索引元素，和:even对应。
   • :eq(index)：匹配指定索引值的元素，$(”tr:eq(0)”)获取的是第一个tr元素。
   • :gt(index)：匹配大于指定索引值的元素。
   • :lt(index)：匹配小于指定索引值的元素。
2. 属性过滤
   • [attribute]：匹配包含指定属性的元素，$(”div[id]“)会选中所有有id属性的div元素。
   • [attribute=value]：匹配属性值等于特定值的元素，$(”input[name='newsletter']“)能选中name属性为newsletter的input元素。
   • [attribute!=value]：匹配属性不等于特定值的元素，和:not([attr=value])差不多。
   • [attribute^=value]：匹配属性值以指定值开头的元素。
   • [attribute$=value]：匹配属性值以指定值结尾的元素。
   • [attribute*=value]：匹配属性值包含指定值的元素。
   • [attributeFilter1][attributeFilter2][attributeFilterN]：复合属性选择器，同时满足多个属性条件，$(”input[id][name$=‘man’]“)会选中有id属性且name属性以man结尾的input元素。
3. 子元素过滤
   • :nth-child(index/even/odd/equation)：匹配父元素下的第N个子元素或奇偶元素，和eq()类似，但它从1开始计数。
   • :first-child：匹配每个父元素的第一个子元素。
   • :last-child：匹配每个父元素的最后一个子元素。
   • :only-child：匹配父元素里唯一的子元素。

五、jQuery中的DOM操作

DOM是文档对象模型，借助它能访问页面的标准组件。在jQuery里，DOM操作方法特别丰富。

1. 内部插入：append(content)在匹配元素内部结尾处追加内容；prepend(content)在内部开头插入内容；appendTo(content)和prependTo(content)则是把匹配元素追加或插入到指定元素内部。
2. 外部插入：after(content)在匹配元素之后插入内容；before(content)在之前插入，这些方法还能移动原有DOM元素。
3. 创建节点：用$()工厂函数创建，传入HTML标记字符串就行。不过新创建的元素不会自动添加到文档里，得用其他方法插入，而且创建单个元素时要注意标签格式。
4. 删除节点：remove()从DOM中删除匹配元素，会连带删除后代节点；empty()只清空元素的后代节点，属性节点还在。
5. 复制节点：clone()克隆DOM元素，但新节点没有行为；clone(true)连事件也一起复制。

六、属性、样式操作及遍历

1. 属性操作：attr()既能获取元素属性，也能设置属性值，传一个参数是获取，传两个是设置；removeAttr()用于删除指定属性。
2. 样式操作：获取和设置class可以用attr()，也有更方便的方法，比如addClass()追加样式，removeClass()移除样式，toggleClass()切换样式，hasClass()判断元素是否含有某个class 。
3. 遍历节点：children()获取匹配元素的所有子元素；next()获取后面紧邻的同辈元素；prev()获取前面紧邻的同辈元素；siblings()获取前后所有同辈元素。

七、事件

jQuery提供了好多能绑定的事件，像表单元素的blur（失去焦点）、focus（获得焦点） ，鼠标相关的click（点击）、mouseover（鼠标悬停） ，页面相关的load（页面加载完成）、resize（窗口大小改变）等等，用这些事件能实现各种交互效果。