jQuery day01
作者:互联网
1. 什么是: jQuery
(1). 第三方开发的: 必须下载才能用
(2). 执行DOM操作的: jQuery还是执行DOM的增删改查+事件绑定操作。学习jQuery只是学习DOM的延续而已。
(3). 极简化的: jQuery对DOM操作的每一步都进行了简化。
(4). 函数库: jQuery中都是用函数来解决一切问题。
2. 为什么: 2个原因:
(1). 简单
(2). 解决了大部分浏览器兼容性问题。只要jQuery让用的,几乎都没有兼容性问题。
3. 何时: 从前很多旧的项目和框架都是用jQuery开发的!
4. 问题:
(1). 只有PC端,没有移动端。
(2). 简化的不彻底: 只对DOM操作的每一步进行了简化,但是没有减少步骤!
二. 如何使用jQuery:
1. 官网: jquery.com
2. 下载: 版本:
1.x 兼容旧浏览器
jquery-1.11.3.js
未压缩版: 带有完备的注释、代码格式,以及见名知意的变量名。——可读性好,适合学习和开发之用。——体积大,不便于快速下载运行,不适合生产环境
压缩版: 删除所有注释和代码格式,极简化了变量名。——体积小,便于快速下载运行,适合生产环境。——可读性差,不适合学习和开发之用。
2.x 不再兼容旧浏览器,但是,暂时也不兼容ES6
3.x 才开始支持ES6
3. 在页面中引入jquery: 2种:
(1). 将jquery.js文件下载到项目本地文件夹,用相对路径引入
<script src="js/jquery-1.11.3.js">
问题: 文件只保存在一个位置的服务器上。距离服务器近的用户访问当然快。但是,距离服务器很远的用户,访问就会慢。
(2). 引入CDN网络中的jquery.js文件
a. 什么是CDN网络: 内容分发网络。
b. 原理:
1). CDN网络可在全球范围共享一个文件
2). 任意地区的一个客户端想用CDN网络中的文件时,CDN网络都会从距离这个客户端网络最优的服务器下载资源给客户端。
c.如何: 官网->下载->CDN->自己想用的链接地址:
<script src="官网提供的CDN网址">
比如:微软提供的cdn网址:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.js">
示例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>jQuery/$工厂函数</h1> <button id="btn1">click me(0)</button> <script> //DOM 4步 //1. 查找触发事件的元素 //本例中: id为btn1的按钮触发事件 var btn=document.getElementById("btn1"); //2. 绑定事件处理函数 btn.οnclick=function(){ //3. 查找要修改的元素 //本例中: 就改this //4. 修改元素 //4.1 先取出当前按钮的内容中()中的数字,转为整数 var n=parseInt( this.innerHTML //click me(1123) //0123456789 -1 // |← →| .slice( 9 , -1) ); //4.2 将数字+1 n++; //4.3 再将数字拼接回原按钮的内容中 this.innerHTML=`click me(${n})`; // 格式与旧内容必须完全一致 } </script> </body> </html> 运行结果:
|
三. jQuery原理:
1. 引入jquery.js文件后,是在内存中新增了一种类型:
(1). 构造函数: 创建该类型的子对象
(2). 原型对象: 集中保管该类型所有子对象共用的方法
2. 只要想使用jQuery家简化版函数,必须先创建jQuery类型的子对象。
(1). 标准: var jq子对象=new jQuery(选择器);
(2). 简写: var jq子对象=jQuery(选择器)
(3). 更简化: var jq子对象=$(选择器) //$=jQuery
(4). 强调: 只有jq子对象才能访问jQuery原型对象中的简化版共有方法。而原生的DOM元素对象,无权使用jQuery原型对象中的简化版函数。
(5). 约定俗成: 凡是用$创建的jquery类型的子对象,命名时都要以$开头!以此和原生DOM家的元素对象区分。
3. 问题: jQuery家所有的函数几乎都是为了操作DOM元素而定义的。所以,调用jQuery函数都要操作DOM元素。可是,DOM元素从哪儿来?
解决: jQuery要求,每次创建jQuery子对象时,必须提供一个css选择器作为参数。jQuery构造函数会自动用选择器去DOM树中查找原生的DOM元素。取回来保存进新创建的jq子对象中。
4. 问题: 将来调用简化版函数时,使用jq子对象调用的。不是用原生的DOM元素调用的!简化版函数的操作,能不能作用到内部保存的原生的DOM元素上?
解决: 每当对jq子对象调用简化版函数时,简化版函数内部封装的都是原生的DOM操作。所以调简化版函数等效于调用原生的方法和属性,并最终作用到内部保存的元素对象上。
5. 问题: jQuery中事件处理函数里的this。
(1). 因为.click会被翻译为.onclick=function(){ ... },再执行。所以.click()中的this,其实最终还是.onclick里的this。与DOM中的this完全一样!都指向正在点击的当前原生DOM元素对象本身。所以,this无权使用jQuery家简化版函数。
(2). 解决: 今后,jquery中所有事件处理函数中的this都必须用$()包裹起来,形成一个jq子对象,才能有权利使用jQuery家的简化版函数。
标签:jQuery,函数,DOM,对象,简化版,day01,jq 来源: https://blog.csdn.net/lzw995189944/article/details/121733587