jquery是一个JavaScript库（js框架），jQuery可以理解JavaScript query，该框架提供了，很多方法，让我们可以非常轻松地写出动态效果的页面，从本质将，jQuery就是对JavaScript进行封装，然后让我们使用更加便利。
特别说明：目前javascript很多，常见的有jquery,prototype,ext.js dwr.
什么是jQuery对象？
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：$("#test").html();
jquery选择器
选择器是jQuery的根基，在jQuery中，对事件处理，遍历DOM和Ajax操作都依赖于选择器。
jQuery选择器的优点：
- 简洁的写法
- 完善的事件处理机制
快速入门案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type='text/javascript' src='jquery.js'></script>
</head>
<body>
<p>abc</p>
<p>okokok</p>
<p>yyyy</p>
<script type="text/javascript">
//alert($);
window.alert("abc="+$("p").length);
</script>
</body>
</html>
编写jquery需要引入jquery.js文件。jquery-3.3.1.min.js文件是从官网上下载的。该文件有200多k的大小。下载网址：http://jquery.com/download/。
①基本选择器
②层次选择器
什么时候使用什么选择器（根据需求）
当选择元素时，有层次关系时就要考虑使用层次选择器。如果没有层次关系，则直接考虑使用层次选择器即可。
③过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，该选择器都以":"开头。
这样理解
数据库：select * from 表名 where 条件（字段）
jquery: select * from html文件 where 过滤选择器（基本，内容，style display,属性，子元素...）
基础过滤选择器
回调函数（mfc）
表示由系统帮你去调用的函数。
function mymove(){ $("#mover").slideToggle("fast",mymove); }
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type='text/javascript' src='jquery.js'></script> <style type="text/css"> #one{ width:45px; background:#D876F4; margin:20px; } #two,#three,#mover{ background:#9C9AC9; width:150px; margin-top:-85px; position:absolute; float:left; } #two{ margin-left:100px; } #two1,#two2,#three01{ width:100px; height:100px; margin:10px; } #two,#two1,#two2,#three,#three01,#mover{ border:1px solid black; } #three{ margin-left:275px; } #mover{ margin-left:450px; } </style> </head> <body> <h1>XXXXX</h1> <h2>XXXXXXXXXXXXXX</h2> <h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3> <input type="button" value="改变第一个div元素的背景色为" id="b1"/> <input type="button" value="改变最后一个div元素的背景色为 #0000FF" id="b2"/> <input type="button" value="改变class不为one的所有div元素的背景色为#0000FF" id="b3"/> <input type="button" value="改变索引值为偶数的所有div元素的背景色为#0000FF" id="b4"/> <input type="button" value="改变索引值为奇数的所有div元素的背景色为#0000FF" id="b5"/> <input type="button" value="改变索引值为大于3的所有div元素的背景色为#0000FF" id="b6"/> <input type="button" value="改变索引值为等于3的所有div元素的背景色为#0000FF" id="b7"/> <input type="button" value="改变索引值为小于3的所有div元素的背景色为#0000FF" id="b8"/> <input type="button" value="改变所有的标题元素背景色为#0000FF" id="b9"/> <input type="button" value="改变当前正在执行动画的所有元素的背景色为#0000FF" id="b10"/> <div id="one" class="mini"> div id为one </div> <div id="two"> div id为two <div id="two1"> id twoo1 </div> <div id="two2"> id twoo2 </div> </div> <div id="three" class="one"> div id为three class one <div id="three01"> id three01 </div> </div> <div id="mover"> 执行动画 </div> <span id="s_one" class="mini"> span one </span> <script type="text/javascript" language="javascript"> //如何做出动画效果，jquery提供一些特效 //************************************** mymove(); function mymove(){ $("#mover").slideToggle("fast",mymove); } //********************************** //改变第一个div元素的背景色为#0000FF $("#b1").click(function (){ $("div:first").css("background","#0000FF") }); //********************************** //改变最后一个div元素的背景色为#0000FF $("#b2").click(function (){ $("div:last").css("background","#0000FF") }); //********************************** //改变class不为one的所有div元素的背景色为#0000FF $("#b3").click(function(){ $("div:not(.one)").css("background","#0000FF") }); //********************************** //改变索引值为偶数的所有div元素的背景色为#0000FF $("#b4").click(function(){ $("div:even").css("background","#0000FF") }); //********************************** //改变索引值为偶数的所有div元素的背景色为#0000FF $("#b5").click(function(){ $("div:odd").css("background","#0000FF") }); //************************************** //改变索引值为大于3的所有div元素的背景色为#0000FF $("#b6").click(function(){ $("div:gt(3)").css("background","#0000FF") }); //************************************* //改变索引值为等于3的所有div元素的背景色为#0000FF $("#b7").click(function(){ $("div:eq(3)").css("background","#0000FF") }); //************************************* //改变索引值为小于3的所有div元素的背景色为#0000FF $("#b8").click(function(){ $("div:lt(3)").css("background","#0000FF") }); //************************************* //改变所有的标题元素背景色为#0000FF $("#b9").click(function(){ $(":header").css("background","#0000FF") //$("div").css("background","#0000FF") }); //************************************* //改变当前正在执行动画的所有元素的背景色为#0000FF $("#b10").click(function(){ $(":animated").css("background","#0000FF") }); </script> </body> </html>
内容选择器的过滤规则主要体现在它所包含的子元素和文本内容上。
在eclipse中引入jquery.js文件报错的解决方案
从官方下载的jquery.js在myeclipse始终用个大大的红叉，看着很不爽，如何解决呢：jquery.js在myeclipse中报错:jquery.js -> 鼠标右键 -> MyEclipse -> manage validation -> 左面点击 -> Excluded resources -> 找到jquery.js -> 打上钩 -> apply。
css(name,value)
一个参数是获取样式，两个参数是设置样式。
//改变含有文本"id"的div元素的背景元素。 $("#b1").click(function(){ $("div:contains('id')").css("background","#0000FF"); });
下面代码无效，不知其原因。
//改变含有class为mini元素的div元素的背景色为#OOOOFF $("#b3").click(function(){ $("div:has(.mini)").css("background","#0000FF"); });
详细代码如下所示：
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type='text/javascript' src='js/jquery.js'></script> <style type="text/css"> #one{ width:45px; background:#D876F4; margin:20px; } #two,#three,#mover{ background:#9C9AC9; width:150px; margin-top:-85px; position:absolute; float:left; } #two{ margin-left:100px; } #two1,#two2,#three01{ width:100px; height:100px; margin:10px; } #two,#two1,#two2,#three,#three01,#mover{ border:1px solid black; } #three{ margin-left:275px; } #mover{ margin-left:450px; } </style> </head> <body> <h1>XXXXX</h1> <h2>XXXXXXXXXXXXXX</h2> <h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3> <input type="button" value="改变含有文本'i'的div元素的背景元素" id="b1"/> <input type="button" value="改变不包含子元素的div背景色为#0000FF" id="b2"/> <input type="button" value="改变含有class为mini元素的div元素的背景色为#OOOOFF" id="b3"/> <input type="button" value="改变含有子元素（或者文本元素）的div元素的背景色为#0000FF" id="b4"/> <div id="one" class="mini"> div id为one </div> <div id="two"> div id为two <div id="two1"> id twoo1 </div> <div id="two2"> id twoo2 </div> </div> <div id="three" class="one"> div id为three class one <div id="three01"> id three01 </div> </div> <div class="one"> d </div> <div id="mover"> 执行动画 </div> <span id="s_one" class="mini"> span one </span> <script type="text/javascript"> //******************** //改变含有文本"id"的div元素的背景元素为#0000FF $("#b1").click(function(){ $("div:contains('two')").css("background","#0000FF"); }); //******************** //改变不包含子元素（或文本元素）的div背景色为#0000FF $("#b2").click(function(){ $("div:not(:contains('di'))").css("background","#0000FF"); }); //改变含有class为mini元素的div元素的背景色为#OOOOFF $("#b3").click(function(){ $("div:has(.mini)").css("background","#0000FF"); }); //改变含有子元素（或者文本元素）的div元素的背景色为#0000FF $("#b4").click(function(){ $("div:parent").css("background","#0000FF"); }); </script> </body> </html>
可见过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden
2、:visible
//改变含所有可见的div元素的背景元素为#0000FF $("#b1").click(function(){ $("div:visible").css("background","#0000FF"); }); //******************** //选取所有不可见的元素，利用jquery中的show()方法将它们显示出来 $("#b2").click(function(){ //$("div:not(:contains('di'))").css("background","#0000FF"); $("div:hidden").css("display","inline").css("background","red"); });
效果相似的两条语句
//$("div:hidden").css("display","inline").css("background","red"); $("div:hidden").show().css("background","red");
each是jquery的一个工厂函数（可以理解成全局函数）