Excel的主要功能概述
740
2022-05-30
jQuery 是一个快速、简洁的 JavaScript 框架,jQuery 设计的宗旨是 “write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
目录
一、认识jQuery
二、jQuery的使用
三、jQuery原理
四、 jQuery API三大特点
五、查找元素
1. 子元素过滤选择器(css选择器)
2. 基本过滤选择器(jQuery专属)
3. 内容过滤器(jQuery专属)
4. 可见性过滤(jQuery专属)
5. 表单元素过滤选择器(jQuery专属)
一、认识jQuery
jQuery 的核心特性是具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的 css 选择器,并且可对 css 选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件,且 jQuery 兼容各种主流浏览器。
jQuery 依旧执行 DOM 的增、删、改、查、事件绑定操作,可以说 jQuery 是 DOM 的延续;jQuery 对 DOM 操作的每一步都进行了简化,是用函数来解决一切问题(jQuery就是函数库)。
但是 jQuery只有PC端,没有移动端,而且只对 DOM 操作的每一步进行了简化,没有减少步骤,所以用的会越来越少。
二、jQuery的使用
到官网jQuery进行下载即可,下载版本后引入网页。
1. 将 jQuery 引入网页的方法
(1)将 jquery.js 文件下载到项目本地文件夹,用相对路径引入
(2)引入 CDN 网络中的 jquery.js 文件
CDN 网络可在全球范围共享一个文件;任意地区的一个客户端想用 CDN 网络中的文件时,CDN 网络都会从距离这个客户端网络最优的服务器下载资源给客户端。
//eg:微软提供的cdn网址:
举例:对比 DOM 与 jQuery 写法;
三、jQuery原理
1. 引入 jquery.js 文件后,会在内存中新增一种类型,包括:
(1)构造函数:创建该类型的子对象;
(2)原型对象:集中保管该类型所有子对象共用的方法。
2. 使用 jQuery 函数库中的函数时,需要先创建 jQuery 类型的子对象
//标准写法
var jq子对象=new jQuery(选择器);
//简写
var jq子对象=jQuery(选择器)
var jq子对象=$(选择器) //$相当于new jQuery 1.查找DOM元素 2.创建jQuery对象
只有 jQuery 子对象才能访问 jQuery 原型对象中的简化版共有方法。原生的 DOM 元素对象无权使用 jQuery 原型对象中的简化版函数。
3. jQuery 中事件处理函数里的 this
.click 会翻译为 .οnclick=function(){ ... },再执行,所以 .click() 中的 this,其实还是 .onclick 里的 this。与 DOM 中的 this 完全一样,都指向正在点击的当前原生 DOM 元素对象本身;jquery 中所有事件处理函数中的this都必须用 $() 包裹起来(包装),形成一个 jQuery 子对象,才可以使用 jQuery 函数库中的函数。
四、 jQuery API三大特点
1.自带for循环遍历
只对 jQuery 查找结果对象调用一次简化版函数,就可以自动遍历查找结果中每个 DOM 元素,自动为每个 DOM 元素应用多用的 DOM 操作
2.一个函数两用
和修改相关的函数,都既能用于修改新值,又能用于获取旧值;
调用函数时,没有传新值参数,函数默认执行获取旧值操作,
调用函数时,传了新值参数,函数自动改为执行修改为新值操作。
举例:有多个按钮,记录每个按钮的单击次数;
//为三个按钮绑定单击事件,记录单击次数
//DOM 4步
//1. 查找触发事件的元素
var $btn = $("button");
//2. 绑定事件处理函数
$btn.click(function () {
//3. 查找要修改的元素:本例中改当前按钮,所以用this
var $this = $(this);
//4. 修改元素
var n = parseInt(
$this.html().slice(9, -1)
);
n++;
$this.html(`click me(${n})`)
});
五、查找元素
jQuery 主要通过选择器的方式查找元素,除了原始 CSS 选择器之外,还添加了额外 jQuery 专属的选择器。
1. 子元素过滤选择器(css选择器)
:first-child
举例:使用子元素过滤选择器选择指定元素;
//查找每个ul中第一个li,让其字体颜色变为红色
$("ul>li:first-child").css("color", "red");
//查找每个ul中最后一个li,让其边框变为绿色
$("ul>li:last-child").css("border", "1px solid green");
//查找每个ul中处于偶数位置的,让其背景变为黄色
$("ul>li:nth-child(2n)").css("background", "yellow");
//查找每个ul中第2个li,添加蓝色阴影
$("ul>li:nth-child(2)").css("box-shadow", "0 0 10px blue");
//查找作为ul下唯一子元素的li,设置20px内边距
$("ul>li:only-child").css("padding", "20px");
2. 基本过滤选择器(jQuery专属)
先将所有符合要求的元素集中保存到一个大的集合中从0开始统一编号,按元素在集合中的统一编号来选择指定的元素。
:first
:last
:eq(i)
:lt(i)
:gt(i)
:even
:odd
举例:使用基本过滤选择器选择指定元素;
//查找第一个li,字体变化红色
$("li:first").css("color", "red");
//查找最后一个li,边框变为绿色
$("li:last").css("border", "1px solid green");
//查找处于(正常人眼)偶数位置的li,背景变为黄色
$("li:odd").css("background", "yellow");
//查找第2个li,添加蓝色阴影
$("li:eq(2)").css("box-shadow", "0 0 10px blue");
3. 内容过滤器(jQuery专属)
根据元素的内容不同来选择元素。
:contains(文本)
选择内容中包含指定文本关键字的元素
举例:使用内容过滤选择器选择指定元素;
×
//选择包含"提交"二字的按钮,变为绿色按钮
$("button:contains(提交)").css("background-color", "green");
//选中包含.close按钮的.alert元素,让它们变为红色的警告框
$(".alert:has(.close)").css("background-color", "red");
//选中不包含.close按钮的.alert元素,让它们变为绿色的警告框
$(".alert:not(:has(.close))").css("background-color", "green");
//选择内容为空的.alert元素,添加红色阴影
$(".alert:empty").css("box-shadow", "0 0 10px red");
//选择内容不为空的.alert元素,添加绿色阴影
$(".alert:parent").css("box-shadow", "0 0 10px green");
4. 可见性过滤(jQuery专属)
根据元素是否可见来选择元素;
:visible
举例:使用 :hidden 选择不可见的元素;
我同意本站的使用条款
//DOM 4步
//1. 查找触发事件的元素
$(":checkbox")
//2. 绑定事件处理函数
.click(function () {
//3. 查找要修改的元素
var $others = $(":input:not(:checkbox)")
//4. 修改元素
//如果当前checkbox是选中的
if (this.checked == true) {
// 则启用其他元素
$others.prop("disabled", false);
} else {
// 否则禁用其他元素
$others.prop("disabled", true);
}
})
JavaScript jQuery
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。