前端 -- jQuery
11.4 Jquery
jQuery的优势
-
js代码对浏览器的兼容性更好
-
隐式循环
-
链式操作
jQuery是什么? -- 高度封装了js代码块的模块,封装了dom节点,封装了操作dom节点的简便方法
$: 就是jQuery的简写.
jQuery对象和DOM对象的互相转换
jQuery封装了DOM
DOM转换成jQuery : jQuery(DOM对象) / $(DOM对象)
jQuery转成DOM : jQuery对象[index]
</ jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能
11.4.1 jQuery选择器
1. 基础选择器
| 代码 | 解释 |
|---|---|
| $("#id") | id选择器 |
| $("tagName") | 标签选择器 |
| $(".className") | 类选择器 |
| $("*") | 通用选择器 |
| $("div.className") | 交集选择器(含有className的div标签 |
| $("#id, .className, tagName") | 并集选择器 |
2. 层级选择器
| 代码 | 解释 |
|---|---|
| $("div li") | 后代选择器,div下面的所有li标签 |
| $("div>ul>li") | 子代选择器,div下面的ul标签里的所有里标签 |
| $(".xxx+li") | 毗邻选择器,有类名xxx标签的下一个li标签 |
| $(".xxx~li") | 弟弟选择器,有类名xxx标签的下面的所有li标签 |
3. 属性选择器
| 代码 | 解释 |
|---|---|
| $('[属性名]') | 含有某属性的标签 |
| $('xxx[属性名]') | 含有某属性的xxx标签 |
| $('选择器[属性名]') | 符合选择器且含有某属性的标签 |
| $('选择器[属性名='xxx']') | 符合选择器且某属性值='xxx'的标签 |
| $('选择器[属性名$='xxx']') | 符合选择器且某属性值以xxx结尾的标签 |
| $('选择器[属性名^='xxx']') | 符合选择器且某属性值以xxx开头的标签 |
| $('选择器[属性名*='xxx']') | 符合选择器且某属性值包含xxx的标签 |
| $('选择器[属性名1] [属性名2='xxx']') | 符合选择器且拥有属性1和属性2,且属性2的值为xxx的标签 |
11.4.2 jQuery筛选器
1. 基础筛选器
| 代码 | 解释 |
|---|---|
| $('选择器:筛选器') | 作用域选择器选择出来的结果 |
| $('选择器:first') | 找第一个的标签 |
| $('选择器:last') | 找最后一个的标签 |
| $('选择器:eq(index)') | 通过索引找的标签 |
| $('选择器:even') | 找偶数索引的标签 |
| $('选择器:odd') | 找奇数索引的标签 |
| $('选择器:gt(index)') | 找大于索引的标签 |
| $('选择器:lt(index)') | 找小于索引的标签 |
| $('选择器:not(选择器)') | 找没有某选择器的标签 |
| $('选择器:has(标签)') | 找含有xxx标签的的标签 |
2. 表单筛选器
type筛选器
| 代码 | 解释 |
|---|---|
| $(':text') | 找type属性值为text的标签(文本框) |
| $(':password') | 找type属性值为password的标签(密码框) |
| $(':radio') | 找type属性值为radio的标签(单选框) |
| $(':checkbox') | 找type属性值为checkbox的标签(多选框) |
| $(':file') | 找type属性值为file的标签(文件选择框) |
| $(':submit') | 找type属性值为submit的标签(提交按钮框) |
| $(':reset') | 找type属性值为reset的标签(重置按钮框) |
| $(':button') | 找type属性值为button的标签(普通按钮框) |
<!-- date , type的input是找不到的 -->
状态筛选器
enabled //可选择的 disabled //不可选择 checked //默认选择 selected //默认选择 $(':disabled') jQuery.fn.init [input, prevObject: jQuery.fn.init(1)] $(':enabled') jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option, prevObject: jQuery.fn.init(1)] $(':checked') jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)] $(':selected') $(':checkbox:checked') jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)] $('input:checkbox:checked') jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
11.4.3 jQuery筛选器方法
| 代码 | 解释 |
|---|---|
| $('ul p').siblings() | 找兄弟 |
| $('ul p').prev() / next() / parent() | 找上一个哥哥 / 弟弟 / 祖宗 |
| $('ul p').prevAll() / nextAll() / parents() | 找所有哥哥 / 弟弟 / 祖宗 |
| $('ul p').prevUntil('选择器') / nextUntil('选择器') parentsUnitil('选择器') | 找哥哥 / 弟弟 / 祖宗到某一个地方就停止 |
| $('ul').children() | 找儿子 |
// 筛选方法
first()
last()
eq(index)
not('选择器') 去掉满足选择器条件的
filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器') 后代选择器,找所有结果中符合选择器要求的后代
has('选择器') 通过后代关系找当代
<!-- 注意:内容补充 -->
// 不要用for(i in li_list){}的方式循环一个jq对象,每个对象会封装方法 for(let i=0;i<li_list.length;i++){ //let 声明的变量的作用域只在for循环中 console.log(i) }
11.4.5 事件绑定
为button按钮绑定单击事件，单机按钮弹出警告框 $('button').click( function () { alert('别点我啊') } )
11.4.6 标签的文本操作
$('li:first').text() //获取第一个列表的文本内容
$('li:first').text('小白') //将第一个列表的文本值改为小白
$('li:last').html() //获取最后一个列表的内容
$('li:last').html('大白') //将最后一个列表的内容改为xxx
$('li:first').html('<a href="https://www.baidu.com">百度一下</ a>') // 设置a标签属性
var a = document.createElement('a')
a.innerText = 'AD钙'
$('li:last').html(a) // a 是dom对象
var a2 = document.createElement('a')
var jqobj = $(a2)
jqobj.text('旺仔')
$('li:last').html(jqobj) // jqobj是jquery对象
</ html可以接受 标签,dom对象,jq对象
11.4.7 标签的操作
1. 增加
父子关系: (父).append(子) //给父级的最后添加一个子 (子).appendTo(父) //将子添加到父级的最后 (父).prepend(子) //给父级的最前添加一个子 (子).prependTo(父) //将子添加到父级的最前 兄弟关系: 参考点.before(插入内容) //在参考点之前插入内容 $(插入内容).insertBefore(参考点) //将内容插入在参考点之前 参考点.after(插入内容) //在参考点之后插入内容 $(插入内容).insertAfter(参考点) //将内容插入在参考点之前 </ 如果被添加的标签原本就在文档树中,就相当于移动,参考点可以是标签,id,class等
2. 删除
remove / detach / empty var obj = $('button').remove() //删除标签和事件,被删除的对象做返回值,将对象重新添加回去,有标签但没有事件 var obj = $('button').detach() //删除标签保留事件,被删掉的对象做返回值,将对象重新添加回去,有标签也有事件 $('ul').empty() //清空ul里面的li标签,ul标签仍保留(清空内部内容,保留本身)
3. 修改
$('li').replaceWith(p) //用p对象内容替换所有的li标签
$(p).replaceAll('li') //将所有的li标签替换成p对象内容
4. 复制
var btn = $(this).clone() //克隆标签但不能克隆事件 var btn = $(this).clone(true) //克隆标签和事件 $('button').click( function () { var btn = $(this).clone(true); $(this).after(btn); } )
11.4.8 标签的属性操作
1. 通用属性
attr 获取属性的值 $('a').attr('href') 设置/修改属性的值 $('a').attr('href','http://www.baidu.com') 设置多个属性值 $('a').attr({'href':'http://www.baidu.com','title':'baidu'}) removeAttr $('a').removeAttr('title') //删除title属性 # 如果一个标签只有true和false两种情况,适合用prop处理 $('input').prop('checked'); //查看是否有某属性,返回true或false $('input').prop('checked',false); //取消全部选择 $('input').prop('checked',true); //全部选择
2. 类的操作
添加类 addClass $('div').addClass('red') //添加一个类 $('div').addClass('red bigger') //添加多个类 删除类 removeClass $('div').removeClass('bigger') //删除一个类 $('div').removeClass('red bigger') //删除多个类 转换类 toggleClass //有就删除,没有就添加 $('div').toggleClass('red') $('div').toggleClass('red bigger')
3. 值的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<input type="text">
<input type="password">
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女
<input type="checkbox" name="hobby" value="1" checked>足球
<input type="checkbox" name="hobby" value="2">音乐
<input type="checkbox" name="hobby" value="3">游戏
<input type="checkbox" name="hobby" value="4">电影
<select name="city" id="">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
<option value="4">山东</option>
<option value="5">河南</option>
</select>
</body>
<script>
$(':text').val() //查看值
$(':text').val('123456'); //设置value值为xxx
$(':password').val('456456');//设置value值为xxx
$(':radio').val([2]); //选择value值为2的选择
$(':checkbox').val([1,3]); //选择value值为1,3的选项
$('select').val([5]) //选择value值为5的城市
</script>
</html>
# 对于选择框 : 单选,多选,下拉选择 -- 设置选中的值需要放在数组中.
11.4.9 css样式
$('div').css('background-color','red') //设置一个样式
$('div').css({'height':'100px','width':'100px'}) //设置多个样式
11.4.10 滚动条
$(window).scrollLeft() //水平滚动条距离左边的距离 $(window).scrollTop() //垂直滚动条距离顶部的距离
11.4.11 盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: tomato;
}
</style>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div></div>
</body>
<script>
// $('div').css({'width':'100px','height':'100px'})
$('div').height(100); //设置content高度
$('div').height(); //查看content中content的高度
$('div').width(100); //设置content宽度
$('div').width(); //查看content中content的宽度
$('div').css('padding','20px'); //设置padding距离
$('div').innerHeight(); //查看content+padding的高度
$('div').innerWidth(); //查看content+padding的宽度
$('div').css({'border':'5px','border-style':'solid'}); //设置border的宽度
$('div').outerHeight(); //查看content+padding+border的高度
$('div').outerWidth(); //查看content+padding+border的宽度
$('div').css('margin','10px'); //设置margin的距离
$('div').outerHeight(true); //查看content+padding+border+margin的高度
$('div').outerWidth(true); //查看content+padding+border+margin的宽度
$('div').innerHeight(500) //设置值,改变的是content的高度
</script>
</html>
# 设置值:变得永远是content的值
11.4.12 动画
slied滑动系列 sliedDown : 向下滑动显示 siledUp : 向上滑动隐藏 sliedToggle : down和up交替 # 动画时间用毫秒表示,也可以加回调函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ position: relative; float: right; height: 40px; width: 120px; background-color: lightblue; } .box{ position: absolute; height: 100px; width: 300px; background-color: lightcoral; top: 40px; right: 0; display: none; } .car{ position: absolute; width: 120px; line-height: 40px; text-align: center; top: 0; right: 0; } </style> <script src="../jQuery3.4.1.js"></script> </head> <body> <div class="container"> <div class="car">购物车(<span>0</span>)</div> <div class="box"></div> </div> </body> <script> var block = false; $('.car').click( function () { // $('.box').slideToggle(500); if(block){ $('.box').slideUp(500,fn2); //fn1 , fn2 是回调函数 block = false; }else { $('.box').slideDown(500,fn1); block = true; } function fn1() { $('.car').css('color','orange') } function fn2() { $('.car').css('color','black') } } ) </script> </html>
show系列 show : 对角滑动显示 hide : 对角滑动隐藏 toggle : show和hide交替 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> <style> div{ height: 200px; width: 200px; background-color: lawngreen; display: block; } </style> </head> <body> <button>显示</button> <div></div> </body> <script> $('button').click( function () { $('div').stop(); //如果没有stop,连续点击,执行完当前动作,才会执行下一个动作 // $('div').show(1000) //显示 // $('div').hide(1000) //隐藏 $('div').toggle(1000,fn) //交替 } ) function fn() { if($('button').text()==='显示'){ $('button').text('隐藏') }else { $('button').text('显示') } } </script> </html>
11.4.13 事件的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<button>点击</button>
</body>
<script>
// 方式一
$('button').click({'a':'b'},fn); //可以不传参
function fn(e){
console.log(e.data);
console.log(e.data.a);
console.log('小白')
}
// 方式二
$('button').bind('click',{'a':'b'},fn); //可以不传参
function fn(e) {
console.log(e); //打印事件
console.log(e.data); //打印事件参数
console.log(e.data.a); //打印事件参数的值
console.log('参数')
}
//解除绑定事件
$('button').unbind('click',fn);
</script>
</html>
11.4.14 各种事件
| 事件 | 解释 |
|---|---|
| click(function(){...}) | 单击事件.点击触发 |
| blur(function(){...}) | 失去焦点 |
| focus(function(){...}) | 获得焦点 |
| change(function(){...}) | input框鼠标离开时,内容改变触发 |
| keyup(function(){...}) | 按下键盘触发事件, 获取字符编号: e.keyCode |
| hover(function(){...}) | 鼠标悬浮触发 |
| mouseover / mouseout | 父元素绑定此事件,如果有子元素出入子元素也会触发 |
| mouseenter / mouseleave | 鼠标悬浮触发,鼠标进入 / 离开 |
1. 获得 / 失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<input type="text">
</body>
<script>
$('input').focus(
function () {
console.log('获得焦点')
}
);
$('input').blur(
function () {
console.log('失去焦点')
}
);
$('input').change(
function () {
console.log('内容改变')
}
)
</script>
</html>
2. keyup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
<style>
.mask{
position: absolute;
background-color: rgba(255,255,0,0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tk{
position: absolute;
width: 400px;
height: 300px;
background-color: lightblue;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<input type="text">
<h1>那女孩对我说,说我保护她的梦</h1>
<div class="mask">
<div class="tk"></div>
</div>
</body>
<script>
// $('input').keyup(
// function (e) {
// console.log(e.keyCode) //keyCode:字符的ASCLL编号
// }
// )
$(window).keyup(
function (e) {
if(e.keyCode===27){
$('.mask').css('display','none')
}
}
)
</script>
</html>
3. mouseenter / leave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
position: relative;
float: right;
height: 40px;
width: 120px;
background-color: lightblue;
}
.box{
position: absolute;
height: 100px;
width: 300px;
background-color: lightcoral;
top: 40px;
right: 0;
display: none;
}
.car{
position: absolute;
width: 120px;
line-height: 40px;
text-align: center;
top: 0;
right: 0;
}
</style>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div class="container">
<div class="car">购物车(<span>0</span>)</div>
<div class="box"></div>
</div>
</body>
<script>
$('.container').mouseenter( //鼠标悬浮触发
function () {
$('.box').stop();
$('.box').slideDown(500);
}
);
$('.container') .mouseleave(
function () {
$('.box').stop();
$('.box').slideUp(500);
}
)
$('.container').hover( //鼠标悬浮触发,上面两个结合
function(){
$('.box').stop();
$('.box').toggle(500);
}
)
</script>
</html>
4. mouseover / out
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
<style>
.out{
width: 500px;
height: 500px;
background-color: lightpink;
}
.inner{
position: absolute;
width: 200px;
height: 200px;
left: 150px;
top: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
<script>
$('.out').mouseover( //进入父元素打印,进入子元素打印
function () {
console.log('enter')
}
);
$('.out').mouseout( //出来父元素打印,出来子元素打印
function () {
console.log('out')
}
)
</script>
</html>
11.4.15 事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.out{
width: 500px;
height: 500px;
background-color: lightpink;
}
.inner{
position: absolute;
width: 200px;
height: 200px;
left: 150px;
top: 150px;
background-color: purple;
}
</style>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
<script>
$('.out').click(
function () {
alert('out')
}
);
$('.inner').click( //点击子元素的同时,也相当于点击了父元素
function (e) {
alert('inner');
return false //阻止事件冒泡1
// e.stopPropagation() //阻止事件冒泡2
}
)
</script>
</html>
11.4.16 事件委托
# 后来添加的标签,可以拥有之前绑定的事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> </head> <body> <div> <button>点击1</button> </div> </body> <script> $('div').on('click','button',function () { alert('点我干嘛') }); var btn = document.createElement('button'); $(btn).text('点击2').appendTo('div') </script> </html>
11.4.17 页面加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
<script>
window.onload = function(){ //window.onload要等到所有的文档 音视频都加在完毕才触发.
$('button').click( //window.onload 只能绑定一次.多次绑定,只有最后一次生效
function () {
alert('点我干嘛')
}
)
};
window.onload = function(){
alert('点我干嘛')
};
$(document).ready( //jQuery的方式,只等待文档加载完毕之后就可以执行
function () { //在同一个html页面上可以多次使用
$('button').click(
function () {
alert('别点我')
}
)
}
);
$(document).ready(
function () {
alert('别点了')
}
);
//jQuery的简写方式
$(function () {
$('button').click(
function () {
alert('就这样吧')
})
})
</script>
</head>
<body>
<button>点击</button>
</body>
<!--<script>-->
<!-- $('button').click(-->
<!-- function () {-->
<!-- alert('点我干嘛')-->
<!-- }-->
<!-- )-->
<!--</script>-->
</html>
11.4.18 each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<ul>
<li>那女孩对我说</li>
<li>请先说你好</li>
<li>明天,你好</li>
</ul>
</body>
<script>
$('li').each(
function (index,val) { //主动传index:每一项的索引,val:每一项的标签对象
console.log(index,val)
}
)
</script>
</html>
