JavaWeb (三) Jquery ：概述、jq核心函数、与dom对象的区别、jq选择器、元素筛选

深藏阁楼爱情的钟 2023-06-29 05:52 23阅读 0赞

### 个人博客网：[https://wushaopei.github.io/][https_wushaopei.github.io]    (你想要这里多有) ###

### 1、概述 ###

**1.1 什么是Jquery**

jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。

**1.2 JQuery核心思想！！！**  
它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。

**1.3 JQuery流行程度**  
    jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

**1.4 JQuery好处！！！**  
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

### 2、JQuery的初体验 ###

**2.1 需求：使用JQuery给一个按钮绑定单击事件?**

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
    
        // 	alert($); // 测试jquery引入是否成功！
        	$( function(){ // 它也是页面加载完成之后。相当于window.onload = function()
    		var $btnObj = $("#btnId"); // 根据id查找标签对象
    		$btnObj.click( function(){	// 绑定单击事件
    			alert("这是jquery的单击事件");
    		} );
    	} );
    
        // 	window.onload = function(){
        // 		var btnObj = document.getElementById("btnId");
        // 		btnObj.onclick = function(){
        // 			alert("这是js原生的单击事件");
        // 		}
        // 	}
        </script>
        </head>
        <body>
    
    	<button id="btnId">SayHello</button>
    
        </body>
    </html>

**2.2 常见问题？**

（1）使用jquery一定要引入jquery库吗？

答案：是的

（2）jquery中的$到底是什么？

答案：    是核心函数

（3）怎么为钮添加点击响应函数的？

答案：

1.   查找标签对象var $btnObj = $("\#btnId"); // 根据id查找标签对象
2.   通过对象.click( function()\{\} )    //绑定了单击事件

**2.3 使用jquery 一定要引入 jquery 库**

### 3、Jquery 核心函数 $() ###

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

**3.1、传入参数为  \[ 函数 \] 时：**

$(function(){}) 功能是 页面加载完成之后
        跟window.onload = function(){} 差不多

**3.2、传入参数为  \[ HTML 字符串 \] 时：**

$("<span>span1</span>").appendTo("body");

相当于

var spanObj = document.createElement(“span”);
    spanObj.innerHTML = “span1”;
    document.body.appendChild( spanObj );

**3.3、传入参数为  \[ 选择器字符串 \] 时：$(“\#id”)  **

var $btnObj = $( "#btn01" );//根据id查找标签对象

**3.4、传入参数为  \[ DOM对象 \] 时：**

var btnObj = document.getElementById("btn01");
    //         alert( btnObj );
            var $jqueryObj = $( btnObj );    // 把dom对象包装成为jquery对象
            alert( $jqueryObj );

### 4、 Jquery 对象和 dom 对象区分 ###

**4.1 什么是 jquery 对象，什么是 dom 对象**

（1）Dom 对象

1.  通过getElementById()查询出来的标签对象是Dom对象
2.  通过getElementsByName()查询出来的标签对象是Dom对象
3.  通过getElementsByTagName()查询出来的标签对象是Dom对象
4.  通过createElement() 方法创建的对象，是Dom对象

alert出来内容是：[object HtmlXxxElement]

（2）JQuery对象

1.  通过JQuery提供的API创建的对象，是JQuery对象
2.  通过JQuery包装的Dom对象，也是JQuery对象
3.  通过JQuery提供的API查询到的对象，是JQuery对象

alert出来内容是：[object Object]

**4.2 问题： JQuery 对象的本质是什么？**

jquery对象本质是一个dom对象的数组 + 一系列jquery的功能函数。

**4.3 Jquery 对象和don 对象使用 的区别？**

*          **dom**对象的属性，**jquery**对象不能使用。
 *          **dom**对象的函数，**jquery**对象也不能使用。
 *           **jquery**对象的属性和方法**dom**对象也不能使用。

**4.4 Dom对象和 Jquery 对象互转**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70][]

### 5、 Jquery选择权（重点） ###

**5.1 基本选择器（重点）**

![20200110195539443.png][]

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><span style="color:#f33b45;">#ID&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 选择器：</span></td> 
   <td>&nbsp; &nbsp; 根据id查找标签对象 &nbsp;</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">class &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 选择器：</span></td> 
   <td>.&nbsp;&nbsp; 根据class查找标签对象</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">element&nbsp;&nbsp;&nbsp; 选择器：</span></td> 
   <td>&nbsp;&nbsp;&nbsp; 根据标签名查找标签对象</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; 选择器：</span></td> 
   <td>&nbsp;&nbsp;&nbsp; 表示任意的，所的元素</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">selector1，selector2 组合选择器：</span></td> 
   <td>&nbsp;&nbsp;&nbsp; 合并择器1，选择器2的结果并返回</td> 
  </tr> 
 </tbody> 
</table>

组合选择器：

p.myClass

第一，标签名必须是p  
第二，它的class必须是myClass  
  
  **  5.2 层级选择器（重点）  
        ** ![20200110195859232.png][]

