我把JQ选择器全家都搬出来了

最新推荐文章于 2024-01-14 11:54:30 发布

空白

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量221

点赞数

分类专栏： JQuery 学习文章标签： jquery

本文链接：https://blog.csdn.net/qq_38496329/article/details/105712524

版权

学习同时被 2 个专栏收录

105 篇文章 2 订阅

订阅专栏

JQuery

14 篇文章 0 订阅

订阅专栏

JQ选择器

在jQuery中，存在着许多的选择器，以下将通过部分案例对选择器进行一个学习与理解

选择器是什么？

有特定语法规则(css选择器)的字符串
用来查找某个/些DOM元素: $(selector)

作用

用来查找特定页面元素

分类

基本
层次
过滤
表单

基本选择器

#id : id选择器
element : 元素选择器
.class : 属性选择器
*: 任意标签
selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
selector1selector2selectorN : 取多个选择器的交集(相交选择器)

案例需求

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>基本选择器</title>
</head>

<body>
    <div id="div1" class="box">div1(class="box")</div>
    <div id="div2" class="box">div2(class="box")</div>
    <div id="div3">div3</div>
    <span class="box">span(class="box")</span><br>
    <ul>
      <li>AAAAA</li>
      <li title="hello">BBBBB(title="hello")</li>
      <li class="box">CCCCC(class="box")</li>
      <li title="hello">DDDDDD(title="hello")</li>
    </ul>


<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 选择id为div1的元素
   2. 选择所有的div元素
   3. 选择所有class属性为box的元素
   4. 选择所有的div和span元素
   5. 选择所有class属性为box的div元素
   */
  //1. 选择id为div1的元素
  $('#div1').css('color', 'red')	// 字体颜色红色

  //2. 选择所有的div元素
  $('div').css('fontSize', '20px')	// 字体大小20px
 
  //3. 选择所有class属性为box的元素
  $('.box').css('background', 'yellow')	// 背景颜色黄色

  //4. 选择所有的div和span元素
  $('div,span').css('fontStyle', 'oblique')	// 字体倾斜

  //5. 选择所有class属性为box的div元素
  $('div.box').css('border', '1px solid aqua')	// 添加边框

  //6. 选择所有元素
  $('*').css('marginTop', '30px') // 上边距增加 30px
    
</script>
</body>

</html>

层次选择器

查找子元素
后代元素
兄弟元素的选择器

ancestor descendant
在给定的祖先元素下匹配所有的后代元素
parent>child
在给定的父元素下匹配所有的子元素
prev+next
匹配所有紧接在 prev 元素后的 next 元素
prev~siblings
匹配 prev 元素之后的所有 siblings 元素

案例需求

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>06_层次选择器</title>
</head>

<body>
    <ul>
      <li>AAAAA</li>
      <li class="box">CCCCC</li>
      <li title="hello"><span>BBBBB</span></li>
      <li title="hello"><span class="box">DDDD</span></li>
      <span>EEEEE</span>
    </ul>

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 选中ul下所有的的span
   2. 选中ul下所有的子元素span
   3. 选中class为box的下一个li
   4. 选中ul下的class为box的元素后面的所有兄弟元素
   */

  //1. 选中ul下所有的的span
  // $('ul span').css('background', 'yellow')

  //2. 选中ul下所有的子元素span
  // $('ul>span').css('background', 'yellow')

  //3. 选中class为box的下一个li
  // $('.box+li').css('background', 'yellow')

  //4. 选中ul下的class为box的元素后面的所有兄弟元素
  $('ul .box~*').css('background', 'yellow')
</script>
</body>
</html>

`案例图1`

`案例图2`

`案例图3`

`案例图4`

过滤选择器

在原有匹配元素中筛选出其中一些

:first获取第一个元素
:last获取最后个元素
:eq(index)匹配一个给定索引值的元素
:lt(index)匹配所有小于给定索引值的元素
:gt(index)匹配所有大于给定索引值的元素
:odd匹配所有索引值为奇数的元素，从 0 开始计数
:even匹配所有索引值为偶数的元素，从 0 开始计数
:header匹配如 h1, h2, h3之类的标题元素
:not(selector)去除所有与给定选择器匹配的元素
在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）

:hidden匹配所有不可见元素，或者type为hidden的元素
:contains(text)匹配包含给定文本的元素
:visible匹配所有的可见元素
[attrName]匹配包含给定属性的元素
[attrName=value]匹配给定的属性是某个特定值的元素

案例需求

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>07_过滤选择器</title>
</head>

