JQuery

唐阳飇

2023-12-01

JQuery

1. 介绍

JQuery，即JavaScript和Query(查询)，是辅助JavaScrip开发的js类库

JQuery的核心思想：write less，do more，实现了很多浏览器的兼容问题

JQuery免费开源，语法设计可以使开发更加便捷，例如操作文本对象，选择DOM对象，制作动画效果，事件处理，使用Ajax以及其他功能。

官网：jQuery

2. 核心函数

怎么为按钮添加相应函数

使用JQuery查询到标签对象
使用标签对象.click( function() { } )

在JQuey中$称为核心函数，能完成JQuery的很大功能，$() 就是调用这个函数

$作用：

传入参数为函数时，表示页面加载完成之后，相当于 window.onload = function() {}
传入是HTML字符串时，会给我们创建这个html对象
传入参数是选择器字符串时，

$("#id01")： id选择器，根据id查询标签对象

$(".class属性值")：类型选择器

$("标签名")：标签选择器
传入的是dom对象时，会把dom对象转化为JQuery对象

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQueryHello</title>
    
    <!-- 引入JQuery库-->
    <script type="text/javascript" src="../lib/jquery-3.5.1.js"> </script>
    <script type="text/javascript">
        /*
        alert($); 显示有值，函数，代表引入成功了,$是一个函数
        $( function () { })  ->   页面加载完之后，相当于 window.onload = function() {}
        var $btnObj = $("#btn01") ->  
        表示按id查询标签对象，返回的是JQuery对象，命名默认$开头，作用相当于document.getElementById("btn01");
        $btnObj.click()  ->   click()是个函数，即绑定单击事件，要传入一个函数
        */
        $( function () {
            //1.
            var $btnObj = $("#btn01");
            $btnObj.click(function () {
                alert("JQuery Hello Word");
            });
            //2. 用以前的方法就会很麻烦
            $("<div> <span>div里面的span01标签</span> </div>").appendTo("body");
        });
    </script>
</head>
<body>
<button id="btn01">SayHello</button>
</body>
</html>

其他函数：

jquery对象.click( function() { })：绑定单击事件，传入一个函数，这个也有this参数

jquery对象.css("...", "...")：设置和获取样式，一个属性，一个值

jquery对象.each( function() { })：遍历元素的方法，传入一个函数，是遍历做的工作

函数内部有个隐形参数this，就是当前操作的的dom对象

var $ch = $("checkbox:checked"); //筛选出表单复选框中选中的
for (var i = 0; i < $ch.length; i++) { //传统的
    alert($ch[i]); //取出来的是dom对象
}

$ch.each(function () {
    alert(this); //取出来的是当前dom对象
})

$(document).ready(function () { }) === $(function () { }) 等价都是页面加载完成后

$(":text").val() val()可以操作表单项的value属性值，传值就是设置，不传就是获取

3. Dom对象和JQuery对象

区别

Dom对象：上面那些document.方法得到的对象就是dom对象，alert显示object HTML标签名Element

JQuery对象：通过JQuery提供的API创建出来的对象，查询出来的对象，通过$包装的dom对象，alert显示object Object

使用上的区别：JQuery对象不能使用Dom对象的属性和方法，Dom对象也不能使用JQuery对象的属性和方法

JQuery对象本质是什么?

var $buttons = $("button");
for (var i = 0; i < $buttons.length; i++) {
    alert($buttons[i]);
}
// 显示是的object HTMLButtonElement，是个dom对象数组 + JQuery提供的一系列功能函数

相互转化

//dom -> jquery
1.先有dom对象  2. $(Dom对象)

//jquery -> dom
1.先有jquery对象  2.jquery对象[下标]

4. JQuery的选择器

⭐⭐⭐

基本选择器

#id 例如：$(“#btn01”)

element 例如：$(“div”)

.class 例如：$(“.myClass”)

* 全部

select1,select2,... 组合

说明：如果是p.myClass 代表必须是p标签而class属性是myClass

层级选择器

ancestor空格descendant 例如：找到form里面的所有input $("form input")

parent > child 例如：在给定的父元素下取子元素，注意只取子元素，孙子元素不取

