本文深入讲解jQuery的基础知识，包括其设计理念、语法特性、DOM操作、事件处理、动画效果及节点操作等内容，适合初学者快速掌握jQuery的使用技巧。
jQuery 基础篇
概述
jQuery是一款优秀的JavaScript库 ，
从命名可以看出jQuery最主要的用途是用来做查询(jQuery=js+Query) ，
正如jQuery官方Logo副标题所说(write less, domore)
使用jQuery能上我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单
入门
和原生JS区别
1、原生JS：
等DOM元素加载完毕，并且图片也加载完毕才会执行
编写多个入口函数，后面会覆盖前面
2、jQuery
等Dom元素加载完毕，但不会等到图片也加载完毕就会执行
编写多个入口函数，后面不会覆盖前面
入口函数写法
1、第一种写法"(推荐)"
$(function(){
//内容
})
2、第二种写法
$(document).ready(function(){
//内容
})
3、第三种写法
jQuery(document).ready(function(){
//内容
})
4、第四种写法
jQuery(function(){
//内容
})
解决冲突问题
如若在引入别的框架和jQuery框架语法冲突，例如：$的冲突。
"1、释放$的使用权"
jQuery.noConflict();
注意：这样释放后便不能使用$，而用jQuery来替代，释放操作必须在编写其他jQuery代码之前编写
"2、自定义一个访问符"
var jq=jQuery.noConflict()
/*
此时jq便是自定义的访问符，用来替代$
*/
练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery学习</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var $box1=$(".box1")
var $box2=$(".box2")
var $box3=$(".box3")
$box1.css({
background:"lightpink"
})
$box2.css({
background:"lightgreen"
})
$box3.css({
background:"lightblue"
})
})
</script>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
核心函数和工具方法
$()
"$() 代表调用jQuery的核心函数"
1、接受一个函数（作为入口函数）
$(function(){
console.log("Hello World~")
2、接受一个字符串选择器
var $box1=$(".box1")
var $box2=$("#box2")
/*返回一个jQuery对象，对象中保存了找到的DOM元素*/
3、接受一个字符串代码片段
var $p=$("<p>我是新添加的代码片段</p>")
$box1.append($p)
/*返回一个jQuery对象，对象中保存了创建的DOM元素，将返回的对象作为子节点，添加到box1树中*/
4、接受一个DOM元素
var span=document.getElementSByTagName("span")[0]
var $span=$(span)
console.log($span)
/*$()会将内容包装成一个jQuery对象并返回*/
})
jQuery 对象
jQuery对象是一个伪数组
"伪数组：
有0到length-1的属性，并且有length属性
原生forEach()和jQuery的each()
var arr=[1,2,3,4,5,6]
/*数组*/
var obj={0:1,1:2,2:3,3:4,4:5,length:5}
/*伪数组对象*/
"1、原生JS的forEach方法只能遍历数组，不能遍历伪数组"
/*
第一个参数：遍历的元素
第二个参数：当前遍历到的索引
*/
arr.forEach(function(value,index){
console.log(index,value)
})
"2、jQuery的each自有方法遍历数组，也可以遍历伪数组"
/* 第一个参数：要遍历的数组
第二个回调函数的参数：
第一个参数：当前遍历到的索引
第二个参数：遍历的元素
*/
$.each(arr,function(index,value){
console.log(index,value)
})
$.each(obj,function(index,value){
console.log(index,value)
})
})
原生map() 和 jQuery的map()
var arr=[1,2,3,4,5,6]
/*数组*/
var obj={0:1,1:2,2:3,3:4,4:5,length:5}
/*伪数组对象*/
"1、原生JS的map方法遍历数组，但不能遍历伪数组"
/*
第一个参数：当前遍历到的元素
第二个参数：当前遍历到的索引
第三个参数：当前遍历到的数组
*/
arr.map(function(value,index,arry){
console.log(index,value,arry)
})
"2、jQuery的map方法遍历数组，也能遍历伪数组"
/*
第一个参数：要遍历的数组
第二个参数：每遍历一个元素之后执行的回调函数
回调函数的参数：
第一个参数：遍历到的元素
第二个参数：遍历到的索引
*/
$.map(arr,function(value,index){
console.log(index,value)
})
$.map(obj,function(value,index){
console.log(index,value)
})
jQuery中的each和map方法的区别
each方法默认的返回值是，遍历谁就返回谁
map方法默认的返回值是一个空数组
each方法不支持在回调函数中对遍历的数组进行处理
map方法可以在回调函数中通过return对遍历的数组进行处理
jQuery中其他方法
trim()
$.trim()方法是用来去除字符串中俩端的空格
返回值：去除空格之后的新字符串
例如：
var str=' str '
var result=$.trim(str)
console.log(result)
isWindow()
用来判断是否是window对象
例如：
var arr=[1,2,3]
var res1=$.isWindow(window)
console.log(res1)
/*true*/
var res2=$.isWindow(arr)
console.log(res2)
/*false*/
isArray()
用来判断是否是Array真数组
例如：
var arr=[1,2,3,4,5,6]
/*数组*/
var obj={0:1,1:2,2:3,3:4,4:5,length:5}
/*伪数组对象*/
var res1=isArray(arr)
console.log(res1)
/*true*/
var res2=isArray(obj)
console.log(res2)
/*false*/
isFunction()
用来判断是否是一个Function类型
例如：
var arr=[1,2,3,4,5,6]
/*数组*/
var res1=$.isFunction(jQuery)
console.log(res1)
/*true,证明jQuery是一个函数*/
var res2=$.isFunction(arr)
console.log(res2)
/*false*/
holdReady()
作用：暂停jQuery入口函数ready方法的执行
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>holdReady()</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$.holdReady(true)
$(document).ready(function(){
alert("恢复成功")
})
</script>
</head>
<body>
<button>恢复ready事件</button>
<script>
var btn=document.getElementsByTagName("button")[0]
btn.addEventListener("click",function(){
$.holdReady(false)
})
</script>
</body>
</html>
属性操作
内容选择器
empty
"作用：找到既没有文本内容,也没有子元素的指定元素"
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin-top: 20px;
background-color: burlywood;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var $div=$("div:empty")
console.log($div)
/*只有第一个div元素符合*/
})
</script>
</head>
<body>
<div></div>
<div>我是有内容的</div>
<div><span></span></div>
</body>
</html>
:parent
"作用：找到有文本内容或有子元素的指定元素"
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin-top: 20px;
background-color: burlywood;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var $parent=$("div:parent")
console.log($parent)
/*第二个div元素和第三个div元素都有文本内容或子级元素*/
})
</script>
</head>
<body>
<div></div>
<div>我是有内容的</div>
<div><span></span></div>
</body>
</html>
:contains(‘text’)
"作用：找到包含指定文本内容的指定元素"
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin-top: 20px;
background-color: burlywood;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var $contains=$("div:contains('我')")
console.log($contains);
/*第二个div元素和第三个div元素都有关键字：我*/
})
</script>
</head>
<body>
<div></div>
<div>我是有内容的</div>
<div>哈哈，我也是</div>
<div><span></span></div>
</body>
</html>
:has(‘selector’)
"作用：找到包含指定子元素的指定元素"
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin-top: 20px;
background-color: burlywood;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var $has=$("div:has('span')")
console.log($has)
/*找到包含子元素span的指定元素，第四个div元素符合*/
})
</script>
</head>
<body>
<div></div>
<div>我是有内容的</div>
<div>哈哈，我也是</div>
<div><span></span></div>
</body>
</html>
属性
对象身上保存的变量就是属性
在编写HTML代码时，在HTML标签中添加的属性就是属性节点（DOM对象中的attribute）
操作属性节点
.attr('name','value')
作用：获取第一个指定元素属性节点的值或设置多个指定元素属性节点的值，若设置的属性节点不存在，会自动新增属性节点
可以传递一个参数，也可传递俩个参数
若传递一个参数：代表获取属性节点的值"（无论找到多少个元素，只会返回第一个）"
若传递俩个参数：代表设置属性节点的值
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性节点操作</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var $attr=$("div").attr("class")
console.log($attr)
/*结果：返回第一个div元素属性节点的值*/
var $setAttr=$("div").attr("class","box")
console.log($setAttr)
/*
结果：三个div的属性节点都变为：class='box'
注意：第二个div还保有原来的name属性节点，只不过是又新增一个属性节点class
*/
//可打开注释进行测试
// var $remove=$("div").removeAttr('class name')
// console.log($remove)
/*
结果：所有div元素都没有了属性节点
*/
})
</script>
</head>
<body>
<div class="box1">我是box1</div>
<div name="box2">我是box2</div>
<div class="box3">我是box3</div>
</body>
</html>
-----------------------------------------------------------------------------------------
.removeAttr('name')
作用：删除所有找到元素指定的属性节点
删除多个：.removeAttr('name name')
若删除多个，中间用空格隔开
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性节点操作</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var $attr=$("div").attr("class")
console.log($attr)
/*结果：返回第一个div元素属性节点的值*/
var $setAttr=$("div").attr("class","box")
console.log($setAttr)
/*
结果：三个div的属性节点都变为：class='box'
注意：第二个div还保有原来的name属性节点，只不过是又新增一个属性节点class
*/
//可打开注释进行测试
// var $remove=$("div").removeAttr('class name')
// console.log($remove)
/*
结果：所有div元素都没有了属性节点
*/
})
</script>
</head>
<body>
<div class="box1">box1</div>
<div name="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
操作属性
.prop("name","value")
语法和attr方法一致
"注意点：不仅能操作属性还能操作属性节点"
"官方推荐在操作属性节点时，具有true 和false 两个属性的属性节点，如checked, selected 或者disabled 使用prop()，其他的使用attr()"
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性操作</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$("span").eq(0).prop("demo", "span01"); //eq里是第1个span
$("span").eq(1).prop("demo", "span02");
console.log($("span"))
/*
因span元素中属性节点只有class，而没有domo，便开始为span新增属性
此时，第一个span元素中多了demo属性，值为span01
第二个span元素中demo属性，值为span02
注意：添加的是属性，而不是属性节点
属性节点是在attributes属性中
*/
// 注意点：prop方法不仅能够操作属性，它还能操作属性节点
$("span").prop("class", "box");
console.log($("span").prop("class"));
/*此时修改的是指定属性节点class*/
})
</script>
</head>
<body>
<span class="span1"></span>
<span class="span2"></span>
</body>
</html>
-----------------------------------------------------------------------------------------
.removeProp("name")
语法和removeAttr方法一致
CSS 类
addClass()
添加一个类
如果要添加多个，多个类名之间用空格隔开
removeClass()
删除一个类
如果删除多个，多个类名之间用空格隔开
toggleClass()
切换类
有就删除，没有就添加
综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS类操作</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var butts=document.getElementsByTagName('button')
butts[0].addEventListener('click',function(){
$('div').addClass("class1 class2")
/*此时添加了俩个样式class1和class2*/
})
butts[1].addEventListener('click',function(){
$('div').removeClass("class1 class2")
/*此时删除了俩个样式class1和class2*/
})
butts[2].addEventListener('click',function(){
$('div').toggleClass("class1 class2")
/*此时可以来回切换俩个样式class1和class2*/
})
})
</script>
<style>
.class1{
width: 100px;
height: 100px;
background-color: cadetblue;
}
.class2{
border: 6px solid brown;
}
</style>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>
HTML 代码/文本/值
html()
和原生JS中innerHTML一样
获取或设置指定标签元素中的HTML代码框架
text()
和原生JS中innerText一样
获取或设置指定标签元素中的文本内容
val()
和原生JS中的value一样
获取或设置value内容
综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML操作</title>
<style>
div{
width: 450px;
height: 200px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var butts=document.getElementsByTagName('button')
butts[0].addEventListener('click',function(){
$('div').html("<h1>我是标题</h1><p>我是内容</p>")
})
butts[1].addEventListener('click',function(){
alert($('div').html())
})
butts[2].addEventListener('click',function(){
$('div').text("<h1>我是标题</h1><p>我是内容</p>")
})
butts[3].addEventListener('click',function(){
alert($('div').text())
})
butts[4].addEventListener('click',function(){
$('input').val("我是输入框的指定内容")
})
butts[5].addEventListener('click',function(){
alert($('input').val())
})
})
</script>
</head>
<body>
<button>设置代码框架</button>
<button>获取代码框架</button>
<button>设置文本内容</button>
<button>获取文本内容</button>
<div></div>
<input type="text">
<button>设置value值</button>
<button>获取value值</button>
</body>
</html>
CSS 样式操作
CSS()
1、逐个设置
例如：
$(function(){
$('div').css('width','100px')
$('div').css('height','100px')
$('div').css('background','lightpink')
})
-----------------------------------------------------------------------------------------
2、链式设置
例如：
$(function(){
$('div').css('width','100px').css('height','100px').css('background','lightpink')
})
注意点：链式操作大于3个，建议分开，因为会影响阅读性
-----------------------------------------------------------------------------------------
3、批量设置（传入对象，进行整体设置，"推荐写法"）
例如：
$(function(){
$('div').css({
width:'100px',
height:'100px',
background:'lightpink'
})
})
-----------------------------------------------------------------------------------------
4、获取CSS样式值
例如：
$(function(){
console.log($('div').css('width'))
console.log($('div').css('height'))
console.log($('div').css('background'))
})
位置
offset()
获取或设置元素距离窗口的偏移位
1、设置位置
$('.son').offset({
top:60,
left:20
})
2、获取位置
$('.son').offset().top
-----------------------------------------------------------------------------------------
position()
获取元素距离定位元素的偏移位
1、获取位置
$('.son').position().top
"注意：position只能获取不能设置"
-----------------------------------------------------------------------------------------
当然还有scrollTop()和scrollLeft() 这俩个是设置页面的滚动条
1、获取位置
$('.content').scrollTop()
2、设置位置
$('.content').scrollTop(300)
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML操作</title>
<style>
.container{
width: 1000px;
height: 3000px;
}
.content{
width: 300px;
height: 300px;
border: 1px solid black;
overflow: auto;
margin: 0 100px;
margin-bottom: 10px;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var butts=document.getElementsByTagName('button')
butts[0].addEventListener('click',function(){
alert($('.content').scrollTop())
})
butts[1].addEventListener('click',function(){
$('.content').scrollTop(300)
})
butts[2].addEventListener('click',function(){
alert($('body').scrollTop()+ $('html').scrollTop())
/*解决浏览器兼容，所以要body和html俩个拼加，总会是有一个是生效的，不生效的默认为0*/
})
butts[3].addEventListener('click',function(){
$('html,body').scrollTop(500)
/*解决浏览器兼容的写法*/
})
})
</script>
</head>
<body>
<div class="container">
<div class="content">
我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素
我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素我是内容元素
</div>
<button>获取内容元素滚动条Top值</button>
<button>设置内容元素滚动条Top值</button>
<button>获取页面元素滚动条Top值</button>
<button>设置页面元素滚动条Top值</button>
</div>
</body>
</html>
尺寸
获取或设置元素实际宽度或高度等
如有，width() width("100px") height() height("100px") innerWidth() outerHeight()等等
位置和尺寸综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML操作</title>
<style>
.father{
width: 300px;
height: 300px;
border: 50px solid brown;
background-color: cornflowerblue;
position: relative;
margin: 50px;
}
.son{
width: 150px;
height: 150px;
background-color: cornsilk;
left: 75px;
top: 75px;
position: absolute;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
var butts=document.getElementsByTagName('button')
butts[0].addEventListener('click',function(){
$('.father').width("500px").height("500px")
})
butts[1].addEventListener('click',function(){
alert('宽度为：'+ $('.father').width())
alert('高度为: ' +$('.father').height())
})
butts[2].addEventListener('click',function(){
$('.son').offset({
top:60,
left:20
})
})
butts[3].addEventListener('click',function(){
alert('top值为：'+ $('.son').offset().top)
alert('left值为：'+ $('.son').offset().left)
})
butts[4].addEventListener('click',function(){
alert('top值为：'+ $('.son').position().top)
alert('left值为：'+ $('.son').position().left)
})
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>设置父级宽高</button>
<button>获取父级宽高</button>
<button>设置子级offset位置</button>
<button>获取子级offset位置</button>
<button>获取子级position位置</button>
</body>
</html>
事件操作
事件绑定
1、第一种方式（部分事件jQuery没有实现,编码效率略高）
eventName(function(){})
例如：
$('button').click(function(){
alert("我被点击了~")
})
"注意点：可以添加多个相同或不同类型事件，并且不会被覆盖"
-----------------------------------------------------------------------------------------
2、第二种方式（所以js事件都可以添加，编码效率略低）
on(eventName,function(){})
例如：
$('button').on('click',function(){
alert("我被点击了~")
})
"注意点：可以添加多个相同或不同类型事件，并且不会被覆盖"
事件移除
off()
不传参：会移除所有绑定事件
例如：
$('button').off()
传一个参数：会移除所有指定类型事件
$('button').off('click')
传递俩个参数：会移除所有指定类型的指定事件
例如：
function fun(){
alert("我被执行了~")
}
function leave(){
alert("我离开了~")
}
$('button').click(fun)
$('button').mouseleave(leave)
$('button').off("click",fun)
/*只移除了指定的click事件，且是fun函数*/
事件绑定和移除练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定和解除事件</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
function fun(){
alert("事件绑定成功√")
$("button").eq(0).css({
display:'none'
})
}
$('button').eq(0).click(fun)
$('button').eq(1).off(fun)
$('button').eq(1).click(function(){
alert("解除成功√")
$("button").eq(0).css({
display:'inline-block'
})
})
})
</script>
</head>
<body>
<button class="on">点击弹窗对话框</button>
<button class="off">点击解除所有事件</button>
</body>
</html>
事件冒泡
事件冒泡就是当点击目标元素事件时，其事件会按照DOM树结构由目标元素向上的顺序传播，直到document对象为止。（有的浏览器是window）
阻止事件冒泡
1、给子级执行事件的函数中的最后 ，添加 return false 语句
2、给子级执行事件的函数中的最后 ，添加 event.stopPropagation() 语句
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阻止事件冒泡</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: rgb(112, 180, 236);
}
.son{
width: 300px;
height: 300px;
background-color: rgb(153, 214, 161);
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('.father').click(function(){
alert("我是father元素")
})
$('.son').click(function(event){
alert("我是son元素")
return false
/*第一种阻止事件冒泡方式*/
event.stopPropagation()
/*第二种阻止事件冒泡方式*/
})
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
默认行为
什么是默认行为：说白了，就是浏览器自带的功能，比如网页右键自动弹出菜单。在输出框中敲击键盘，自动输出敲击的数值。点击a标签自动跳转，点击form表单自动将数据提交到服务器，这些都是默认行为
阻止默认行为
1、给当前要阻止的元素，添加return false 语句
2、给当前要阻止的元素，添加event.preventDefault() 语句
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阻止默认行为</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('a').click(function(event){
alert("已为你阻止了默认跳转")
return false
/*第一种阻止默认行为方式*/
event.preventDefault()
/*第二种阻止默认行为方式*/
})
})
</script>
</head>
<body>
<a href="https://blog.3xnb.com">点击阻止默认跳转</a>
</body>
</html>
事件自动触发
1、$('button').trigger('click')
2、$('button').triggerHandler('click')
"俩种区别：
trigger:
自动触发事件后，会触发事件冒泡
自动触发事件后，会触发默认行为
triggerHandler:
自动触发事件后，不会触发事件冒泡
自动触发事件后，不会触发默认行为
1、trigger练习代码，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>trigger和triggerHandler区别</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: rgb(112, 180, 236);
}
.son{
width: 300px;
height: 300px;
background-color: rgb(153, 214, 161);
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('.father').click(function(){
alert("我是father元素")
})
$('.son').click(function(event){
alert("我是son元素")
})
$("input[type='submit']").click(function(){
alert("submit ing...")
})
$('.son').trigger('click')
/*给son子元素绑定了trigger自动触发事件，会进行事件冒泡*/
$("input[type='submit']").trigger('click')
/*为submit绑定trigger事件，自动触发事件后，会触发默认跳转行为*/
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<form action="https://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
-----------------------------------------------------------------------------------------
2、triggerHandler练习代码，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>trigger和triggerHandler区别</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: rgb(112, 180, 236);
}
.son{
width: 300px;
height: 300px;
background-color: rgb(153, 214, 161);
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('.father').click(function(){
alert("我是father元素")
})
$('.son').click(function(event){
alert("我是son元素")
})
$("input[type='submit']").click(function(){
alert("submit ing...")
})
$('.son').triggerHandler('click')
/*给son子元素绑定了triggerHandlertrigger自动触发事件，不会触发事件冒泡*/
$("input[type='submit']").triggerHandler('click')
/*为submit绑定绑定triggerHandlertrigger事件，自动触发事件后，不会触发默认行为*/
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<form action="https://www.baidu.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
a标签面试题
"注意：如若a标签添加了trigger自动触发事件，但并不会触发默认跳转行为，那么便在a标签中添加一个子级元素，并把a绑定的trigger移除，再将这个子级元素绑定上trigger事件，这时便不会生效跳转的默认行为。"
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件自动触发</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('span').click(function(event){
alert("跳转ing...")
})
$('span').trigger('click')
/*为a标签的子级span绑定trigger*/
})
</script>
</head>
<body>
<a href="https://blog.3xnb.com"><span>点击默认跳转</span></a>
</body>
</html>
自定义事件
自定义事件必须满足俩个条件：
1、必须通过on绑定
2、必须通过trigger来触发
$('button').on('myClick',function(){
alert('我是自定义事件')
})
$('button').trigger('myClick')
事件命名空间
满足条件：
1、通过on绑定
2、通过trigger来触发事件，来确定是那个人定义的事件
$('button').on('Click.jine',function(){
alert('我是jine定义的事件')
})
$('button').on('Click.other',function(){
alert('我是other定义的事件')
})
$('button').trigger('Click.jine')
/*这样自动触发事件，会触发jine定义的事件，解决了在共同开发项目中，区分了是谁定义的相同事件*/
命名空间面试题
"总结：
1、利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，如若父元素没有命名空间的事件不会被触发
2、利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>trigger和triggerHandler区别</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: rgb(112, 180, 236);
}
.son{
width: 300px;
height: 300px;
background-color: rgb(153, 214, 161);
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('.father').on('click.jine',function(){
alert("father click.jine")
})
$('.father').on('click',function(){
alert("father click")
})
$('.son').on('click.jine',function(){
alert("son click.jine")
})
$('.son').trigger('click.jine')
/*此时结果，便对应的上面总结的第一条*/
$('.son').trigger('click')
/*此时结果，便对应上面总结的第二条*/
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
事件委托
事件委托便是：请别人帮忙做事情，然后将做完的结果反馈
在这些HTML元素的共同父级元素注册了事件。这种方式被称为事件委托。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('button').click(function(){
$('ul').append('<li>我是新增的li</li>')
})
$('ul').delegate('li','click',function(){
console.log($(this).html())
})
/*给所有li元素共同的父级绑定事件，
这样即使是动态添加的li元素也会通过冒泡方式找到父级ul，
会触发ul的事件委托*/
})
</script>
</head>
<body>
<ul>
<li>我是li one</li>
<li>我是li two</li>
<li>我是li there</li>
</ul>
<button>点击新增li</button>
</body>
</html>
移入移出事件
移入和移除如下：
mouseover
mouseout
子元素被移入或移出也会触发父元素的事件
-----------------------------------------------------------------------------------------
推荐使用以下俩个方法：
mouseenter
mouseleave
子元素被移入或移出也不会触发父元素的事件
-----------------------------------------------------------------------------------------
以下这个方法可以实现移入和移出：
俩个function参数：
$('element').hover(function(){
//移入内容
},function(){
//移出内容
})
一个function参数：
$('element').hover(function(){
//移入内容和移出内容
}）
-----------------------------------------------------------------------------------------
siblings()
找到当前元素其他兄弟元素，可以配合移入事件使用
动画效果动效
小知识：
在jQuery中如若需要执行动画，建议在执行动画之前先调用stop()方法，然后在执行动画，可以避免bug
显示和隐藏动画
1、显示动画：
show(1000,function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
---------------------------------------------------------------
2、隐藏动画：
hide(1000,function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
----------------------------------------------------------------
3、显示和隐藏的来回切换效果
toggle(1000,function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
显示与隐藏综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示与隐藏动画</title>
<style>
div{
width: 300px;
height: 300px;
background: linear-gradient(45deg,pink,rgb(155, 207, 224));
margin-top: 10px;
display: none;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('button').eq(0).click(function(){
$('div').show(1000,function(){
alert("显示动画执行完毕")
})
})
$('button').eq(1).click(function(){
$('div').hide(1000,function(){
alert("隐藏动画执行完毕")
})
})
$('button').eq(2).click(function(){
$('div').toggle(1000,function(){
alert("切换动画执行完毕")
})
})
})
</script>
</head>
<body>
<button>显示动画</button>
<button>隐藏动画</button>
<button>切换动画</button>
<div></div>
</body>
</html>
展开和收起动画
1、展开动画
slideDown(1000,function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
-----------------------------------------------------------------------------------------
2、收起动画
slideUp(1000,function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
-----------------------------------------------------------------------------------------
3、展开和收起的来回切换效果
slideToggle(1000,function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
淡入和淡出动画
1、淡入动画
fadeIn(1000,function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
-----------------------------------------------------------------------------------------
2、淡出动画
fadeOut(1000,function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
-----------------------------------------------------------------------------------------
3、淡入和淡出的来回切换效果
fadeToggle(1000,function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
-----------------------------------------------------------------------------------------
4、淡入到的程度
fadeTo(1000,0.5，function(){
//动画执行完毕后调用
})
参数1：指定动画时长，单位为毫秒
参数2：指定动画节奏，默认是swing（可省略）
参数3：function，动画执行完毕后执行的回调函数（可省略）
弹窗广告案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹窗广告</title>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('span').click(function(){
$('.add').remove()
/*删除div，关闭广告*/
})
$('.add').slideDown(500).fadeOut(500).fadeIn(500)
/*执行动画队列依次执行动画效果*/
})
</script>
<style>
.add{
position: fixed;
right: 10px;
bottom: 10px;
border: 1px solid rgb(14, 86, 219);
display: none;
}
.add span{
display: inline-block;
width: 60px;
height: 60px;
position: absolute;
top:30px;
right: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="add">
<img src="https://jine.oss-cn-beijing.aliyuncs.com/image/%E5%BC%B9%E7%AA%97%E5%B9%BF%E5%91%8A.jpg" alt="">
<span></span>
</div>
</body>
</html>
自定义动画
1、自定义动画语法
animate({marginLeft:500},1000,'linear',function(){
//动画执行完毕后调用
})
参数1：接受一个对象，可以在对象中修改属性，执行动画效果
参数2：指定动画时长，单位为毫秒
参数3：指定动画节奏，默认是swing（可省略）
参数4：function，动画执行完毕后执行的回调函数（可省略）
-----------------------------------------------------------------------------------------
2、累加属性操作
animate({
marginLeft:"+=100"
/*左外边距每点按钮一次累加100*/
},1000,'linear',function(){
//动画执行完毕后调用
})
-----------------------------------------------------------------------------------------
3、关键字操作
animate({
width:"hide"
/*此时的关键字为：hide，所以宽度动画隐藏*/
},1000,'linear',function(){
//动画执行完毕后调用
})
自定义动画综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义动画</title>
<style>
div{
width: 100px;
height: 100px;
background-color: rgb(42, 83, 209);
margin-top: 10px;
}
div:nth-of-type(2){
background-color: salmon;
}
div:nth-of-type(3){
background-color:springgreen;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('button').eq(0).click(function(){
$('div').eq(0).animate({
marginLeft:600
},1000,'linear',function(){
alert("我是自定义动画，执行完毕了~")
})
})
/*方块匀速移动到左外边距为600的位置*/
$('button').eq(1).click(function(){
$('div').eq(1).animate({
marginLeft:"+=600"
/*左外边距每点按钮一次累加100*/
},1000,'linear',function(){
alert("我是累加属性动画，执行完毕了~")
})
})
/*每点击一次按钮，方块便匀速距左外边距600*/
$('button').eq(2).click(function(){
$('div').eq(1).animate({
width:"hide"
/*此时的关键字为：hide，所以宽度动画隐藏*/
},1000,'linear',function(){
//动画执行完毕后调用
})
})
})
</script>
</head>
<body>
<button>点击自定义动画操作</button>
<button>点击累加属性操作</button>
<button>点击关键字操作</button>
<div>我是自定义动画</div>
<div>我是累加属性</div>
<div>我是关键字</div>
</body>
</html>
停止和延迟动画
1、停止动画
以下传入参数个数的不同情况：
1、立即停止当前动画，继续执行后续的动画
$("div"). stop();
$("div"). stop(false) ;
$("div"). stop(false, false) ;
2、立即停止当前和后续所有的动画
$("div"). stop(true) ;
$("div"). stop(true, false);
3、立即完成当前的，继续执行后续动画
$("div"). stop(false, true);
4、立即完成当前的，并且停止后续所有的
$(" 'div" ). stop(true, true) ;
-----------------------------------------------------------------------------------------
2、延迟动画
delay(1000)
作用：用于动画延迟
参数为：延迟时间，单位为毫秒
停止和延迟动画综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>停止和延迟动画</title>
<style>
div{
width: 100px;
height: 100px;
background-color: tomato;
}
div:nth-of-type(2){
width: 500px;
height: 20px;
background-color: turquoise;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
$('button').eq(0).click(function(){
$('div').eq(0).animate({
width:500
},1000).delay(1000).eq(0).animate({
height:500
},1000).animate({
height:100
},1000).animate({
width:100
},1000)
})
/*
上例动画队列：将方块先变宽后延迟1s在变高，最后在恢复原状
*/
$('button').eq(1).click(function(){
/*
以下代码可以把注释解开一一尝试
*/
//1、立即停止当前动画，继续执行后续的动画
// $('div').stop()
// $('div').stop(false)
// $('div').stop(false,false)
//2、立即停止当前和后续所有的动画
// $("div"). stop(true) ;
// $("div"). stop(true, false);
//3、立即完成当前的，继续执行后续动画
// $("div"). stop(false, true);
//4、立即完成当前的，并且停止后续所有的
$("div" ). stop(true, true) ;
})
})
</script>
</head>
<body>
<button>开始动画</button>
<button>停止动画</button>
<div></div>
<div></div>
</body>
</html>
动画设置
关闭页面上所有的动画
jQuery.fx.off=true
默认属性为false
动画帧速
默认帧速为13ms
帧速越大动画越卡，越小越流畅（越流畅越消耗浏览器性能）
设置帧速：
jQuery.fx.interval=100
无限滚动轮播图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动轮播图</title>
<style>
*{
box-sizing: border-box;
}
.view{
width: 800px;
height: 400px;
margin: 100px auto;
overflow: hidden;
}
.view ul{
width: 2400px;
height: 100%;
list-style: none;
position: relative;
padding: 0;
margin-top: 0;
cursor: pointer;
background-color: black;
}
.view ul li{
display: block;
width: 400px;
height: 100%;
float: left;
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/1.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(2){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(3){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/3.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(4){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/5.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(5){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/1.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.view ul li:nth-of-type(6){
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
//1、定义变量保存偏移量
var offset=0;
//2、让图片滚动
var timer;
//自动滚动
function autoPlay(){
timer=setInterval(function(){
offset-=3
if(offset<=-1600){
offset=0
}
$('ul').css('marginLeft',offset)
},10)
}
autoPlay()
//3、监听li的移入和移除事件
$('li').hover(function(){
//鼠标悬浮后，停止滚动
clearInterval(timer)
//非当前选择设置半透明淡入蒙版，因为父级元素为黑色
$(this).siblings().fadeTo(100,0.5)
//去除当前选中的蒙版
$(this).fadeTo(100,1)
},function(){
//继续滚动
autoPlay()
//去除所有蒙版
$('li').fadeTo(100,1)
})
})
</script>
</head>
<body>
<!-- 视觉窗口 -->
<div class="view">
<!-- 滚动窗口 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
节点操作
添加节点
插入内部
1、将元素添加到指定元素'内部'（当作子级）的"最后面"
append()
语法：$('ul').append($('<li>我是新增的li</li>'))
2、将元素添加到指定元素'内部'（当作子级）的"最后面"（第二种写法）
appendTo()
语法：$('<li>我是新增的li</li>').appendTo('ul')
-----------------------------------------------------------------------------------------
1、将元素添加到指定元素'内部'（当作子级）的"最前面"
prepend()
语法：$('ul').prepend($('<li>我是新增的li</li>'))
2、将元素添加到指定元素'内部'（当作子级）的"最前面"（第二种写法）
prependTo()
语法：$('<li>我是新增的li</li>').prependTo('ul')
插入外部
1、将元素添加到指定元素'外部'（当作兄弟）的"后面"
after()
语法：$('ul').after($('<li>我是新增的li</li>'))
2、将元素添加到指定元素'外部'（当作兄弟）的"后面"（第二种写法）
insertAfter()
$('<li>我是新增的li</li>').insertAfter('ul')
-----------------------------------------------------------------------------------------
1、将元素添加到指定元素'外部'（当作兄弟）的"前面"
before()
语法：$('ul').before($('<li>我是新增的li</li>'))
2、将元素添加到指定元素'外部'（当作兄弟）的"前面"（第二种写法）
insertBefore()
语法：$('<li>我是新增的li</li>').insertBefore('ul')
删除节点
1、删除指定元素
remove()
$('ul').remove()
/*这样删除了所有ul元素*/
$('ul').remove('.class')
/*这样删除了指定元素类名为.class的ul元素*/
2、删除指定元素的文本内容和子元素，指定元素自身不会被删除
empty()
3、删除指定元素（和remove相同）
detach()
替换节点
1、替换所有匹配的元素为指定的元素
replaceWith()
语法：$('h1').replaceWith($('<h6>我是标题6</h6>'))
2、替换所有匹配的元素为指定的元素（第二种写法）
replaceAll()
语法：$('<h6>我是标题6</h6>').replaceAll('h1')
复制节点
1、浅复制（只能复制元素，不能复制其事件）
clone(false)
var $li=$('li:first').clone(false)
/*浅复制一个元素*/
$('ul').append($li)
/*将复制的元素添加到ul中*/
-----------------------------------------------------------------------------------------
2、深复制（不但能复制元素，而且也能复制其事件）
clone(true)
var $li=$('li:first').clone(true)
/*深复制一个元素*/
$('ul').append($li)
/*将复制的元素添加到ul中*/
博客简易版发布文章案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客版简易发布文章</title>
<style>
/*
本页面兼容火狐浏览器，因没有按照W3C标准，在其他浏览器排版可能出乱
*/
*{
box-sizing: border-box;
}
body{
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.container{
width: 80%;
height: auto;
background-color: rgba(155, 211, 236,0.7);
margin: 100px auto;
position: relative;
overflow: hidden;
}
.container .inputContent{
width: 60%;
margin: 0 auto;
display: block;
height: 100px;
resize: none;
border: none;
outline: none;
padding-left: 10px;
padding-top: 10px;
float: left;
margin-left: 55px;
margin-bottom: 10px;
}
.container .send{
position: absolute;
top:10%;
margin-left: 5px;
cursor: pointer;
background-color: coral;
outline: none;
border: none;
}
.container .article {
width: 60%;
height: auto;
margin: 0 auto;
background-color: cornsilk;
position: relative;
overflow: hidden;
margin-top: 10px;
}
.container .article .date{
position: relative;
float: right;
margin-right: 10px;
}
.container .right{
width: 30%;
height: 800px;
background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/N5Q%7DE2939%5DCY%7E2VQJP3B1%5DP.png);
float: right;
background-repeat: no-repeat;
background-size: cover;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
<script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
<script>
$(function(){
// 实时监听内容输入
$('body').delegate('.inputContent','propertychange input',function(){
//判断输入框是否输入内容
if($(this).val().length>0){
//发布按钮可用
$(".send").prop('disabled',false);
}else{
//发布按钮不可用
$(".send").prop('disabled',true);
}
})
// 绑定发布按钮
$('.send').click(function(){
//拿到用户输入的内容
var $text=$('.inputContent').val()
//创建文章
var $article=createElent($text)
//插入容器中，发布博客
$('.container').append($article)
})
//创建文章节点
function createElent(text){
var $article=$('<div class="article"><p class="content">'+text+'</p><p class="date">'+formatDate()+'</p></div>')
return $article
}
function formatDate(){
var date=new Date()
var year=date.getFullYear()
var mouth=date.getMonth()+1
var day=date.getDate()
var hour=date.getHours()
var minute=date.getMinutes()
var second=date.getSeconds()
return year+'-'+mouth+'-'+day+' '+hour+':'+minute+':'+second
}
})
</script>
</head>
<body>
<!-- 外层容器 -->
<div class="container">
<!-- 待输入的内容框 -->
<textarea class="inputContent" cols="30" rows="10"></textarea>
<button class="send" disabled>发布</button>
<div class="right"></div>
</div>
</body>
</html>
原理
本质
1、jQuery本质是一个闭包
2、闭包可以避免多个框架冲突
3、通过window将局部变量变为全局变量，方便外界来访问
4、为了方便后期压缩代码，为了提升查找效率（为什么要传递window参数）
5、为了方便后期压缩代码，IE9以下浏览器undefined可以被修改，为了保证内部使用的undefined不被修改（为什么要传递undefined）
基本代码
(function(window,undefind){
function jQuery(){
return new jQuery.prototype.init()
}
jQuery.prototype={
constructor:jQuery,
init:function(){
console.log("初始化已完成")
}
}
jQuery.prototype.init.prototype=jQuery.prototype
window.jQuery=window.$=jQuery
})(window)
入口函数测试
"引人jquery官方文档，进行测试"
1、传入 '' null undefined NaN 0 false
console. log($()) ;
console. log($(''));
console. log ($(nul1));
console. log ($ (undefined)) ;
console. log ($ (NaN)) ;
console. log($(0)) ;
console. log($ (false));
/*以上，返回一个空的jquery对象*/
2、传入html片段
console.log($("<p>1</p><p>2</p>"))
/*会将html片段创建好对应DOM元素，并依次存储到jquery对象中返回*/
3、传入选择器
console.log($(".css"))
/*会将找到的所有指定找到的元素存储到jquery对象中返回*/
4、传入数组和伪数组
console.log($([1,2,3,4,5]))
console.log($({0:"hello",1:"world"}))
/*会将数组中的存储的元素依次存储到jquery对象中返回*/
5、传入对象
function Person(){}
console.log($(new Person()))
/*会将传入的对象存储到jquery对象中返回*/
6、传入DOM元素
cosole.log($(document.createElement("div")))
/*会将传入的DOM存储到jquery对象中返回*/
7、传入基本数据类型
console.log($(12345))
console.log($(true))
/*会将传入的基本数据类型存储到jquery对象中返回*/
/*
总结：
1、传入 '' null undefined NaN 0 false ，返回空jquery对象
2、字符串：
代码片段：会将html片段创建好对应DOM元素，并依次存储到jquery对象中返回
选择器：会将找到的所有指定找到的元素存储到jquery对象中返回
3、数组：会将数组中的存储的元素依次存储到jquery对象中返回
4、除以上类型外：会将传入的数据存储到jquery对象中返回
*/
补充知识
真伪数组转换
1、真数组转伪数组
var array=[1,2,3,4,5]
var obj={}
array.push.apply(obj,array)
console.log(obj)
2、伪数组转真数组
var arr=[]
var obj={0:"hello",1:"world",length:2}
arr.push.apply(arr,obj)
console.log(arr)
-----------------------------------------------------------------------------------------
IE8浏览器一下不支持自定义的伪数组转真数组
var arr=[].slice.call(obj)
console.log(arr)
扫一扫
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
