JQuery选择器

Ω一Ω一Ω

已于 2022-08-13 18:58:02 修改

阅读量346

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

于 2022-08-12 00:36:24 首次发布

本文链接：https://blog.csdn.net/m0_63498249/article/details/126291779

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

流行的JavaScript类库
为了简化JavaScript的开发，一些JavsScript库就诞生了。JavaScript,库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。

jQuery特点

轻量级:封装后的库只有不到100k，下载的时候很快
强大选择器:方便快速查找DOM元素
隐式遍历(迭代):一次操作多个元素
读写合一:读数据/写数据用的是一个函数。
链式调用可以通过.不断调用Query对象的方法
事件处理
DOM操作(CUD)
样式操作
动画
浏览器兼容
丰富的插件支持

使用JQuery

1.引入jQuery文件

2.入口函数
3.功能实现

JQuery的入口函数

// $ 相当于jquery

// 第一种

$(document).ready(function(){

});

// 第二种

$().ready(function(){

})

// 第三种

$(function(){

// 编写功能实现代码

})

jQuery入口函数与js入口函数的对比:

1.Javascript的入口函数要等到页面中所有资源（包括图片、文件）加拔完成才开始执行。

2.JQuery的入口函数只会等待文档树加载完成就开始执行，并不全等待图片、文件的加载。

例如：

$(function(){
    $("#click").click(function(){
        // $("div").css("display","block")  //显示
        $("div").show() //show(1000) 1s过度
        // $("div").hide() //hide()    隐藏 
    })
    $("#setup").click(function(){
        $("div").html("新增的文本")
    })
    $("#smale").click(function () {
        $("div").css("width","100px");
        $("div").css("height","100px");
    })
})

1、基本选择器的使用

1.1 基本选择器

名称	用法	描述
ID选择器	$("#id");	获取指定ID的元素
类选择器	$(".class");	获取同一类class的元素
标签选择器	$("div");	获取同一类标签的所有元素
并集选择器	$("div,p,li"");	使用逗号分隔，只要符合条件之一就可
交集选择器	$("div.redClass");	获取class为redClass的div元素
总结:跟css的选择器用法一样，外层加$()。

1.2 层次选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>号，获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

案例：

<input type="text" id="one">+
<input type="text" id="two">=
<input type="text" id="result" disabled>     <!--disabled:无法选中-->
<input type="button" value="计算" class="btn">
<hr>
<input type="button" value="改变" id="click">
<div class="div0">这是一个div标签</div>
<p class="div0">这是一个p标签</p>
<script>
    $(function(){
        // 两个数的计算
        // 绑定单击事件
        $(".btn").click(function(){
            // 实现加法运算
            // 先获取到输入的两个数,val():可以获取到标签的value值
            var first=$("#one").val()
            var second=$("#two").val()
            var result=parseInt(first)+parseInt(second)
            $("#result").val(result)
            // document.getElementById("result").value=result
        })

        // 改变
        $("#click").click(function() {
            // 利用群组选择器更改div,p标签的文本颜色
            $("div,p").css("color","white");
            $("div,p").css("font-size","20px");
            $("p.div0").css("background-color","orange");
        })
    })
</script>

2、属性选则器的使用

2.1 基本属性选择器

名称	用法	描述
[attribute]	$("input[checked]").attr('checked",false);	匹配包含给定属性的元素。常用于单选或复选的checked
[attribute=value]	$("input[name="username"]").val("");	匹配给定的属性是某个特定值的元素。常用于选择指定的input标签。
[attribute!=value]	$("div[name="box"]).html("");	匹配给定的属性是不包含某个特定值的元素。
[attribute^=value]	$("div[class^="b"]").css("background","red");	匹配给定的属性是以某些值开始的元素。
[attribute*=value]	$("div[class*="b"]").css("background","red");	匹配给定的属性是以包含某些值的元素。

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 2px solid red;
            margin-right: 20px;
            display: flex;
            text-align: center;
            float: left;
        }
    </style>
</head>
<body>
    <button id="btn1">含有class的标签</button>
    <button id="btn2">含有class是box1的标签</button>
    <button id="btn3">含有class不是box1的标签</button>
    <button id="btn4">class以b开头的标签</button>
    <button id="btn5">class包含o的标签</button>
    <hr>
    <div>div标签</div>
    <div class="box1">class:box1</div>
    <div class="box1">class:box1</div>
    <div class="bex2">class:bex2</div>
    <div class="pox1">class:pox1</div>
    <div class="pox2">class:pox2</div>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("[class]").css("background-color","yellow")
            })
            $("#btn2").click(function(){
                $("[class='box1']").css("background-color","green")
            })
            $("#btn3").click(function(){
                $("div[class!='box1']").css("background-color","orange")
            })
            $("#btn4").click(function(){
                $("[class^='b']").css("background-color","blue")
            })
            $("#btn5").click(function(){
                $("[class*=o]").css("background-color","red")
            })
        })
    </script>
</body>

2.2 操作标签的属性

名称	用法	描述
标签属性方法	attr(name)/ attr(name. value)	读/写非布尔值的标签属性
标签属性方法	prop(name)/ prop(name,value)	读/写布尔值的标签属性
删除属性方法	removeAttr(name)/removeProp(name)	删除指定名字的属性
自定义属性	data()	读写标签的附加数据(data-*属性)

案例：

<table>
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="selectAll">全选
            </th>
            <th>课程名称</th>
            <th>所属</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>html</td>
            <td>web前端</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>html</td>
            <td>web前端</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>html</td>
            <td>web前端</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>html</td>
            <td>web前端</td>
        </tr>
    </tbody>