prev + next 例如: 匹配所有紧接着prev元素后的一个(同辈)next元素 $("label + input")

prev ~ siblings 例如：匹配prev之后的所有(同辈的)siblings 元素（prev和siblings同辈）
```


<label> label1 </label>
<input type="text"/> 
<label> label2 </label>
<input type="password"/> 
<div> div </div>
<input type="file"/> 
```
基本过滤选择器

:first 获取第一元素，例如 $("li:first")

:last 最后一个元素

:not(selecter) 去除所以于给定选择器匹配的元素例如：不要选中的 $("input:not(:checked)") ，除了myClass类外的所有按钮$("button:not(.myClass)")

:even 匹配所有索引值为偶数的元素，从0开始计数例如：查找表格的1，3，5…行 $("tr:even")

:odd 匹配所有索引值为奇数的元素

:eq(index) 匹配给定索引值的元素，例如：查找表格第一行 $("tr:eq(1)")

:gt(index) 匹配大于给定索引值的元素

:lt(index) 匹配小于给定索引值的元素

:header 匹配类似h1, h2, h3…之类的标题元素

:animated 匹配所有正在执行动画效果的元素

上面的可以组合使用，例如：选择没有执行动画的最后一个标签 $("div:not(:animated):last")

内容过滤选择器

:contains(text) 匹配给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素

:parent 匹配含有子元素或者文本的元素 (非空)

:has(selector) 匹配含有选择器所匹配的元素的元素
```
<div> <p>Hello Word</p> </div>
<div> Hello Word </div>

```
属性过滤器选择器

[attribute] 匹配包含给定属性的元素，例如：$("div[id]")

[attribute]=value 匹配给定属性是某个特定值的元素

[attribute]!=value 匹配不含有指定的属性或属性不等于特定值的元素

这样写可以过滤有属性且不等于特定值：$("div[name][name!=Jack]")

[attribute]^=value 匹配给定属性是以某些值开始的元素，类似正则里面的

[attribute]$=value 匹配给定属性是以某些值结尾的元素

[attribute]*=value 匹配给定属性是以包含某些值的元素

[selector1][selector2][selector3] 复合属性选择器，需要同时满足多个条件时使用

表单过滤选择器 （以下为针对表单的）

:input 匹配所有input，textarea，select，button 元素，用的少

:text 匹配所有的单行文本框，例如： $(":text")

:password :radio :checkbox :submit :image

:reset :button :file ， :hidden 匹配不可见的元素或者type为hidden的元素

这些都是匹配表单中冒号后面的所有元素

表单对象属性过滤

:enable 匹配所有可用元素

:disabled 匹配所有不可用元素

这样就是不可用了：<input disabled="disabled" type="button" value/>

:checked 匹配所有选中的被选中的元素(复选框，单选框，不包括select中的option)

:select 匹配所有选中的option元素例如：$("select option:select")

5. JQuery元素的筛选

var $ps = $("p"); //先按照标签名查

//expr 就是selector选择器，上面的7类选择器都能用
//方法                  写到字符串里面
$ps.eq(index)      ==  :eq(index)
$ps.first()        ==  :first()
$ps.last()         ==  :last()
$ps.has(expr|ele)  ==  :has()
$ps.filter(expr|obj|ele|fn)  	    // 筛选出与指定表达式匹配的元素集合，多个表达式逗号隔开
$ps.is(expr|obj|ele|fn)     	    // 根据参数检查匹配元素集合，有一个元素符合返回true
$ps.not(expr|ele|fn)    == :not()   // 删除指定表达式匹配的元素

$ps.children([expr])    == parent>child // [可有可无]
$ps.find(expr|obj|ele)  == ancestor空格descendant 
$ps.next([expr])        == prev+next
$ps.nextAll([expr])     == prev~siblings
$ps.nextUntil([exp|ele][,fil]) // 查找当前元素之后的所有同步元素，直到遇到匹配的那个元素为止,区间

