一、初识jQuery：
1、使用方法：
去官网http://jquery.com/download/下载jQuery的包，然后放到项目中存放js代码的目录下，最后在需要用jQuery的HTML中用<script type="text/javascript" src="js目录/jquery.js"/>引入即可。
2、jQuery对象与DOM对象：
jQuery对象与DOM对象是不一样的，看下面例子：
需求：我们要获取页面上这个id为test的p元素，然后给这个文本节点增加一段文字：“hello world”，并且让文字颜色变成红色。
<p id="test"></p> <!-- 用原生JavaScript的做法--> var p = document.getElementById('test'); p.innerHTML = 'hello world'; p.style.color = 'red'; <!-- 通过jQuery操作--> var $p = $('#test'); $p.html('hello world').css('color','red');
用JavaScript操作是过取到DOM对象，再进行操作，而jQuery获取到的$p是jQuery对象。
jQuery对象与DOM对象的转换：
<div>元素一</div> <div>元素二</div> <div>元素三</div> var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 var div = $div.get(0) //通过get方法，转化成DOM对象 var div = document.getElementsByTagName('div'); //dom对象 var $div = $(div); //jQuery对象 var $first = $div.first(); //找到第一个div元素
二、jQuery选择器：
1、id选择器 $( "#id" )：
所谓id选择器，就是相当于JavaScript的getElementById()方法。语法：$( "#id" )，也就是说#号后面跟上要操作的标签的id的值即可。
2、类选择器 $( ".class" )：
就是通过标签的class属性来选择标签的选择器。语法：$( ".class" ),也就是 . 后面跟上标签的class的值即可。
3、元素选择器 $( "element" )：
也就是直接通过标签名选择标签，比如$("p").css("border", "3px solid blue");就是通过jQuery的元素选择器选择到所有的p标签，然后改变其样式。
4、全选择器 $( "*" )：
顾名思义，全选择器就是选择所有的标签。
5、层级选择器：
一个页面就是由各种标签构成的，各个标签之间存在着不同的关系，父子关系、兄弟关系等，层级选择器就可以处理这种关系。用法如下表：
| 选择器 | 描述 |
| $("parent > child") | 子选择器，选择所有指定“parent” 元素中指定的“child”直接子元素 |
| $("ancestor descendant") | 后代选择器，选择给定的祖先元素“ancestor” 的所有descendant后代，包括儿子、孙子、曾孙等 |
| $("prev + next") | 相邻兄弟选择器，选择紧 接在“prev”元素后的“next”元素 |
| $("prev ~ siblings") | 一般兄弟选择器，与相邻兄弟选择器的区别是 ，相邻的指挥选择相邻的，而这个是选所有。 |
6、基本筛选选择器：
筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，通过一个列表，看看基本筛选器的描述：
7、内容筛选选择器：
基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器。其描述如下：
8、可见性筛选选择器：
元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden
| 选择器 | 描述 |
| $(":visible") | 选择所有显示的元素 |
| $(":hidden") | 选择所有隐藏元素 |
9、属性筛选选择器：
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。
10、子元素筛选选择器：
这个不是很常用，用法如下：
11、表单元素选择器：
顾名思义，表单元素选择器就是方便操作表单的选择器。
12、表单对象属性筛选选择器：
除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选。
13、特殊选择器this:
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。直接看案例代码：
$('p').click(function(){ //把p元素转化成jQuery的对象 var $this= $(this) $this.css('color','red') })
三、jQuery的属性与样式：
1、.attr()与.removeAttr()：
操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题。直接看案例来体会其用法：
<form> <input type="text" value="设置value" /> <input type="text" value="获取value"/> <input type="text" value="回调拼接value" /> <input type="text" value="删除value" /> </form> <script type="text/javascript"> $("input:first").attr('value','测试')// 把“设置value”改成“测试” $("input:eq(1)").attr('value')// 获取第二个input的value属性的值 //把新的值与现有的值联系在一起： $("input:eq(2)").attr('value',function(i, val){// 拼接第三个input的value属性的值 return '通过function设置' + val }) $("input:eq(3)").removeAttr('value')// 删除第四个input的value属性的值 </script>
运行结果如下图：
2、.html()、.text()和.val()：
读取、修改元素的html结构或者元素的文本内容又或者操作表单字段value值是常见的DOM操作，jQuery针对这样的处理提供了3个便捷的方法.html()、.text()和.val()。
.html()的用法：操作元素的html结构
语法：$("element").html()、$("element").html(htmlString)、
$("element").html(function(index,html){...})
案例：
<div class="demo"> <p> <a href="#">baidu</a></p> </div> <script type="text/javascript"> //第一种用法(如果有多个p标签，那么只能获取第一个p标签的内容) alert($(".demo p").html());//会弹出 “ <a href="#">baidu</a> ” //第二种用法(如果有多个p标签，那么每一个p标签都会加上 .html方法里面的内容) ($(".demo p").html('<a href="#">taobao</a>')); // 结果会把html方法里面的a标签添加到p标签里面，p标签里面就有两个a标签了 //第三种用法 $(".demo p").html(function(index,oldHtml){ return "我是第" + (index+1) + "个p标签：" + oldHtml; }) //结果就是(假设已经执行了第二种用法中的演示代码)： /* <p>我是第1个p标签<a href="#">baidu</a></p> <p>我是第2个p标签<a href="#">taobao</a></p> */ </script>
.text()的用法：操作元素的纯文本内容
语法：$("element").text()、$("element").text(textString)、
$("element").text(function(index,text){...})
案例：
<div class="demo"> <p> <a href="#">baidu</a></p> </div> <script type="text/javascript"> //第一种用法(如果有多个p标签，那么其他p标签里的文本内容也能获取到) alert($(".demo p").text());//会弹出 “baidu ”，所以该方法只能获取纯文本内容 //第二种用法(如果有多个p标签，那么每一个p标签都会被替换成纯文本内容) ($(".demo p").text('<a href="#">taobao</a>')); // 结果会把class为demo的div下面的所有p标签替换成text方法里面的纯文本内容 //第三种用法 $(".demo p").text(function(index,oldText){ return "我是第" + (index+1) + "个p标签里面的文本：" + oldText; }) //结果就是： /* 我是第1个p标签里面的文本：baidu */ </script>
.val()的用法：操作表单字段value值
语法：$("element").val()、$("element").val(value)、$("element").val(function(index,value){...})
案例：
<div id="test"> <input type="radio" name="color" id ="rd1" value="red" />红色 <input type="radio" name="color" id ="rd2" value="blue" />蓝色 </div> <script type="text/javascript"> // 第一种用法(只会获取到第一个input的值，跟有没有选中没关系) alert($("#test input:radio").val());// 弹出“红色” //第二种用法(获取用户选中的值，而不是返回第一个) alert($("input:radio[name=color]:checked").val());// 弹出用户选中的颜色 // 第三种用法 $("input").val("blank");// 会把所有input的value值替换成blank //第四种用法(会依次获取input的value值) $("input:radio[name=color]").val(function(index,oldVal){ return "color-"+(index+1)+":"+oldVal; }) </script>
3、.addClass():
过动态改变类名（class），可以让其修改元素呈现出不同的效果。直接看案例：
<style> .firstClass{ background: #bbffaa; } .secondClass{ background: red; } </style> <div class="left"> <div class="aaron"> <p>测试1</p> </div> <div class="aaron"> <p>测试2</p> </div> </div> <script type="text/javascript"> $('.left div').addClass('firstClass') </script>
本来“测试1”和“测试2”都是没有颜色的，下面的js代码运行后，就会给这两个div添加“firstClass”，所以“测试1”和“测试2”背景就会变成红色。还有删除class的removeClass()方法和切换class的toggleClass()方法，用法类似。
4、.css()：
在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了。看案例：
<div class="first">获取颜色</div> <p></p> <script type="text/javascript"> $('p:eq(0)').text( $('.first').css("background-color","red") ) </script>
本来“获取颜色”这四个字是没有颜色的，运行了js代码后，就会有红色的背景颜色。添加样式还有.addClass()方法，它的优先级低于.css()方法。
5、元素的数据存储：
jQuery提供的存储接口:
jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 .data( key, value ) //实例接口,存数据 .data( key ) //实例接口,存数据
看到这些语法也是摸不着头脑，直接看案例体会其用法：
<h2>jQuery.data()静态方法</h2> <div class="left"> <div class="aaron"> <p>点击看结果</p> <p>jQuery.data</p> </div> <div><span></span></div> </div> <h2>.data()实例方法</h2> <div class="right"> <div class="aaron"> <p>点击看结果</p> <p>.data</p> </div> <div><span></span></div> </div> <script type="text/javascript"> $('.left').click(function() { var ele = $(this); //通过$.data方式设置数据 $.data(ele, "a", "data test") $.data(ele, "b", { name : "简书" }) //通过$.data方式取出数据 var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name ele.find('span').append(reset) }) </script> <script type="text/javascript"> $('.right').click(function() { var ele = $(this); //通过.data方式设置数据 ele.data("a", "data test") ele.data("b", { name: "简书" }) //通过.data方式取出数据 var reset = ele.data("a") + "</br>" + ele.data("b").name ele.find('span').append(reset) }) </script>
没点击“点击看结果”的时候是这样的：
点击了“点击看结果”后是这样的：
也就是说，data可以用来暂时存储数据，然后还可以取出来。
