提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

前端-jQuery-选择标签-选择器和筛选器

jQuery前端 选择 标签 选择器 筛选
2023-09-14 08:59:02 时间

jQuery选择器和筛选器 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery初识</title>
</head>
<body>

<div id="d1">d1</div>
<div class="c1">.c1</div>
<p class="c2">p</p>
<a class="c2" href="">a标签</a>

<!--筛选器-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>


<!--not-->
<div id="d2">
    <p class="c1">div</p>
    <p class="c1">div</p>
    <p class="c2">div</p>
    <p class="c2">div</p>
</div>


<!--:has-->
<div id="d3">
    <div style="" style="color: rgb(0, 0, 255);">>
        <p>div中的p标签</p>
    </div>

    <div style="" style="color: rgb(0, 0, 255);">>
        <a href="">div中的a标签</a>
    </div>
</div>


<!--属性选择器-->
<form action="" id="f1">
    <label>用户名:
        <input name="username" type="text" disabled>
    </label>

    <label>密码:
        <input name="pwd" type="password">
    </label>


    <label>篮球:
        <input name="hobby" value="basketball" type="checkbox">
    </label>

    <label>足球:
        <input name="hobby" value="football" type="checkbox">
    </label>


    <label>男
        <input name="gender" value="1" type="radio">
    </label>

    <label>女:
        <input name="gender" value="0" type="radio">
    </label>

</form>
<script src="jquery-3.2.1.min.js"></script>

</body>
</html>

 ###

上面是练习选择器的html代码，

jQuery选择器

jQuery选择器---id选择器

$("#d1")//这种是返回一个列表，数组，必须要取出来，才是对应的标签

$("#d1")[0]

###

jQuery选择器---属性选择器

$(".c1")----点后面加属性就可以了，任何属性都可以查，

$(".c1")[0]

###

jQuery选择器---标签选择器

$("div")

$("div")[0]//这是找到div标签中的第一个

###

jQuery选择器---选择器的组合使用

上面是三种常用的选择器，这三种可以配合使用

$("a.c2")[0] //这就是取出了属性是c2的a标签

这个很重要，

###

jQuery选择器---所有的选择器

$("*");//找所有的选择器，包括标签， 属性，id，

###

jQuery选择器---组合选择器

$("a,#d1")//这是找到两种标签合并在一起返回，中间用逗号分割

####

jQuery选择器---层级选择器

//子孙选择器 -----空格

$("form input")//这是在form标签的子孙标签中，去查到input标签，

//儿子选择器 ------箭头

$("label>input")//在label的儿子标签中，去查到input标签，

//毗邻选择器 ------加号

$("label+input")//这是找input标签，这个标签和label标签紧挨着

// 弟弟选择器 ----波浪线

$("#p2~li") //这是找到p2标签下面的，所有的和他同级的li标签，

####

jQuery筛选器

//筛选器  -------   就是先有一堆东西，然后把想要的过滤出来，这就是筛选器，

很多时候筛选器和选择器都是叫做选择器，没有这么大的区分，但是你要知道，还是有点差异的，

####

jQuery筛选器 ---第一个，最后一个，第三个，偶数个，奇数个，

$("ul")//找到ul标签 ----选择器

$("ul li")//找到ul标签下面的所有li标签 ----选择器

$("ul li:first")//找到ul标签下面的第一个li标签

$("ul li:last")//找到ul标签下面的最后一个li标签

$("ul li:eq(2)")//找到ul标签下面的第3个li标签

$("ul li:even")//找到ul标签下面的索引是偶数的li标签

$("ul li:odd")//找到ul标签下面的索引是奇数的li标签

//隔行变色就是这样做的

$("ul li:gt(0)")//找到ul标签下面的索引大于0的li标签

$("ul li:lt(2)")//找到ul标签下面的索引是小于2的li标签

###

jQuery筛选器-not

$("#d2 p:not(.c2)")//移除p标签下面，属性是c2的，移除不满足条件的

###

jQuery筛选器-has

$("#d3 div:has(a)")//找到含有a标签的div

###

jQuery筛选器-属性选择器

//[attribute=value]// 属性等于

//[attribute!=value]// 属性不等于