<body>

    <div id="div1" class="box">class为box的div1</div>
    <div id="div2" class="box">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span> <br/>
    <ul>
      <li>AAAAA</li>
      <li title="hello">BBBBB</li>
      <li class="box">CCCCC</li>
      <li title="hello">DDDDDD</li>
      <li title="two">BBBBB</li>
      <li style="display:none">我本来是隐藏的</li>
    </ul>

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  /*
   需求:
   1. 选择第一个div
   2. 选择最后一个class为box的元素
   3. 选择所有class属性不为box的div
   4. 选择第二个和第三个li元素
   5. 选择内容为BBBBB的li
   6. 显示隐藏的li
   7. 选择有title属性的li元素
   8. 选择所有属性title为hello的li元素
   */
  //1. 选择第一个div
  // $('div:first').css('background', 'red')

  //2. 选择最后一个class为box的元素
  //$('.box:last').css('background', 'red')

  //3. 选择所有class属性不为box的div
  // $('div:not(.box)').css('background', 'red')  //没有class属性也可以

  //4. 选择第二个和第三个li元素
    // 多个过滤选择器不是同时执行, 而是依次执行
  // $('li:gt(0):lt(2)').css('background', 'red') 
  //$('li:lt(3):gt(0)').css('background', 'red')

  //5. 选择内容为BBBBB的li
  // $('li:contains("BBBBB")').css('background', 'red')

  //6. 显示隐藏的li
  // $('li:hidden').css('display','block')

  //7. 选择有title属性的li元素
  // $('li[title]').css('background', 'red')

  //8. 选择所有属性title为hello的li元素
  $('li[title="hello"]').css('background', 'red')

</script>
</body>

</html>

`案例图1`

`案例图2`

`案例图3`

`案例图4`

在这儿特此讲一下关于gt()与lt()的用法与原理

gt()与lt()可以用作选择一个区间，但它是依次执行的，而不是同时执行，以本案例做分析，6个元素，选择第2至第3个

如果先用gt()后用lt()

则先:gt(0)选取大于第一个以外的区间，如下图蓝色区域
在蓝色区域内:lt(2)选取小于第三个外的区间，如橙色区域
最终得到的即为红色区域内第2至第3个

如果先用lt()后用gt()
1. 则先:lt(3)选取小于第四个以外的区间，如下图蓝色区域
2. 在蓝色区域内:gt(0)选取大于第一个外的区间，如橙色区域
3. 最终得到的即为红色区域内第2至第3个

`案例图5`

`案例图6`

`案例图7`

`案例图8`

表单选择器

表单选择器

:input
:text
:checkbox
:radio
:checked选中的
:disabled不可用的

案例需求

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>08_表单选择器</title>
</head>

<body>
    <form>
      用户名: <input type="text"/><br>
      密 码: <input type="password"/><br>
      爱 好:
      <input type="checkbox" checked="checked"/>篮球
      <input type="checkbox"/>足球
      <input type="checkbox" checked="checked"/>羽毛球 <br>
      性 别:
      <input type="radio" name="sex" value='male'/>男
      <input type="radio" name="sex" value='female'/>女<br>
      邮 箱: <input type="text" name="email" disabled="disabled"/><br>
      所在地:
      <select>
        <option value="1">北京</option>
        <option value="2" selected="selected">天津</option>
        <option value="3">河北</option>
      </select><br>
      <input type="submit" value="提交"/>
    </form>

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 选择不可用的文本输入框
   2. 显示选择爱好 的个数
   3. 显示选择的城市名称
   */
  //1. 选择不可用的文本输入框
  // $(':text:disabled').css('background', 'red')

  //2. 显示选择爱好 的个数
  console.log($(':checkbox:checked').length)

  //3. 显示选择的城市名称
  $(':submit').click(function () {
    var city = $('select>option:selected').html() // 选择的option的标签体文本
    city = $('select').val()  // 选择的option的value属性值
    alert(city)
  })

</script>
</body>
</html>

`案例图1`

`案例图2`

`案例图3`

空白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
我把JQ选择器全家都搬出来了

JQ选择器在jQuery中，存在着许多的选择器，以下将通过部分案例对选择器进行一个学习与理解选择器是什么？有特定语法规则(css选择器)的字符串用来查找某个/些DOM元素: $(selector)作用用来查找特定页面元素分类基本层次过滤表单基本选择器#id : id选择器element : 元素选择器.class : 属性选择器*: 任意...
复制链接

扫一扫