JQuery选择器_jq xpath-CSDN博客

本文链接：https://blog.csdn.net/myx20220713/article/details/126336232

什么是jquery

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

jqeury特点

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

jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

基本过滤器

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 从 0 开始计数，匹配所有索引值为偶数的元素
:odd 从 0 开始计数匹配所有索引值为奇数的元素
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素

使用jquery实现一个案例

<!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>
    <!-- 引入jQuery -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 10px;
            margin-top: 10px;
            display: none;
        }
    </style>
</head>
 
<body>
    <input type="button" id="click" value="显示">
    <div id="div1"></div>
    <div id="div2"></div>
</body>
<script>
    $(function() {
        $("#click").click(function() {
            // $("div").css("display", "block")
            $("div").show(2000)
        })
    })
</script>
 
</html>

效果图