【JavaWeb】第五章 jQuery（上篇）

快来打我* 2023-10-08 17:11 35阅读 0赞

#### 文章目录 ####

*  1、jQuery介绍
 *  2、jQuery之Hello World！
 *  3、jQuery的核心函数
 *  4、jQuery对象和DOM对象的区别
 *  5、jQuery对象的本质
 *  6、jQuery基础选择器
 *  7、层级选择器
 *  8、基本过滤选择器

## 1、jQuery介绍 ##

*  jQuery，即JavaScript和Query(查询)，它是辅助JavaScript开发的类库，极大简化了JavaScript编程
 *  jQuery核心思想是write less,do more(写的更少，做的更多)，所以它实现了很多浏览器的兼容问题

## 2、jQuery之Hello World！ ##

不用jQuery，使用原生JavaScript，实现Hello World！

...
    <script type="text/javascript">
            window.onload = function(){
        
                var btnObj = document.getElementById("btnId");
                btnObj.onclick = function(){
        
                    alert("JS原生版Hello World!");
                }
            }
        </script>
    ...

使用jQuery以后：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
         //表示页面加载完成之后，相当于window.onload = function(){}
                var $btnObj = $("#btnId"); //表示按id查询标签对象
                $btnObj.click(function(){
          //绑定单击事件
                    alert("jQuery版的Hello World！");
                });
            });
    
        </script>
    
    </head>
    <body>
        <button id="btnId">SayHello</button>
    
    </body>
    </html>

**问题1：不引入js类库报错：**  
![在这里插入图片描述][0c27ad872f6f4a8fa4154fe011dd5d28.png]  
jQuery的版本下载网址：**[http://www.jq22.com/jquery-info122][http_www.jq22.com_jquery-info122]**

选择对应的版本引入或者下载后放到工程目录中即可：

百度压缩版引用地址:
    <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    
    微软压缩版引用地址:
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
    
    官网jquery压缩版引用地址:
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

解压后的两个jquery.js文件，jquery.js阅读起来方便，jquery.min.js则是压缩版jquery.js，加载的时候就很快，部署到网站上的时候自然是选择jquery.min.js

![在这里插入图片描述][bcb56557c8a8495eb6af66ac87160e73.png]

**问题2：jQuery中$是什么东西？**

*  $是一个函数

**问题3：如何为按钮添加响应函数的？**

*  使用jQuery查询到标签对象
 *  使用标签对象.click( function()\{\} )**;**

## 3、jQuery的核心函数 ##

$是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用这个函数

> **1) 传入参数为函数时，表示页面加载完成之后，相当于window.onload = function()\{\}**

...
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
    	$(function(){
        
    		alert("页面加载完成以后自动执行");
    	});

![在这里插入图片描述][219cff092d1e4c878e5c11b1aeccb0dd.png]

> **2) 传入参数为HTML字符串时，会帮我们创建html标签对象或元素节点对象**

//为了让结果在页面加载完成后显示，这里给外层套一个$(function()...
    
    $(function(){
        
    	//这里不用+号拼接，直接整体一个引号也行
    	$("<div>" + "<span>div1+span1</span>" + "<span>div1+span1</span>" + "</div>").appendTo("body");
    	//appendTo()方法直接加到body中
    });

运行效果：

![在这里插入图片描述][dadf7c9724584da8805caae086854a08.png]

> **3) 传入参数为选择器字符串时，根据这个字符串查找元素对象**

*  $(“\#id属性值”)；id选择器，根据id查询标签对象
 *  $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
 *  $(“.class属性值”); 类选择器，根据class属性查询标签对象

var $btnObj = $("#btnId");
    
    //注意执行时机，别页面还没加载就被当单语句执行了
    alert($("button").length);

> **4) 传入参数为DOM对象时，会把这个DOM对象转化为jQuery对象**

$(function(){
        
    	var btnObj = document.getElementById("btnId");
    	alert(btnObj);
    	alert( $(btnObj) );
    });

![在这里插入图片描述][f646abe5c080478bab6878c5e3cda5f8.png]  
![在这里插入图片描述][d8ed60bd29dc42b098d31e0f116468cf.png]

## 4、jQuery对象和DOM对象的区别 ##

**DOM对象：**

*  通过getElementById()方法查询出来的标签对象是Dom对象
 *  通过getElementsByName()方法查询出来的标签对象是Dom对象
 *  通过getElementsByTagName()方法查询出来的标签对象是Dom对象
 *  通过createElement()方法创建出来的对象是Dom对象
 *  Dom对象alert出来的效果很直观的可以看到标签信息  
    ![在这里插入图片描述][f646abe5c080478bab6878c5e3cda5f8.png]

**jQuery对象：**

