一、查找元素
1、常用选择器
1.1 基本选择器
$("*")$("#id")$(".class")$("element")$(".class,p,div")1.2层级选择器
$(".outerdiv")//所有的后代$(".outer>div")//所有的子代$(".outer+div")//匹配所有跟在.outer后面的div$(".outer~div")//.outer后面的所有div1.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 属性选择器
$(‘[]‘)$(‘["alex="sb"]‘)$("input[type=‘text‘]")2、常用筛选器2.1 过滤筛选器
$("li").eq(2)//和:eq是一样的$("li").first()//和:first是一样的$("li").last()//和:last是一样的$("ulli").hasclass("test")//检测li中的是否含有某个特定的类，有的话返回true2.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所有示例
加载框
模态对话框
650) this.width=650;" title="index.png" src="https://s4.51cto.com/oss/201710/27/4acc434a3600ae22804b586d547ac837.png" alt="4acc434a3600ae22804b586d547ac837.png" />
<!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;z-index:1001;}</style></head><body><divstyle="height:2000px;background-color:#DDDDDD;"><inputtype="button"value="点我"/></div><div></div><div><ahref="javascript:void(0);">取消</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();"><divstyle="height:2000px;background-color:#DDDDDD"></div><div>返回顶部</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>多选框
650) this.width=650;" title="index.png" src="https://s3.51cto.com/oss/201710/27/214a99bfd7c1213ba11fb71e6423dd00.png" alt="214a99bfd7c1213ba11fb71e6423dd00.png" />
效果：全选，反选及取消
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><inputtype="button"value="全选"><inputtype="button"value="取消"><inputtype="button"value="反选"><tableborder="1"><thead><tr><td>序号</td><td>用户名</td><td>密码</td></tr></thead><tbody><tr><td><inputtype="checkbox"/></td><td>1</td><td>11</td></tr><tr><td><inputtype="checkbox"/></td><td>2</td><td>22</td></tr><tr><td><inputtype="checkbox"/></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>菜单
650) this.width=650;" title="index.png" src="https://s2.51cto.com/oss/201710/27/874fae7a0ba1b00b436453334aaaa807.png-wh_500x0-wm_3-wmp_4-s_3950267457.png" alt="874fae7a0ba1b00b436453334aaaa807.png-wh_" />
效果：点击对应的父菜单，显示二级子菜单
<!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><div><div><div>菜单一</div><div><p>内容一</p><p>内容一</p><p>内容一</p><p>内容一</p><p>内容一</p></div></div><div><div>菜单二</div><div><p>内容二</p><p>内容二</p><p>内容二</p><p>内容二</p><p>内容二</p><p>内容二</p></div></div><div><div>菜单三</div><div><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>案例本文出自 “炫维” 博客，请务必保留此出处http://xuanwei.blog.51cto.com/11489734/1976620
前端JQuery基础
原文地址：http://xuanwei.blog.51cto.com/11489734/1976620