JQuery 基础笔记
- 1. jQuery 概述
- 1.1 jQuery 是什么?
- 1.2 jQuery 简单应用
- 1.3 jQuery 功能应用
- 1.4 jQuery 技术优势
- 1.5 jQuery 下载安装
- 1.6 jQuery 使用方法
- 1.7 jQuery 基本语法结构
- 1.8 jQuery 语法特性
- 2. jQuery 入口函数
- 2.1 jQuery 与JavaScript 加载模式对比
- 2.2 jQuery 其他写法
- 2.3 解决$符号冲突问题
- 2.3.1 释放 $ 使用权
- 2.3.2 自定义访问符号
- 2.4 jQuery 核心函数
- 3. DOM 对象和 jQuery 对象
- 3.1 DOM 对象和 jQuery 对象区别
- 3.2 DOM 对象和 jQuery 对象转化
- 3.3 DOM 对象和 jQuery 对象的获取
- 3.4 DOM 对象和 jQuery 对象的练习
- 3.5 jQuery 对象的本质
- 4. jQuery 选择器
- 4.1 基础选择器
- 4.2 层次选择器
-
- 4.3 属性选择器
- 4.4 过滤选择器
- 4.4.1 基本过滤选择器
- 4.4.2 可见性过滤选择器
- 4.4.3 内容过滤性选择器
- 5. jQuery Class 操作
- 5.1 Class 类操作
- 5.1.1 addClass
- 5.1.2 removeClass
- 5.1.3 toggleClass
- 5.2 jQuery 文本操作
- 5.2.1 html
- 5.2.2 text
- 5.2.3 `html()` 和 `text()` 的区别
- 5.2.4 val
- 5.3 jQuery CSS 样式
- 5.3.1 css 方法
- 5.3.2 width 方法
- 5.3.3 height 方法
- 5.4. jQuery 元素位置
- 5.4.1 offset 方法
- 5.4.2 position 方法
- 5.5 jQuery scroll 方法
- 5.5.1 scrollTop 方法
- 5.5.2 scrollLeft 方法
- 6. jQuery 属性操作
- 6.1 属性与属性节点
- 6.1.1 什么是属性?
- 6.1.2 如何操作属性?
- 6.1.3 什么是属性节点?
- 6.1.4 如何操作属性节点?
- 6.1.5 属性和属性节点有什么区别?
- 6.2 属性节点方法
- 6.2.1 attr 方法
- 6.2.2 removeAttr 方法
- 6.2.3 prop 方法
- 6.2.4 removeProp 方法
- 6.2.5 attr 方法和 prop 方法区别
- 7. jQuery DOM 操作
- 7.1 常见的 DOM 操作
- 7.2 DOM 节点操作
- 7.2.1 创建 DOM 节点
- 7.2.2 插入 DOM 节点
- 7.2.3 删除 DOM 节点
- 7.2.4 替换节点
- 7.2.5 复制节点
- 7.2.6 包裹节点
- 7.2.7 遍历节点
- 7.3 jQuery DOM 操作练习
-
- 8. 事件机制
- 8.1 事件注册
- 8.2 事件绑定
- 8.3 事件解绑
- 8.4 事件坐标
- 8.5 事件冒泡
- 8.6 默认行为
- 8.7 自动触发事件
- 8.8 自定义事件
- 8.9 事件命名空间
- 8.10 事件委托
- 8.10.1 什么是事件委托
- 8.10.2 事件委托的好处
- 8.10.3 jQuery 中添加事件委托
- 8.10.4 事件的委托注册
- 8.11 移入移出事件
- 8.11.1 mouseenter/mouseleave
- 8.11.2 mouseover/mouseout
- 8.11.3 hover
- 9. jQuery 动画
- 9.1 常见动画类型
- 9.2 显示与隐藏动画
- 9.2.1 show
- 9.2.2 hide
- 9.2.3 toggle
- 9.3 展开与收起动画
- 9.3.1 slideDown
- 9.3.2 slideUp
- 9.3.3 slideToggle
- 9.4 淡入淡出动画
- 9.4.1 fadeIn
- 9.4.2 fadeOut
- 9.4.3 fadeToggle
- 9.4.4 fadeTo
- 9.5 通用动画函数
-
- 9.6 多动画的组合
- 9.7 动画队列
- 9.8 动画相关方法
-
- 9.9 动画的结束
- 9.10 动画练习
-
- 10. jQuery 静态方法
- 10.1 什么是静态方法
- 10.2 jQuery.holdReady()
- 10.3 each 方法
- 10.4 map 方法
- 10.5 filter 方法
- 10.6 find 方法
- 10.7 each 与 map 区别
- 10.8 type 方法
- 10.9 trim 方法
- 10.10 isWindow 方法
- 10.11 isArray 方法
- 10.12 inArray 方法
- 10.13 isFunction 方法
- 10.14 parseJSON 方法
- 10.15 makeArray 方法
- 10.16 extend 方法
- 10.17 fn.extend 方法
- 11. jQuery 的 Ajax
- 11.1 Ajax 的定义
- 11.2 异步刷新的作用
- 11.3 Ajax 和 传统 web 区别
- 11.4 Ajax 异步请求原理
- 11.5 jQuery 的 Ajax 请求
- 11.6 Ajax 请求方法的语法
- 11.7 get 请求方法的语法
- 11.8 load 请求方法的语法
- 11.9 getJSON 请求方法的语法
- 12. jQuery 异步请求 Ajax
- 12.1 跨域问题
- 12.2 跨域问题的解决
- 12.3 Ajax 练习
-
- 13. 总结
1. jQuery 概述
1.1 jQuery 是什么?
- jQuery 由美国人 John Resig 于2006年创建
- jQuery 是目前最流行的 JavaScript 程序库之一,它是对
JavaScript 对象和函数的封装
- 它的设计思想是
write less,do more
,能对 HTML 文档遍历和操作,事件处理,动画以及 Ajax 变得更加简单
1.2 jQuery 简单应用
window.onload = function (ev) {
// 1.利用原生的JS查找DOM元素
var div1 = document.getElementsByTagName("div")[0];
var div2 = document.getElementsByClassName("box1")[0];
var div3 = document.getElementById("box2");
// 2.利用原生的JS修改背景颜色
div1.style.backgroundColor = "red";
div2.style.backgroundColor = "blue";
div3.style.backgroundColor = "yellow";
}
$(document).ready(function(){
// 查询,操作 CSS 一步到位
$("div").eq(0).css('background','red');
$(".one").eq(0).css('background','blue');
$("#two").css('background','yellow');
});
1.3 jQuery 功能应用
强大的选择器
- 方便快速查找 DOM 元素
- jQuery 允许开发者使用
CSS1-CSS3
几乎所有的选择器,以及 jQuery 独创
的选择器
样式操作
事件处理
- DOM 操作(C增U改D删)
- 隐式遍历(迭代)
- 读写合一
- 扩展新的
jQuery插件
- 与
Ajax
技术完美结合 浏览器兼容
(建议学习1.x
版本)
版本 | 兼容性 |
---|
1.x | 兼容ie678 ,但相对其它版本文件较大,官方只做BUG维护,功能不再新增,最终版本:1.12.4 |
2.x | 不兼容ie678 ,相对1.x文件较小,官方只做BUG维护,功能不再新增,最终版本:2.2.4 |
3.x | 不兼容ie678 ,只支持最新的浏览器,很多老的jQuery插件不支持这个版本,相对1.x文件较小,提供不包含Ajax/动画API版本 |
1.4 jQuery 技术优势
体积小
,压缩后只有100KB
左右- 强大的
选择器
- 出色的
DOM封装
- 可靠的
事件处理机制
- 出色的
浏览器兼容性
- 使用
隐式迭代简化编程
- 丰富的
插件支持
1.5 jQuery 下载安装
1.6 jQuery 使用方法
名称 | 大小 | 说明 |
---|
jQuery-1.版本号.js(开发版) | 约268KB | 完整无压缩版本,主要用于测试,学习和开发 |
jQuery-1.版本号.min.js(发布版) | 约91KB | 经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目 |
<script src="js/jquery-3.1.0.js" type="text/javascript"></script>
1.7 jQuery 基本语法结构
工厂函数 $()
选择器 selector
方法 action()
$(selector).action()
$("#current").addClass("current")
1.8 jQuery 语法特性
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery(function(){...})
jQuery 链式调用
- jQuery 可以通过
.
不断调用 jQuery 对象的方法
,而原生 JavaScript 则不一定
// 1.原生JavaScript
var div = document.getElementsByTagName("div");
// 报错,必须分开写
div[0].style.backgroundColor = "red".width = 200+"px";
// div[0].style.width = 200+"px";
// 2.jQuery
$(document).ready(function () {
// 不报错,后面还可以接着继续写
$("div").eq(1).css('background', 'yellow').css('width', '200px');
});
// 1.原生JavaScript
var div = document.getElementsByTagName("div");
// div.style.backgroundColor = "red";// 无效
for(var i = 0; i<div.length; i++){
div[i].style.backgroundColor = "red";
}
// 2.jQuery
$(document).ready(function () {
// 隐式遍历(迭代)找到的所有div
$("div").css('background', 'yellow');
});
$(document).ready(function () {
// 读取数据
var $tx = $("div").eq(0).text();
alert($tx);
// 写入数据
$("div").eq(0).text("新的数据");
});
2. jQuery 入口函数
2.1 jQuery 与JavaScript 加载模式对比
原生JS
会等到DOM元素加载完毕
,并且图片也加载完毕
才会执行jQuery
会等到DOM元素加载完毕
,但不会等到图片也加载完毕
就会执行
1. js 原生入口函数
window.onload = function (ev) {
// 1.通过原生的JS入口函数可以拿到DOM元素
var images = document.getElementsByTagName("images")[0];
// 2.通过原生的JS入口函数可以拿到DOM元素的宽高
var width = window.getComputedStyle(images).width;
}
=============================================================
2. jQuery 入口函数
$(document).ready(function () {
// 1.通过jQuery入口函数可以拿到DOM元素
var $images = $("images");
// 2.通过jQuery入口函数不可以拿到DOM元素的宽高
var $width = $images.width();
});
原生JS
如果编写了多个入口函数
,后面编写的会覆盖
前面编写的jQuery
中编写多个入口函数
,后面的不会覆盖
前面的
1. 原生 js
window.onload = function (ev) {
alert("hello lnj1");// 不会显示
}
window.onload = function (ev) {
alert("hello lnj2");// 会显示
}
===================================
2. jQuery
$(document).ready(function () {
alert("hello lnj1");// 会显示
});
$(document).ready(function () {
alert("hello lnj2");// 会显示
});
jQuery 不会覆盖的本质
- jQuery 框架本质是一个
闭包
- 每次执行都会给
ready函数
传递一个新的函数
,不同函数内部的数据不会相互干扰
为何能访问$符号
- 因为
$
符号 jQuery 框架对外暴露的一个全局变量
为何 window.jQuery = window.$ = jQuery;
- jQuery框架
不仅提供了jQuery访问还提供$访问
,提升开发者的编码效率
JavaScript中如何定义一个全局变量?
- 所有
全局变量
是 window 对象
的属性 - jQuery 框架源码实现
window.jQuery = window.$ = jQuery;
| window.onload | $(document).ready() |
---|
执行时机 | 必须等待网页全部加载完毕(包括 图片等) ,然后再执行包裹代码 | 只需要等待网页中的DOM结构加载完毕 ,就能执行包裹的代码 |
执行次数 | 只能执行一次 ,如果第二次,那么第一次的执行会被覆盖 | 可以执行多次 ,第N次都不会被上一次覆盖 |
2.2 jQuery 其他写法
// 1.第一种写法
$(document).ready(function () {
alert("hello lnj");
});
// 2.第二种写法
jQuery(document).ready(function () {
alert("hello lnj");
});
// 3.第三种写法(推荐)
$(function () {
alert("hello lnj");
});
// 4.第四种写法
jQuery(function () {
alert("hello lnj");
});
2.3 解决$符号冲突问题
2.3.1 释放 $ 使用权
- 当便捷访问符号发生
冲突
时,可以释放$使用权
注意点
- 释放操作必须在
其它jQuery代码之前
编写 - 释放之后就
不能再使用$,改为使用jQuery
jQuery.noConflict();
2.3.2 自定义访问符号
// 2.自定义一个访问符号
var nj = jQuery.noConflict();
nj(function () {
alert("hello lnj");
});
2.4 jQuery 核心函数
<script>
$();//jQuery原理();就代表调用jQuery的核心函数
// 1.接收一个函数
$(function () {
alert("hello lnj");
// 2.接收一个字符串
// 2.1接收一个字符串选择器
// 返回一个jQuery对象, 对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
// 2.2接收一个字符串代码片段
// 返回一个jQuery对象, 对象中保存了创建的DOM元素
var $p = $("<p>我是段落</p>");
$box1.append($p);
// 3.接收一个DOM元素
// 会被包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName("span")[0];
var $span = $(span);
});
</script>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我是span</span>
</body>
3. DOM 对象和 jQuery 对象
3.1 DOM 对象和 jQuery 对象区别
var objDOM = document.getElementById("title");
var objHTML = objDOM.innerHTML;
jQuery对象
- 使用 jQuery 包装 DOM 对象后产生的对象,能够使用 jQuery 中的
方法
$("#title").html();
等同于
document.getElementById("title").innerHTML;
- DOM 对象和 jQuery 对象分别拥有一套
独立
的方法,不能混用
3.2 DOM 对象和 jQuery 对象转化
- 使用
$()函数
进行转化:$(DOM对象)
jQuery
对象命名一般约定以$开头
var txtName = document.getElementById("txtName"); //DOM对象
var $txtName = $(txtName); //jQuery对象
3.3 DOM 对象和 jQuery 对象的获取
- jQuery 对象是一个
类似数组
的对象,可以通过[index]
的方法得到相应的DOM对象
var $txtName = $("#txtName"); // jQuery对象
var txtName = $txtName[0]; // DOM对象
var $txtName = $("#txtName"); // jQuery对象
var txtName = $txtName.get(0); // DOM对象
3.4 DOM 对象和 jQuery 对象的练习
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="../jquery-3.5.1.js"></script>
<script>
$(function(){
// $('#d1') #的使用不能遗漏
// 结论:jQuery 和 DOM 对象各有自己的属性和方法,不能混用
var div = document.getElementById('d1')
div.innerHTML = 'hello'
// div.style.backgroundColor = '#ff0'
var $div = $(div) // 把 DOM 对象转换成 jQuery 对象
$div.css('background','#00f')
// div.css('background','#0f0') // DOM 对象不具有 jQuery 方法
$div.innerHTML = 'jQuery' // jQuery 对象不具有 DOM 的属性方法
var newDiv = $div[0] // 把 jQuery 对象转换成 DOM 对象方法一
// var newDiv = $div.get(0) // 把 jQuery 对象转换成 DOM 对象方法二
console.log($div)
console.log(newDiv)
})
</script>
<body>
<div id="d1"></div>
</body>
3.5 jQuery 对象的本质
var $div = $("div");
console.log($div);
var arr = [1, 3, 5];
console.log(arr);
什么是伪数组
- 有
0 到 length-1
属性 - 并且有
length
属性
var obj = {0:"lnj", 1:"33", 2:"male", length: 3}
4. jQuery 选择器
4.1 基础选择器
- 基本选择器包括
标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
名称 | 语法构成 | 描述 | 示例 |
---|
标签 选择器 | element | 根据给定的标签名 匹配元素 | $(“h2”)选取所有h2元素 |
类 选择器 | .class | 根据给定的class 匹配元素 | $(".title")选取所有class为title的元素 |
ID 选择器 | #id | 根据给定的id 匹配元素 | $("#title")选取id为title的元素 |
并集 选择器 | selector1,selector2,…,selectorN | 将每一个选择器匹配的元素合并 后一起返回 | $(“div,p,.title” )选取所有div、p和拥有class为title的元素 |
交集 选择器 | element.class或element#id | 匹配指定class或id的某元素或元素集合 | $(“h2.title”)选取所有拥有class为title的h2元素 |
全局 选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
4.2 层次选择器
- 层次选择器通过DOM 元素之间的
层次关系
来获取元素
名称 | 语法构成 | 描述 | 实例 |
---|
后代 选择器 | ancestor descendant | 选取 ancestor 元素里的所有 descendant (后代)元素 | $("#menu span" )选取 #menu 下的 span 元素 |
子 选择器 | parent > child | 选取 parent 元素下的child(子)元素 | $(" #menu>span" )选取 #menu 的子元素 span |
相邻 元素选择器 | prev + next | 选取紧邻 prev 元素之后的 next 元素 | $(" h2+dl " )选取紧邻 h2 元素之后的同辈元素 dl |
同辈 元素选择器 | prev~sibings | 选取 prev 元素之后的所有 siblings 元素 | $(" h2~dl " )选取 h2 元素之后所有的同辈元素 dl |
4.2.1 层次选择器练习
<style>
ul{list-style: none;}
li{
float: left;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #ccc;
}
</style>
<script src="../jquery-3.5.1.js" charset="utf-8"></script>
<script type="text/javascript">
// 原生JS
// window.onload = function(){
// var lis = document.getElementsByTagName('li')
// for(var i = 1; i < lis.length; i++){
// lis[i].style.borderLeft = '2px solid #f00'
// }
// }
// jQuery
$(function(){
$('li+li').css('border-left','2px solid #f00')
})
</script>
<body>
<ul>
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>老年款式</li>
<li>婴儿专用</li>
</ul>
</body>
4.3 属性选择器
名称 | 语法构成 | 描述 | 示例 |
---|
属性选择器 | [attribute] | 选取包含给定属性 的元素 | $(" [href]" )选取含有href属性的元素 |
属性选择器 | [attribute=value] | 选取等于给定属性是某个特定值 的元素 | $(" [href =’#’]" )选取含有href属性的元素 |
属性选择器 | [attribute != value] | 选取不等于给定属性是某个特定值 的元素 | $(" [href !=’#’]" )选取含有href属性的元素 |
属性选择器 | [attribute ^= value] | 选取给定属性是以某些特定值开始 的元素 | $(" [href ^=‘en’]" )选取含有href属性的元素 |
属性选择器 | [attribute $=value] | 选取给定属性是以某些特定值结尾 的元素 | $(" [href $=’.jpg’]" )选取含有href属性的元素 |
属性选择器 | [attribute *=value] | 选取给定属性是以包含某些值 的元素 | $(" [href *=‘txt’]" )选取含有href属性的元素 |
4.4 过滤选择器
- 过滤选择器
通过特定的过滤规则来筛选元素
语法特点
- 使用"
:
" - 如使用
$(“li:first”)
来选取第一个li元素
主要分类
基本
过滤选择器可见性
过滤选择器内容
过滤选择器子元素
过滤选择器
4.4.1 基本过滤选择器
- 基本过滤选择器可以
选取第一个元素、最后一个元素、索引为偶数或奇数
的元素 - 基本过滤选择器可以
根据索引的值
选取元素
名称 | 语法构成 | 描述 | 示例 |
---|
基本过滤选择器 | :first | 选取第一个 元素 | $(" li:first" )选取所有 li 元素中的第一个 li 元素 |
基本过滤选择器 | :last | 选取最后一个 元素 | $(" li:last" )选取所有 li 元素中的最后一个 li 元素 |
基本过滤选择器 | :even | 选取索引是偶数的所有元素(index从0开始) | $(" li:even" )选取索引是偶数的所有 li 元素 |
基本过滤选择器 | :odd | 选取索引是奇数的所有元素(index从0开始) | $(" li:odd" )选取索引是奇数的所有 li 元素 |
基本过滤选择器 | :eq(index) | 选取索引等于index 的元素(index从0开始) | $(“li:eq(1)” )选取索引等于1的 li 元素 |
基本过滤选择器 | :gt(index) | 选取索引大于index 的元素(index从0开始) | $(" li:gt(1)" )选取索引大于1的 li 元素(注:大于1,不包括1) |
基本过滤选择器 | :lt(index) | 选取索引小于index的元素(index从0开始) | $(“li:lt(1)” )选取索引小于1的 li 元素(注:小于1,不包括1) |
4.4.2 可见性过滤选择器
名称 | 语法构成 | 描述 | 示例 |
---|
可见性过滤选择器 | :visible | 选取所有可见的元素 | $(":visible" )选取所有可见的元素 |
可见性过滤选择器 | :hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
4.4.3 内容过滤性选择器
选择器 | 描述 | 返回 |
---|
:empty | 选取不包含子元素或文本为空的元素 | 集合元素 |
:parent | 选取含有子元素或文本的元素 | 集合元素 |
:contains(text) | 选取含有文本内容为text的元素 | 集合元素 |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |
<script>
$(function () {
// 找到所有div中不包含文本内容或子元素的元素
var $res = $("div:empty");
console.log($res.length); // 找到1个元素
$res.each(function (idx,ele) {
console.log(idx, ele); // one
});
});
</script>
<body>
<div class="one"></div>
<div class="two">zs</div><!--包含内容不会被找到-->
<div class="three"><!--包含子元素不会被找到-->
<span>lnj</span>
</div>
<span class="five"></span><!--不是指定元素不会被找到-->
</body>
<script>
$(function () {
// 找到所有div中包含文本内容或子元素的元素
var $res = $("div:parent");
console.log($res.length);
$res.each(function (idx, ele) {
console.log(idx, ele);
});
});
</script>
<body>
<div class="one"></div>
<div class="two">zs</div><!--有文本内容会被找到-->
<div class="three"><!--有子元素会被找到-->
<span>lnj</span>
</div>
<span class="five"></span>
</body>
<script>
$(function () {
// 找到所有div中包含文本内容为lnj的元素
var $res = $("div:contains('lnj')");
console.log($res.length);// 找到2个元素
$res.each(function (idx, ele) {
console.log(idx, ele);// one,three,four
})
});
</script>
<body>
<div class="one">lnj</div>
<div class="two">zs</div>
<div class="three">lnj</div>
<div class="four"><!--子元素中包含该文本也会被找到-->
<span>lnj</span>
</div>
<span class="five"></span>
</body>
:has(selector)
- 找到
包含指定子元素
的指定元素 与:parent 区别
:parent
只要有子元素就会被找到:has(selector)
不仅要有子元素,而且子元素还必须满足条件
<script>
$(function () {
// 找到所有div中包含后代元素为span的元素
var $res = $("div:has('span')");
console.log($res.length);
$res.each(function (idx, ele) {
console.log(idx, ele);
});
});
</script>
<body>
<div class="one"> <!--后代中包含span元素会被找到-->
<span>jjj</span>
</div>
<div class="two"><!--后代中不包含span元素不会被找到-->
<p>zs</p>
</div>
<div class="three"><!--后代中包含span元素会被找到-->
<p>
<span>lnj</span>
</p>
</div>
</body>
5. jQuery Class 操作
5.1 Class 类操作
5.1.1 addClass
- 元素
添加一个或多个类
- 如果要添加多个, 多个类名之间用
空格隔开
即可
addClass(class)或addClass(class1 class2 … classN)
5.1.2 removeClass
删除
元素的一个或多个类- 如果想删除多个, 多个类名之间用
空格隔开
即可
removeClass(“style2 ”)或removeClass("style1 style2 ")
5.1.3 toggleClass
切换
元素添加或删除
一个类(存在就删除不存在就添加
)toggleClass()
模拟了addClass()
与removeClass()
实现样式切换
的过程
toggleClass(class)
5.2 jQuery 文本操作
5.2.1 html
添加或获取
元素中的HTML
- 类似于JS中的
innerHTML
解析
内部HTML标签
$("div.left").html(); // 获取元素中的html代码
或
$("div.left").html("<div class='content'>…</div>"); // 设置元素中的html代码
5.2.2 text
添加或获取
元素中的文本
text
方法能做的html
方法都能做,所以一般使用html方法即可
$("div.left").text(); // 获取元素中的文本内容
或
$("div.left").text("<div class='content'>…</div>"); // 设置元素中的文本内容
5.2.3 html()
和 text()
的区别
语法 | 参数 | 功能 |
---|
html() | 无参数 | 用于获取第一个 匹配元素的HTML内容或文本内容 |
html(content) | content参数为元素的HTML内容 | 用于设置 所有匹配元素的HTML内容或文本内容 |
text() | 无参数 | 用于获取所有 匹配元素的文本 内容 |
text(content) | content参数为元素的文本内容 | 用于设置 所有匹配元素的文本 内容 |
5.2.4 val
$(this).val(); // 获取元素的value属性值
或
$(this).val(""); // 设置元素的value属性值
5.3 jQuery CSS 样式
5.3.1 css 方法
- 使用
css()
为指定的元素设置样式值,修改的是行内样式
css(name,value)
$(this).css("border","5px solid #f5f5f5");
5.3.2 width 方法
$(function () {
$("button").eq(0).click(function () {
// 1.获取元素宽度(不包括padding和border)
// alert($('.son').width());
});
$("button").eq(1).click(function () {
// 2.设置元素宽度(不包括padding和border)
// $(".son").width("50px");
});
});
5.3.3 height 方法
设置或获取
元素高度
(相当于获取height属性值
)
$(function () {
$("button").eq(0).click(function () {
// 1.获取元素宽度(不包括padding和border)
// alert($('.son').width());
});
$("button").eq(1).click(function () {
// 2.设置元素宽度(不包括padding和border)
// $(".son").width("50px");
});
});
5.4. jQuery 元素位置
5.4.1 offset 方法
$(function () {
$("button").eq(0).click(function () {
// 1.获取距离窗口的偏移位(从border开始)
alert($('.son').offset().left); // 100
});
$("button").eq(1).click(function () {
// 2.设置距离窗口的偏移位
$('.son').offset({left:10, top:10});
});
});
5.4.2 position 方法
- 获取相对于它
最近
的具有相对位置
(position:relative或position:absolute
)的父级元素
的距离
$(function () {
$("button").eq(0).click(function () {
// 1.获取匹配元素相对父元素的偏移
alert($('.son').position().left);// 50
});
$("button").eq(1).click(function () {
// 2.无效,不能设置相对定位元素的偏移位
$('.son').position({left:10, top:10})
});
});
5.5 jQuery scroll 方法
5.5.1 scrollTop 方法
$(function () {
$("button").eq(0).click(function () {
// 7.获取匹配元素相对滚动条顶部的偏移
// alert($('.scroll').scrollTop());
// alert($('html').scrollTop());
// 兼容所有浏览器写法
alert($('html').scrollTop()+$('body').scrollTop());
});
$("button").eq(1).click(function () {
// 8.设置匹配元素相对滚动条顶部的偏移
// $('.scroll').scrollTop(100);
// $('html').scrollTop(100);
// 兼容所有浏览器写法
$('html,body').scrollTop(100);
});
});
5.5.2 scrollLeft 方法
scrollLeft()
方法返回或设置
匹配元素的滚动条的水平位置
- 滚动条的水平位置指的是
从其左侧滚动过的像素数
- 当滚动条位于
最左侧
时,位置是 0
$(function () {
$("button").eq(0).click(function () {
// 7.获取匹配元素相对滚动条水平的偏移
// alert($('.scroll').scrollLeft());
// alert($('html').scrollLeft());
// 兼容所有浏览器写法
alert($('html').scrollLeft()+$('body').scrollLeft());
});
$("button").eq(1).click(function () {
// 8.设置匹配元素相对滚动条水平的偏移
// $('.scroll').scrollLeft(100);
// $('html').scrollLeft(100);
// 兼容所有浏览器写法
$('html,body').scrollLeft(100);
});
});
6. jQuery 属性操作
6.1 属性与属性节点
6.1.1 什么是属性?
- 对象身上
保存的变量
就是属性 - 只要对象身上都可以添加属性(
无论是自定义对象,还是DOM对象
)
6.1.2 如何操作属性?
添加或修改
属性(没有就会添加,有就会修改
)
对象.属性名称 = 值
对象["属性名称"] = 值
获取属性
6.1.3 什么是属性节点?
- 在编写HTML代码时,
在HTML标签中添加的属性就是属性节点
- 在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
- 在
attributes
属性中保存的所有内容都是属性节点
<span class="box" nj="123"></span> // 这里的class和nj就是属性节点
6.1.4 如何操作属性节点?
获取
属性节点
DOM元素.getAttribute("属性名称");
设置
属性节点
DOM元素.setAttribute("属性名称", "值");
6.1.5 属性和属性节点有什么区别?
任何对象都有属性
, 但是只有DOM对象才有属性节点
6.2 属性节点方法
6.2.1 attr 方法
作用
参数
- 如果传递
一个参数
, 代表获取
属性节点的值 - 如果传递
两个参数
, 代表设置
属性节点的值
注意点
- 如果是
获取
- 无论找到多少个元素, 都
只会返回第一个元素指定的属性节点的值
- 如果是设置
- 找到多少个元素就会
设置
多少个元素 - 如果设置的属性节点
不存在
, 那么系统会自动新增
$(function () {
// 1.获取指定属性节点值
var $res = $(".span1").attr("nj");
console.log($res);
// 2.设置属性节点
$(".span1").attr("nj", "666");
$(".span2").attr("id", "box1 box2");
// 3.注意点:
// 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点
$res = $("span").attr("class");
console.log($res);
$("span").attr("class", "lnj");
});
6.2.2 removeAttr 方法
$(function () {
// 1.设置属性节点时,会给所有找到元素设置属性节点
$("span").attr("test", "jonathan");
// 2.删除属性节点时,会删除所有找到元素的属性节点
$("span").removeAttr("test");
});
6.2.3 prop 方法
作用
注意点
prop
方法不仅能够操作
属性, 还能操作属性节点
- 官方推荐在操作属性节点时,具有
true
和 false
两个属性的属性节点 - 如
checked, selected
或者 disabled
使用prop()
,其他的使用 attr()
$(function () {
// 1.设置属性
// 1.1.设置属性时,会设置所有找到元素的属性
$("span").prop("demo", "lnj");
// 2.获取属性
// 2.1.获取属性时,只会获取找到第一个元素的属性
console.log($("span").prop("demo"));
});
6.2.4 removeProp 方法
$(function () {
// 删除所有找到元素的demo属性
$("span").removeProp("demo");
});
6.2.5 attr 方法和 prop 方法区别
- 所有
DOM
对象,都有一个attributes
属性,而prop
可以操作属性,所以也可以操作属性节点 - 在操作属性节点时,具有
true
和 false
两个属性的属性节点(如 checked, selected 或者 disabled
)使用prop()
,其他
的使用 attr()
- 如果具有
true
和 false
两个属性的属性节点,如果没有编写默认attr返回undefined
,而prop返回false
$(function () {
// 1.可以通过prop获取属性节点
console.log($("input").prop("class"));
// 2.可以通过prop设置属性节点
$("input").prop("class", "tag");
// 3.如果没有默认值,那么attr获取返回undefined
//console.log($("input[type=checkbox]").attr("checked"));
// 4.如果没有默认值,那么prop获取返回false
console.log($("input[type=checkbox]").prop("checked"));
// 5.通过attr设置选中
//$("input[type=checkbox]").attr("checked", true);
// 6.通过prop设置选中
$("input[type=checkbox]").prop("checked", true)
});
7. jQuery DOM 操作
7.1 常见的 DOM 操作
- jQuery对JavaScript中的
DOM操作
进行了封装
,使用更简便
- jQuery中的DOM操作可分为:
内容及Value属性值
操作节点
操作节点属性
操作节点遍历
7.2 DOM 节点操作
- jQuery中节点操作主要分为:
查找
节点(利用选择器
完成)创建
节点插入
节点删除
节点替换
节点复制
节点
7.2.1 创建 DOM 节点
- 工厂函数
$()
用于获取或创建
节点
$(selector)
:通过选择器
获取节点$(element)
:把DOM节点转化
成jQuery节点$(html)
:使用HTML字符串创建
jQuery节点
// 创建含文本与属性<li>元素节点
var $newNode2=$("<li title=‘标题为千与千寻’>千与千寻</li>");
7.2.2 插入 DOM 节点
语法 | 功能 |
---|
append(content) | $(A).append(B) 表示将B追加到A内部的最后 ,如:$("ul").append($newNode1); |
appendTo(content) | $(B).appendTo(A) 表示把B追加到A内部的最后 ,如:$newNode1.appendTo("ul"); |
prepend(content) | $(A). prepend (B) 表示将B前置插入 到A内部中,如:$("ul"). prepend ($newNode1); |
prependTo(content) | $(B). prependTo (A) 表示将B前置插入 到A内部中,如:$newNode1. prependTo ("ul"); |
语法 | 功能 |
---|
after(content) | $(A).after (B) 表示将B插入到A外部之后 ,如:$("ul").after($newNode1); |
insertAfter(content) | $(B). insertAfter(A) 表示将B插入到A外部之后 ,如:$newNode1.insertAfter("ul"); |
before(content) | $(A). before (B) 表示将B插入至A外部之前 ,如:$("ul").before($newNode1); |
insertBefore(content) | $(B). insertBefore (A) 表示将A插入到B外部之前 ,如:$newNode1.insertBefore("ul"); |
7.2.3 删除 DOM 节点
empty()
删除指定元素的内容和子元素
, 指定元素自身不会被删除
$("div").empty();
// 删除所有div
$("div").remove();
// 删除div中id是box1的那个div
$("div").remove("#box1");
// 删除所有div
$("div").detach();
// 删除div中id是box1的那个div
$("div").detach("#box1");
remove 和 detach 区别
remove
删除元素后,元素上的事件会被移出
detach
删除元素后,元素上的事件会被保留
$("button").click(function () {
// $("div").remove();
// $("div").empty();
// $("li").remove(".item");
// 利用remove删除之后再重新添加,原有的事件无法响应
// var $div = $("div").remove();
// 利用detach删除之后再重新添加,原有事件可以响应
var $div = $("div").detach();
// console.log($div);
// 将删除的返回值重新添加到body上
$("body").append($div);
});
$("div").click(function () {
alert("div被点击了");
});
7.2.4 替换节点
replaceWith
- 将
所有
匹配的元素替换
成指定的 HTML 或 DOM 元素
replaceWith 参数
可以是一个DOM元素
、也可以是一个代码片段
replaceAll
- 用匹配的元素替换掉
所有 selector 匹配到的元素
// 编写jQuery相关代码
$("button").click(function () {
// 创建一个新的节点
var $item = $("<h6>我是标题6</h6>");
// 利用新的节点替换旧的节点
// $("h1").replaceWith($item);
$item.replaceAll("h1");
});
7.2.5 复制节点
clone
复制
一个节点- 参数
true
表示复制事件处理
浅复制
深复制
$(function () {
// clone([Even[,deepEven]])
$("button").eq(0).click(function () {
// 1.浅复制一个元素
var $li = $("li:first").clone(false);
// 2.将复制的元素添加到ul中
$("ul").append($li); // 点击li无法响应事件
});
$("button").eq(1).click(function () {
// 1.深复制一个元素
var $li = $("li:first").clone(true);
// 2.将复制的元素添加到ul中
$("ul").append($li); // 点击li可以响应事件
});
$("li").click(function () {
alert($(this).html());
});
});
7.2.6 包裹节点
wrap
- 将指定节点
用其他标记包裹起来
- 该方法对于
需要在文档中插入额外的结构化标记
非常有用, 而且不会破坏原始文档的语义
wrapAll
- 将
所有
匹配的元素用一个元素来包裹 - 而
wrap
方法是将所有的元素进行单独包裹
wrapInner
- 将
每一个匹配的元素的子内容
(包括文本节点
)用其他结构化标记包裹起来
//测试使用 jQuery wrap, wrapAll, wrapInner
$(function(){
//包装 li 本身
$("#box1 li").wrap("<font color='red'></font>");
//包装所有的 li
$("#box2 li").wrapAll("<font color='red'></font>");
//包装 li 里边的文字.
$("#box3 li").wrapInner("<font color='red'></font>");
})
7.2.7 遍历节点
方法 | 作用 |
---|
children | 只考虑子元素 ,不考虑后代元素 |
next | 同辈紧邻后面一个 元素 |
nextAll | 同辈紧邻后面所有 兄弟元素 |
prev | 同辈紧邻前一个 兄弟元素 |
prevAll | 同辈紧邻前所有 兄弟元素 |
siblings | 同辈所有 兄弟元素 |
find(‘xx’) | 返回被选元素的后代 元素,括号内必填写,如果查找所有后代使用 “*”,起查找 作用 |
filter(‘xx’) | 指定选择器的xx元素 ,括号内必填写,符合条件的同级元素,非后代元素,起过滤 作用 |
has(‘xx’) | 符合条件的后代 元素,不包含自身 ,括号内必填写,起过滤 作用 |
parent() | 获取元素的父级 元素 |
parents() | 获取所有祖先 元素,参数为筛选条件 |
parentsUntil() | 截止到xx位置的祖先 节点 |
closest('xx')
- 用来取得
最近的匹配元素
,包括自身
- 首先
检查自身是否符合
- 如果
符合返回元素本身
- 如果
不匹配
,向上查找父元素
,逐级向上直到匹配到选择器的元素
- 如果
什么没找到
,返回一个空的jQuery对象
- 必须填写筛选条件,且
只能找到一个元素
7.3 jQuery DOM 操作练习
7.3.1 商品列表
<style>
a {
text-decoration: none;
color: #14a9ff;
}
img {
cursor: pointer;
}
input[type=text] {
width: 80px;
}
.mainPage {
padding-top: 20px;
margin: 0 auto;
width: 480px;
}
table {
border-collapse: collapse;
width: 480px;
}
table td {
text-align: center;
border: 1px solid #333;
font-size: 14px;
}
.count {
/* display: inline-block; */
/* border: 1px solid #333; */
width: 70px;
height: 20px;
text-align: center;
}
</style>
<script src="js/jquery-3.1.1.js"></script>
<script>
$(function () {
//全选或全不选
$("#all").click(function () {
if (this.checked) {
$(".select").prop("checked", true);
} else {
$(".select").prop("checked", false);
}
});
$("table").delegate(".add", "click", function () {
var n = $(this).siblings(".count").val();
n++;
$(this).siblings(".count").val(n);
}).delegate(".sub", "click", function () {
var n = $(this).siblings(".count").val();
n--;
$(this).siblings(".count").val(n);
if (n < 0) {
$(this).siblings(".count").val(0);
}
}).delegate(".del","click",function(){
$(this).parent().parent().empty();
})
// $(".del").click(function(){
// $(this).parent().parent().empty();
// })
$(".addA").click(function () {
// var tr = $(".s2");
// var newtr = tr.clone();
// tr.after(newtr);
var str = `<tr class="s s3">
<td><input type="checkbox" id="" class="select"></td>
<td><img src="img/computer.jpg" alt="" class="img">笔记本电脑</td>
<td class="price">¥6999元</td>
<td class="number">
<img src="img/subtraction.gif" alt="" class="sub">
<input type="text" class="count" value="0">
<img src="img/add.gif" alt="" class="add">
</td>
<td>
<a href="#" class="del">删除</a>
</td>
</tr>`;
$("table").append(str);
});
$(".delAll").click(function () {
$(".s").empty();
});
});
</script>
<body>
<div class="mainPage">
<table>
<tr>
<td><input type="checkbox" name="" id="all">全选</td>
<td>商品信息</td>
<td>宜美惠价</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr class="s s1">
<td><input type="checkbox" id="" class="select"></td>
<td><img src="img/sang.gif" alt="" class="img">天堂直杆彩虹伞</td>
<td class="price">¥32.9元</td>
<td class="number">
<img src="img/subtraction.gif" alt="" class="sub">
<input type="text" class="count" value="0">
<img src="img/add.gif" alt="" class="add">
</td>
<td>
<a href="#" class="del">删除</a>
</td>
</tr>
<tr class="s s2">
<td><input type="checkbox" id="" class="select"></td>
<td><img src="img/iphone.gif" alt="">苹果手机iphone5</td>
<td class="price">¥3999元</td>
<td class="number">
<img src="img/subtraction.gif" alt="" class="sub">
<input type="text" class="count" value="0">
<img src="img/add.gif" alt="" class="add">
</td>
<td>
<a href="#" class="del">删除</a>
</td>
</tr>
</table>
<a href="#" class="addA">增加</a>
<a href="#" class="delAll">删除</a>
</div>
</body>
7.3.2 滑动门
<style media="screen">
*{margin: 0;padding: 0;}
.box{
height: 477px;
margin: 10px auto;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden;
position: relative;
}
img{
position: absolute;
left: 0;
top: 0;
border-left: 1px solid #ccc;
}
</style>
<script src="https://cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 1. 确定暴露出来的图片宽度
var exposeWidth = 160
// 2. 计算并设置 box 的宽度
var boxWidth = $('img').width() + exposeWidth * 3
$('.box').css('width', boxWidth)
var len = $('img').length
for (var i = 1; i < len; i++) {
$('img').eq(i).css('left', ($('img').width() + exposeWidth * (i - 1)) + 'px')
}
// 3. 确定移动的距离
var move = $('img').width() - exposeWidth
// 添加所有图片的 mouseover 事件,向左移动 $('img').width() - exposeWidth
// index = 0 初始化状态
// index = 1,初始状态, 修改第2张(1)
// index = 0 初始状态, 修改第2张(1),第3张(2)
// index = 0 初始状态, 修改第2张(1),第3张(2),第4张(3)
$('img').each(function(index) {
$(this).mouseover(function() {
// 初始化
for (var i = 1; i < len; i++) {
$('img').eq(i).css('left',($('img').width() + exposeWidth * (i - 1)) + 'px')
}
if (index != 0)
for (var j = 1; j <= index; j++) {
$('img').eq(j).css('left', (parseInt($('img').eq(j).css('left')) - move) + 'px')
}
})
})
})
</script>
<body>
<div class="box">
<img src="img/door1.png" alt="">
<img src="img/door2.png" alt="">
<img src="img/door3.png" alt="">
<img src="img/door4.png" alt="">
</div>
</body>
8. 事件机制
- jQuery事件是对
JavaScript事件的封装
8.1 事件注册
- 事件注册语法
$(对象).type(fn)
type
是事件名
fn
是事件处理函数
$(对象).事件名(fn)
$('input').click(function(){
alert('123')
})
8.2 事件绑定
- 使用
bind()
方法和on()
方法 优点
缺点
注意点
$(对象).on(type,[event],fn)
type -- 事件类型
event -- 事件参数
fn -- 处理函数
// 2.通过on绑定事件
$("button").on("click", function () {
alert("hello click1");
});
$("input[name=event_1]").on({
mouseover: function () { // 为 mouseover 绑定方法
$("ul").css("display", "none");
},
mouseout: function () { // 为 mouseout 绑定方法
$("ul").css("display", "block");
}
});
8.3 事件解绑
移除
事件使用unbind()
方法和off()
方法off方法
如果不带参数
时,表示移除所绑定的全部事件
off方法
如果传递一个参数
, 会移除所有指定类型的事件
off方法
如果传递两个参数
, 会移除所有指定类型的指定事件
$(对象).off([type],[fn])
$("button").off(); // 移除button中全部事件
$("button").off("click"); // 移除button中click事件
$("button").off("click", test1); // 移除button中click事件中test1事件
8.4 事件坐标
-
当事件被触发
时,系统会将事件对象(event)传递给回调函数
,通过event对象就能获取时间的坐标
-
获取事件坐标有三种方式
event.offsetX, event.offsetY
相对于事件元素左上角
event.pageX, event.pageY
相对于页面的左上角event.clientX, event.clientY
相对于视口的左上角
-
event.page 和 event.client 区别
网页
是可以滚动
的,而视口
是固定
的- 所以想
获取距离可视区域坐标
通过event.client
- 想
获取距离网页左上角的坐标
通过event.page
$(function () {
// 获取事件的坐标
$(".son").click(function (event) {
// 获取相对于事件元素左上角坐标
console.log(event.offsetX, event.offsetY);
// 获取相对于视口左上角坐标
console.log(event.clientX, event.clientY);
// 获取相对于页面左上角坐标
console.log(event.pageX, event.pageY);
});
});
8.5 事件冒泡
-
什么是事件冒泡
-
阻止事件冒泡
- 如果希望在触发一个元素的事件处理程序时,
不影响其父元素
, 此时便可以使用停止事件冒泡
$(function () {
$(".son").click(function (event) {
console.log(".son");
// 在子元素中停止事件冒泡,时间不会继续向上传播,所以父元素click方法不会被触发
event.stopPropagation();
});
$(".father").click(function () {
console.log(".father");
});
});
8.6 默认行为
-
什么是默认行为
-
阻止默认行为
- 可以使用
event.preventDefault();
方法阻止事件默认行为
$(function () {
$("a").click(function (event) {
var str = $("a").attr("href");
// 如果超链接是百度就不跳转
if(str.indexOf("baidu") > 0){
// 阻止默认行为
event.preventDefault();
}
});
});
8.7 自动触发事件
-
什么是自动触发
事件
- 通过
代码控制
事件, 不用人为点击/移入/移除等
事件就能被触发
-
自动触发方式
$("selector").trigger("eventName");
- 触发事件的同时会
触发事件冒泡
- 触发事件的同时会
触发事件默认行为
$("selector").triggerHandler("eventName");
- 触发事件的同时
不会触发事件冒泡
- 触发事件的同时
不会触发事件默认行为
$(function () {
/*
$(".son").click(function () {
alert("son");
});
$(".father").click(function () {
alert("father");
});
// trigger 会触发事件冒泡
// $(".father").trigger("click");
// $(".son").trigger("click");
// triggerHandler 不会触发事件冒泡
// $(".father").triggerHandler("click");
// $(".son").triggerHandler("click");
*/
$("input[type='submit']").click(function () {
alert("点击了A标签");
});
// trigger 会触发系统默认事件
// $("input[type='submit']").trigger("click");
// triggerHandler 不会触发系统默认事件
$("input[type='submit']").triggerHandler("click");
});
8.8 自定义事件
-
什么是自定义
事件
- 自定义事件就是自己起一个
不存在的事件名称来注册事件
, - 然后
通过这个名称还能触发对应的方法执行
, 这就是自定义事件
-
自定义事件的条件
- 事件必须是
通过on绑定
的 - 事件必须
通过trigger来触发
- 因为
trigger
方法可以自动触发对应名称的事件
,所以只要事件的名称和传递给trigger的名称一致
就能执行对应的事件方法
$(function () {
$(".father").on("njClick", function () {
alert("njClick");
});
$(".father").trigger("njClick");
});
8.9 事件命名空间
-
什么是事件命名空间
- 事件命名空间主要用于
区分相同类型
的事件,区分不同前提条件
下到底应该触发哪个事件 - 格式:
eventName.命名空间
-
添加事件命名空间的条件
-
事件命名空间注意点
(面试题
)
- 利用
trigger
触发子元素带命名空间
的事件时,会触发父元素带相同命名空间的事件
,父元素没有命名空间的事件不会被触发 - 利用
trigger
触发子元素不带命名空间
的事件时,所有父元素(带相同命名空间,不带命名空间)事件
都会被触发,所有子元素(带相同命名空间,不带命名空间)事件
也都会被触发
$(function () {
// 给父元素添加不带命名空间事件
$(".father").on("click", function () {
alert("father");
});
// 给父元素添加带命名空间事件
$(".father").on("click.66", function () {
alert("66 - father");
});
$(".son").on("click.nj", function () {
alert("nj - 向左走");
});
$(".son").on("click.66", function () {
alert("66 - 向右走");
});
// 会同时触发NJ和66编写的click事件
// 事件会冒泡到不带命名空间上级元素和带相同命名空间的上级元素
// $(".son").trigger("click");
// 只会触发NJ编写的click事件
// 事件不会冒泡到不带命名空间上级元素
// $(".son").trigger("click.nj");
// 只会触发66编写的click事件
// 事件只会冒泡到带相同命名空间的上级元素
$(".son").trigger("click.66");
});
8.10 事件委托
8.10.1 什么是事件委托
- 事件委托就是
请其他人帮忙做我们想做的事
- 做完之后
最终的结果还是会反馈到我们
这里
8.10.2 事件委托的好处
减少监听数量
- 添加到页面上的
事件处理程序数量
将直接关系到页面的整体运行性能
- 因为
需要不断的与dom节点进行交互
,访问dom的次数越多
,引起浏览器重绘与重排的次数也就越多
,就会延长整个页面的交互就绪时间
每个监听的函数都是一个对象
,是对象就会占用内存
,对象越多
,内存占用率就越大
,自然性能就越差
新增元素自动有事件响应处理
8.10.3 jQuery 中添加事件委托
添加前
$("li").click隐式迭代给界面上所有li都添加了click事件
(监听数量众多
)- 通过
$("ul").append
新添加的li无法影响
click事件
<script>
$(function () {
// 1.监听li点击事件
$("li").click(function () {
// 弹出当前点击行内容
alert($(this).html());
});
// 2.监听新增按钮点击
var count = 0;
$("button").eq(0).click(function () {
count++;
// 新增一行内容
$("ul").append("<li>我是新增内容"+count+"</li>")
});
});
</script>
<body>
<ul>
<li>我是第1行</li>
<li>我是第2行</li>
<li>我是第3行</li>
</ul>
<button>新增一行</button>
<button>移除事件委托</button>
</body>
添加后
- 格式:
$(parentSelector).delegate(childrenSelector, eventName, callback)
$("ul").delegate隐式迭代所有ul添加事件
(相比开始迭代li,必然ul的个数会少很多)- 当
事件被触发
时,系统会自动动态查找
当前是哪个li触发了事件,所以新增的li也能响应到事件
$(function () {
// 1.委托ul监听li的点击事件
$("ul").delegate("li","click",function () {
// 前面我们说过事件委托就是让别人帮忙做事,但最终的结果还是会返回到我们手里,所以这里的this是触发事件的li
// 这里的this之所以是触发事件的li,本质是因为"事件冒泡", 触发事件的li向上传递到ul,触发了click事件.
// console.log(this);
// 弹出当前点击行内容
alert($(this).html());
});
// 2.监听新增按钮点击
var count = 0;
$("button").eq(0).click(function () {
count++;
// 新增一行内容
$("ul").append("<li>我是新增内容"+count+"</li>")
});
});
8.10.4 事件的委托注册
$(对象).delegate(子元素名,事件名,处理函数)
委托事件的特点
- 利用
事件冒泡机制
实现委托 提高
事件处理的性能
- 解决
动态添加DOM元素
的事件绑定
$(function(){
// 简单低级方式
$('li').on('mouseover',function(){
$(this).css('color','#f00')
})
// 代理高级方式
$('ul').delegate('li','mouseover',function(){
$(this).css('color','#f00')
})
}
8.11 移入移出事件
8.11.1 mouseenter/mouseleave
$(function () {
// 移动到子元素不会触发事件
// 2.1移入事件
$('.father').mouseenter(function () {
console.log('mouseenter');
});
// 2.2移除事件
$('.father').mouseleave(function () {
console.log('mouseleave');
});
});
8.11.2 mouseover/mouseout
$(function () {
// 2.1移入事件
$('.father').mouseover(function () {
console.log('mouseover') ;
});
// 2.2移除事件
$('.father').mouseout(function () {
console.log('mouseout') ;
});
});
8.11.3 hover
内容监听移入和移出
- 内部实现就是
调用mouseenter和mouseleave
$(function () {
/*
// 传入两个回调函数,一个监听移入,一个监听移出
$(".father").hover(function () {
console.log("mouseenter");
}, function () {
console.log("mouseleave");
});
*/
// 如果只传入一个方式,那么这个方式既监听移入也监听移出
$(".father").hover(function () {
console.log("移入移除");
});
});
9. jQuery 动画
9.1 常见动画类型
9.2 显示与隐藏动画
9.2.1 show
显示动画
- 设置
显示速度
可以实现动画效果 - 显示速度可以取如下值:
毫秒(如1000)、slow、normal、fast
默认
的动画时长是400毫秒
slow
本质是600毫秒
normal
本质是400毫秒
fast
本质是200毫秒
原理
- 当前操作的元素是
块级
,调用display:block;
- 当前操作的元素是
行内
,调用display:inline;
// 编写jQuery相关代码
$("button").eq(0).click(function () {
// $("div").css("display", "block");
// 注意: 这里的时间是毫秒
$("div").show(1000, function () {
// 作用: 动画执行完毕之后调用
alert("显示动画执行完毕");
});
});
9.2.2 hide
$("button").eq(1).click(function () {
// $("div").css("display", "none");
$("div").hide(1000, function () {
alert("隐藏动画执行完毕");
});
});
9.2.3 toggle
$("button").eq(2).click(function () {
$("div").toggle(1000, function () {
alert("切换动画执行完毕");
});
});
9.3 展开与收起动画
9.3.1 slideDown
$("button").eq(0).click(function () {
$("div").slideDown(1000, function () {
alert("展开完毕");
});
});
9.3.2 slideUp
$("button").eq(1).click(function () {
$("div").slideUp(1000, function () {
alert("收起完毕");
});
});
9.3.3 slideToggle
$("button").eq(2).click(function () {
$("div").slideToggle(1000, function () {
alert("收起完毕");
});
});
9.4 淡入淡出动画
9.4.1 fadeIn
$("button").eq(0).click(function () {
$("div").fadeIn(1000, function () {
alert("淡入完毕");
});
});
// 以较慢的速度淡入
$("input[name=fadein_btn]").click(function(){
$("img").fadeIn("slow");
});
9.4.2 fadeOut
$("button").eq(1).click(function () {
$("div").fadeOut(1000, function () {
alert("淡出完毕");
});
});
9.4.3 fadeToggle
$("button").eq(2).click(function () {
$("div").fadeToggle(1000, function () {
alert("切换完毕");
});
});
9.4.4 fadeTo
- 淡入到
指定透明度
动画 - 可以
通过第二个参数
,淡入到指定的透明度(取值范围0~1
)
$("button").eq(3).click(function () {
$("div").fadeTo(1000, 0.2, function () {
alert("淡入完毕");
})
});
9.5 通用动画函数
9.5.1 animate
animate()
针对各类样式变化
提供渐变
的动画功能
$(selector).animate(styles,speed,easing,callback)
styles 变化的样式
speed 动画的速度
easing 动画的方式
callback 动画后的执行回调函数
/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
*/
$(".two").animate({
marginLeft: 500
}, 5000, "linear", function () {
// alert("自定义动画执行完毕");
});
- 每次开始运动都必须是
初始位置或者初始状态
,如果想在上一次位置或者状态下再次进行动画
可以使用累加动画
$("button").eq(1).click(function () {
$(".one").animate({
width: "+=100"
}, 1000, function () {
alert("自定义动画执行完毕");
});
});
同时操作多个属性
,自定义
动画会执行同步
动画,多个被操作的属性一起执行动画
$(".one").animate({
width: 500,
height: 500
}, 1000, function () {
alert("自定义动画执行完毕");
});
9.6 多动画的组合
$(selector).animate({样式1,样式2...},speed)
//先执行的动画
$(selector).animate(styles,speed,easing,function(){
//后执行的动画
$(selector).animate(styles,speed,easing)
})
9.7 动画队列
- 多个动画方法
链式编程
- 等到前面的动画执行完毕再依次执行后续动画
$("div").slideDown(1000).slideUp(1000).show(1000);
$(".one").slideDown(1000,function () {
$(".one").slideUp(1000, function () {
$(".one").show(1000);
});
});
// 立刻变为黄色,然后再执行动画
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");
$(".one").slideDown(1000,function () {
$(".one").slideUp(1000, function () {
$(".one").show(1000, function () {
$(".one").css("background", "yellow")
});
});
});
$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
$(".one").css("background", "yellow")
});
注意
- 动画队列方法
queue()
后面不能继续直接添加queue()
- 如果
想继续添加必须在上一个queue()方法中next()方法
$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
$(".one").css("background", "yellow");
next(); // 关键点
}).queue(function () {
$(".one").css("width", "500px")
});
9.8 动画相关方法
9.8.1 delay
$(".one").animate({
width: 500
// height: 500
}, 1000).delay(2000).animate({
height: 500
}, 1000);
9.8.2 stop
// 立即停止当前动画, 继续执行后续的动画
$("div").stop();
$("div").stop(false);
$("div").stop(false, false);
// 立即停止当前和后续所有的动画
$("div").stop(true);
$("div").stop(true, false);
// 立即完成当前的, 继续执行后续动画
$("div").stop(false, true);
// 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);
9.9 动画的结束
动画停止stop(stopAll,gotoEnd)
- 参数
stopAll
表示是否停止后续其他动画执行
- 参数
gotoEnd
表示是否允许完成当前动画
,是在第一个参数生效
时使用
9.10 动画练习
9.10.1 切换显示列表
<script src="js/jquery-3.5.1.js"></script>
<script>
// 切换显示后三项列表数据
$(function(){
$('input').click(function(){
$('li:gt(4):not(:last)').toggle(3000)
})
})
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li><input type="button" value="搜索或扩展"></li>
</ul>
</body>
9.10.2
<style>
*{margin: 0;padding: 0;}
#left {
width: 50px;
height: 200px;
background-color: #008;
position: absolute;
left: 0;
top: 500px;
}
#right {
width: 200px;
height: 0;
background-color: #ff0;
position: absolute;
bottom:0;
right: -200px;
}
</style>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function(){
$('#left').mouseover(function(){
$(this).animate({'width':300},2000,function(){
$('#right').animate({'height':400},1000)
})
}).mouseout(function(){
$('#right').animate({'height':0},1000,function(){
$('#left').animate({'width':50},2000)
})
})
})
</script>
<body>
<div id="left">
<div id="right"></div>
</div>
</body>
10. jQuery 静态方法
10.1 什么是静态方法
- 静态方法对应的是
对象方法
对象方法用实例对象调用
,而静态方法用类名调用
// 1.定义一个类
function AClass() {
}
// 2.给这个类添加一个静态方法
// 直接添加给类的就是静态方法
AClass.staticMethod = function () {
alert("staticMethod");
}
// 静态方法通过类名调用
AClass.staticMethod();
// 3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod");
}
// 实例方法通过类的实例调用
// 创建一个实例(创建一个对象)
var a = new AClass();
// 通过实例调用实例方法
a.instanceMethod();
10.2 jQuery.holdReady()
暂停或者恢复 jQuery.ready() 事件
- 传入
true
或 false
<script>
// 使用$直接调用,是静态方法
$.holdReady(true);
$(function () {
$("#first").click(function () {
alert("我是你想要的弹窗");
});
});
</script>
<body>
<button id="first">点击测试弹出</button>
<button id="second">解除延迟</button>
<script>
$("#second").click(function(){
$.holdReady(false);
});
</script>
</body>
10.3 each 方法
js 原生 forEach 方法
- 原生的
forEach
方法只能遍历数组, 不能遍历伪数组
/*
第一个参数: 遍历到的元素
第二个参数: 当前遍历到的索引
*/
var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
arr.forEach(function (value, index) {
console.log(index, value);
});
obj.forEach(function (value, index) {
console.log(index, value);// 报错
});
jQuery 的 each 静态方法
遍历对象或数组(伪数组)
- 优点
统一遍历对象和数组
的方式 回调参数的顺序
更符合我们的思维模式
// 1.利用jQuery的each静态方法遍历数组
/*
第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素
*/
$.each(arr, function (index, value) {
console.log(index, value);
});
$.each(obj, function (index, value) {
console.log(index, value);
});
10.4 map 方法
js 原生 map 方法
jQuery 的 map 方法
遍历对象或数组
- 将回调函数的返回值组成一个
新的数组
返回
$(function () {
// 4.1遍历数组
var arr = [1, 3, 5, 7, 9];
// 4.1.1通过原生方法遍历数组
// 第一个回调函数参数是遍历到的元素
// 第二个回调函数参数是当前遍历的索引
// 第三个回调函数参数是当前被遍历的数组
// 返回值: 将回调函数返回值收集起来组成一个新的数组
var res = arr.map(function (ele, idx, arr) {
console.log(idx, ele, arr);
return ele + idx;
});
console.log(res);
// 4.1.2通过jQuery静态方法遍历数组
// 第一个回调函数参数是遍历到的元素
// 第二个回调函数参数是当前遍历的索引
// 返回值: 将回调函数返回值收集起来组成一个新的数组
var $res2 = $.map(arr, function (ele,idx) {
console.log(idx, ele);
return ele + idx;
});
console.log($res2);
// 4.2遍历对象
var obj = {name: "lnj", age:"33", gender:"male"};
/*
obj.map(function (ele, idx, obj) {
// 报错,原生JS没有map方法
console.log(idx, ele, obj);
});
*/
var $res = $.map(obj, function (value, key) {
console.log(key, value);
return key + value;
});
console.log($res);
});
10.5 filter 方法
作用
返回符合一定条件的元素
- 该方法让您
规定一个条件
不符合条件
的元素将从选择中移除
符合条件
的元素将被返回
- 该方法通常用于
缩小
在被选元素组合中搜索元素的范围
返回带有类名 "intro" 的所有 <p> 元素
$("p").filter(".intro")
10.6 find 方法
作用
返回
被选元素的后代元素
- 后代是
子、孙、曾孙
,依此类推
返回 <ul> 后代中所有的 <span> 元素
$(document).ready(function(){
$("ul").find("span").css({"color":"red","border":"2px solid red"});
});
10.7 each 与 map 区别
each
静态方法默认的返回值就是遍历谁就返回谁
map
静态方法默认的返回值是一个空数组
each
静态方法不支持在回调函数中对遍历的数组进行处理
map
静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
10.8 type 方法
作用
- 该参数是否一个
正则表达式
- 如果对象是
undefined或null
,则返回相应的"undefined"或"null"
- 如果对象有一个
内部属性[[Class]]
和一个浏览器的内置对象的 [[Class]]
相同,就返回相应的 [[Class]] 名字
$.type( undefined ) === "undefined"
$.type() === "undefined"
$.type( window.notDefined ) === "undefined"
$.type( null ) === "null"
$.type( true ) === "boolean"
$.type( 3 ) === "number"
$.type( "test" ) === "string"
$.type( function(){} ) === "function"
$.type( [] ) === "array"
$.type( new Date() ) === "date"
$.type( new Error() ) === "error" // jQuery 1.9 新增支持
$.type( /test/ ) === "regexp"
10.9 trim 方法
$(function () {
var str = " lnj ";
console.log("---"+str+"---");
var $res = $.trim(str);
console.log("---"+$res+"---");
});
10.10 isWindow 方法
作用
判断
传入的对象是否是window对象
返回值 true / false
// 真数组
var arr = [1, 3, 5, 7, 9];
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
// 对象
var obj = {"name":"lnj", age:"33"};
// 函数
var fn = function(){};
// window对象
var w = window;
var res = $.isWindow(w);
console.log(res);
10.11 isArray 方法
作用
判断
传入的对象是否是真数组
返回值 true / false
$(function () {
// 对象
var obj = {name:"lnj",age: "33", gender:"male"};
// 真数组
var arr = [1, 3, 5, 7, 9];
var $res = $.isArray(obj);
console.log($res);// false
var $res2 = $.isArray(arr);
console.log($res2);// true
});
10.12 inArray 方法
作用
返回
数组中指定元素的索引值
- 如果
没有找到
,则返回-1
$(function () {
var arr = [ 4, "Pete", 8, "John" ];
var $spans = $( "span" );
$spans.eq( 0 ).text( jQuery.inArray( "John", arr ) );
$spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );
$spans.eq( 2 ).text( jQuery.inArray( "Karl", arr ) );
$spans.eq( 3 ).text( jQuery.inArray( "Pete", arr, 2 ) );
})
10.13 isFunction 方法
作用
判断
传入的对象是否是一个函数
返回值: true / false
注意点
jQuery
框架本质上是一个函数
(function( window, undefined ) {})( window );
$(function () {
var obj = {name:"lnj",age: "33", gender:"male"};
var arr = [1, 3, 5, 7, 9];
var fn = function () {}
var $res = $.isFunction(obj);
console.log($res);// false
$res = $.isFunction(arr);
console.log($res);
$res = $.isFunction(fn);
console.log($res);
// 通过该方法验证了我们前面所说的,jQuery框架本质是一个匿名函数
$res = $.isFunction($);
console.log($res);
});
10.14 parseJSON 方法
作用
$.parseJSON()
函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象
- 传入
格式有误
的 JSON 字符串可能导致抛出异常
JSON标准不允许"控制字符"如制表符或换行符
解析一个 JSON 字符串
$(function () {
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
})
10.15 makeArray 方法
作用
$.makeArray()
函数用于将一个类似数组的对象转换为真正的数组对象
注意
类数组
对象具有许多数组的属性(例如length
属性,[]数组访问运算符
等)- 但是
缺少从数组的原型对象上继承下来的内置方法
(例如:pop()
、reverse()
等)
将一个HTML元素集合转换成对应的数组
$(function () {
var elems = document.getElementsByTagName("div"); // 返回一个节点列表
var arr = jQuery.makeArray(elems);
arr.reverse(); //对列表的元素使用一个数组方法
$(arr).appendTo(document.body);
})
10.16 extend 方法
作用
jQuery.extend()
函数用于将一个或多个
对象的内容合并
到目标对象
注意
- 如果只为
$.extend()
指定了一个参数,则意味着参数target被省略
,此时,target就是jQuery对象本身
- 通过这种方式,
可以为全局对象 jQuery 添加新的函数
- 如果
多个对象
具有相同的属性
,则后者会覆盖
前者的属性值
<div id="log"></div>
<script>
$(function () {
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
/* object2 合并到 object1 中 */
$.extend(object1, object2);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
})
</script>
10.17 fn.extend 方法
作用
$.fn.extend()
函数为jQuery
扩展一个或多个
实例属性和方法
(主要用于扩展方法
)
提示
jQuery.fn
是jQuery
的原型对象
,其extend()
方法用于为jQuery
的原型
添加新的属性和方法
- 这些方法可以在
jQuery实例对象上调用
11. jQuery 的 Ajax
11.1 Ajax 的定义
11.2 异步刷新的作用
无刷新
: 不刷新整个页面,只刷新局部
无刷新的好处
- 只更新部分页面,
有效利用带宽
- 提供
连续的用户体验
- 提供
类似C/S的交互效果
,操作更方便
11.3 Ajax 和 传统 web 区别
传统web | Ajax技术 |
---|
提交表单 方式发送请求 | 异步引擎对象 发送请求 |
响应内容是一个完整页面 | 响应内容只是需要的数据 |
需等待服务器响应完成并重新加载整个页面后 ,用户才能进行操作 | 可以动态更新页面中的部分内容 ,用户不需要等待请求的响应 |
11.4 Ajax 异步请求原理
11.5 jQuery 的 Ajax 请求
传统方式实现Ajax的不足
- 方法、属性、常用值较多
不好记忆
步骤繁琐
浏览器兼容
问题
- jQuery常用Ajax方法(
“$”不需要选择器,这是工具方法
)
$.ajax()
$.get()
$.post()
$.getJSON()
load()
11.6 Ajax 请求方法的语法
$.ajax({
url: url, // 要提交的 URL 路径
type: "get", // 发送请求的方式
data: data, // 要发送到服务器的数据
dataType: "json" // 指定传输的数据格式
success: function(result){ // 请求成功后要执行的代码
},
error: function(){ // 请求失败后要执行的代码
}
});
11.7 get 请求方法的语法
$.get(url,data,function(result){
// 省略将服务器返回的数据显示到页面的代码
});
// 以上代码等价于
$.ajax({
url:url,
data:data,
type:"get",
success: function(result) {
//省略代码
}
});
11.8 load 请求方法的语法
- 使用
load()
实现异步交互
加载外部的页面文件到当前页面中
$("#nameDiv").load(url,data);
// 以上代码等价于
$.get(url,data,function(result){
$("#nameDiv").html(result);
}
11.9 getJSON 请求方法的语法
- 使用
$.getJSON()
实现异步交互
仅限于JSON数据格式
$.getJSON(url,data, success(result) {
//省略将服务器返回的数据显示到页面的代码
});
12. jQuery 异步请求 Ajax
12.1 跨域问题
URL | 原因 | 是否允许通信 |
---|
http://www.a/dir/b.html | 同一域名下 | 允许 |
http://www.a/dir2/c.html | 同一域名,不同文件夹 | 允许 |
http://www.a:81/dir/d.html | 同一域名,不同端口 | 不允许 |
https://www.a/dir/e.html | 同一域名,不同协议 | 不允许 |
http://71.23.92.77/dir/f.htmll | 域名和域名对应 ip | 不允许 |
http://script.a/g.html | 主域相同,子域不同 | 不允许 |
http://a/h.html | 同一域名,不同二级域名 (同上) | 不允许(cookie 这种情况下也不允许访问) |
http://www/a.html | 主机名不同 | 不允许 |
12.2 跨域问题的解决
- 常用解决方法
服务器设置
代理设置
jsonp
- 通过
script
可以跨域的特点 - 配置
dataType参数
- 配置
jsonp参数
12.3 Ajax 练习
12.3.1 模糊搜索功能
使用淘宝商品推荐的接口,实现模糊搜索功能
- 淘宝商品推荐接口
http://suggest.taobao/sug?code=utf-8&q=关键字&callback=cb
<script>
$(function(){
$('#btnSearch').click(function(){
var searchContent = $('#search').val() // 获取文本框内容
$.ajax({
url: 'http://suggest.taobao/sug', // 后缀为接口数据
type: 'get',
data: {code:'utf-8',q:searchContent}, // code是文字编码,q是查询关键字,传递参数
dataType: 'jsonp', // 设置返回的数据格式为jsonp
jsonpCallback: 'cb', // cb jsonp 返回函数
success: function(result){
console.log(result);
},
error: function(err){
console.log('请求失败,错误信息:',err);
}
})
})
})
</script>
<body>
<form action="">
<input type="text" name="" value="" id="search">
<input type="button" name="" value="搜索" id="btnSearch">
</form>
</body>
13. 总结
本文标签:
基础笔记jquery
发表评论