js06金沙官网登录-js06.com-欢迎您

来自 计算机 2020-01-04 23:48 的文章
当前位置: js06金沙官网登录-js06.com-欢迎您 > 计算机 > 正文

Jquery选择器使用方法大全

Jquery选择器使用方法大全

 

摘要:本文主要讲是Jquery中选择器的使用方法

一、基本选择器

  1. id选择器(指定id元素)
    将id=divOne的元素背景色设置为红色。(id选择器返单个元素)

 

 

 $('#divOne').css('background', 'red');

 

  1. class选择器(遍历css类元素)

将class=divTwo的元素背景色设为蓝色

 

 $('.divTwo').css('background', 'blue');
  1. element选择器(遍历html元素)
    将p元素的文字设置为粉色

 

 

  $('p').css('color', 'pink');
  1. * 选择器(遍历所有元素)

 

将ul下的所有元素字体设置成黄色

 $('ul *').css('color', 'yellow');
  1. 并列选择器

 

将id = spanOne,class = 'pTwo' 的字体设置成蓝色

   $('#spanOne,.pTwo').css('color', 'blue');

 

整个效果如下:

 

示例代码如下:

 

<script src=jquery-1.8.1.min.js> </script>

点我改变颜色

我是divOne

我是divTwo

我是段落一

我是段落二

  • 序列一
  • 序列二
  • 序列三

并列一

并列二

这是还没改变之前的:

图片 1

这是改变之后的:

图片 2

二、 层次选择器

 

  1. parent > child(直系子元素)

    $('#divOne > p').css('color', 'blue');
    

下面的代码,只有外层段落的字体会改变颜色,里层不会,因为里层是属于divInner的直系元素

外层段落一

外层段落二

外层段落三

里层段落一

里层段落二

里层段落三

  1. prev + next(下一个兄弟元素,等同于next()方法)

    $('#divTwo + ul').css('color', 'red');
    

下面的代码,只有序列2开头的会变色

 

  • 序列1_1
  • 序列1_2
  • 序列1_3
  • 序列2_1
  • 序列2_2
  • 序列2_3
  1. prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)

     $('#divThree ~ span').css('color', 'red');
    

下面的代码,兄弟一到三会变色

 

兄弟一
兄弟二
兄弟三

示例结果:

 

整个示例代码如下:

 

<script src=jquery-1.8.1.min.js> </script>

点我改变颜色

外层段落一

外层段落二

外层段落三

里层段落一

里层段落二

里层段落三

 

  • 序列1_1
  • 序列1_2
  • 序列1_3
  • 序列2_1
  • 序列2_2
  • 序列2_3

 

兄弟一
兄弟二
兄弟三

改变之前:

图片 3

改变之后:

图片 4

三、 过滤选择器

  1. 基本过滤选择器
    ——1.1 :first和:last(取第一个元素或最后一个元素)

    $('#divOne ul li :first').css('color', 'red'); $('#divOne ul li :last').css('color', 'blue');

下面的代码,序列1_1(first元素)和序列1_3(last元素)会变色

 

 

  • 序列1_1
  • 序列1_2
  • 序列1_3

——1.2 :not(取非元素)

我是divTwo

我是divThree

下面的代码,divTwo和divThree会变色

 

 

  • 序列1_1
  • 序列1_2
  • 序列1_3

我是divTwo

我是divThree

——1.3 :even和:odd(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数)

     $('tr:even').css('background', 'red'); // 偶数行颜色
     $('tr:odd').css('background', 'blue'); // 奇数行颜色

偶数行行颜色为红色(第一行的索引为0),奇数为蓝色

Month Savings Name
January $100 LinBingWen
Feb $200 test
Jna $2300 kkk
Nev $800 cdf
few $300 ggg
Oct $300 ccc

——1.4 :eq(x) (取指定索引的元素)

  $('tr:eq(2)').css('background', 'yellow');//表格第二行变色

更改第二行的背景色为黄色

——1.5 :gt(x)和:lt(x)(取大于x索引或小于x索引的元素)

     $('#divFour ul li:gt(2)').css('color', 'red');
     $('#divFour ul li:lt(2)').css('color', 'blue');

序列4_0到4_1是红色,4_3到4_4为蓝色

  • 序列4_0
  • 序列4_1
  • 序列4_2
  • 序列4_3
  • 序列4_4

——1.6 :header(取H1~H6标题元素)

  $(':header').css('background', 'pink');

下面的代码,H1~H6的背景色都会成粉色

H1

H2

H3

H4

H5
H6

上面的整个代码如下:

 

 

<script src=jquery-1.8.1.min.js></script>

点我改变颜色

  • 序列1_1
  • 序列1_2
  • 序列1_3

我是divTwo

我是divThree

Month Savings Name
January $100 LinBingWen
Feb $200 test
Jna $2300 kkk
Nev $800 cdf
few $300 ggg
Oct $300 ccc
  • 序列4_0
  • 序列4_1
  • 序列4_2
  • 序列4_3
  • 序列4_4

H1

H2

H3

H4

H5
H6

 

原始效果:

图片 5

选择后效果:

 

图片 6

  1. 内容过滤选择器
    ——2.1 :contains(text)(取包含text文本的元素)

      $('#divOne span:contains(兄弟1_1)').css('color', 'red');
    

下面的代码,兄弟1_1会变色

兄弟1_1
兄弟1_2
兄弟1_3

——2.2 :empty(取不包含子元素或文本为空的元素)

  $('#divTwo span:empty').html('没有内容').css('color', 'red');

下面第span显示没有内容文本

 

 

 

——2.3 :has(selector)(取选择器匹配的元素)

     $('#divThree:has(h1)').css('border', '1px solid #000');   // 为包含h1元素的div添加边框

为包含h1元素的div添加边框

 

 

我是标题一

——2.4 :parent(取包含子元素或文本的元素)

  $('ol li:parent').css('border', '1px solid #000');

下面的代码,序列1和序列2所在的li会有边框

  1. 序列1
  2.  
  3.  
  4. 序列2

整个代码如下:

 

 

<script src=jquery-1.8.1.min.js></script>

点我改变颜色

兄弟1_1
兄弟1_2
兄弟1_3

 

我是标题一

  1. 序列1
  2.  
  3.  
  4. 序列2

 

原始内容:

图片 7

点击后的:

图片 8

  1. 可见性过滤选择器
    ——3.1 :hidden(取不可见的元素)

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素,而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素,像visibility:hidden或opactity:0的元素占据了空间,会被排除在外。

——3.2 :visible(取可见的元素)
示例代码如下:

 

<script src=jquery-1.8.1.min.js></script>

点我改变颜色

 

 

原始:

 

图片 9

点击后:

图片 10

  1. 属性过滤选择器
    ——4.1 [attribute](取拥有attribute属性的元素)

 

将有title元素的span设置背景色为篮色

 

   $('span[title]').css('background','blue');

——4.2 [attribute = value]和[attribute != value](取attribute属性值等于value或不等于value的元素)

 $('span[title = test3]').css('background','red');

将将有title=‘test3’元素的span设置背景色为红色

 

整个代码如下:

 

<script src=jquery-1.8.1.min.js></script>

点我改变颜色

兄弟1_1
兄弟1_2
兄弟1_3

 

原效果:

图片 11

点击后:

图片 12

 

摘要:本文主要讲是Jquery中选择器的使用方法 一、基本选择器 1. id选择器(指定id元素) 将id=divOne的元素背景色...

本文由js06金沙官网登录-js06.com-欢迎您发布于计算机,转载请注明出处:Jquery选择器使用方法大全

关键词: