jQuery是一个兼容多浏览器的JavaScript库，提供一些可直接调用的方法，这些方法就是对JavaScript进行了封装。

这些方法主要分为两大类：查找和操作

介绍几个目前了解的（文章中的元素和标签是一个意思）：

查找：

1、选择器：用来查找页面元素

2、筛选：用来对查找到的元素进行过滤或进行关系查找（找亲戚）

操作：

3、属性：获取或添加元素的属性

4、CSS：修改元素的样式和属性


具体使用方式用例子来说明：

1、选择器

例子说明：由于此例只是为了说明各种查找方法的使用，所以看代码即可，没有运行的必要。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><divid="d1"><span>span_test</span><p>p_test</p><pclass="c1">p_class_test</p><inputname="i1"type="checkbox"/><inputtype="text"/><ul><li>listitem1</li><li>listitem2</li><li>listitem3</li></ul></div><scriptsrc="/jquery-2.2.0.js"type="text/javascript"></script>//加载jQuery文件<scripttype="text/javascript">//console.log()方法的作用是把传入的值在浏览器的console控制台中打印出来console.log($('#d1'));//查找id为d1的元素console.log($('span'));//查找元素名称是span的元素console.log($('.c1'));//查找class=c1（应用了c1类）的元素console.log($('div,span,p.c1'));//查找元素名称是div、sapn和应用了c1类的p标签console.log($('divinput'));//查找div下的input元素console.log($('li:first'));//查找所有li元素并只取第一个console.log($('p:contains("test")'));//查找所有包含文本test的p元素console.log($('input[name="i1"]'));//查找所有input元素中name=i1的元素console.log($('input:text'));//查找所有input元素中类型是text的元素console.log($('input:checked'));//查找所有input元素中属性是checked的元素</script></body></html>

2、筛选

