使用jQuery核心函数——选择器

_洋

已于 2022-05-01 14:35:25 修改

阅读量402

点赞数

分类专栏： jQuery 文章标签： jquery css css3

于 2022-04-30 18:36:17 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124508237

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

文章目录

选择器
- 选择器定义
- 规则：
选择器分类

选择器

选择器定义

选择器本身只是一个有特定语法规则的字符串,没有实质用处。
只有调用 $，并将选择器作为 = = 参数 = = 传入才能起作用 ‘$ (selector)`

$(selector)作用：
根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成jQuery对象返回。
（即查找到的所有Dom元素都在jQuery对象中）

规则：

它的基本语法规则使用的就是CSS的选择器语法，并对其进行了扩展

选择器分类

基本选择器

最基本最常见的选择器

id选择器：#id
元素选择器：p
类选择器：.class
通配选择器：*
并集选择器：selector1，selector2，selectorN
交集选择器：selector1selector2selectorN（注意中间没有空格）

实例：
需求:
1．选择id为div1的元素
2．选择所有的div元素
3．选择所有cLass属性为box的元素
4．选择所有的div和span元素
5．选择所有cLass属性为box的div元素

<!DOCTYPE html>
<html lang="en">
<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>
    <br>
    <ul>
        <li>AAAAA</li>
        <li title="hello">BBBBB(title="hello")</li>
        <li class='box'>CCCCC(class='box')</li>
        <li title="hello">DDDDD(title="hello")</li>
    </ul>


    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
//1．选择id为div1的元素
        $('#div1').css('background','red')
// 2．选择所有的div元素
        $('div').css('background','red')
// 3．选择所有cLass属性为box的元素
        $('.box').css('background','yellow')
// 4．选择所有的div和span元素
        $('div,span').css('color','blue')
// 5．选择所有cLass属性为box的div元素
        $('div.box').css('background','green')
        // 通配选择器
        $('*').css('background',"#3e3e3e")
    </script>
    
</body>
</html>

在这里插入图片描述

层次选择器

后代元素：ancestor descendan
查找子元素：parent >child
:nth-child(n) :匹配其父元素下的第N个子或奇偶元素
:first-child :匹配第一个子元素
:last-child :匹配最后一个子元素
:only-child :如果某个元素是父元素中唯一的子元素，那将会被匹配
查找紧跟在后面的一个兄弟元素：prev + next
查找后面所有的兄弟元素：prev ~ siblings

eg：需求
1．选中ul下所有的的span
2．选中ul下所有的子元素span
3．选中class为box的下一个li
4．选中ul下的class为box的元素后面的所有兄弟元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</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">DDDDD</span></li>
      <span>EEEEE</span>
    </ul>
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
// 1．选中ul下所有的的span
        $('ul span').css('background','red')

// 2．选中ul下所有的子元素span
        $('ul>span').css('background','yellow')
// 3．选中class为box的下一个li
        $('.box+li').css('background','green')
// 4．选中ul下的class为box的元素后面的所有兄弟元素
        $('ul .box~*').css('background','blue')

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

在这里插入图片描述

过滤选择器

过滤：在原有选择器匹配的元素中进一步进行过滤的选择器

基本过滤选择器
:first :获取第一个元素
:last() :获取最后个元素
:not(selector) :去除所有与给定选择器匹配的元素
:even :匹配所有索引值为偶数的元素，从 0 开始计数
:odd :匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) :匹配一个给定索引值的元素
:gt(index) :匹配所有大于给定索引值的元素
:lt(index) :匹配所有小于给定索引值的元素
:header :匹配如 h1, h2, h3之类的标题元素
:animated :匹配所有正在执行动画效果的元素
:focus :触发每一个匹配元素的focus事件。
内容过滤选择器
:contains(text) ：匹配包含给定文本的元素
:empty ：匹配所有不包含子元素或者文本的空元素
:has(selector) ：匹配含有选择器所匹配的元素的元素
:parent ：匹配含有子元素或者文本的元素
属性过滤选择器
[attribute] :匹配包含给定属性的元素。
注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
[attribute=value] :匹配给定的属性是某个特定值的元素
[attribute!=value] :匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] :匹配给定的属性是以某些值开始的元素
[attribute$=value] :匹配给定的属性是以某些值结尾的元素
[attribute*=value] :匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] :复合属性选择器，需要同时满足多个条件时使用。
可见性过滤选择器
:hidden ;匹配所有不可见元素，或者type为hidden的元素
:visible :匹配所有的可见元素

多个过滤选择器不是同步执行的是依次进行的，即这一次过滤的前提是上一次过滤的结果

eg:
需求:
1．选择第一个div
2．选择最后一个class为box的元素
3．选择所有class属性不为box的div
4．选择第二个和第三个li元素
5．选择内容为BBBBB的li
6．选择隐藏的li
7．选择有title属性的li元素
8. 选择所有属性title为hello的li元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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 title='' class='box'>CCCC</li>
        <li title='hello'>DDDDD</li>
        <li title='two'>BBBBB</li>
        <li style="display: none;">我本来是隐藏的</li>
    </ul>


    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    
    <script>
        // 1．选择第一个div
        $('div:first').css('background','red')
// 2．选择最后一个class为box的元素
        $('.box:last').css('background','red')
// 3．选择所有class属性不为box的div
// 没有class也属于不为box
        $('div:not(.box)').css('background','blue')
// 4．选择第二个和第三个li元素
// 注意过滤选择器是一步步执行的，即每执行一个选择器语句就会将获得的元素重新从0编号，所以写成li:gt(0):lt(3)是不行的
        $('li:lt(3):gt(0)').css('background','yellow')
// 5．选择内容为BBBBB的li
        $('li:contains("BBBBB")').css('background','green')
// 6．选择隐藏的li
        console.log($('li:hidden').length)
// 7．选择有title属性的li元素
        $('li[title]').css('background','purple')
// 8.  选择所有属性title为hello的li元素
        $('li[title=hello]').css('background','orange')
    </script>
</body>
</html>

在这里插入图片描述
eg:表格奇偶不同色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
        table{
           width: 50%;
            border:1px solid black;
            /* border-spacing: 1px; */
            border-collapse: collapse;
        }

    </style>
</head>
<body>
    <table border="1" width="50%" align="center" id="data" >
        <thead>
            <tr>
                <td>姓名</td>
                <td>工资</td>
                <td>出生年月</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>￥3500</td>
                <td>2010-10-25</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Marry</td>
                <td>￥3400</td>
                <td>2010-12-2</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>King</td>
                <td>￥5900</td>
                <td>2010-12-5</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Marry</td>
                <td>￥3400</td>
                <td>2010-12-2</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>King</td>
                <td>￥5900</td>
                <td>2010-12-5</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>King</td>
                <td>￥5900</td>
                <td>2010-12-5</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
        </tbody>
    </table>
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        $('#data>tbody>tr:odd').css('background','#ccccff')
    </script>
    
</body>
</html>

在这里插入图片描述

表单选择器

表单

:input ：匹配所有 input, textarea, select 和 button 元素
:text ：匹配所有的单行文本框
:password :匹配所有密码框
:radio ：匹配所有单选按钮
:checkbox ：匹配所有复选框
:image ：匹配所有图像域
:submit ：匹配所有提交按钮
:reset ：匹配所有重置按钮
:button ：匹配所有按钮
:file ：匹配所有文件域
:hidden ：匹配所有不可见元素，或者type为hidden的元素

表单对象属性

:enabled :匹配所有可用元素
:disabled :匹配所有不可用元素
:checked :匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected ：匹配所有选中的option元素

需求:
1.选择不可用的文本输入框
2.是示选择爱好的个数
3.显示选择的城市名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form action="">
        用户名：<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 name="" id="">
            <option value="1">北京</option>
            <option value="2" selected = 'selected'>天津</option>
            <option value="3">河北</option>
        </select><br>
        <input type="submit" value="提交">
    </form>
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
// 1.选择不可用的文本输入框
            $(':text:disabled').css('background','red')
// 2.显示选择爱好的个数
            $(':checkbox:checked').css('background','yellow')

// 3.显示选择的城市名称
            $(':submit').click(function (){
               var city=$('select>option:selected').html()
               var value = $('select').val()
               alert(city)
               alert(value)
            })
    </script>
    
</body>
</html>

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery核心函数——选择器

文章目录选择器选择器定义规则：选择器分类基本选择器层次选择器过滤选择器表单选择器选择器选择器定义选择器本身只是一个有特定语法规则的字符串,没有实质用处。只有调用，并将选择器作为==参数==传入才能起作用‘，并将选择器作为==参数==传入才能起作用`，并将选择器作为==参数==传入才能起作用‘(selector)`$(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成jQuery对象返回。（即查找到的所有Dom元素都在jQuery对象中）规则：它的基本语法规
复制链接

扫一扫

专栏目录