jQuery

原创

于 2024-04-27 18:00:34 发布 · 2.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

jQuery是一个快速、简洁的JavaScript库，由John Resig创建。它使得HTML文档遍历、事件处理、动画和Ajax等操作更加简单，同时提供了丰富的插件，可以快速开发交互性强的网页应用。jQuery已经成为最受欢迎的JavaScript库之一，被广泛应用于网页开发中。官方文档

一.jQuery是什么

1.基本介绍

jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom…
提供方法、events、选择器，并且方便地为网站提供 AJAX 交互
其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.
jQuery 实现了浏览器的兼容问题

2.jQuery原理示意图

原理示意图

二.jQuery基本开发步骤

1. 下载

下载地址

2. 导入

使用<script> </script> 标签导入

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

三.jQuery对象和DOM对象

1.jQuery对象

jQuery对象实际上是对dom对象的一层包装

比如： $(“#test”).html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery的方法

这段代码等价于DOM实现:document.getElementById(“id”).innerHTML;

jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用jQuery 里的方法: $(“#id”).html();
约定:如果获取的是jQuery对象,那么要在变量前面加上$,比如:var $v=jQuery对象 var v=Dom对象

2.DOM对象转成jQuery对象

对于一个 DOM 对象，只需要用$()把 DOM 对象包装起来，就可以获得一个 jQuery 对象了。
转成jQuery对象后就可以使用jQuery的方法

//实例
window.onload = function (){
   
   
            //演示通过dom对象来获取输入框的value
            //username就是dom对象
            var username = document.getElementById("username");
            alert("username value= " + username.value);

            //通过jquery对象来获取输入框的value
            //把username dom 对象转成 jquery对象
            var $username = $(username);
            //使用jquery的方法来获取value
            alert("$username value= " + $username.val())
        }

3.jQuery对象转成DOM对象

jQuery对象实际上是一个数组,可以通过[index]的方法,来得到对应的DOM对象
jQuery本身提供一种.get(index)方法得到对应的DOM对象

        window.onload = function (){
   
   
            //得到jquery对象
            var $username = $("#username");
            alert("$username value= " + $username.val())

            //准备把jquery对象->dom
            //(1)jquery是一个数组对象，封装了dom对象
            //(2)可以通过[index] 来获取，也可以通过get(index)
            //(3)一般来说 index 是 0
            //方式1
            // var username = $username[0];
            // alert(username)// 输出username 是 object HtmlInputElement
            // alert("username value=" + username.value);

            //方式2
            var username = $username.get(0);
            alert("username value~~~=" + username.value)
        }

四.jQuery选择器***

1.选择器介绍

选择器是jQuery核心,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器
jQuery选择器的优点

简洁的写法:
$(“tagName”) == document.getElementsByTagName(“tagName”)

完善的事件处理机制

2.基本选择器

基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class,和标签名来查找dom元素

#id
用法: $(“#myDiv”); 返回值单个元素的组成的
说明: 这个就是直接选择 html 中的 id=”myDiv”
Element
用法:$(“div”) 返回值集合元素
说明: element 其实就是 html 已经定义的标签元素,例如 div, input, a 等等
class
用法: $(“.myClass”) 返回值集合元素
说明: 这个标签是直接选择 html 代码中 class=”myClass”的元素或元素组(因为在同一html 页面中 class 是可以存在多个同样值的).
*
用法: $(“*”) 返回值集合元素
说明: 匹配所有元素,多用于结合上下文来搜索
selector1, selector2, selectorN
用法: $(“div,span,p.myClass”) 返回值集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中 p.myClass 是表示匹配元素 p class=”myClas

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器应用实例</title>
    <style type="text/css">
        div, span {
     
     
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
     
     
            width: 60px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
     
     
            //1. 改变 id 为 one 的元素的背景色为 #0000FF
            $("#b1").click(
                function () {
     
     
                    $("#one").css("background", "#0000FF");
                }
            )
            //2. 改变 class 为 mini 的所有元素的背景色为 #FF0033
            $("#b2").click(
                function () {
     
     
                    $(".mini").css("background", "#FF0033");
                }
            )
            //3. 改变元素名为 <div> 的所有元素的背景色为 #00FFFF
            $("#b3").click(
                function () {
     
     
                    $("div").css("background", "#00FFFF");
                }
            )
            //4. 改变所有元素的背景色为 #00FF33
            $("#b4").click(
                function (){
     
     
                    $("*").css("background", "#00FF33");
                }
            )
            //5. 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF
            $("#b5").click(
                function (){
     
     
                    $("#two,.mini,span").css("background", " #3399FF");
                }
            )

        })
    </script>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b3"/>
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF" id="b5"/>
<hr/>
<div id="one" class="mini">div id为one</div>
<div id="two">div id为two</div>
<div id="three" class="mini">div id为three</div>
<span id="s_one" class="mini">span  one</span>
<span id="s_two">span two</span>
</body>
</html>

3.层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

ancestor descendant
用法: $(”form input”) ; 返回值集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.
parent > child
用法: $(”form > input”) ; 返回值集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
prev + next
用法: $(”label + input”) ; 返回值集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素
prev ~ siblings
用法: $(”form ~ input”) ; 返回值集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且 siblings 匹配的是和 prev 同辈的元素,其后辈元素不被匹配. 注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery
中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器应用实例</title>
    <style type="text/css">
        div, span {
     
     
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
     
     
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
     
     

            //1. 改变 <body> 内所有 <div> 的背景色为 #0000FF
            $("#b1").click(function () {
     
     
                $("div").css("background", "#0000FF");
            })
            //2. 改变 <body> 内子 <div>[第一层div] 的背景色为 #FF0033
            $("#b2").click(
                function () {
     
     
                    $("body > div").css("background", "#FF0033");
                }
            )
            //3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
            $("#b3").click(
                function (){
     
     
                    $("#one + div").css("background", "#0000FF");
                }
            )
            //4. 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF
            $("#b4").click(
                function () {
     
     
                    $("#two ~ div").css("background", "#0000FF");
                }
            )
            //5. 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF
            $("#b5").click(
                function (){
     
     
                    $("#two").siblings("div").css("background", "#0000FF");
                }
            )
        })
    </script>
</head>
<body>
<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>
<hr/>
<div id="one" class="mini">
    div id为one
</div>
<div id="two">
    div id为two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>

<div id="three" class="mini">
    div id为three
    <div id="three01">
        id three01
    </div>
</div>


</body>
</html>

4.基本过滤选择器

:first
用法: $(“tr:first”) ; 返回值单个元素的组成的集合
说明: 匹配找到的第一个元素
:last
用法: $(“tr:last”) 返回值集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.
:not(selector)
用法: $(“input:not(:checked)”)返回值集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当 input 的 type=“checkbox”).
:even
用法: $(“tr:even”) 返回值集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js 的数组都是从 0 开始计数的. 例如要选择 table 中的行,因为是从 0 开始计数,所以 table 中的第一个 tr 就为偶数 0.
: odd
用法: $(“tr:odd”) 返回值集合元素
说明: 匹配所有索引值为奇数的元素,和:even 对应,从 0 开始计数.
:eq(index)
用法: $(“tr:eq(0)”) 返回值集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个 tr 元素.括号里面的是索引值,不是元素排列数.
:gt(index)
用法: $(“tr:gt(0)”) 返回值集合元素
说明: 匹配所有大于给定索引值的元素.
:lt(index)
用法: $(“tr:lt(2)”) 返回值集合元素
说明: 匹配所有小于给定索引值的元素.
:header(固定写法)
用法: $(“:header”).css(“background”, “#EEE”) 返回值集合元素
说明: 匹配如 h1, h2, h3 之类的标题元素.这个是专门用来获取 h1,h2 这样的标题元素.
:animated(固定写法) 返回值集合元素
说明: 匹配所有正在执行动画效果的元素

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础过滤选择器-应用实例</title>
    <style type="text/css">
        div,span{
     
     
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float:left;
            font-size: 17px;
            font-family:Roman;
        }

        div.mini{
     
     
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family:Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){
     
     

            //*****改变第一个 div 元素的背景色为 #0000FF
            $("#b1").click(
                function (){
     
     
                    // $("div:first").css("background", "#0000FF");
                    $("div:eq(0)").css("background", "#00FF00");
                }
            )

            //*****改变最后一个 div 元素的背景色为 #0000FF.
            $("#b2").click(
                function (){
     
     
                    $("div:last").css("background", "#0000FF");
                }
            )

            //***改变class不为 one 的所有 div 元素的背景色为 #0000FF
            $("#b3").click(
                function (){
     
     
                    $("div:not(.one)").css("background", "#0000FF");
                }
            )
            //********改变索引值为偶数的 div 元素的背景色为 #0000FF
            $("#b4").click(
                function (){
     
     
                    $("div:even").css("background", "#0000FF");
                }
            )
            //********改变索引值为奇数的 div 元素的背景色为 #0000FF
            $("#b5").click(
                function (){
     
     
                    $("div:odd").css("background", "#0000FF");
                }
            )

            //*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF

            $("#b6").click(
                function (){
     
     
                    $("div:gt(3)").css("background", "#0000FF");
                }
            )

            //改变索引值为等于 3 的 div 元素的背景色为 #0000FF

            $("#b7").click(
                function (){
     
     
                    $("div:eq(3)").css("background", "#0000FF");
                }
            )

            //**改变索引值为小于 3 的 div 元素的背景色为 #0000FF
            $("#b8").click(
                function (){
     
     
                    $("div:lt(3)").css("background", "#0000FF");
                }
            )

            //****改变所有的标题元素的背景色为 #0000FF
            $("#b9").click(
                function (){
     
     
                    $(":header").css("background", "#0000FF");
                }
            )

        });
    </script>
</head>
<body>
<h1>H1标题</h1>
<h2>H2标题</h2>
<h3>H3标题</h3>

<input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<hr/>
<div id="one" class=