基本选择器
<div class="outer"> ???<div class="inner"> ???????<p>p3</p> ???????<div>DIV</div> ???</div> ???<p>p2</p></div><p>p1</p><script>// ???让p2/p3变红 ???$(".outer p").css("color", "red")//让p2变红 ???$(".outer>p").css("color", "red")</script>基本筛选器
<ul class="box"> ???<li class="item">111</li> ???<li class="item">222</li> ???<li class="item">333</li> ???<li class="item">444</li> ???<li class="item">555</li> ???<li class="item">666</li></ul><script>// ????$(".box .item:eq(3)").css("color","red") ?//等于// ????$("ul li").eq(x).css("color","red"); ?????// 推荐写法// ????$(".box .item:lt(4)").css("color","red") ?//小于// ????$(".box .item:gt(3)").css("color","red") ?//大于// ????$(".box .item:odd").css("color","red") ???//奇数 ??????$(".box .item:even").css("color","red") ??//even 偶数，指的是索引为偶数</script>
// ????$("li").first()?//取第一个
属性选择器
<div egon="aaa">egon</div><div egon="aaa" class="c1">egon2</div><script>// ???$("[egon]").css("color","red") //or $("[egon=‘aaa‘]").css("color","red") ???$("[egon=‘aaa‘][class]").css("color","red") ?//只有egon2会红</script><input type="text"><script> ???$("[type=‘text‘]").css("border","1px solid red"); ???$(":text").css("border","1px solid green"); //仅仅是input中type的简写</script>查找筛选器（参考苑昊的博客）
子标签： ???????? $("div").children(".test") ?找所有子代 ???$("div").find(".test") ?找所有后代 ??????????????????????????????向下查找兄弟标签： ???$(".test").next() ?下一个标签 ??????????????$(".test").nextAll() ????下面所有的兄弟标签
??????????????????$(".test").nextUntil() 指定开区间的标签 ??????????????????????????向上查找兄弟标签： ???$("div").prev() ?????????????????$("div").prevAll() ??????
??????????????????$("div").prevUntil() ??查找所有兄弟标签： ???$("div").siblings() ?所有的兄弟标签
?????????????查找父标签： ????????$(".test").parent() ?????????????$(".test").parents() ????
???????????????????$(".test").parentUntil() 导航筛选器
jquery支持链式操作<p class="item" id="d1">p3</p><p class="item">p3</p><p class="item">p3</p><script src="jquery-3.2.1.js"></script><script> ????$("#d1").next().css("color","red").next().css("color","green");</script>查找筛选器：
nextUntil 取开区间
<p class="item" id="d1">p3</p><p class="item">p3</p><p class="item">p3</p><p class="item" id="d4">p3</p><script> ????$("#d1").nextUntil("#d4").css("color","red");</script>
父标签
<div class="c1"> ???<div class="c3"> ???????DIV ???????<div class="c4"> ???????????<p class="p1">P1</p> ???????</div> ???</div> ???<p>P2</p></div> ???console.log($(".p1").parent().parent().attr("class")) ???????attr获取属性的值 ???console.log($(".p1").parents().attr("class")) ???????????????parents所有父标签 ???$(".p1").parents().css("color","red ??????? 整个网页都变红，并不是因为继承，而是对直接对标签进行处理 ???$(".p1").parentsUntil(".c1").css("border","1px solid red") $(".c1").children("p").css("border","1px solid red"); ?子标签 $(".c1").find("p").css("border","1px solid red") ??后代标签事件委派：
<ul id="box"> ???<li class="item">111</li> ???<li class="item">111</li> ???<li class="ite,m46">111</li></ul><script> $(".item").click(function () { ????????alert(123) ????});</script>事件委派
为什么用用事件委派：
???<ul id="box"> ???<li class="item">111</li> ???</ul> ???<button class="add">ADD</button> ???$(".item").click(function () { ???????alert(123) ???}); ???????$("button").click(function () { ???????$("#box").append("<div class=‘item‘>444</div>") ???});
给父标签绑定事件， // 在选择元素上绑定一个或多个事件的事件处理函数。
$("#box").on(‘click‘,‘.item‘,function () { //$("父标签").on(事件,[触发事件的标签（子标签）],函数() {} ???alert(123)});jquery基础
原文地址：http://www.cnblogs.com/linuxws/p/7518826.html