*  通过jQuery提供的API创建出来的对象是jQuery对象
 *  通过jQuery包装的Dom对象是jQuery对象
 *  通过jQuery提供的API查询出来的对象是jQuery对象

//创建
    alert( $("<h1></h1>") );
    
    //包装
    alert( $(domObj) );
    
    //查询
    alert( $("button") );

![在这里插入图片描述][aa7758ae4a9646cc9075ff802639ab37.png]

> **在使用上的区别：**

jQuery对象不能使用Dom对象的属性和方法

//修改成功
    document.getElementById("btnId").innerHTML = "这是Dom对象的innerHTML属性";
    
    //修改失败
    $("#btnId").innerHTML = "这里会修改失败";

Dom对象也不能使用jQuery对象的属性和方法

//调用成功
    $("#btnId").click(function(){
        
    	alert("click是jQuery对象的方法");
    });
    
    //调用失败
    document.getElementById("btnId").click(function(){
        
    	alert("click是jQuery对象的方法");
    });

## 5、jQuery对象的本质 ##

**jQuery对象是Dom对象的数组+jQuery提供的一系列功能函数**

//验证
    var $btns = $("button");
    for(var i=0;i<$btns.length;i++){
        
    	alert( $btns[i] );
    }
    //输出结果是一个个的Dom对象
    //F12可以看到还有一系列的function()

> **Dom对象和jQuery对象的互转**

*  Dom对象转为jQuery对象：

var $obj = $(Dom对象);

*  jQuery对象转为Dom对象：

var domObj = jQuery对象[下标]

![在这里插入图片描述][a7c9bffe771d44fbbb64cddd7c5207e9.png]

## 6、jQuery基础选择器 ##

*  \#id根据给定的id匹配一个元素

$("#btnId")

*  element根据给定的元素名匹配所有的元素

<div></div>
    <div></div>
    <div></div>
    
    #("div");

*  .class根据给定的类匹配元素。一个元素可以有多个类，符合一个就能被匹配到

<div class="myClass">1</div>
    <div class="9527">2</div>
    <div>3</div>
    
    $(".myClass");

*  \*匹配所有元素

$("*");

举例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
        
                $("#btn01").click(function(){
        
                    //css()方法可以设置和获取样式
                    $("#one").css("background-color","blue");
                });
    
                $("#btn02").click(function(){
        
                    $("*").css("background-color","green");
                });
                //组合选择器
                $("#btn03").click(function(){
        
                    $("span,.two").css("background-color","#bbffaa");
                });
            });
    
        </script>
    </head>
    <body>
        <button id="btn01">标蓝id为one的元素</button><br/>
        <button id="btn02">标绿所有的元素</button><br/>
        <button id="btn03">选择所有span标签元素和和class属性为code的元素</button>
        <h1 id="one">标题1</h1>
        <span>span元素1</span>
        <span>span元素2</span>
        <img src="../.idea/event/right.png" class="code"/>
    
    </body>
    </html>

运行效果：  
![在这里插入图片描述][a598c87c516b420abce5b6a616fccd89.png]

## 7、层级选择器 ##

> **1） 在给定的祖先元素下匹配所有的后代元素，返回一个Array<Elements>**

//找到表单中所有的input元素（则父标签为form标签）
    $("form input");

//找到所有span标签中的h2元素
    
    <span>
    	<h2></h2>
    	<div>
    		<h2></h2>
    	</div>
    </span>
    <button></button>
    <h2></h2>
    
    ....
    $(function(){
        
    	alert($("span h2").length);
    });

运行结果：  
![在这里插入图片描述][2ad07d18cca74a96ab0ef517646b7049.png]

> **2）在给定的父元素下匹配所有的子元素**

注意和1）中的后代元素的区别

//找到所有span标签中h2的子元素
    
    <span>
    	<h2></h2> //子
    	<div>
    		<h2></h2> //孙
    	</div>
    </span>
    <button></button>
    <h2></h2>
    
    ....
    $(function(){
        
    	alert($("span > h2").length);
    });

![在这里插入图片描述][cd41d3667885495ca0bbe7aa003a44a3.png]

> **3）匹配紧接在prev元素后面的next元素**

//匹配所有紧跟在button标签后面的h2元素
    
    <span>
    	<h2></h2> //子
    	<div>
    		<h2></h2> //孙
    	</div>
    </span>
    <button></button>
    <h2></h2>
    <button></button>
    <h1></h1>
    <h2></h2>
    ....
    $(function(){
        
    	alert($("button + h2").length);
    });

![在这里插入图片描述][cd41d3667885495ca0bbe7aa003a44a3.png]

> **4）匹配prev元素之后的所有同辈xx元素（兄弟元素）**

$("prev ~ xx");