</table>
<script>
    // prop 布尔类型
    $(function(){
        // 全选/全不选
        $("#selectAll").click(function(){
            // 获取全选复选框的选中状态
            var isChecked=$("#selectAll").prop("checked")
            console.log(isChecked)
            // 获取下面的checkbox
            $("tbody input[type='checkbox']").prop("checked",isChecked)
        })

        // 单击下面的复选框
        $("tbody input[type='checkbox']").click(function(){
            // 第一个值 除了全选以外下面有多少个checkbox
            var length=$("tbody input[type='checkbox']").length
            // console.log(lenght)
            // 第二个值 还要获取被选中的checkbox的个数
            var count=$("tbody input[type='checkbox']:checked").length
            // console.log(count)
            // 判断lenght的值与count的值是否相等，如果相等，则全选的checkbox设置为选中状态
            console.log(length)
            console.log(count)
            if(count==length){
                $("#selectAll").prop("checked",true)
            }else{
                $("#selectAll").prop("checked",false)
            }
        })
    })
</script>

3、基本过滤选择器的使用

3.1 过滤选择器

这类选择器都带冒号：

名称	用法	描述
:eq (index)	$("li:eq(2)").css("color", "red"];	获取到的li元素中,选择索引号为2的元素，索引号index从0开始
:odd	$("li:odd").css("color","red");	获取到的li元素中,选择索引号为奇数的元素
:even	$("li:even").css("color", "red");	获取到的li元素中,选择索引号为偶数的
:first	$("tr:first").css("backgroundColor ","red");	匹配找到的第一个元索
:last	$("td:last").css("backgroundColor","red");	匹配找到的最后一个元素
:gt(index)	$("li:gt(3)").css("backgroundColor","red");	匹配所有大于给定索引值的元素
:lt(index)	$("li:It(3)").css("backgroundColor" ,"red");	匹配所有小于给定索引值的元素
:not(selector)	$("li:gt(3)"):not(":last")").css("backgroundColor", "red");	去除所有与给定选择器匹配的元素

<hr>
<input type="button" value="隔行变色" id="btn1">
<input type="button" value="数组下标为2" id="btn2">
<input type="button" value="第一行" id="btn3">
<input type="button" value="最后一行" id="btn4">
<input type="button" value="下标1之后，除了最后一行" id="btn5">
<script>
// 实现hover效果鼠标移动变色
$("tbody tr").mouseover(function(){
$(this).attr("class","hover")
})
$("tbody tr").mouseout(function(){
$(this).removeAttr("class","hover")
})

// 隔行变色
$("#btn1").click(function(){
$("tbody tr:odd").css("background-color","yellow")
})

// 数组下标为2
$("#btn2").click(function(){
$("tbody tr:eq(2)").css ("background-color","green")
})

// 第一行
$("#btn3").click(function(){
$("tbody tr:first").css ("background-color","blue")
})

// 最后一行
$("#btn4").click(function(){
$("tbody tr:last").css ("background-color","red")
})

// 第一行之后，除了最后一行
$("#btn5").click(function(){
$("tbody tr:gt(1):not(:last)").css ("background-color","red")
})
})
</script>

3.2 筛选选择器

根据内容来过滤页面元素。

名称	用法	描述
:contains()	$("td:contains("0")").css("backgroundColor","red");	匹配包含给定文本的元素。
:has(selector)	$("td:has("span")").css("backgroundColor","red");	匹配包含选择器所匹配的元素的元素
:empty	$("td:empty").css("backgroundColor","red");	匹配所有不包含子元素或者文本的空元素
:parent	$("td:parent").css("backgroundColor","red");	匹配含有子元素或者文本的元素

3.3 筛选选择器(方法)

名称	用法	描述
children(selector)	$("ul").children("li")	相当于$("ul>ll")，子类选择器
find(selector)	$("uI").find("li”);	相当于$(ul l""),后代选择器
siblings(selector)	$("#first").siblings("li");	查找兄弟节点，不包括自己本身。
parent()	$("#first").parent();	查找父亲
eq(index)	$("li").eq(2);	相当于$("li:eq(2)"),index从0开始
next()	s("li").next()	找下一个兄弟
prev()	s("li").prev()	找上一次兄弟

$(function(){
    // 给li标签绑定鼠标移入事件
    $("ul li").mouseover(function(){
        // 如何获取到当前鼠标移入的li标签，this
        // 给鼠标移入的li标签的opacity设置为1，将其他的兄弟标签li的opacity设置为0.5
        $(this).css("opacity",1).siblings().css("opacity",0.5)  //siblings()除了自己兄弟元素
    })
    $("ul li").mouseout(function(){
        $(this).css("opacity",1).siblings().css("opacity",1)
    })
})

4、可见性过滤选择器的使用

根据元素是否显示来选择

:hidden:匹配所有的不可见元素
:visible:匹配所有的可见元素

一般都是和一种类型的元素搭配使用

$("div:visible").hide(4000);把显示的div用4秒钟隐藏掉,

$("div:hidden").show("slow");把隐藏的div慢慢地显示出来。

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    #green{
        display: none;
        background-color: green;
    }
</style>
</head>
<body>
    <div></div>
    <div></div>
    <div id="green"></div>
    <input type="button" value="隐藏" id="btn1">
    <input type="button" value="显示" id="btn2">
    <script>
        $(function(){
            $("#btn1").click(function(){
                // $("div:visible")中:visible是用来获取可见的元素
                $("div:visible").hide(1000)//hide()隐藏
            })
            $("#btn2").click(function(){
                // $("div:hidden")中:hidden是用来获取隐藏的元素
                $("div:hidden").show(1000)//show()隐藏
            })
        })
    </script>
</body>