7.1.2 jquery选择器

Posted beallaliu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了7.1.2 jquery选择器相关的知识,希望对你有一定的参考价值。

一、基础选择器

   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‘);   //查找所有的后代元素 

 

 

 

 

 

  

   

 

 

    

 

   

以上是关于7.1.2 jquery选择器的主要内容,如果未能解决你的问题,请参考以下文章

jquery标签选择器怎么循环

jquery选择器都有哪些

[ jquery 选择器 总览 ] jquery选择器总览

jQuery ---[jQuery选择器,jQuery对象的遍历]

jQuery选择器

jQuery选择器概述