一、查找元素
1、常用选择器


1.1 基本选择器

$("*")$("#id")$(".class")$("element")$(".class,p,div")

1.2层级选择器

$(".outerdiv")//所有的后代$(".outer>div")//所有的子代$(".outer+div")//匹配所有跟在.outer后面的div$(".outer~div")//.outer后面的所有div

1.3 基本筛选器

$("li:first")//所有li标签中第一个标签$("li:last")//所有li标签中最后一个标签$("li:even")//所有li标签中偶数标签$("li:odd")//所有li标签中奇数标签$("li:eq(2)")//所有li标签中，索引是2的那个标签$("li:gt(1)")//所有li标签中，索引大于1的标签

1.4 属性选择器

$('[id="div1"]')$('["alex="sb"]')$("input[type='text']")2、常用筛选器

2.1 过滤筛选器

$("li").eq(2)//和:eq是一样的$("li").first()//和:first是一样的$("li").last()//和:last是一样的$("ulli").hasclass("test")//检测li中的是否含有某个特定的类，有的话返回true

2.2 查找筛选器

$("div").children()//form中的子标签$("input").parent()//input标签的父标签$("form").next()//form标签下一个标签$("form").find(:text,:password)//form标签中找到:text,:password标签$("input").siblings()//input的同辈标签

二、操作元素
1、属性操作

$(":text").val()//text输入的内容$(".test").attr("name")//test类中name属性对应的值$(".test").attr("name","sb")//设置test类中name属性对应的值$(".test").attr("checked","checked")//设置test类中checked属性对应的值为checked$(":checkbox").removeAttr("checked")//删除checkbox标签中的checked属性$(".test").prop("checked",true)//设置checked为true$(".test").addClass("hide")//增加样式


2、CSS操作

(样式)css("{color:'red',backgroud:'blue'}")(位置)offset()position()scrollTop()scrollLeft()(尺寸)innerHeight()不包含边框，outerHeight()包含边框，两个都包含paddingheight()不包含边框


3、文档处理

内部插入$("#c1").append("<b>hello</b>")$("p").appendTo("div")prepend()prependTo()外部插入before()insertBefore()after()insertAfter()标签内容处理remove()empty()clone()


4、事件

$("p").click(function(){})$("p").bind("click",function(){})$("ul").delegate("li","click",function(){})　　//事件委托，延迟绑定事件的一种方式

三、jquery所有示例

加载框
模态对话框

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.hide{display:none!important;}.shade{position:fixed;top:0;bottom:0;left:0;right:0;/*background-color:black;*//*opacity:0.6;*/background-color:rgba(0,0,0,.6);z-index:1000;}.modal{height:200px;width:400px;background-color:white;position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-100px;z-index:1001;}</style></head><body><div><inputtype="button"value="点我"onclick="ShowModal();"/></div><divid="shade"class="shadehide"></div><divid="modal"class="modalhide"><ahref="javascript:void(0);"onclick="HideModal();">取消</a></div><script>functionShowModal(){vart1=document.getElementById("shade");vart2=document.getElementById("modal");t1.classList.remove("hide");t2.classList.remove("hide");}functionHideModal(){vart1=document.getElementById("shade");vart2=document.getElementById("modal");t1.classList.add("hide");t2.classList.add("hide");}</script></body></html>

返回顶部

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>返回顶部</title><style>.back{position:fixed;right:20px;bottom:20px;color:red;}.hide{display:none;}</style></head><bodyonscroll="BodyScroll();"><div></div><divid="back"class="backhide"onclick="BackTop();">返回顶部</div><script>functionBackTop(){document.body.scrollTop=0;}functionBodyScroll(){vars=document.body.scrollTop;vart=document.getElementById('back');if(s>=100){t.classList.remove('hide');}else{t.classList.add('hide')}}</script></body></html>

多选框

效果：全选，反选及取消

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><inputtype="button"value="全选"onclick="CheckAll()"><inputtype="button"value="取消"onclick="CancleAll()"><inputtype="button"value="反选"onclick="ReverseAll()"><tableborder="1"><thead><tr><td>序号</td><td>用户名</td><td>密码</td></tr></thead><tbodyid="tb"><tr><td><inputtype="checkbox"id="test1"/></td><td>1</td><td>11</td></tr><tr><td><inputtype="checkbox"id="test2"/></td><td>2</td><td>22</td></tr><tr><td><inputtype="checkbox"id="test3"/></td><td>3</td><td>33</td></tr></tbody></table><script>functionCheckAll(){vartb=document.getElementById('tb');vartrs=tb.children;for(vari=0;i<trs.length;i++){varcurrent_tr=trs[i];varck=current_tr.firstElementChild.firstElementChild;ck.setAttribute('checked','checked');//ck.checked=true;}}functionCancleAll(){vartb=document.getElementById('tb');vartrs=tb.children;for(vari=0;i<trs.length;i++){varcurrent_tr=trs[i];varck=current_tr.firstElementChild.firstElementChild;ck.removeAttribute('checked');//ck.checked=false;}}functionReverseAll(){vartb=document.getElementById('tb');vartrs=tb.children;for(vari=0;i<trs.length;i++){varcurrent_tr=trs[i];varck=current_tr.firstElementChild.firstElementChild;if(ck.checked){ck.checked=false;ck.removeAttribute('checked');}else{ck.checked=true;ck.setAttribute('checked','checked');}}}</script></body></html>

菜单

效果：点击对应的父菜单，显示二级子菜单

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>左侧菜单</title><style>.hide{display:none;}.menu{width:200px;height:600px;border:1pxsolid#dddddd;overflow:auto;}.menu.item.title{height:40px;line-height:40px;background-color:#2459a2;color:white;}</style></head><body><divclass="menu"><divclass="item"><divclass="title"onclick="ShowMenu(this);">菜单一</div><divclass="body"><p>内容一</p><p>内容一</p><p>内容一</p><p>内容一</p><p>内容一</p></div></div><divclass="item"><divclass="title"onclick="ShowMenu(this);">菜单二</div><divclass="bodyhide"><p>内容二</p><p>内容二</p><p>内容二</p><p>内容二</p><p>内容二</p><p>内容二</p></div></div><divclass="item"><divclass="title"onclick="ShowMenu(this);">菜单三</div><divclass="bodyhide"><p>内容三</p><p>内容三</p><p>内容三</p><p>内容三</p><p>内容三</p><p>内容三</p></div></div></div><scriptsrc="jquery-1.12.4.js"></script><script>functionShowMenu(ths){//console.log(ths);//Dom中的标签对象//$(ths)//DOM标签对象转换为jQuery对象//$(ths)[0]//jQuery对象转换为DoM对象那个$(ths).next().removeClass('hide');$(ths).parent().siblings().find('.body').addClass('hide');}</script></body></html>案例