前段（五）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 压缩版
下载:保存在本地文件里
引入:

$和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 盒子模型 滚动条

点击1
点击2

6.标签操作

标签的文本操作

text()
$('li:first').text() // 获取值
$('li:first').text('wahaha') // 设置值

$('li:last').html() // 获取值
$('li:last').html('qqxing') // 设置值

$('li:first').html('爽歪歪') //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('

鹿晗

')

例子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('

李东宇

')
$('

邓帅

').prependTo('ul')

$('#l2').before('

李东宇

')
$('

李东宇222

').insertBefore('#l2')

$('#l2').after('

邓帅

')
$('

邓帅222

').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不提交

作业例子

定时器

开始
结束

select联动

请选择省:

请选择市:

事件

1.事件绑定方式

// 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期百度:

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的装饰器， 把绑定事件拉出来装在父标签上，所有子标签事件，相当于触发父标签事件。

爱的魔力转圈圈

$('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的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
　　　　
示例:

　　　　

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

• 选项一


• 选项二


• 选项三

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

官网地址：https://www.bootcss.com/

全局样式，组件，js插件。下载以后导入就可以

作业

1.form表单的验证提示信息用focus和blur事件完成

2.表格操作 使用事件委托

3.小米购物车

4.模态对话框