$ps.parent([expr])  	// 取得包含所有匹配元素的唯·一父元素的元素集合
$ps.prev([expr])  		// 取得一个包含匹配元素集合中每一个元素紧邻的前一个同辈元素的元素集合,与next()相反
$ps.prevAll([expr])  	// 前面全部，类似nextAll()
$ps.prevUntil([exp|ele][,fil])     // 类似nextUntil()
$ps.siblings([expr])               // 前后的所有同辈元素
$ps.add(expr|ele|html|obj[,con])   // 把add匹配的选择器的元素添加到当前的jquery对象中,一并返回

7. JQuery的属性操作

html() : 设置/获取起始标签和结束标签里面的内容，和dom对象里面的innerHTML属性一样

text() ：设置/获取起始标签和结束标签里面的文本，innerText一样

val() ：设置/获取表单项的value属性值，dom对象里面的value属性一样

不传参数是获取，传入是设置

val函数还能同时设计多个表单项的选中状态，批量操作复选框的选中状态

<script type="text/javascript">
    //val([" "]) 中间放想要选中的value的属性值
	$(":checkbox").val(["checkbox01","checkbox02"]);
    
    //还可以同时操作单选框复选框等
    $(":radio, :checkbox").val(["radio01", "checkbox01", "checkbox02"]);  
</script>

<input type="checkbox" name="test01" value="checkbox01"/> checkbox01
<input type="checkbox" name="test01" value="checkbox02"/> checkbox02
<input type="radio" name="test01" value="radio01"> radio01

attr() 可以获取/设置属性的值，传一个参数是获取指定属性的值，传入两个参数是设置属性的值，这个函数很强大，还可以操作非标准的属性，比如自定义属性：abc : abcValue…

不推荐操作checked，readOnly，selected，disabled…

prop() 和atter几乎一样，只推荐操作上面不推荐操作的

$(":checkbox:first").attr("name");  //操作上面的三个单选复选
$(":checkbox:first").attr("name", "abc");

//操作选中状态
$(":checkbox:first").attr("checked"); //输出 undefined，官方觉得这是一个错误,所以出来了prop
$(":checkbox:first").prop("checked"); //输出 false

$(":checkbox:last").attr("checked");  // checked
$(":checkbox:last").prop("checked");  // true，所以这个函数比较直观
$(":checkbox").prop("checked", true); // 全选

//复选框
<input type="checkbox" name="test01" value="checkbox01"/> checkbox01
<input type="checkbox" name="test01" checked="checked" value="checkbox02"/> checkbox02

8. DOM对象的增删改

内部插入

a.appendTo(b) 把a插入到b元素的末尾，成为最后一个子元素 , b可以是选择器

a.prependTo(b) 把a插入到b的子元素前面，成为第一个子元素
外部插入

a.insertAfter(b) 得到ba，同辈

a.insertBefore(b) 得到ab
替换

old.replaceWith(new) 用new替换掉old，new可以是content|fn ，注意顺序

new.replaceAll(old) 用new替换掉old，old可以是selector

这两个函数功能一样都是替换全部，只是参数位置不同，replaceAll不能看字面意思
删除

a.remove() 删除a

a.empty() 清空a标签里面的内容，标签还在

练习：动态删除添加表

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>

        <!-- js-->
        <script type="text/javascript" src="../lib/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(function () {
                //添加，创建行标签对象加入表格
                $("#addEmpButton").click(function () {
                    var empName = $("#empName").val();
                    var email = $("#email").val();
                    var salary = $("#salary").val();

                    //拼接
                    var $tr = $("<tr> <td>"+ empName +"</td> " +
                                "<td>"+ email +"</td> " +
                                "<td>" + salary +"</td> " +
                                "<td> <a href='deleteEmp?id=001'>Delete</a> </td></tr>");
                    $tr.appendTo($("#empTable"));

                    //给新添加的行数据中的a标签绑定删除事件
                    $tr.find("a").click(deleteTr)
                })
                $("a").click(deleteTr);
            });

            //复用的 删除函数
            var deleteTr = function() {
                var $deleteTr = $(this).parent().parent();
                if (confirm("确认删除"+ $deleteTr.find("td:first").text() +"吗？")) {
                    $deleteTr.remove();
                }
                return false;
            };
        </script>

    </head>
    <body>

        <!--动态添加表格的行记录-->
        <table id="empTable">
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>tom@qq.com</td>
                <td>5000</td>
                <td> <a href="deleteEmp?id=001">Delete</a></td>
            </tr>
        </table>

        <br/>
        <div id="formDiv">
            <h4>添加新员工</h4>
            <table align="center">
                <tr>
                    <td>name</td>
                    <td> <input type="text" name="empName" id="empName"/> </td>
                </tr>
                <tr>
                    <td>email</td>
                    <td> <input type="text" name="email" id="email"/> </td>
                </tr>
                <tr>
                    <td>salary</td>
                    <td> <input type="text" name="salary" id="salary"/> </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button id="addEmpButton" value="abc">submit</button>
                    </td>
                </tr>
            </table>
        </div>

    </body>