## 8、基本过滤选择器 ##

> **1）:first 获取第一个元素**

<ul>
    	<li>list item 1</li>
    	<li>list item 2</li>
    	<li>list item 3</li>
    	<li>list item 4</li>
    	<li>list item 5</li>
    </ul>
    
    ....
    $("li:first");

结果：

<li>list item 1</li>
    
    //alert($("li:first")[0].innerHTML);可验证

> **2）:last 获取最后一个元素**

alert($("li:last")[0].innerHTML);

![在这里插入图片描述][2fba36ec38954ccf8e291318148bdeda.png]

> **3）:not(选择器) 去除与给定选择器匹配的元素**

<ul>
    	<li id="9527">list item 1</li>
    	<li>list item 2</li>
    	<li>list item 3</li>
    	<li>list item 4</li>
    	<li>list item 5</li>
    </ul>
    
    ....
    
    //不要id为9527的li标签
    alert($("li:not(#9527)").length);

![在这里插入图片描述][5c5d67455bf140168f529b4d2e43c063.png]

> **4）:even匹配所有索引为偶数的元素，从0开始**

//匹配1.3.5行（索引0.2.4）
    
    $("li:even");

> **5）:odd匹配所有索引为奇数的元素，从0开始**

//匹配2.4.6行（索引1.3.5）
    
    $("li:odd");

> **6）:eq(index)匹配一个给定索引值的元素**

//匹配第二行
    
    $("li:eq(1)");

> **7）:gt(index)匹配所有大于给定索引值的元素**

//返回<li>list item 5</li>
    
    $("li:gt(3)");

> **8）:lt(index)匹配所有小于给定索引值的元素**

//查找第一第二行，即索引为0.1
    
    $("li:lt(2)");

> **9）:header匹配如h1、h2、h3等的标题元素**

<body>
    	<h1>header1</h1>
    	<p>段落1</p>
    	<h2>header2</h2>
    	<p>段落2</p>
    </body>
    
    .....
    $(":header").css("background","blue");

运行效果：  
![在这里插入图片描述][1d0c3d1b407c476899275e2469503d5e.png]

> **10）:animated匹配正在执行动画效果的元素**

$(":animated").css("background","blue");

//选择没有执行动画的最后一个div元素对象
    
    $("div:not(:animated):last").css("background","#bbffaa");

[0c27ad872f6f4a8fa4154fe011dd5d28.png]: https://img-blog.csdnimg.cn/0c27ad872f6f4a8fa4154fe011dd5d28.png
[http_www.jq22.com_jquery-info122]: http://www.jq22.com/jquery-info122
[bcb56557c8a8495eb6af66ac87160e73.png]: https://img-blog.csdnimg.cn/bcb56557c8a8495eb6af66ac87160e73.png
[219cff092d1e4c878e5c11b1aeccb0dd.png]: https://img-blog.csdnimg.cn/219cff092d1e4c878e5c11b1aeccb0dd.png
[dadf7c9724584da8805caae086854a08.png]: https://img-blog.csdnimg.cn/dadf7c9724584da8805caae086854a08.png
[f646abe5c080478bab6878c5e3cda5f8.png]: https://img-blog.csdnimg.cn/f646abe5c080478bab6878c5e3cda5f8.png
[d8ed60bd29dc42b098d31e0f116468cf.png]: https://img-blog.csdnimg.cn/d8ed60bd29dc42b098d31e0f116468cf.png
[aa7758ae4a9646cc9075ff802639ab37.png]: https://img-blog.csdnimg.cn/aa7758ae4a9646cc9075ff802639ab37.png
[a7c9bffe771d44fbbb64cddd7c5207e9.png]: https://img-blog.csdnimg.cn/a7c9bffe771d44fbbb64cddd7c5207e9.png
[a598c87c516b420abce5b6a616fccd89.png]: https://img-blog.csdnimg.cn/a598c87c516b420abce5b6a616fccd89.png
[2ad07d18cca74a96ab0ef517646b7049.png]: https://img-blog.csdnimg.cn/2ad07d18cca74a96ab0ef517646b7049.png
[cd41d3667885495ca0bbe7aa003a44a3.png]: https://img-blog.csdnimg.cn/cd41d3667885495ca0bbe7aa003a44a3.png
[2fba36ec38954ccf8e291318148bdeda.png]: https://img-blog.csdnimg.cn/2fba36ec38954ccf8e291318148bdeda.png
[5c5d67455bf140168f529b4d2e43c063.png]: https://img-blog.csdnimg.cn/5c5d67455bf140168f529b4d2e43c063.png
[1d0c3d1b407c476899275e2469503d5e.png]: https://img-blog.csdnimg.cn/1d0c3d1b407c476899275e2469503d5e.png