JQuery学习(2)选择器(1)
通过标签名,属性名或内容对DOM元素进行选择,没有浏览器的兼容问题
选择器类型:
基本选择器
层次选择器
过滤选择器
表单选择器
基本选择器:JQuery中使用最频繁的选择器
使用JQuery:
$('#mydiv').css('background-color','red');
使用js:
document.getElementById('mydiv').style.backgroundColor = 'red';
按照JQuery的习惯,下面的代码应该改成第二种方式
element:根据给定的元素名称匹配所有元素,也就是<后边的元素名称
$(function () {
$('#but').click(function () {
//$('#a1').css('background-color', 'blue');
$('a').css('background-color','red');
})
})
根据类型匹配元素:若多个元素使用的类型相同,则选择多个元素
层次选择器
$('div span').css('display', 'block'):设置id为'divMid'的层里面的所有span元素可见,无论有几级嵌套
$('div>span').css('display', 'block'):设置id为'divMid'的层里面的第一级span元素可见,此span元素里面的span元素不可见
$('#divMid+div').css('display','block'):设置id为'divMid'的层后面的第一个div可见
$('#divMid+span').css('display', 'block'):设置id为'divMid'的层后面的第一个span可见
$('#divMid').next().css('display','block'):设置id为'divMid'的层后面的第一个元素可见,无论是什么元素
$('#divMid').nextAll().css('display', 'block'):设置id为'divMid'的层后面的所有元素可见,无论是什么元素,必须与divMid平级,平级元素里面的嵌套元素不可见
$('#divMid~div').css('display', 'block'):设置id为'divMid'的层后面的所有div元素可见,必须是平级的。
$('#divMid~span').css('display','block');:设置id为'divMid'的层后面的所有span元素可见,必须是平级的。
例:
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> //层次选择器 $(document).ready(function () { $('#Button1').click(function () { //$('#divfirst span img').hide(2000); //找到id为divfirst里的span元素下的img元素 //$('#divfirst img').hide(2000); //找到id为divfirst里所有的img元素 $('#divfirst>span img').hide(3000) //找到id为divfirst里第一级span元素里得img元素 注意! 这个第一级是指所有divfirst下一级span元素 //$('#divfirst+div img').hide(3000) //找到和id为divfirst的元素同级的第一个紧邻他的div元素 的img元素 //$('#divfirst~div img').hide(3000) //找到和id为divfirst的元素同级的所有div元素 的img元素 //$('#divfirst').next().hide(3000); //找到和id为divfirst的元素后面的同级的第一个元素 //$('#divfirst').nextAll().hide(3000); //找到和id为divfirst的元素后面的同级的所有元素 }) }) </script>
<body> <input id="Button1" type="button" value="button " /> <div id="divfirst"> <span>第一层<img src="风景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span> <span><img src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span> </div> <div> <img src="风景/d159717ab855f729066b333d439f630e.jpg" /> 第二层 </div> <div> <img src="风景/f6b31d9bca975794bd23fdf71295e1c4.jpg" /> 第三层 </div> <div> <img src="风景/f856bd37b432eb532098fa170dfbafd4.jpg" /> 第四层 </div> </body>
过滤选择器
根据某类过滤规则进行元素的匹配
例
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //$('img:eq(1)').hide(3000); //第几个 //$('img:gt(0)').hide(3000); //大于 //$('img:lt(2)').hide(3000); //小于 //$('img:even').hide(3000); //偶数下标 //$('img:odd').hide(3000); //奇数下标 //$('img:not(#img1)').hide(3000) //除了ID为img1 //$('img:not(.imgclass1)').hide(3000)//除了样式为imgclass1 })
<body> <img src="风景/29b56ef1ecac0a2e23fe73abb8457ed9.jpg" id="img1" class="imgclass1" /> <img src="风景/3615bd55e6db2d3eb2a45a8369653f12(1).jpg" class="imgclass" /> <img src="风景/3615bd55e6db2d3eb2a45a8369653f12.jpg" class="imgclass" /> <img src="风景/837adad119910d349f05149ad4a02ef0.jpg" class="imgclass" /> </body>