JQuery选择器

最新推荐文章于 2022-11-24 19:36:45 发布

大陈&

最新推荐文章于 2022-11-24 19:36:45 发布

阅读量223

点赞数

分类专栏： JQ 文章标签： jquery html5 html

本文链接：https://blog.csdn.net/dad188/article/details/116309238

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JQuery选择器

1.1基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery基本选择器</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>

<!--
1. 是什么?
  - 有特定格式的字符串
2. 作用
  - 用来查找特定页面元素
3. 基本选择器
  - #id : id选择器
  - element : 元素选择器
  - .class : 属性选择器
  - * : 任意标签
  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)
-->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
    /*
     需求:
     1. 选择id为div1的元素
     2. 选择所有的div元素
     3. 选择所有class属性为box的元素
     4. 选择所有的div和span元素
     5. 选择所有class属性为box的div元素
     */
    $(function () {
// 1. 选择id为div1的元素
        // $('#div1').css('background', 'red')
// 2. 选择所有的div元素
        // $('div').css('background', 'red')
// 3. 选择所有class属性为box的元素
        // $('.box').css('background', 'red')
// 4. 选择所有的div和span元素
        // $('div,span').css('background', 'red')
// 5. 选择所有class属性为box的div元素
        // $('div.box').css('background', 'red')  //不能写.boxdiv
    })
</script>
</body>
</html>

首先是没有经过修饰的部分运行结果是：
在这里插入图片描述
第一个问题：选择id为div1的元素：

$('#div1').css('background', 'red')

运行结果是：
在这里插入图片描述
第二个问题：选择所有的div元素

 $('div').css('background', 'red')

运行结果是：
在这里插入图片描述
第三个问题就是：选择所有class属性为box的元素

$('.box').css('background', 'red')

运行结果是：
在这里插入图片描述
第四个问题：选择所有的div和span元素

$('div,span').css('background', 'red')

运行结果是：
在这里插入图片描述
第五个问题：选择所有class属性为box的div元素

$('div.box').css('background', 'red')

运行结果：
在这里插入图片描述

1.2层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</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>

<!--
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. ancestor descendant
  在给定的祖先元素下匹配所有的后代元素
2. parent>child
  在给定的父元素下匹配所有的子元素
3. prev+next
  匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings
  匹配 prev 元素之后的所有 siblings 元素
-->

<script src="js/jquery-3.6.0.min.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>

基础效果：
在这里插入图片描述
第一个问题：选中ul下所有的的span

$('ul span').css('background', 'yellow')

运行结果：
在这里插入图片描述
第二个问题：选中ul下所有的子元素span

$('ul>span').css('background', 'yellow')

运行结果：
在这里插入图片描述
第三个问题：选中class为box的下一个li

$('.box+li').css('background', 'yellow')

运行结果：
在这里插入图片描述
第四个问题：选中ul下的class为box的元素后面的所有兄弟元素

$('ul .box~*').css('background', 'yellow')

运行结果：
在这里插入图片描述

1.3过滤选择器

<!DOCTYPE html>
<html lang="en">

<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-3.6.0.min.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
    // console.log($('li:hidden').length, $('li:hidden')[0])

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

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

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

基础样式：
在这里插入图片描述

第一个问题：选择第一个div：

 $('div:first').css('background', 'red')

结果是：
在这里插入图片描述
第二个问题是：选择最后一个class为box的元素：

$('.box:last').css('background', 'red')

结果是：
在这里插入图片描述
第三个问题：选择所有class属性不为box的div：

 $('div:not(.box)').css('background', 'red')

结果是：
在这里插入图片描述
第四个问题：选择第二个和第三个li元素：

$('li:gt(0):lt(2)').css('background', 'red')

或者是：

$('li:lt(3):gt(0)').css('background', 'red')

结果都是：

在这里插入图片描述
第五个：选择内容为BBBBB的li：

$('li:contains("BBBBB")').css('background', 'red')

结果是：
在这里插入图片描述
第六个：选择隐藏的li：

console.log($('li:hidden').length, $('li:hidden')[0])

结果是：
在这里插入图片描述
第七个：选择有title属性的li元素：

 $('li[title]').css('background', 'red')

结果是：
在这里插入图片描述
第八个问题：选择所有属性title为hello的li元素：

 $('li[title="hello"]').css('background', 'red')

结果是：
在这里插入图片描述

1.4表单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器</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>
<!--
表单选择器
  1). 表单
  2). 表单对象属性
-->
<script src="js/jquery-3.6.0.min.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>

基础样式：
在这里插入图片描述

第一个问题：选择不可用的文本输入框：

$(':text:disabled').css('background', 'red')

效果是：
在这里插入图片描述
第二个问题：显示选择爱好的个数

console.log($(':checkbox:checked').length)

结果是：
在这里插入图片描述
第三个问题是：显示选择的城市名称：

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

结果是：
在这里插入图片描述
第二种方法：

$(':submit').click(function () {
        var city = $('select>option:selected').html() // 选择的option的标签体文本 
         city = $('select').val()  // 选择的option的value属性值，将原来的值覆盖掉
        alert(city)
    })

结果是：
在这里插入图片描述
因为这个选中得是选择的option的value属性值，所以才是数字

大陈&

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery选择器

JQuery选择器**1.1标签选择器**.jQuery 使用 CSS 选择器来选取 HTML 元素。$(“p”) 选取元素。$(“p.intro”) 选取所有 class=“intro” 的元素。$(“p#demo”) 选取所有 id=“demo” 的元素。
复制链接

扫一扫

专栏目录