jQuery入门_尚硅谷张春胜-CSDN博客

本文链接：https://blog.csdn.net/weixin_45905210/article/details/121445261

文章目录

jQuery

jQuery

讲师：尚硅谷-张春胜

邮箱：zhangchunsheng_it@163.com

第1章： jQuery简介

为了简化 JavaScript 的开发，一些 JavsScript 库诞生了。 JavaScript库封装了很多预定义的对象和实用函数，简化HTML与JavaScript之间的操作，能帮助使用者建立有高难度交互的页面，并且兼容各大浏览器。
当前流行的 JavaScript 库有

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AME0RNig-1637412116893)(尚硅谷_张春胜_jQuery.assets/1556471892002.png)]

jQuery是继prototype之后又一个优秀的JavaScript框架。如今，**jQuery已经成为最流行的JavaScript库。**在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery，顾名思义，也就是JavaScript和查询（Query），其宗旨是**“WRITE LESS，DO MORE”**，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。具体来说，优势如下：
- jQuery是免费、开源的
- 轻量级(压缩后只有几十k)
- 强大的选择器
- 出色的 DOM 操作的封装
- 可靠的事件处理机制
- 完善的 Ajax使用
- 出色的多浏览器兼容性
- 隐式迭代：对集合对象做相同操作时不需要逐个进行遍历，jQuery自动进行遍历
- 文档说明很全
- 可扩展插件

第2章：jQuery快速入门

2.1 将jQuery的库文件加入应用

jQuery库实际上就是一个js文件，只需要在网页中直接引入这个文件就可以了。
将jQuery的库文件加入
- 在开发测试时, 用的是未压缩的版本: jquery-1.7.2.js
- 在上线项目中, 会使用压缩后的版本: jquery-1.7.2.min.js

2.2 HelloWorld

需求：使用jQuery给一个按钮绑定单击事件

<!-- 导入jQuery库-->
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    //调用jQuery库定义的函数
    //使用$()代替window.onload
	$(function(){
   
    	//根据id属性获取按钮对象，并绑定单击响应函数
		$("#btnId").click(function(){
   
            //弹出HelloWorld
			alert("HelloWorld");
		});
	});
</script>

<button id="btnId">ClickMe</button>

常见问题？
- 使用jquery一定要引入jquery库吗？
  
  答案：是，必须先引入
- jquery中的$到底是什么？
  
  答案：是一个函数名，这个函数是jQuery的核心函数。alert($)就知道了
- 怎么为按钮添加点击响应函数的？
答案：

1、先是页面加载完成之后

2、查找标签对象

3、通过标签对象.click(function(){}) 绑定事件

第3章：jQuery基本语法

3.1 jQuery源码初分析

(function( window, undefined ) {
   	//16行
	
	var jQuery = (function() {
   	//22行
	
		var jQuery = function( selector, context ) {
   
			// The jQuery object is actually just the init constructor 'enhanced'
			return new jQuery.fn.init( selector, context, rootjQuery );
		};
		
		jQuery.fn = jQuery.prototype = {
   	//97行
			constructor: jQuery,
			init: function( selector, context, rootjQuery ) {
   
				//...
			}	//207行
			
		};	//319行
	
		//...
		return jQuery;	//981行

	})();	//983行
	
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;	//9384行
	
})( window );	//9404行

说明：

自执行函数
给window添加了两个等同的函数： jQuery() / $()
执行$()后，返回的是一个jQuery库包装的对象，一般称之为：jQuery对象

3.2 jQuery核心函数： $()

jQuery库中为window对象定义了一个函数： jQuery()，简化为：$()
$是 j Q u e r y 的核心函数， * * j Q u e r y 的核心功能都是通过这个函数实现。 * *$ ()就是调用$这个函数。
$函数会根据参数数据类型的不同做不同的工作, 返回一个jQuery封装的伪数组的对象
核心函数有如下的四个作用：

3.2.1 传入参数为函数时：$(function(){})

传入一个function参数, 作为回调函数。相当于window.onload = function(){}
表示：在DOM文档载入完成后，回调函数自动执行
这个函数是 $(document).ready(function(){})的简写形式。（见jQuery文档 - 事件 - 页面载入）
它与window.onload是有区别的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dEcAJEWN-1637412116897)(尚硅谷_张春胜_jQuery.assets/1556616413659.png)]

源码聚焦

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hOOqLB9v-1637412116899)(尚硅谷_张春胜_jQuery.assets/1556616437086.png)]

3.2.2 传入参数为选择器字符串时： $(选择器字符串)

接收一个CSS选择器格式的字符串参数
根据这个选择器查找元素节点对象
根据此字符串在document中去匹配一组元素，并封装成jQuery对象返回

举例：

$("#id属性值"); 相当于通过id属性查找标签对象
$("标签名");  相当于通过标签名查找标签对象，返回集合
$(".class属性值");  相当于通过class属性查找标签对象，返回集合

源码聚焦

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kcNx2E2y-1637412116902)(尚硅谷_张春胜_jQuery.assets/1556616473239.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fxmz4jjC-1637412116905)(尚硅谷_张春胜_jQuery.assets/1556616480391.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6R42M8Ia-1637412116907)(尚硅谷_张春胜_jQuery.assets/1556616489655.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-packMOOq-1637412116910)(尚硅谷_张春胜_jQuery.assets/1556616496226.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y3Hwq9g4-1637412116912)(尚硅谷_张春胜_jQuery.assets/1556616504124.png)]

3.2.3 传入参数为HTML字符串时：$(HTML字符串)

接收一个标签字符串参数。
根据这个html字符串创建元素节点对象
创建对应的标签对象，并包装成jQuery对象

代码举例：

var $liEle = $("<li>香港</li>") //相当于创建了一个标签对象 <li>香港</li>。
$("#city").append($liEle); //将此jQuery对象添加到现有的jQuery对象中。
//相当于：
var liObj = document.createElement("li");//<li></li>
liObj.innerHTML = "香港"; //<li>香港</li>
document.ge