</html>

9. JQuery操作CSS

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加样式

offset() 获取/设置元素的坐标

<!-- css-->
div.myClass {
	border: 1px solid black;
}

<!-- js-->
$("div:first").addClass("myClass ") 
// 其实就是给div添加了class="myClass"属性，如果一开始有的话，还会继续添加进去，有两个值，中间空格分开
// 当然也可以添加多个，中间空格分开,removeClass()一样,不传参全部删掉
$("div:first").offset({
	top: 20,
	left: 50
});

<!-- html-->
<div> hhhh </div>

10. JQuery动画

基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏

toggle() 可见是隐藏，不可见就显示，来回切换

以上动画都可以传入参数，

第一个参数是动画执行的时长，以ms为单位（其实修改元素的宽高来实现动画的）

第二个参数是动画的回调函数，回调函数是动画执行完自动调用的函数。
淡入淡出动画

fadeIn() 淡入(慢慢可见) ,

fadeOut() 淡出(慢慢不可见)

fadeToggle() 淡入/淡出切换

这些方法也可以像上面一样传参！！

fadeTo() 在指定的时长内慢慢将透明度修改为指定的值，0就是不可见，1就是完全可见，第一个参数是时间，第二个是指定透明度，第三个是回调函数。

练习：商品的展开收缩演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test03</title>

        <style type="text/css">
            /* 后代选择器 用这个样式.showMore的标签里面 必须有a，a里面必须有span */
            .showMore a span {
                padding-left: 15px;
                background: url("../images/up.jpg")  no-repeat 1px 7px;
            }
            .showLess a span {
                padding-left: 15px;
                background: url("../images/down.jpg") no-repeat 1px 7px;
            }
            .promoted a {
                color: #F50;
            }
        </style>


        <script type="text/javascript" src="../lib/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            //一开始就显示六个，点击显示全部，在点击收起
            $(function () {
                //初始显示六个
                $("li:gt(5):not(:last)").hide();
                // 绑定显示/隐藏
                $("a:last").click(function () {
                    $("li:gt(5):not(:last)").toggle(); //切换状态

                    //1.按钮即a标签上面的字也要变化,首先要判断状态
                    var flag = $("li:gt(5):not(:last)").is(":hidden"); //是否隐藏
                    if (flag) {
                        $("div div").removeClass(); //先删除所有样式再添加
                        $("div div").addClass("showMore");
                        $("a:last span").text("点击展开全部品牌");

                        //去掉高亮
                        $("li:contains(佳能9)").removeClass("promoted");
                        $("li:contains(佳能2)").removeClass("promoted");
                    } else {
                        $("div div").removeClass();
                        $("div div").addClass("showLess");
                        $("a:last span").text("点击收起");

                        //全部展示的时候，要给打广告的品牌高亮
                        $("li:contains(佳能9)").addClass("promoted");
                        $("li:contains(佳能2)").addClass("promoted");
                    }

                    //2.一般标签上会有向上向下的图片，我们通过addClass()改样式就行了
                    return false;
                })
            })
        </script>

    </head>
    <body>
        <div class="SubCategoryBox" align="center">
            <ul type="none">
                <li><a href="...">佳能1</a> <i>(21341)</i></li>
                <li><a href="...">佳能2</a> <i>(13341)</i></li>
                <li><a href="...">佳能3</a> <i>(23141)</i></li>
                <li><a href="...">佳能4</a> <i>(213413)</i></li>
                <li><a href="...">佳能5</a> <i>(213131)</i></li>
                <li><a href="...">佳能6</a> <i>(213123)</i></li>
                <li><a href="...">佳能7</a> <i>(652341)</i></li>
                <li><a href="...">佳能8</a> <i>(24341)</i></li>
                <li><a href="...">佳能9</a> <i>(8135241)</i></li>
                <li><a href="...">佳能10</a> <i>(01341)</i></li>
                <li><a href="...">佳能11</a> <i>(121341)</i></li>
                <li><a href="...">其他品牌相机</a> <i>(14141414)</i></li>
            </ul>
            <div class="showMore">
                <a href="more.html"> <span>点击展开全部品牌</span> </a>
            </div>
        </div>
    </body>
