jquery

最新推荐文章于 2025-12-09 14:34:24 发布

原创最新推荐文章于 2025-12-09 14:34:24 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #servlet #java

本文介绍了jQuery中的三种初始化方法，并详细讲解了DOM与jQuery之间的转换方式。重点在于介绍jQuery选择器的功能，包括元素选择器和属性选择器，展示了如何精确选取需要操作的HTML元素。

1.jquery的3种方法

 //第一种

        $(function() {})

            //第二种

        $(document).ready(function() {



            })

            //第三种

        $().ready(function() {



        })

2.dom 和jQuery转换

//获取div
            //dom获取
            var a = document.querySelector("div")

            //jQuery
            var b = $("div")

            //打印
            //console.log(a)
            //console.log(b)

            //dom 和jQuery转换

            //dom>jQuery
            console.log(a.text())
            console.log($(a).text())

            //jQuery>dom
            console.log(b[0])
            console.log(b.get[0])

jquery引入

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

jQuery 选择器

在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。

关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

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" 结尾的元素

<!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>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
    div {
        width: 50px;
        height: 50px;
        border: 2px solid green;
        display: inline-block;
    }
</style>

<body>
    <input type="button" value="含有class标签的" id="aa1">
    <input type="button" value=" 含有class是box1的" id="aa2">
    <input type="button" value="含有class不是box1的" id="aa3">
    <input type="button" value="含有class，b开头的" id="aa4">
    <input type="button" value="含有class属性里有o的" id="aa5">
    <hr>
    <div>div</div>
    <div class="box1">box1</div>
    <div class="box1">box1</div>
    <div class="bex2">bex2</div>
    <div class="pox1">pox1</div>
    <div class="pox2">pox2</div>
    <script>
        $(function() {
            $("#aa1").click(function() {
                $("[class]").css("background-color", "red")
            })
            $("#aa2").click(function() {
                $("[class='box1']").css("background-color", "blue")
            })
            $("#aa3").click(function() {
                $("div[class!='box1']").css("background-color", "green")
            })
            $("#aa4").click(function() {
                $("[class^='b']").css("background-color", "purple")
            })
            $("#aa5").click(function() {
                $("[class*='o']").css("background-color", "yellow")
            })

        })
    </script>
</body>

</html>

点击第一个