码迷,mamicode.com
首页 > Web开发 > 详细

7.1.2 jquery选择器

时间:2018-07-24 23:42:45      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:fun   奇数   UNC   n个元素   The   inpu   css   user   查找   

一、基础选择器

   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选择器

标签:fun   奇数   UNC   n个元素   The   inpu   css   user   查找   

原文地址:https://www.cnblogs.com/beallaliu/p/9363229.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!