<table style="width:556px;"> 
 <tbody> 
  <tr> 
   <td><span style="color:#f33b45;">ancestor descendant&nbsp;&nbsp; &nbsp;后代择器&nbsp;&nbsp; &nbsp;：</span></td> 
   <td>在给定的祖先元素下匹配所的后代元素</td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#f33b45;">parent &gt; child&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 子元素择器：</span></p> </td> 
   <td>在给定的父元素下匹配所的子元素</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">prev + next &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;相邻元素择器：</span></td> 
   <td>匹配所紧接在 prev 元素后的 next 元素</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">prev ~ sibings &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;之后的兄弟元素择器：</span></td> 
   <td>匹配 prev 元素之后的所有 siblings 元素</td> 
  </tr> 
 </tbody> 
</table>

**5.3 过滤选择器**

![20200110200138981.png][]

:first				获取第一个元素
    :last					获取最后个元素
    :not(selector)			去除所与给定择器匹配的元素
    :even					匹配所索引值为偶数的元素，从 0 开始计数
    :odd					匹配所索引值为奇数的元素，从 0 开始计数
    :eq(index)				匹配一个给定索引值的元素
    :gt(index)				匹配所大于给定索引值的元素
    :lt(index)				匹配所小于给定索引值的元素
    :header				匹配如 h1, h2, h3之类的标题元素
    :animated				匹配所正在执行动画效果的元素

**内容过滤器：**

![20200110200205950.png][]

:contains(text)		匹配包含给定文本的元素
    :empty				匹配所不包含子元素或者文本的空元素
    :parent			匹配含子元素或者文本的元素
    :has(selector)   		匹配含择器所匹配的元素的元素

**属性过滤器：**

![20200110200228671.png][]

[attribute] 					匹配包含给定属性的元素。
    [attribute=value] 				匹配给定的属性是某个特定值的元素
    [attribute!=value] 				匹配所不含指定的属性，或者属性不等于特定值的元素。
    [attribute^=value] 				匹配给定的属性是以某些值开始的元素
    [attribute$=value] 				匹配给定的属性是以某些值结尾的元素
    [attribute*=value] 				匹配给定的属性是以包含某些值的元素
    [attrSel1][attrSel2][attrSelN]		        复合属性择器，需要同时满足多个条件时使用。

**表单过滤器:**

![20200110200256365.png][]

:input				匹配所 input, textarea, select 和 button 元素
    :text				匹配所 文本输入框
    :password			匹配所的密码输入框
    :radio			匹配所的单框
    :checkbox			匹配所的复框
    :submit			匹配所提交钮
    :image				匹配所img标签
    :reset				匹配所重置钮
    :button			匹配所input type=button <button>按钮
    :file				匹配所input type=file文件上传
    :hidden			匹配所不可见元素display:none 或 input type=hidden

**表单对象属性过滤器：**

![20200110200312157.png][]

:enabled			匹配所可用元素
    :disabled			匹配所不可用元素
    :checked			匹配所中的单，复，和下拉列表中中的option标签对象
    :selected			匹配所中的option

### 6、Jquery 元素筛选 ###

![20200110200349586.png][]

eq()			获取给定索引的元素			
    :eq()                   功能一样
    first()		        获取第一个元素				
    :first                  功能一样
    last()			获取最后一个元素					
    :last()                 功能一样
    filter(exp) 		留下匹配的元素	（进一步过滤）	
    is()			判断是否匹配给定的择器，只要一个匹配就返回，true
    has(exp)		返回包含匹配择器的元素的元素	
    :has()                  功能一样
    not(exp)		删除匹配择器的元素	
    :not()                  功能一样
    children(exp)		返回匹配给定择器的子元素			
    
    parent>child            功能一样
    find(exp)		返回匹配给定择器的后代元
    素
    			
    
    ancestor  descendant    功能一样
    next()			返回当前元素的下一个兄弟元素	
    							
    prev+next功能一样
    nextAll()		返回当前元素后面所的兄弟元素	
    prev~next               功能一样
    nextUntil() 		返回当前元素到指定匹配的元素为止的后面元素
    parent()		返回父元素
    prev(exp)		返回当前元素的上一个兄弟元素
    prevAll()		返回当前元素前面所的兄弟元素
    prevUnitl(exp)	        返回当前元素到指定匹配的元素为止的前面元素
    siblings(exp)		返回所兄弟元素	
    										prevAll()+nextAll()
    add()			把add匹配的选择器的元素添加到当前jquery对象中

[https_wushaopei.github.io]: https://wushaopei.github.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200110195430515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA==,size_16,color_FFFFFF,t_70
[20200110195539443.png]: https://img-blog.csdnimg.cn/20200110195539443.png
[20200110195859232.png]: https://img-blog.csdnimg.cn/20200110195859232.png
[20200110200138981.png]: https://img-blog.csdnimg.cn/20200110200138981.png
[20200110200205950.png]: https://img-blog.csdnimg.cn/20200110200205950.png
[20200110200228671.png]: https://img-blog.csdnimg.cn/20200110200228671.png
[20200110200256365.png]: https://img-blog.csdnimg.cn/20200110200256365.png
[20200110200312157.png]: https://img-blog.csdnimg.cn/20200110200312157.png
[20200110200349586.png]: https://img-blog.csdnimg.cn/20200110200349586.png