$("input[name='hobby']")//找到属性是hobby 的输入框

###

jQuery筛选器-表单常用筛选

$(":text")

$("input[type='text']")

//这两种写法是一样的，第一种是简写

/*
:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

//表单对象属性
:enabled
:disabled
:checked
:selected
* */

###

jQuery-筛选器2

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>筛选器示例</title>

    <style>
        .c1 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: red;
        }
        .c2 {
            background-color: green;
        }
    </style>
</head>
<body>

<ul>
    <li id="l0">l0</li>
    <li>l1</li>
    <li>l2</li>
    <li id="l3">l3</li>
    <li>l4</li>
    <li>l5</li>
</ul>

<!--父标签-->
<div id="d1">div-1
    <div id="d2">div-2
        <div id="d3">div-3
            <a href="">a标签</a>
        </div>
    </div>
</div>

<!--兄弟和儿子-->

<div id="dd">
    <p>p0</p>
    <p>p1</p>
    <p id="p2">p2</p>
    <p>p3</p>
</div>


<div class="c1"></div>

<script src="jquery-3.2.1.min.js"></script>


</body>
</html>

 ###

jQuery筛选器--上一个，下一个，所有标签，

$("#l3")//这是找到id是l3的这个标签

//这是找到这个标签的上一个
$("#l3").prev();

//这是找到这个标签的下一个
$("#l3").next();

//这是找到这个标签上面所有的标签
$("#l3").prevAll();

//这是找到这个标签下面所有的标签
$("#l3").nextAll();

//这是找到l1下面的，直到找到l3为止，不包含l3
$("#l1").nextUntil("#l3");

###

jQuery筛选器--父标签

//找父标签
$("a").parent()
//找到父标签的父标签，这是一种链式操作
$("a").parent().parent()
//找到所有的父标签
$("a").parents()
//直到找到某一个父标签为止
$("a").parentsUntil("body")

###

jQuery筛选器--子标签

//找到子标签
$("#dd").children()

###

jQuery筛选器--兄弟标签

//找到兄弟标签，上边下面都能找到
$("#p2").siblings()

###

jQuery筛选器--find

// 查找find ------- 这个很重要！！！！！！！
$("div").find("p") //这是找到div标签，在这个结果集里面再去找p标签

####

jQuery操作标签--添加class属性，删除class属性，判断，切换class属性

//添加指定的CSS类名。
$("#p2").addClass("c2");
// 移除指定的CSS类名。
$("#p2").removeClass("c2");
// 判断样式存不存在
$("#p2").hasClass("c2");
// 切换CSS类名，如果有就移除，如果没有就添加。
$("#p2").toggleClass("c2");

 

####

jQuery操作标签----样式操作实例----灯的点亮和点灭

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单的点击事件实现灯点亮和关闭</title>

    <style>
        .c1 {
            height: 200px;
            width: 200px;
            border-radius:  50%;
            background-color: red;
        }
        .c2 {
            background-color: green;
        }
    </style>
</head>
<body>



<div class="c1"></div>

<script src="jquery-3.3.1.min.js"></script>


</body>
</html>
<script>
    // 第一步：找到要操作的元素
    //语法和原生的还是不一样的
    $(".c1").click(function () {
        //this这是一个dom对象，要转换成为jQuery对象
         $(this).toggleClass("c2")
    } )
</script>

####

jQuery操作左侧菜单的展示和隐藏的思路

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单作业分解</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="left-menu">
    <div class="menu-title">菜单一</div>
    <div class="menu-items">
        <ul>
            <li><a href="">111</a></li>
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>
    </div>
    <div class="menu-title">菜单二</div>
    <div class="menu-items hide">
        <ul>
            <li><a href="">111</a></li>
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>
    </div>
    <div class="menu-title">菜单三</div>
    <div class="menu-items hide">
        <ul>
            <li><a href="">111</a></li>
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>
    </div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 需求分析
    // 找到所有的.menu-title标签,绑定点击事件

    // 点击事件具体要做的事儿
    // 1. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)
    // 2. 把其他的.menu-items隐藏,添加hide类

    // 1. 找到所有的.menu-items, 隐藏
    // 2. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)


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

 

### 

 

 

 

 

 

 

#########################

 

相关文章