jQuery

于 2022-08-11 19:18:07 发布
阅读量173 收藏
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68618659/article/details/126290844
版权

        流行的JavaScript类库

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

jQuery特点：

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

jQuery编写格式：

//引入jquery样式文件：

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

// 编写入口函数

        $(function() {

           功能效果

        })

jQuery书写方法：

// $相当于jquery

        // 第一种写法

        $(document).ready(function() {

            })

            // 第二种写法

        $().ready(function() {

            })

            // 第三种写法

        $(function() {

        })

jquery与DOM的相互转换：

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

<body>
    <div>这是一个div</div>
    <script>
        $(function() {
            // 获取到div标签,获取的是DOM对象
            var div0 = document.querySelector("div")

            // 获取到div标签,获取的是jquery对象
            var div1 = $("div")

            //打印
            // console.log(div0)
            // console.log(div1)

            // 如何实现DOM对象和jquery对象的互相转换
            // 将DOM对象转换成jquery对象
            // console.log(div0.text())//报错不能用
            console.log($div0.text())

            // jquery对象如何转换成DOM对象
            // 第一种
            console.log(div1[0])
                // 第二种：get()
            console.log(div1.get(0))

        })
    </script>
</body>

</html>

基础选择器：

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

层次选择器：

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

总结:跟css的选择器用法一样，外层加$()。

