前段（五）jquery及事件
1.jquery介绍
jquery的优势
1.js代码对浏览器的兼容性做的更好了
2.隐式循环
3.链式操作
jquery是什么?
高度封装了js代码的模块
封装了dom节点
封装了操作dom节点的简便方法
jquery的导入
https://code.jquery.com/jquery-3.4.1.js 未压缩版
https://code.jquery.com/jquery-3.4.1.min.js 压缩版
下载:保存在本地文件里
引入:<script src="jquery3.4.1.min.js"></script>
$和jQuery的关系
$就是jQuery名字的简写,实际上是一回事儿
jquery对象和dom对象的关系和转换
jquery封装了dom
dom转成jquery : jQuery(dom对象) $(dom对象)
jquery转成dom : jq对象[index]
2.jquery选择器
基础选择器
#id选择器 .类选择器 标签选择器 *通用选择器
$('#city')
k.fn.init [ul#city]0: ul#citylength: 1__proto__: Object(0)
$('.box')
k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('li')
k.fn.init(4) [li, li, li, li, prevObject: k.fn.init(1)]0: li1: li2: li3: lilength: 4prevObject: k.fn.init [document]__proto__: Object(0)
$('a')
k.fn.init(2) [a, a, prevObject: k.fn.init(1)]0: a1: alength: 2prevObject: k.fn.init [document]__proto__: Object(0)
$('*')
k.fn.init(16) [html, head, meta, title, body, div.box, ul#city, li, li, a, li, a, li, p, script, script, prevObject: k.fn.init(1)]
div.c1交集选择器 div,p并集选择器
$('div.box')
k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('div,p,a')
k.fn.init(4) [div.box, a, a, p, prevObject: k.fn.init(1)]
层级选择器
空格 后代选择器 >子代选择器 +毗邻选择器 ~弟弟选择器
$('div li')
$('div>ul>li')
$('.baidu+li')
k.fn.init [prevObject: k.fn.init(1)]
$('.baidu~li')
k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]
属性选择器
$('[属性名]') 必须是含有某属性的标签
$('a[属性名]') 含有某属性的a标签
$('选择器[属性名]') 含有某属性的符合前面选择器的标签
$('选择器[属性名="aaaa"]') 属性名=aaa的符合选择器要求标签
$('选择器[属性名$="xxx"]') 属性值以xxx结尾的
$('选择器[属性名^="xxx"]') 属性值以xxx开头的
$('选择器[属性名*="xxx"]') 属性值包含xxx
$('选择器[属性名1][属性名2="xxx]') 拥有属性1,且属性二的值='xxx',符合前面选择器要求的
3.jquery筛选器
基础筛选器
$('选择器:筛选器')
$('选择器:first')
作用于选择器选择出来的结果
first 找第一个
last 最后一个
eq(index) 通过索引找
even 找偶数索引
odd 找奇数索引
gt(index) 大于某索引的
lt(index) 小于某索引的
not(选择器) 不含 符合选择器 要求的
has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)
表单筛选器
type筛选器
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的
状态筛选器
enabled
disabled
checked
selected
:enabled #可用的标签
:disabled #不可用的标签
:checked #选中的input标签
:selected #选中的option标签
$(':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)]
4.jquery的筛选器方法
找兄弟 :$('ul p').siblings()
找哥哥
$('ul p').prev() 找上一个哥哥
$('ul p').prevAll() 找所有哥哥
$('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了
找弟弟 : next() nextAll() nextUntil('选择器')
找祖宗 : parent() parents() parentsUntil('选择器')
找儿子 : children()
下一个:
$('#l3').next(); 找到下一个兄弟标签
$('#l3').nextAll(); 找到下面所有的兄弟标签
$('#l3').nextUntil('#l5');#直到找到id为l5的标签就结束查找，不包含它
上一个
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
儿子和兄弟元素
$('ul').children();
$('ul').children('#l3'); #找到符合后面这个选择器的儿子标签
$('#l5').siblings();
$('#l5').siblings('#l3'); #找到符合后面这个选择器的兄弟标签
find
$('ul').find('#l3') -- 类似于 $('ul #l3')
filter过滤
$('li').filter('#l3');
筛选方法
first()
last()
eq(index)
not('选择器') 去掉满足选择器条件的
filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器') 后代选择器 找所有结果中符合选择器要求的后代
has('选择器') 通过后代关系找当代 后代中有符合选择器要求的就把当代的留下
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素 $('li').not('#l3');
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
5.事件的绑定
事件的绑定
jquery操作标签
操作文本 : <>文本内容<>
操作标签 : 添加 删除 修改 克隆
操作属性 : 通用属性 类 css样式 value 盒子模型 滚动条
<body>
<button>点击1</button>
<button>点击2</button>
</body>
<script src="jquery.3.4.1.js"></script>
<script>
$('button').click(
function () {
alert('你点了我一下!')
}
)
</script>
6.标签操作
标签的文本操作
text()
$('li:first').text() // 获取值
$('li:first').text('wahaha') // 设置值
$('li:last').html() // 获取值
$('li:last').html('qqxing') // 设置值
$('li:first').html('<a href="http://www.mi.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对象
标签的操作
增加
父子关系:
追加儿子 :(父).append(子) (子).appendTo(父)
头部添加 :(父).prepend(子) (子).prependTo(父)
兄弟关系:
添加哥哥 :参考点.before(要插入的) 要插入的.insertbefore(参考点)
添加弟弟 :参考点.after(要插入的) 要插入的.insertAfter(参考点)
如果被添加的标签原本就在文档树中,就相当于移动
例子append
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
$('ul').append(jq)
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
$('ul').append(jq[0])
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
$('ul').append('<li>鹿晗</li>')
例子appendTo
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
jq.appendTo('ul')
var dom_ul = document.getElementsByTagName('ul')[0]
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
jq.appendTo(dom_ul)
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
jq.appendTo($('ul'))
对已经存在的内容进行添加 -- 移动
$('li:first').appendTo('ul')
$('li:last').prependTo('ul')
$('ul').prepend('<li>李东宇</li>')
$('<li>邓帅</li>').prependTo('ul')
$('#l2').before('<li>李东宇</li>')
$('<li>李东宇222</li>').insertBefore('#l2')
$('#l2').after('<li>邓帅</li>')
$('<li>邓帅222</li>').insertAfter('#l2')
删除 修改 克隆
删除 : remove detach empty
remove : 删除标签和事件,被删掉的对象做返回值
detach : 删除标签,保留事件,被删掉的对象做返回值
empty : 清空内容标签,自己被保留
修改 : replaceWith replaceAll
replaceWith : a.replaceWith(b) 用b替换a
replaceAll : a.replaceAll(b) 用a替换b
复制 : clone
var btn = $(this).clone() //克隆标签但不能克隆事件
var btn = $(this).clone(true) //克隆标签和事件
var obj = $('button').remove()
obj是button标签,但是事件已经被删除了
var a = document.createElement('a')
a.innerText = 'wahaha'
$(a).replaceAll('p')
$('p').replaceWith(a)
标签的属性操作
通用属性
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处理
$(':checkbox:checked').prop('checked') //获取值
$(':checkbox:checked').prop('checked',false) //表示取消选中
如果设置/获取的结果是true表示选中,false表示取消选中
类的操作
添加类 addClass
$('div').addClass('red') //添加一个类
$('div').addClass('red bigger') //添加多个类
删除类 removeClass
$('div').removeClass('bigger') //删除一个类
$('div').removeClass('red bigger')
转换类 toggleClass //有即删 无即加
$('div').toggleClass('red')
$('div').toggleClass('red bigger')
value值的操作
$(input).val()
$(':text').val('值')
$(':password').val('值')
对于选择框 : 单选 多选 下拉选择
设置选中的值需要放在数组中 :
$(':radio').val([1])
$(':radio').val([1,2,3])
7.css样式
css('样式名称','值')
css({'样式名1':'值1','样式名2':'值2'})
$('div').css('background-color','red') //设置一个样式
$('div').css({'height':'100px','width':'100px'}) //设置多个样式
8.滚动条
scrollTop()
scrollLeft()
$(window).scrollLeft()
$(window).scrollTop()
9.盒子模型
内容宽高 : width和height
内容+padding : innerWidth和innerHeight
内容+padding+border :outerWidth和outerHeight
内容+padding+border+margin : outerWidth(true)和outerHeight(true)
设置值:变得永远是content的值
10.表单操作
$(':submit').click(
function () {
return false
}
)
如果返回false不提交
如果返回true不提交
作业例子
定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定时器</title>
</head>
<body>
<input type="text" id="timer">
<button id="start">开始</button>
<button id="end">结束</button>
<script>
var timetag;
// 1 获取当前时间
function f1() {
var showTime = new Date();
var showLocaleTime = showTime.toLocaleString();
var inpEle = document.getElementById('timer');
inpEle.value = showLocaleTime;
}
// 2 把时间放进去
// 2.1 找到strat开始按钮,绑定点击事件
var startBtn = document.getElementById('start');
startBtn.onclick = function () {
//2.2 找到input标签,并将值放到input标签里面
f1();
if (timetag === undefined){
timetag = setInterval(f1,1000);
}
};
// 3 停止时间
var endBtn = document.getElementById('end');
endBtn.onclick = function () {
clearInterval(timetag);
timetag = undefined;
}
</script>
</body>
</html>
select联动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select联动</title>
</head>
<body>
<select id="province">
<option>请选择省:</option>
</select>
<select id="city">
<option>请选择市:</option>
</select>
<script>
var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
// 1 将省份的数据放到省份的下拉框里面
//1.1 找到省份下拉框
var proSelect = document.getElementById('province');
// 1.2 创建option标签
//1.3 将数据放到option标签中,并将option标签放到省份下拉框里面
for (var province in data){
var proOption = document.createElement('option');
proOption.innerText = province;
proSelect.appendChild(proOption);
}
//2 选择省份,将被选择的省份的市都放到市的那个下拉框里面
var citySelect = document.getElementById('city');
proSelect.onchange = function () {
citySelect.innerText = '';
var proText = this.options[this.selectedIndex].innerText;
var cityData = data[proText];
for (var cityindex in cityData){
var cityOption = document.createElement('option');
cityOption.innerText = cityData[cityindex];
citySelect.appendChild(cityOption);
}
}
</script>
</body>
</html>
事件
1.事件绑定方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color: black;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
//方式一
$('#d1').click(function () {
$(this).css({'background-color':'green'})
})
//方式二
$('#d1').on('click',function () {
$(this).css({'background-color':'green'});
})
</script>
</body>
</html>
// bind 参数都是选传的,接收参数e.data
$('button').bind('click',{'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
}
$('button').bind('click',fn)
function fn(e) {
console.log('wahaha')
}
// 简写的事件名称当做方法名
$('button').click({'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
}
$('button').click(fn)
function fn(e) {
console.log('wahaha')
}
解除绑定
$('button').unbind('click')
2.常用事件
click(function(){...}) // 单机事件
blur(function(){...}) // 失去焦点
focus(function(){...}) // 获得焦点
change(function(){...}) // input框鼠标离开时内容改变触发
keyup(function(){...}) // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.keyCode
mouseover/mouseout // 如果给父元素绑定了over事件,那么这个父元素如果有子元素,每一次进入子元素也 触发父元素的over事件
mouseenter/mouseleave = hover(function(){...}) //鼠标的悬浮
1.左键点击事件
$('#d1').click(function () {
$(this).css({'background-color':'green'})
})
2.获取光标（焦点）触发事件/失去光标（焦点）出发的事件
//获取 focus
$('[type="text"]').focus(function () {
$('.c1').css({'background-color':'black'});
});
//失去 blur
$('[type="text"]').blur(function () {
$('.c1').css({'background-color':'purple'});
});
3.域内容发生变化时触发的事件
$('select').change(function () {
$('.c1').toggleClass('cc');
});
4.鼠标悬浮触发的事件
$('.c1').hover(
//鼠标放上去
function(){$(this).css({'background-color':'black'});},
//鼠标移走
function(){$(this).css({'background-color':'yellow'});}
)
鼠标悬浮等同于hover
// mouseenter鼠标进入
$('.c1').mouseenter(function () {
$(this).css({'background-color':'blue'});
});
//mouseout鼠标移出
$('.c1').mouseout(function () {
$(this).css({'background-color':'yellow'});
});
//mouseover鼠标进入
$('.c2').mouseover(function () {
console.log('得港绿了');
});
ps：mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象。
5.键盘按下触发的事件/键盘抬起触发的事件（e\event时间对象）
//keydown键盘按下出发事件
$(window).keydown(function (e) {
// console.log(e.keyCode);
//每个键都有一个keyCode值,通过不同的值来触发不同的事件
if (e.keyCode === 37){
$('.c1').css({'background-color':'red'});
}else if(e.keyCode === 39){
$('.c1').css({'background-color':'green'});
}
else {
$('.c1').css({'background-color':'black'});
}
})
//keyup键盘抬起触发事件
$(window).keyup(function (e) {
console.log(e.keyCode);
})
//特殊的input事件：（必须用.on（'input',function））
22期百度:<input type="text" id="search">
<script src="jquery.js"></script>
<script>
$('#search').on('input',function () {
console.log($(this).val());
})
3.事件冒泡
ps：触发子标签事件的时候会一直往上找，把父级以上标签事件全部触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color: red;
height: 200px;
}
#d2{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<script src="jquery.js"></script>
<script>
$('#d1').click(function () {
alert('父级标签');
});
$('#d2').click(function () {
alert('子级标签');
});
</script>
</body>
</html>
4.阻止后续事件发生（事件冒泡）
$('#d1').click(function () {
alert('父级标签');
});
$('#d2').click(function (e) {
alert('子级标签');
return false;
// e.stopPropagation();
});
//return false; e.stopPropagation();
// e.stopPropagation() //阻止事件冒泡方法1
return false //阻止事件冒泡方法2
5.事件委托
ps：事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。事件委托，类似于python的装饰器， 把绑定事件拉出来装在父标签上，所有子标签事件，相当于触发父标签事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<button class="c1">爱的魔力转圈圈</button>
</div>
<script src="jquery.js"></script>
<script>
// $('.c1').on('click',function () {
// alert('得港被雪飞调教了,大壮很难受!');
// var btn = document.createElement('button');
// $(btn).text('爱的魔力转圈圈');
// $(btn).addClass('c1');
// console.log(btn);
// //添加到div标签里面的后面
// $('#d1').append(btn);
//
// });
#将'button' 选择器选中的标签的点击事件委托给了$('#d1');
$('#d1').on('click','button',function () {
alert('得港被雪飞调教了,大壮很难受!');
var btn = document.createElement('button');
$(btn).text('爱的魔力转圈圈');
$(btn).addClass('c1');
console.log(btn);
console.log($(this)) //还是我们点击的那个button按钮
//添加到div标签里面的后面
$('#d1').append(btn);
});
</script>
</body>
</html>
$('div').on('click','button',{'a':'b'},function (event) {
console.log(event.data)
alert('不许点')
})
相当于把button元素的点击事件委托给了父元素div
后添加进来的button也能拥有click事件
6.页面载入和window.onload
1. jquery文件要在使用jquery的代码之前引入(文件先加载了jpuery但是还没有加载样式，所以不会生效)
2. js代码最好都放到body标签下面或者里面的最下面来写
3.window.onload
// window.onload = function () {
// $('.c1').click(function () {
// $(this).css({'background-color':'green'});
// })
// }
4.页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){});
页面载入与window.onload的区别
1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
// 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
// window.onload 有覆盖现象,会被后面的window.onload给重新赋值
// window.onload = function () {
// $('.c1').click(function () {
// $(this).css({'background-color':'green'});
// })
// }
$(function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
});
</script>
<script src="xx.js"></script>
<style>
.c1{
background-color: red;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="c1"></div>
<img src="" alt="">
</body>
</html>
document.onload = function(){
//js 代码
}
window.onload = function () {
$('button').click(function () {
alert('不许点')
})
}
onload要等到所有的文档 音视频都加在完毕才触发
onload只能绑定一次
//jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用
$(document).ready(
function () {
//文档加在完毕之后能做的事情
})
//jquery的方式(简写)*****
$(function () {
//文档加在完毕之后能做的事情
})
//示例
$(function () {
$('button').click(function () {
alert('不许点')
})
})
//jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次
$(window).ready(
function () {
alert('123')
})
7.动画
show系列
show hide toggle
slide滑动系列
slideUp slideDown slideToggle(时间,回调函数)
fade淡入淡出系列
fadeOut fadeIn fadeToggle
动画的停止
stop 永远在动画开始之前,停止动画
8.each
<body>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</body>
<script>
$('li').each(
function (ind,dom) { //主动传ind是每项的索引,dom是每一项的标签对象
console.log(ind,dom)
}
)
</script>
9.date
ps：类似于添加全局变量，给标签赋值。
.data(key, value): 设置值
.data(key) 取值
.removeData(key) 删除值
10.插件
jQuery.extend({ //$.extend({})
min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
max:function(a, b){return a > b ? a : b;}
});
这么写的插件方法不能通过标签对象调用，只能用$调用
jQuery.fn.extend({ //给任意的jQuery标签对象添加一个方法
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
中间加了fn.就可以调用了
Bootstrap
全局样式，组件，js插件。下载以后导入就可以
作业
1.form表单的验证提示信息用focus和blur事件完成
2.表格操作 使用事件委托
3.小米购物车
4.模态对话框
