用户投稿jQuery 基本的Selector介绍
jQuery强大之处在于selector的应用，可以随着属性去控制网页上面的元素(elements)
其Selector可以是元素的id, name, class, 甚至使用filter加以处理
以下就基本的selector使用，透过範例做说明
画面中某Id物件
假设某物件的id为div1
$(‘#div1’)
假设有好多个id都是div1
依照w3规定 : 不可以重複的id
可以透过自定属性的方式来解决。
範例：
<div id="div2">我是第1个div2</div><div id="div2" subid="1">我是第2个div2</div><div id="div2">我是第3个div2</div><div id="div2">我是第4个div2</div><div id="div2">我是第5个div2</div></BODY>选取某一种类的element
选取某种tag的element(全部)
例如：选取所有div物件
$(‘div’)
符合特定类别
$(‘.d1’)
所有物件(少用)
$(“*”)
範例：
<HTML><HEAD><Script Type="text/javascript" src="js/jQuery.js"></Script><Script Type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$('div').removeClass();$('div').addClass('d2');});$('#btn2').click(function(){$('.d2').html('我的class=d2');});$('#btn3').click(function(){$('p').addClass('d3');});$('#btn4').click(function(){$('*').removeClass();$('*').addClass('d4');});})</Script><Style type="text/css">.d1{background-color:red;color:green;}.d2{background-color:orange;color:blue;}.d3{background-color:yellow;color:blue;}.d4{background-color:green;color:red;}</Style></HEAD><BODY><input type="Button" id="btn1" name="btn1" value="全部div改变"><br><input type="Button" id="btn2" name="btn2" value="改变class=d2的"><br><input type="Button" id="btn3" name="btn3" value="改变p的"><br><input type="Button" id="btn4" name="btn4" value="改变所有的*"><br><hr /><div id="div1" class="d1">我是div1</div><div id="div2" class="d2">我是div2</div><div id="div3" class="d3">我是div3</div><div id="div4" class="d4">我是div4</div><p>我是p</p></BODY></HTML>Div1中的p
$(‘#div1 p’)
Div1后的第一个p
$(‘#div1 + p’)
Div1后所有的p
$(‘#div1 ~ p’)
範例：
<HTML><HEAD><Script Type="text/javascript" src="js/jQuery.js"></Script><Script Type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$('#div1 p').addClass('d1');});$('#btn2').click(function(){$('#div *').removeClass();$('#div1').addClass('d2');});$('#btn3').click(function(){$('#div1 + p').addClass('d2');});$('#btn4').click(function(){$('#div1 ~ p').addClass('d2');});})</Script><Style type="text/css">.d1{background-color:orange;color:blue;}.d2{background-color:blue;color:yellow;}</Style></HEAD><BODY><input type="Button" id="btn1" name="btn1" value="改变div1中的p"><br /><input type="Button" id="btn2" name="btn2" value="改变整个div1"><br /><input type="Button" id="btn3" name="btn3" value="改变div1后第1个p(div1 + p)"><br /><input type="Button" id="btn4" name="btn4" value="改变div1后所有p(div1 ~ p)"><hr /><div id="div1">这是div1里面的内容<p>这是P里面的内容</p></div><p>div1后第1个P</p><p>div1后第2个P</p><p>div1后第3个P</p></BODY></HTML>
微信扫一扫打赏
支付宝扫一扫打赏
