jQuery学习记录一

布满荆棘的人生 2022-12-03 09:42 239阅读 0赞

# 前端应用框架 #

基础：HTML+CSS+JavaScript+BootStrap

框架：jQuery+VUE

# jQuery #

[jQuery][]是一个优秀的js函数库。jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。

## 优势 ##

1） 简化JS的操作

2） 浏览器兼容

3） 易扩展插件

## 版本差异 ##

jQuery1.x版本：兼容老版本的IE，文件的体积较大

jQuery2.x版本：部分IE8及以下版本不支持，文件较小，执行效率较高

jQuery3.x版本：完全不支持IE8及以下版本，提供新的API，提供体积更小的版本（不包括动画/Ajax的版本）

## 引入jQuery库 ##

从jQuery的官网[下载][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1OTM4NDY2_size_16_color_FFFFFF_t_70_pic_center]

*  压缩版本：对文件进行压缩处理，去掉多余的空格，去掉注释，体积更小。一般在生产环境中使用。
 *  未压缩版：保留多余的空格有良好的缩进，有注释，体积更大，一般在开发时使用。

引入js库的方式

1） 服务器本地库

*  开发测试时使用
       *  加重服务器的负担，上线不使用这种方式

2） CDN远程库

*  减轻服务器的负担
 *  上线项目使用比较靠谱的CDN资源库

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1OTM4NDY2_size_16_color_FFFFFF_t_70_pic_center 1]

# 核心函数 #

jQuery中提供了一个核心函数，函数名：jQuery或$

案例：

//js获得div
    			var jsDiv=document.getElementById("d01");	
    			console.log(jsDiv);
    			//根据id选择获得对应的元素
    			var jqDiv=jQuery("#d01");
    			console.log(jqDiv);
    			jqDiv=$("#d01");
    			console.log(jqDiv);

## jQuery.noConflict(\[ex\]) ##

通过该函数可以取消$函数的定义，实现多库共存。

jQuery.noConflict();//$函数失效
    			jqDiv=jQuery("#d01");
    			console.log(jqDiv);
    			var cxb=jQuery.noConflict();
    			jqDiv=cxb("#d01");
    			console.log(jqDiv);

## ready函数 ##

ready函数确保在页面加载完成之执行jQuery程序。件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。这个函数类似于js中的onload事件。

案例

//onload函数只能定义一次，如果多次定义，会被后面的覆盖
    			onload = function() {
        
    				var jsDiv = document.getElementById("d01");
    				console.log(jsDiv);
    			}
    			onload = function() {
        
    				console.log("---onload---");
    			}
    
    			$(document).ready(function() {
        
    				var div = $('#d01');
    				console.log(div);
    			});
    			$(document).ready(function() {
        
    				console.log("---ready1---");
    			});

ready函数的简化形式

//reay函数简化
    			$(function(){
        
    				//jQuery的代码
    				console.log("---ready2---");
    			});

## jQuery对象 ##

通过jQuery库获得的是jQuery的对象，之后jQuery对象才能使用jQuery的API,通过js的API获得的是js的对象。

![在这里插入图片描述][20200903095045578.png_pic_center]

### jQuery对象转成js对象 ###

jQuery对象内部维护一个数组，数组的内部封装js对象，通过访问这数组就可以获得对应的js对象。·

jQueryObj.get(index);

### js对象转成jQuery对象 ###

使用jQuery提供的核心函数对js对象进行包裹，可以获得对应的jQuery对象。

$(jsObj);

# jQuery中的选择器 #

jQuery对于元素的选择器进行了优化，采用类似于CSS选择器的语法对元素进行选择。

## 基本选择 ##

id选择器: \#id值

类选择器: .class值

元素选择器： element值

任意元素：\*

选择多个选择器的并集 :selector1,selector2,selectorN

选择多个选择器的交集:selector1 selector2 selectorN

案例

$(function(){
        
    				//获得所有的.clss元素
    			 var divs= $(".clss");
    			 console.log(divs);
    			});

## 层次选择器 ##

查找子元素，后代元素，兄弟元素的选择器。

包含选择器： selector1 selector2

直接包含：parent>child

prev+next: 匹配所有的紧接在prev元素后的next元素

prev~siblings:匹配prev元素之后的所有siblings元素

案例

var lis = $("#u01 li");
    				console.log(lis);
    				lis = $("#u01>li");
    				console.log(lis);
    
    				var li = $(".lis+li");
    				console.log(li);
    
    				var li = $(".lis~li");
    				console.log(li);

## 内容选择器 ##

:contains(text) ：选择包含指定内容的元素  
:empty ：获得空元素  
:has(selector) ：选择包含指定选择器的元素

案例

var p=$("p:contains('lucy')");
    console.log(p);

# jQuery操作DOM #

jQuery提供了很多对于DOM操作的API。通过DOM修改元素的属性。

## class属性 ##

addClass():向jQuery中添加样式

removeClass():移除样式

案例

//对id=addClassBtn绑定一个单击事件
    				$("#addClassBtn").click(function(){
        
    					var div=$("#d01");
    					div.addClass("class01");
    				});
    				//对id=removeClassBtn绑定一个单击事件
    				$("#removeClassBtn").click(function(){
        
    					var div=$("#d01");
    					div.removeClass("class01");
    				});

## css() ##

通过css(attr )可以获得指定attr的值，同时可以设置样式。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1OTM4NDY2_size_16_color_FFFFFF_t_70_pic_center 2]

案例

var width=$(".class02").css("width");
    					 console.log(width);
    					 $(".class02").css("fontSize","4em");
    					 $(".class02").css({
        "fontSize":"2em","color":"white"});

[jQuery]: https://jquery.com/
[Link 1]: https://jquery.com/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1OTM4NDY2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d0b40fe8f438459a9eb2a9036efefea1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1OTM4NDY2_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/db996439c6d14c7ab88a6f013181d352.png
[20200903095045578.png_pic_center]: /images/20221123/bd24c71c32ad43cfbf95beec6d73de41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1OTM4NDY2_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/d293fa84459d4d46978dae2a50a0985c.png