JQuery第二章选择器

科技2022-07-11 98

选择器

1：基础选择器

id # class . 标签 div * 通配符群组 #box,p css() 一个值的时候是找这个元素的值，两个值的时候是设置样式举例找元素的值： alert($('p').css('color')) 举例设置元素的样式： $('#txt').css('color','red'); size() 返回的元素个数举例： alert($('p').size())

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ color: red; font-size: 100px; background: yellow; } </style> </head> <body> <div id="box">123</div> <div class="box">456</div> <div>789</div> </body> <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>  <script type="text/javascript"> $(function(){ //找到div元素，通过css方法改变字体的颜色 // $('div').css('color','red') // $('#box').css('font-size','100px'); // $('.box').css('font-family','宋体').css('font-size','100px'); // $('*').css('font-weight','900'); // $('#box,.box').css('color','red').css('font-size','100px'); //------------------------------------------------------------------------------ // 如果css方法里面是一个值的话表示获取该属性的值 // alert($('#box').css('color'))//rgb(255, 0, 0) // 另一种css样式的写法 // $('.box').css({ // 'font-size':'100px', // 'color':'yellow', // 'font-weight':'900', // 'width':'300px', // height:'400px', // background:'#ccc' // }) // size()方法可以获取div的个数，新版本已经摒弃该方法 // 新版本和旧的版本都支持length属性获取长度 // alert($('div').size()); alert($('div').length) }) </script> </html>

2：层次选择器

$('p>span') 子选择器 $('p span a') 后代选择器 $('div+p') 同级下一个节点选择器 $('div~p') 下面所有的同级节点选择器

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>123</li> <li>456 <span>哈哈哈</span> </li> <li>789</li> </ul> <div> <p>哈哈哈</p> <h1>啦啦啦</h1> <h1>啦啦啦</h1> <h1>啦啦啦</h1> <h2>呵呵呵</h2> </div> <div> <p>哈哈哈1</p> <h1>啦啦啦1</h1> <h1>啦啦啦1</h1> <h1>啦啦啦1</h1> <h2>呵呵呵1</h2> </div> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $('ul>li').css({ // color:'red', // //如果属性用横线链接，需要引号包裹 // 'font-size':'100px' // }) // $('ul li span').css({ // color:'red' // }) // $('p+h1').css('color','blue') // $('div+div').css('color','blue') // $('p~h1').css('color','yellow') }) </script> </html>

3:过滤选择器

:first 选中第一个元素 :last 选中最后一个元素 :not() 不选中某一个元素 :even 选中是偶数的元素（从零开始计算,第一个元素是0） :odd 选中是奇数的元素 :eq(数字) 选中相等数字的元素（从零开始计算,第一个元素是0） :gt(index) 选中大于数字的元素 :lt(index) 选中小于数字的元素

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>111111111111111</li> <li>222222222222222</li> <li>333333333333333</li> <li>444444444444444</li> <li class="oli">555555555555555</li> <li>666666666666666</li> <li>777777777777777</li> <li>888888888888888</li> <li>999999999999999</li> </ul> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $('li:first').css('color','red') // $('li:last').css('color','red') // $('li:even').css('color','blue') // $('li:odd').css('color','blue') //------------------------------------------------------------- $('li:eq(5)').css('color','pink') // $('li:gt(4)').css('color','pink') // $('li:lt(4)').css('color','pink') // $('li:not(.oli)').css('color','green') }) </script> </html>

4：内容过滤选择器

p:contains('文本') 匹配包含给定文本的元素（找到p标签中包含指定文本内容的p标签） p:has('.red') 有没有包含特定属性值的元素

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>哈哈哈</p> <p>呵呵呵</p> <p>还好还 <span class="red">坎坎坷坷</span> </p> <ul> <li>000000000000</li> <li>111111111111</li> <li class="a">222222222222</li> <li class="b">333333333333</li> <li class="c">444444444444</li> <li>555555555555</li> <li>666666666666</li> </ul> <input type="radio" name="" id="" value="" checked="checked"/> <button>点击</button> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>  <script type="text/javascript"> $(function(){ // $('p:contains("哈哈哈")').css('color','red') // 去找到p标签中含有span标签的元素，把字体颜色改成黄色 // $('p:has("span")').css('color','yellow'); // $('p:has(".red")').css('color','blue'); //---------------------------------------------------------------- // 找到所有有class属性的的标签，把字体变成100像素 // $('[class]').css('font-size','100px') // $('[class=a]').css('font-size','100px') //------------------------------------------------------------------ $('input:checked').css('width','100px').css('height','100px') $('button').click(function(){ $('input').prop('checked',false); }) }) </script> </html>

5：属性选择器

[attrbute] 匹配包含给定属性的元素 [attribute=value] 匹配input框里属性选取所有被选中的元素 $('input:checked') <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="a">111111111111111111111111</p> <p class="a">2222222222222222222222222</p> <h1 class="a">3333333333333333333333</h1> <h1>4444444444444444444444444</h1> <h1 class="b">5555555555555555555555</h1> <input type="checkbox" name="" id="" value="" checked="checked"/> <input type="checkbox" name="" id="" value="" /> <input type="checkbox" name="" id="" value="" /> </body> <script type="text/javascript"> $(function(){ // $('[class]').css('color','red') // $('[class=b]').css('color','#ccc') // $('input:checked').css('width','200px').css('height','200px') }) </script> </html>

Processed: 0.013, SQL: 8

JQuery第二章 选择器