JQuery 基础笔记
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.2.1 层次选择器练习
- 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 操作练习
- 7.3.1 商品列表
- 7.3.2 滑动门
- 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.5.1 animate
- 9.6 多动画的组合
- 9.7 动画队列
- 9.8 动画相关方法
- 9.8.1 delay
- 9.8.2 stop
- 9.9 动画的结束
- 9.10 动画练习
- 9.10.1 切换显示列表
- 9.10.2
- 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 练习
- 12.3.1 模糊搜索功能
- 13. 总结
1. jQuery 概述
1.1 jQuery 是什么?
- jQuery 由美国人 John Resig 于2006年创建
- jQuery 是目前最流行的 JavaScript 程序库之一,它是对
JavaScript 对象和函数的封装
- 它的设计思想是
write less,do more
,能对 HTML 文档遍历和操作,事件处理,动画以及 Ajax 变得更加简单
1.2 jQuery 简单应用
原生 JS 设置背景
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";
}
使用 jQuery 设置背景
$(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 下载安装
jQuery 官网
- http://jquery.com
1.6 jQuery 使用方法
jQuery 库分开发版和发布版
名称 | 大小 | 说明 |
---|---|---|
jQuery-1.版本号.js(开发版) | 约268KB | 完整无压缩版本,主要用于测试,学习和开发 |
jQuery-1.版本号.min.js(发布版) | 约91KB | 经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目 |
- 在页面中引入jQuery
<script src="js/jquery-3.1.0.js" type="text/javascript"></script>
1.7 jQuery 基本语法结构
工厂函数 $()
- 将 DOM 对象
转化
为 jQuery 对象
- 将 DOM 对象
选择器 selector
- 获取需要操作的 DOM 元素
方法 action()
- jQuery 中提供的方法
$(selector).action()
$("#current").addClass("current")
1.8 jQuery 语法特性
$ 等同于 jQuery
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery(function(){...})
jQuery 链式调用
- jQuery 可以通过
.
不断调用 jQuery 对象的方法
,而原生 JavaScript 则不一定
- jQuery 可以通过
// 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');
});
jQuery 隐式遍历(迭代)
// 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. 原生 jswindow.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 框架本质是一个
为何能访问$符号
- 因为
$
符号 jQuery 框架对外暴露的一个全局变量
- 因为
为何 window.jQuery = window.$ = jQuery;
- jQuery框架
不仅提供了jQuery访问还提供$访问
,提升开发者的编码效率
- jQuery框架
JavaScript中如何定义一个全局变量?
- 所有
全局变量
是window 对象
的属性 - jQuery 框架源码实现
- 所有
window.jQuery = window.$ = jQuery;
使用 jQuery 框架只有
两种方式
- 通过
$
- 通过
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 对象区别
DOM对象
直接
使用 JavaScript 获取的节点对象
var objDOM = document.getElementById("title");
var objHTML = objDOM.innerHTML;
jQuery对象
- 使用 jQuery 包装 DOM 对象后产生的对象,能够使用 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对象
- 通过
get(index)
方法得到相应的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 对象的本质
- 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 属性选择器
- 属性选择器通过
HTML元素的属性
来选择元素
名称 | 语法构成 | 描述 | 示例 |
---|---|---|---|
属性选择器 |
[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)
|
选取含有选择器所匹配的元素的元素
|
集合元素 |
:empty
- 找到
既没有文本内容也没有子元素
的指定元素
- 找到
<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>
:parent
- 找到
有文本内容或有子元素
的指定元素
- 找到
<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>
:contains(text)
- 找到
包含指定文本内容
的指定元素
- 找到
<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
添加或获取
元素value属性
的值
$(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 方法
设置或获取
元素宽度
(相当于获取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获取返回falseconsole.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();
remove()
删除指定元素
// 删除所有div
$("div").remove();
// 删除div中id是box1的那个div
$("div").remove("#box1");
detach()
删除指定元素
// 删除所有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.net/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').lengthfor (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事件的封装
Window
事件鼠标
事件键盘
事件表单
事件
8.1 事件注册
- 事件注册语法
$(对象).type(fn)
type
是事件名
fn
是事件处理函数
$(对象).事件名(fn)$('input').click(function(){alert('123')
})
8.2 事件绑定
- 使用
bind()
方法和on()
方法 优点
- 编码效率略低
缺点
- 所有js事件都可以添加
注意点
- 可以添加多个相同或者不同类型的事件,
不会覆盖
- 可以添加多个相同或者不同类型的事件,
$(对象).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.命名空间
- 事件命名空间主要用于
添加事件命名空间的
条件
- 事件是
通过on来绑定
的 通过trigger触发事件
- 事件是
事件命名空间
注意点
(面试题
)- 利用
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()
方法用于委托事件的注册
$(对象).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 常见动画类型
- jQuery 提供了很多动画效果
- 控制元素
显示与隐藏
- 控制元素
淡入淡出
- 改变元素
高度
- 控制元素
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);// falsevar $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 的定义
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()
实现异步交互
$.ajax({url: url, // 要提交的 URL 路径type: "get", // 发送请求的方式data: data, // 要发送到服务器的数据dataType: "json" // 指定传输的数据格式success: function(result){ // 请求成功后要执行的代码},error: function(){ // 请求失败后要执行的代码}
});
11.7 get 请求方法的语法
- 使用
$.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.com/dir/b.html | 同一域名下 | 允许 |
http://www.a.com/dir2/c.html | 同一域名,不同文件夹 | 允许 |
http://www.a.com:81/dir/d.html |
同一域名,不同端口
|
不允许 |
https://www.a.com/dir/e.html |
同一域名,不同协议
|
不允许 |
http://71.23.92.77/dir/f.htmll |
域名和域名对应 ip
|
不允许 |
http://script.a.com/g.html |
主域相同,子域不同
|
不允许 |
http://a.com/h.html |
同一域名,不同二级域名 (同上)
|
不允许(cookie 这种情况下也不允许访问) |
http://www.cc.com/a.html |
主机名不同
|
不允许 |
12.2 跨域问题的解决
- 常用解决方法
服务器设置
允许跨域请求
代理设置
jsonp
- 通过
script
可以跨域的特点 - 配置
dataType参数
- 配置
jsonp参数
- 通过
12.3 Ajax 练习
12.3.1 模糊搜索功能
使用淘宝商品推荐的接口,实现模糊搜索功能
- 淘宝商品推荐接口
http://suggest.taobao.com/sug?code=utf-8&q=关键字&callback=cb
<script>$(function(){$('#btnSearch').click(function(){var searchContent = $('#search').val() // 获取文本框内容$.ajax({url: 'http://suggest.taobao.com/sug', // 后缀为接口数据type: 'get',data: {code:'utf-8',q:searchContent}, // code是文字编码,q是查询关键字,传递参数dataType: 'jsonp', // 设置返回的数据格式为jsonpjsonpCallback: '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 库能简化原生js编写,做个笔记
JQuery 基础笔记相关推荐
- 【Java Web开发指南】JQuery基础笔记
文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...
- JQuery-学习笔记04【基础——JQuery基础案例】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- JQuery-学习笔记01【基础——JQuery基础】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- jQuery基础(传智播客学习笔记)
JQuery 基础: 1. 概念: 一个JavaScript框架.简化JS开发* jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码 ...
- jQuery基础知识(黑马程序员前端基础必备教程视频笔记)
一.jQuery概述 1.JavaScript库 即library,是一个封装好的特定的集合(方法和函数).从封装的一大堆函数的角度理解库.就是在个库中,封装了很多预先定义好的函数在里面,比如动画an ...
- jQuery基础—高级详细知识笔记
jQuery基础 一.概述 1.什么是jQuery? 2.特点 二.jQuery的定义方式 1.如何导入jQuery.js 2.jQuery核心函数 **jQuery核心函数的四个作用:** 3.如何 ...
- 【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
- 《jQuery基础》总结
目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...
- Js与Jq实战:第七讲:jQuery基础
第七讲:jQuery基础 一.预习笔记 1.jQuery的简述 2.jQuery对象与JS对象 3.jQuery的基本选择器 4.jQuery层次选择器 5.jQuery基本过滤选择器 6.jQuer ...
最新文章
- Android开发笔记之:Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)
- SUID SGID LINUX 权限安全设置
- ECSHOP发送邮件提示need rcpt command的解决方法
- 第十七期:记一次生产环境SQL Server服务器卡顿问题解决--内存分配不当
- 自定义 Git - Git 钩子 (自动部署)
- dom4j工具类_基于DOM4J的XML文件解析类
- 远程开启admin$共享(远程管理需开启如dameware软件)
- Kafka到Hdfs的数据Pipeline整理
- python软件下载安装百度网盘-Python自动化测试视频教程【百度云盘下载】
- webService的使用-----Eclipse
- linux非root用户添加rzsz,Linux rz sz 安装
- 3.7V转12V2A 15V2A 大功率升压芯片 拉杆音响专用升压芯片
- PMP学习笔记 第10章 项目沟通管理
- 水中机器人电控方案设计
- Flink的基础概念
- c++中DLL文件的编写与实现——三步走
- 案例-------ZARA和HM
- 偷偷地告诉学弟学妹们一个高效学习编程的秘密!大学四年悄悄惊艳他们,嘘
- 赵小楼《天道》《遥远的救世主》深度解析(41)芮小丹的恋爱观背后的文化属性
- 软件测试工程师面试题及答案
热门文章
- 导入虚拟电脑 C:\Users\Bob Lee\Downloads\BitcrazeVM_2022.05.ova失败. 返回 代码: E_INVALIDARG (0x80070057)
- 【社会网络分析_02】凝聚子群分析与社会网络经典理论
- [Python Study Notes]进程信息(丁丁软件监控进程,http-post)
- 微服务学习笔记(一):什么是微服务架构
- 全球与中国惰性气体质谱仪市场现状及未来发展趋势
- 易能变频器说明书故障代码_易能变频器故障代码大全E013故障
- Python-Pandas之日期分组(将日期按照设定的组分为不同类型)
- 激光雷达对植被冠层结构和SIF同时探测展望
- gym安装box2d遇到的问题
- 英国工人手机上网欠巨债 收到2.7万英镑帐单