JQuery是什么:
是一套js方法包
JS框架 前端框架
Node.js 开发环境
ID选择器:
$("#a1")
class选择器:
$(".a1")
标签选择器:
$("div")
组合选择器 并列:用逗号隔开
$("#a1,#a2,#a3").click(function () { alert("aa"); });
组合选择器 后代:用空格隔开
$("#a1 div").click(function () { alert("aa"); });
过滤选择器 首个:
$(".a1:first").click(function () { alert("aa"); });
过滤选择器 末尾个:
$(".a1:last").click(function () { alert("aa"); });
等于:需要加上索引号
$(".a1:eq(1)").click(function () { alert("aa"); });
另一种方式:
$(".a1").eq(2).click(function () { alert("aa"); });
大于:大于相应索引号的都执行
$(".a1:gt(1)").click(function () { alert("aa"); });
小于:
$(".a1:lt(1)").click(function () { alert("aa"); });
排除:括号里需要加选择器
$(".a1:not(#a3)").click(function () { alert("aa"); });
奇数:索引为奇数或偶数
$(".a1:odd").click(function () { alert("aa"); });
偶数:
$(".a1:even").click(function () { alert("aa"); });
属性名过滤:
<div id="a2" class="a1" ss="a"></div> <div id="a3" class="a1"></div> <div id="a4" class="a1"></div> <script> $(".a1[ss]").click(function () { alert("aa"); }); </script>
属性名对应的值过滤:等于= 不等于!=
<div id="a2" class="a1" ss="a"></div> <div id="a3" class="a1" ss="b"></div> <script> $(".a1[ss=a]").click(function () { alert("aa"); }); </script>
内容过滤 包含文字:
<div id="a1" class="a1"> <div style="50%;height:50%;background-color:green;">444</div> </div> <div id="a2" class="a1" ss="a">1111</div> <div id="a3" class="a1" ss="b">222</div> <div id="a4" class="a1">333</div> <script> $(".a1:contains(4)").click(function () { alert("aa"); }); </script>
包含子元素:has后面跟选择器
<script> $(".a1:has(div)").click(function () { alert("aa"); }); </script>
<script> $(".a1:has(#aa)").click(function () { alert("aa"); }); </script>
jQuery事件: