一、元素查找
1、选择器
id=d------------------------------------------>$("#d")
class=c1------------------------------------->$(".c1")
<div></div>-------------------------------->$("div")
<div><p></p></div>--------------------->$("div p") div下的p标签
<div></div><p></p>--------------------->$("div,p") div标签和p标签
<div class="c1"></div>-------------------->$("div[class='c1']")
2、筛选器
1> parent([expr])寻找其父级元素
2> children([expr]) 寻找子集元素
3> next([expr]) 寻找当前元素的下一个兄弟元素
4> prev([expr])寻找当前元素的上一个兄弟元素
5> siblings([expr])寻找除他以外的所有兄弟元素集合
6> find(expr|obj|ele)寻找当前标签的后代标签（子子孙孙）
7> hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true
二、操作
1、属性
1> attr(name|properties|key,value|fn) 用于获取或者修改属性值
2> removeAttr(name) 用于删除某一种属性
3> prop(name|properties|key,value|fn)
4> removeProp(name)
2、Css
1> addClass(class|fn) 为class类添加某一种属性
2> removeClass([class|fn]) 为class类删除某一种属性
3、HTML代码/文本/值
1> html([val|fn]) 取得匹配元素的html内容(文本内容+标签)
2> text([val|fn]) 取得匹配元素的文本内容
4、文档处理
1> append(content|fn) 向每个匹配的元素内部后面追加内容
2> prepend(content) 向每个匹配的元素内部前面追加内容
5、 删除
1> empty()表示只清空匹配标签中间的HTML
2> remove([expr]) 表示把匹配到的标签整体移除
6、复制
clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本
三、循环的俩种方式
each(callback)
1> $("匹配一个可迭代的元素集合").each（function(){}）
2> $.each("可迭代的元素集合"，function(){})
<script>
$.each(["a","b","c"],function (x,y) { //其中的x为获取的索引位置，y为按索引获取的对应元素
console.log(x,y)
})
$(["a","b","c"]).each(function (x,y) {
console.log(x,y)
})
</script>
四、常用几种方法
1> size() jQuery 对象中元素的个数 当前匹配的元素个数。与length将返回相同的值。
2> length jQuery 对象中元素的个数
3> each(callback) 循环
五、实例
1、复制标签（克隆）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.9.1.min.js"></script> </head> <body> <div class="outer"> <div class="section"> <div class="icons" style="display: inline-block"> <a onclick="add(this)"><button>+</button></a> </div> <div class="inputs" style="display: inline-block"> <input type="checkbox"> <input type="text" value="IP"> </div> </div> </div> <script> function add(self) { var item = $(self).parent().parent().clone(); //通过你现在点击的标签找上上级标签进行克隆，不能直接通过class="section"，因为你克隆的标签里面也有这个属性 $(".outer").append(item); item.find("a").children().text("-"); item.find("a").attr("onclick","remove1(this)"); //这里的函数名不能用关键字 } function remove1(self) { var item = $(self).parent().parent().remove(); } </script> </body> </html>
2、放大镜
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.9.1.min.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 350px; height: 350px; border: 5px dashed gold; } .box .small_box { position: relative; } .box .small_box .float{ width: 175px; height: 175px; background: rgba(0,0,0,.2); position: absolute; display: none; } .box .big_box{ position: absolute; left: 370px; top: 0; width: 350px; height: 350px; overflow: hidden; border: 5px dashed gold; display: none; } .box .big_box img{ position: absolute; } </style> </head> <body> <div class="box"> <div class="small_box"> <div class="float"></div> <img src="small.jpg" alt="小图"> </div> <div class="big_box"> <img src="big.jpg" alt=""> </div> </div> <script> $(".box").mouseover(function () { //鼠标放上去隐藏的显现 $(this).find(".float").css("display","block"); // 通过修改display为block后显现 $(this).find(".big_box").css("display","block"); }) $(".box").mouseout(function () { //鼠标离开后再隐藏 $(this).find(".float").css("display","none"); $(this).find(".big_box").css("display","none"); }) $(".small_box").mousemove(function (e) { var _event = e || windows.event //这个是用来区别ie 和其他浏览器的一个判断 var small_box_height = $(".small_box").height(); var small_box_width = $(".small_box").width(); var float_height = $(".float").height(); var float_width = $(".float").width(); var float_height_half = $(".float").height()/2; var float_width_half = $(".float").width()/2; var mouse_left = e.clientX - float_width_half; var mouse_top = e.clientY - float_height_half; if(mouse_left<0){mouse_left=0} // 当鼠标x坐标等于飘移盒子宽度的一般，固定盒子的x坐标一直等于盒子宽的一半 else if(mouse_left>small_box_width - float_width){mouse_left=small_box_width - float_width} if(mouse_top<0){mouse_top=0} else if(mouse_top>small_box_height - float_height){mouse_top=small_box_height - float_height} $(".float").css("left",mouse_left + "px"); $(".float").css("top",mouse_top + "px"); var move_x = ($(".big_box img").width()- $(".big_box").width())/($(".small_box").width()- $(".float").width()) //这个比例是通过各自视口可移动的像素比例得到的，（大图的宽-大图可视窗口宽）/(原图的宽-原图可视窗口的宽度) var move_y = ($(".big_box img").height()- $(".big_box").height())/($(".small_box").height()- $(".float").height()) $(".big_box img").css("left",-move_x*mouse_left + "px"); $(".big_box img").css("top",-move_y*mouse_top + "px"); }) </script> </body> </html>