最近准备在用 jQuery做新页面,在这里做点笔记
jQuery的选择器符号
jquery使用 $ 来作为选择器的符号
比如 $("p") 对应JS里面 getElementsByTagName("p")
$("idname") 对应JS里面 getElementById("idname")
以及其他
jquery的基本选择器有以下几种
来写一个页面代码进行测试
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
比如当你已经用选择器选择了当前页面上的内容之后,你可以直接用css属性来进行修改操作,比如下面
$("#one").css("background","red");
这个就是提取id为"one"的对象,并把他的背景设置为红色
jQuery 层次选择器
$("body div").css("background","red");
$("body>div").css("background","green");
像上面2个代码,如果是body div的话,那就是把body里面所有的div全部设置成红色
但是如果是body > div的话,只是把body的下一级的子div设置成绿色,不影响孙子div,如图
如果代码是
$(".one+div").css("background","yellow");
那他寻找的是class为one的对象的下一个同级div对象,一定注意是同级的下一个!!
他改变的不是子元素,而是平级的下一个,效果如下。
如果你的代码是
$("#two ~ div").css("background","blue");
那他返回的是id为two之后,
所有平级的div
不过,其实prev + next 可以用 next()方法来替代使用
prev ~ siblings 可以用 nextAll()方法来替代使用
jQuery 过滤选择器
基本选择过滤器
选择过滤器就是在选择了element之后,用冒号来过滤,哪些是你需要的。
下面写些代码进行测试
$("div:first").css("background","blue");
$("div:last").css("background","yellow");
上面的代码是制定了第一个或者最后一个
如果你想指定中间的元素,也可以用eq,gt,lt来指定
$("div:eq(3)").css("background","blue");
$("div:gt(3)").css("background","yellow");
$("div:lt(3)").css("background","red");
他表示索引值为三的div变成蓝色,小于三的是红色,大于三的是黄色。
内容过滤选择器
$("div:contains(di)").css("background","blue"); //有文本di的内容背景设置为蓝色
$("div:empty").css("background","red"); //没有子元素的内容,背景设置为红色
$("div:has(div)").css("background","green"); //内部有子元素div的元素,背景设置为绿色
可见性过滤选择器
$("div:visible").css("background","blue");
这样的代码,就可以让非隐藏类的元素,div变成蓝色
属性过滤选择器
$("div[title]").css("background","yellow");
$("div[title=test]").css("background","green");
这样的代码,把含有title属性的div和title等于test的div,都进行了设置
子元素过滤器
测试代码如下
$("div.one :nth-child(2)").css("background","yellow");
$("div.one :first-child").css("background","green");
效果如下
$("div.one :first-child").css("background","purple");
$("div.one :last-child").css("background","pink");
注意,都是修改的子元素,而不是像基本过滤选择器那样修改的父级元素。