<!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>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        .div_0 {
            width: 100px;
            height: 100px;
            background-color: rgba(165, 42, 42, 0.654);
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <input type="text" id="one">+
    <input type="text" id="two">=
    <input type="text" id="result" disabled>
    <input type="button" value="计算" id="btn">
    <hr>
    <input type="button" value="改变" id="btn2"><br>
    <div class="div_0">这是一个div标签</div>
    <p class="div_0">这是一个div标签</p>

    <script>
        $(function() {
            // 两个数的计算
            // 绑定单机事件
            $("#btn").click(function() {
                    // 实现加法运算
                    // 先获取到输入的两个数，val(): 可以获取到标签的value值
                    var fist = $("#one").val()
                    var sea = $("#two").val()
                    var result = parseInt(fist) + parseInt(sea)
                    $("#result").val(result)
                })
                // 改变
            $("#btn2").click(function() {
                // 利用群组选择器更改div，p标签的文本颜色
                $("div,p").css("color", "white")
                    // 利用交集选择器更改p标签的背景颜色
                $("p").css("background-color", "green")
            })
        })
    </script>
</body>

</html>

基本属性选择器：

名称用法描述
[attribute]$('input[checked]').attr('checked',false);匹配包含给定属性的元素。常用于单选或复选的checked
[attribute=value]s('input[name="username"]').val(");

匹配给定的属性是某个特定值的元

素。常用于选择指定的input标签。

[attribute!=value]$('div[name="box"').htmI(");匹配给定的属性是不包含某个特定值的元素
[attribute^=value]$('div[class^=“b"]').css("background" ,"red");匹配给定的属性是以某些值开始的元素
[attribute*=value]$('div[class*=“b"]).css("background" ,"red");匹配给定的属性是以包含某些值的元素
<!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>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin-right: 10px;
            display: flex;
            justify-content: 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">box1</div>
    <div class="box1">box1</div>
    <div class="bex2">bex2</div>
    <div class="pox1">pox1</div>
    <div class="pox2">pox2</div>
    <script>
        $(function() {
            $("#btn1").click(function() {
                $("[class]").css("background-color", "red")
            })
            $("#btn2").click(function() {
                $("[class='box1']").css("background-color", "green")
            })
            $("#btn3").click(function() {
                $("div[class!='box1']").css("background-color", "yellow")
            })
            $("#btn4").click(function() {
                $("[class^='b']").css("background-color", "blue")
            })
            $("#btn5").click(function() {
                $("[class*='o']").css("background-color", "orange")
            })
        })
    </script>
</body>

</html>

操作标签属性：

名称用法描述
标签属性方法attr(name) / attr(name, value)读/写非布尔值的标签属性
标签属性方法prop(name)/ prop(name, value)读/写布尔值的标签属性
删除属性方法removeAttr(name/removeProp(name)删除指定名字的属性
自定义属性data()读写标签的附加数据(data-*属性)
<!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>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        .div0 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .div2 {
            font-size: 20px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="div0" class="div0">这是一个div标签</div>
    <input type="checkbox" id="cd">
    <input type="button" value="点击">
    <script>
        $(function() {
            $("#div0").click(function() {
                $("#div0").attr("class", "div2")
            })
            $("input[type = 'button']").click(function() {
                console.log($("#cd").prop("checked"))
            })
        })
    </script>
</body>

</html>

过滤选择器：

名称用法描述
:eq (irdex)$("li:eq(2y").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)$(1Ii:lt(3).css('backgroundColor';,'red');匹配所有小于给定索引值的元素
:not(selector)$("li:gt(3):not(":last"")').css('backgroundColor ';,'red');去除所有与给定选择器匹配的元素
<!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>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        table {
            border: 1px solid black;
        }
        
        thead {
            border: 1px solid black;
            background-color: blue;
        }
        
        tbody tr td {
            border: 1px solid black;
        }
        
        .hover {
            background-color: rgba(255, 0, 0, 0.623);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="all">全选
                </th>
                <th>课程名称</th>
                <th>所属</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>html</td>
                <td>wed前段</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>CSS</td>
                <td>wed前段</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>javascript</td>
                <td>wed前段</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>jquery</td>
                <td>wed前段</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="奇数" id="btn1">
    <input type="button" value="索引号为n" id="btn2">
    <input type="button" value="第一个元素" id="btn3">
    <input type="button" value="最后一个元素" id="btn4">
    <input type="button" value="大于1" id="btn5">
    <input type="button" value="小于1" id="btn6">
    <input type="button" value="大于1和除最后一个以外的" id="btn7">
    <script>
        $(function() {
            //全选
            $("#all").click(function() {
                // 获取全选的复选框的选中状态
                var qx = $("#all").prop("checked")
                console.log(qx)
                    // 获取下面的checkbox
                $("table input[type='checkbox']").prop("checked", qx)
            })

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

            // 获取元素索引号为1的数，从0开始
            $("#btn2").click(function() {
                $("tbody tr:eq(1)").css("background-color", "blue")
            })

            // 匹配找到的第一个元素
            $("#btn3").click(function() {
                $("tbody tr:first").css("color", "green")
            })

            // 匹配找到的最后一个元素
            $("#btn4").click(function() {
                $("tbody tr:last").css("background-color", "red")
            })

            // 匹配大于给定的索引值的元素
            $("#btn5").click(function() {
                $("tbody tr:gt(1)").css("background-color", "pink")
            })

            // 匹配小于给定的索引值的元素
            $("#btn6").click(function() {
                $("tbody tr:lt(1)").css("background-color", "blue")
            })

            // 匹配大于给定的索引值和去除给定选择器匹配的元素元素
            $("#btn7").click(function() {
                $("tbody tr:gt(1):not(:last)").css("color", "red")
            })

        })
    </script>
</body>

</html>

 

忘川之鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery 选择器 xpath 语法应用
10-29
我们根据实例来解释JQuery选择器（selectors）中xpath几种常用的用法
jquery基础教程七 选择器(selectors 的xpath语法应用)
qsfwy的专栏
10-09 728
我们根据实例来解释jquery选择器（selectors）中xpath几种常用的用法 比如下面html代码&lt;ul&gt;&lt;li class="aaaa" title="ttt"&gt;li-1&lt;/li&gt;&lt;li class="bbbb"&gt;li-2&lt;/li&gt;&lt;li title="fffff"&
jquery xpath 选择器
xiaomin1991222的专栏
05-07 251
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script type="text/javascript" src="jquery-1.7.
jquery选择器---:eq(index)和xpath选择器--(xpath)[index]
Weeds的博客
10-22 583
长时间不用，容易忘记具体写法，为了便于以后查找，做个记录-----好记忆不如烂笔头 jquery: xpath： 更多选择器方式可以参考如下链接： jquery：https://www.runoob.com/jquery/jquery-ref-selectors.html path：https://blog.csdn.net/qq_41030861/art...
jQuery1.2后已删除XPath选择器支持
xinem的专栏
02-22 1252
在学习JQuery时发现XPath选择器不能用，在网上查了一下资料，发现自从jQuery1.2版本以后就不支持XPath了，如果想使用需要使用一个jQuery插件，插件大家可以在一下链接找到。  1.jQuery1.2更新日志http://docs.jquery.com/Release:jQuery_1.2#XPath_Compatibility_Plugin"Since XPath
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-1.9.1.js
最新发布
09-07
jquery-1.9.1版本
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery验证码
10-19
jQuery实现web开发验证码，无需后台验证。简单方便实用
xpath jquery_使用XPath-jQuery短语书在XPath和jQuery之间进行选择
cuyi7076的博客
06-26 1146
XML是一种受支持的Internet标准，用于对结构化数据进行编码，这种方式几乎可以通过任何编程语言轻松解码，甚至可以由人类使用标准文本编辑器来读取或编写。 许多应用程序，尤其是符合现代标准的Web浏览器，都可以直接处理XML数据。 常用缩略语 Ajax：异步JavaScript + XML API：应用程序编程接口 DOM：文档对象模型 W3C：万维网联盟 XHT...
利用Xpath和jQuery进行元素定位示例
weixin_34378045的博客
02-26 377
利用Selenium在做前端UI自动化的时候，在元素定位方面主要使用了XPATH和jQuery两种方法。XPATH作为主要定位手段，jQuery作为补充定位手段。因为在通过XPATH进行定位的时候，Selenium是通过游览器原生的API进行操作，更接近模拟用户的操作；而通过jQuery作为定位的时候，实质是向游览器发送一段JavaScript代码，虽然可以达到目的，但模拟效果不如前者。 以下列举...
xpath 及js/jQuery处理函数
编程圈子-谢厂节的博客
08-12 1458
jqueryvar $shadow = new Object(); /** 获取元素的xpath 特性： - 转换xpath为csspath进行jQuery元素获取 - 仅生成自然表述路径（不支持非、或） @param dom {String/Dom} 目标元素 @returns
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值