7.1.2 jquery选择器

Posted 2020-12-25 beallaliu

一、基础选择器

   1. 标签选择器

　2. 类选择器

　3. ID选择器

  4. 通配符选择器

二、层级选择器

$(document).ready(function(){

　　// 1. 后代选择器

　　$(‘div p‘).css(‘color‘,‘red‘);

 　　// 2. 子代选择器

　　$(#box2>p).css(‘color‘,‘red‘);

　　// 3. 毗邻选择器,匹配所有紧接着选中元素的兄弟

　　$(‘#father+p‘).css(‘font-size‘,‘12px‘);

      // 4. 兄弟选择器

　　$(‘#father~p‘).css(‘font-size‘,‘12px‘);

 　　// 5. 获取第一个元素

　　$(‘li:first‘).css(‘font-size‘,‘12px‘);

　　// 6. 获取最后一个元素

　　$(‘li:last‘).css(‘font-size‘,‘12px‘);

     // 7. 获取第几个，0,1,2....

　　$(‘li:eq(2)‘).css(‘font-size‘,‘12px‘);

})

 

三、基本过滤选择器

$(function(){

　 // :first  获取第一个元素

　　$(‘li:first‘).css(‘font-size‘,‘12px‘);

    // :last   获取最后一个元素

    //:odd  获取奇数元素

    //:even 获取偶数元素

　 // :eq(n) 获取索引值为N的元素

    //:gt(n) 获取索引值大于n的元素

　　//:lt(n)获取索引值小于n的元素

})

四、属性选择器

  // 标签名[属性名]   

$(function(){

　　//查找所有含有id属性的标签

　　$(‘li[id]‘).css(‘color‘,‘red‘)

　　// 匹配给定的属性是某个特定值的元素

　　$(‘li[class=what]‘).css(‘font-size‘,‘30px‘)

　　// 匹配所有不含有指定的属性，或者属性不等于特定值的元素

　　$(‘li[class!=what]‘).css(‘font-size‘,‘30px‘)

　　// 匹配给定的属性是以某些值开始的元素

　　$(‘input[name^=username]‘).css(‘font-size‘,‘30px‘)

　　// 匹配给定的属性是以某些值结尾的元素

　　$(‘input[name$=username]‘).css(‘font-size‘,‘30px‘) 

      // 匹配给定的属性是以包含某些值的元素

　　$(‘button[class*=btn]‘).css(‘font-size‘,‘30px‘)

})　

　五、筛选选择器

    // 获取第n个元素 数值从0开始

    $(‘span‘).eq(0).css(‘font-size‘,‘30px‘)

    $(‘span:eq(0)‘).css(‘font-size‘,‘30px‘)

    //获取第一个元素  :last   :first   点语法： get方法 set方法

　$(‘span‘).last().css(‘color‘,‘red‘);

　$(‘span‘).first().css(‘color‘,‘red‘);

　$(‘span‘).parent(‘.p1‘).css(‘color‘,‘red‘);   //父级元素

　$(‘span‘).siblings(‘li‘).css(‘color‘,‘red‘);   //所有的兄弟元素

　$(‘span‘).find(‘button‘).css(‘color‘,‘red‘);   //查找所有的后代元素