</html>

11. JQuery事件的操作

页面加载完成后
```
$(function() { })
window.onload = function() {}
// 两个页面加载完之后，区别？
```
执行顺序？ jquery的先执行，原生的js后执行

jquery的页面加载完成之后是浏览器的内核解析完页面的标签创建好dom对象之后就会马上执行

原生的js的页面加载完之后，除了要等浏览器的内核解析完，页面的标签创建好DOM对象之后，还要等标签显示时需要的内容加载完成(例如iframe img)。

执行次数？

jquer注册页面加载几个执行几个，依次把所有注册的function顺序执行。

原生的js只执行最后一个赋值的函数，因为被覆盖了

其他常见事件 ⭐⭐⭐

click() 可以绑定/触发单击事件，传func是绑定，不传参数是触发

blur() change() …都是把前面的on去掉了，使用方法和上面一样。

mouseover() 鼠标移入事件

mouseout() 鼠标移出事件

mousemove() 鼠标移动事件

bind() 可以给元素一次性绑定一个或多个事件

one() 使用上和bind一样，但one函数绑定的事件只会响应一次

unbind() 和bind函数相反的操作，解除事件的绑定

live() 可以用来绑定选择器匹配的所有元素的事件，那怕这个元素是后面动态创建出来的也有效
```
//中间用空格隔开，会响应多次
$("#buttons01").bind("click mouseover", function () { });

//这两个事件只会响应一次
$("#buttons02").one("click mouseover", function () { });

//点击无效了，也可以移除多个，不传删除全部
$("#buttons01").unbind("click"); 

//先绑定h1，后面新创建的h1点击也有效
$("h1").live("click", function () { });
```
事件的冒泡

是指父子元素同时监听一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件中去响应。

如何阻止？再子元素事件函数体中，返回false，即可阻止事件的冒泡传递
事件对象

事件对象：是封装有触发的事件的一个js对象

怎么拿到/使用？在给元素绑定事件的时候，在事件的function(event) 参数列表添加一个参数，这个参数名习惯命名为event

我们可以在bind绑定多给我事件的时候，根据判断不同的事件做不同的工作
```
$("div").bind("click mouseover", function (event) {
    if (event.type == "click") {
        console.log("点击");
    }
    else {
        console.log("鼠标移入");
        event.pageX; //
        event.pageY;
    }
});
```

练习：选中大小图片

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test04</title>
        <script type="text/javascript" src="../lib/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#small").bind("mouseover mouseout mousemove", function (event) {
                    if (event.type === "mouseover") {
                        $("#showBig").show();
                    } else if (event.type === "mouseout") {
                        $("#showBig").hide();
                    } else {
                        $("#showBig").offset({
                            top: event.pageY + 10,  // +10，防止图片闪闪，但鼠标移动快了还会闪
                            left: event.pageX + 10
                        });
                    }
                });
            });

        </script>
    </head>
    <body>

        <img id="small" src="../images/small.jpg"/>
        <div id="showBig">
            <img src="../images/picture.jpg"/>
        </div>

    </body>
</html>

JQuery

JQuery

1. 介绍

2. 核心函数

3. Dom对象和JQuery对象

4. JQuery的选择器

5. JQuery元素的筛选

7. JQuery的属性操作

8. DOM对象的增删改

9. JQuery操作CSS

10. JQuery动画

11. JQuery事件的操作

相关阅读

相关文章

相关问答

相关文档