例子说明：此例需要一边运行看结果，一边结合代码来看。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表格修改</title><style>.modal{position:fixed;left:50%;top:50%;width:400px;height:300px;background-color:#dddddd;margin-left:-200px;margin-top:-150px;}.hidden{display:none;}</style></head><body><divid="dialog"class="modalhidden"><!--模态对话框，默认是隐藏的--><div><formaction=""method="get"><p>HOST：<inputtype="text"id="hostname"></p><p>IP：<inputtype="text"id="ip"></p><p>PORT：<inputtype="text"id="port"></p><inputtype="submit"onclick="returnGetValue();"value="提交"><inputtype="button"onclick="Cancel();"value="取消"></form></div></div><div><tableborder="1"><thead><tr><th>主机名</th><th>IP</th><th>端口</th></tr></thead><tr><td>www</td><td>1.1.1.1</td><td>80</td><td><inputtype="button"onclick="get_prev(this);"value="编辑"></td></tr><tr><td>bbs</td><td>2.2.2.2</td><td>80</td><td><inputtype="button"onclick="get_prev(this);"value="编辑"></td></tr></table></div><scripttype="text/javascript"src="/jquery-2.2.0.js"></script><scripttype="text/javascript">functionget_prev(arg){varlist=[];//定义一个空数组varc=$(arg).parent().siblings();//找到当前标签的父标签的所有兄弟标签（找叔叔），得到一个数组c$.each(c,function(i){//循环得到的数组c,对每个值都执行以下函数代码块varitem=$(arg).parent().siblings()[i];//取出数组c中的每个元素vartext=$(item).text();//得到元素的文本内容list.push(text);//把得到的值写入数组中});varnewlist=list.reverse();//反转数组得到一个新数组//把数组中的值依次赋予模态对话框中$('#hostname').val(newlist[0]);$('#ip').val(newlist[1]);$('#port').val(newlist[2]);//去除模态对话框的隐藏样式（这是属性类别中方法）$('#dialog').removeClass('hidden');}functionCancel(){//找到模态对话框并增加新样式，实现隐藏（这是属性类别中方法）$('#dialog').addClass('hidden');}functionGetValue(){varret=true;//定义一个函数返回值vart=$('#dialog').find(':text');//找到id为dialog标签下面的所有input类型为text的元素$(t).each(function(){//循环找到的数组（列表）varvalue=$(this).val();//获取循环到的元素的值（注意是值，不是文本内容）if(value.trim().length==0){//去除获取到值的空格后判断是否为空$(this).css('border-color','red');//若为空，则改变Input的样式ret=false;}});returnret;//函数返回值,如果是false，则不允许提交}</script></body></html>

3、属性

例子说明：用经典的全选按钮来说明用法。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>全选按钮</title></head><body><div><inputtype="button"onclick="Select();"value="全选"><inputtype="button"onclick="Reverse();"value="反选"><inputtype="button"onclick="Cancel();"value="不选"><tableborder="1"id="tb1"><thead></thead><tbody><tr><td><inputtype="checkbox"><b>1</b></td></tr><tr><td><inputtype="checkbox"><b>2</b></td></tr><tr><td><inputtype="checkbox"><b>3</b></td></tr></tbody></table></div><scripttype="text/javascript"src="/jquery-2.2.0.js"></script><scripttype="text/javascript">functionSelect(){//$('#tb1')找到id为tb1的元素//.find(':checkbox')该元素下所有类型为checkbox的input元素//.prop('checked',true)并添加属性checked=true$('#tb1').find(':checkbox').prop('checked',true);}functionReverse(){//反选函数的作用是：选中的变成不选中，不选中的变成选中$('#tb1').find(':checkbox').each(function(){//找到id为tb1标签下所有的类型为checkbox的元素进行循环varcontent=$(this).next();//查找被循环元素的下一个元素console.log($(content).text());//获取该元素的文本内容if($(this).prop('checked')){//判断是否已经选中：this代表的就是正在被循环的元素，获取其checked属性的值$(this).prop('checked',false);//为该元素添加属性$(content).text('选中的变成不选中');//修改该元素的文本内容}else{$(this).prop('checked',true);$(content).text('不选中的变成选中');}})}functionCancel(){$('#tb1').find(':checkbox').prop('checked',false);//添加属性checked=false，也就是不选中}</script></body></html>

4、CSS

例子说明：使用大多数网站都有用到的“回到顶部”按钮来举例。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><h2>这是顶部</h2><inputtype="button"onclick="GoBottom();"value="返回底部"/><divid="d1"></div><h2>这是底部</h2><inputtype="button"onclick="GoTop();"value="返回顶部"/><scriptsrc="/jquery-2.2.0.js"type="text/javascript"></script><scripttype="text/javascript">/*scrollTop用法：读取：$("选择器").scrollTop()//获取当前滚动条距离选择器顶部距离设置：$("选择器").scrollTop(1000)//设置滚动条距离选择器顶部距离为1000px；其他知识点：$(window).height();//获取当前浏览器可视部分的高度，也就是说在浏览器窗口改变大小时，这个值也会改变;$(document).height();//获取整个页面的高度(包含不可视部分)，这个值是固定的，不会随浏览器窗口大小而改变;*/functionGoTop(){$(document).scrollTop(0);//设置滚动条距离当前页面顶部的距离为0，也就达到返回顶部的效果varbcolor=$('#d1').css('background-color');//获取id为d1的元素的background-color样式属性的值console.log(bcolor);$('#d1').css('background-color','blue');//设定id为d1的元素的background-color样式属性的值为green}functionGoBottom(){vardpx=$(document).height();//获取当前页面的高度varwpx=$(window).height();//获取当前浏览器窗口的高度console.log(dpx);console.log(wpx);$(window).scrollTop(dpx);//设置滚动条距离当前页面顶部的距离为当前页面的高度，也就达到返回底部的效果$('#d1').css('background-color','green');}</script></body></html>