一、了解jQuery
+ 是一个优秀的的JS函数库(方法库 工具库)
==获取dom元素
==操作元素的类名
==操作元素的属性
==操作元素的样式
==可以进行元素动画 -->
jQuery 里面的95%以上都是封装好的方法,将来使用的时候别忘了加()
类库、插件、框架的区别
插件
== 为了实现页面某一个单一类功能而封装的代码
== swiper滑动类效果(跑马灯 轮播图)
类库
== 把我们日常的操作封装成一个个的方法,给我们使用
== jQuery(封装了各种各样的dom操作)
框架
== 一套有自己完整生态系统的东西
== 所有东西都准备好了,我们只需要按照规定好的规则进行使用
== vue/react/angular
二、jQuery的引入
+ 需要下载好jQuery的js文件 用script引入
jQuery的中文网: http://hemin.cn/jq/
三、jquery的选择器
+ 选择器就是用来帮助我们获取dom元素的方法
当jQuery文件被引入后,我们的全局多了两个变量
== $
== jQuery
+ 它们两个没有任何的区别
console.log($('ul')) //获取页面中所有的ul标签
console.log($('ul li')) //获取页面中所有的ul下的li标签
console.log($('ul>li')) //获取页面中ul的子元素中的li标签
console.log($('ul>li:nth-child(1)')) //获取ul的子元素的li中的第一个
console.log($('ul>li:last-child')) //获取ul的子元素的li中的最后一个
console.log($('ul li.a')) //获取ul下所有的li里面的类名为a的元素
console.log($('#aaa')) //根据id获取元素
console.log($('li:nth-child(odd)')) //获取li里面的奇数个
console.log($('li:nth-child(even)')) //获取li里面的偶数个
四、 jQuery的特殊选择器
jQuery里面还帮助我们提供一些特殊的选择器
== ul>li:nth-child(1)太长了
== 用短的
:first ==>获取第一个元素
:last ==> 获取最后一个元素
:eq() ==>以索引获取
:odd ==>以奇数获取
:even ==>以偶数获取
console.log($('li:nth-child(1)')) //可能会拿到多个
console.log($('li:first')) //获取第一个
console.log($('li:last')) //获取li里的最后一个
console.log($('li:eq(1)')) //获取li里的第二个
console.log($('li:odd')) //奇数
console.log($('li:even')) //偶数
五、jQuery的筛选器
用在jQuery选择元素的集合后面
都是方法,为了对已经选择出来的元素进行二次筛选
1 first()
2 last()
3 eq(n)
4 next() 筛选出一个元素里面的下一个兄弟元素
5 nextAll() 筛选出元素后面的所有兄弟元素
6 nextUntil() 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止
7 prev() 筛选出元素的上一个兄弟元素
8 prevAll() 筛选出元素的前面所有兄弟元素
9 prevUntil() 查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止
10 parent() 筛选出父级元素
11 parents() 筛选出所有的祖先元素
12 parentsUntil() 查找所有的祖先元素,直到遇到匹配的那个元素为止
13 children() 筛选出所有的子元素
14 sillings() 筛选出元素的所有的兄弟元素
15 find() 在元素中所有后代里面找符合的选择器
16 index()
== 获取到元素的索引位置
== 不是元素集合里面的第几个
== 找到他父级元素下的第几个元素
== 拿到的是一个数字
六、读写方法
1 html()
== 一个读写方法
== 不传递参数的时候,获取的是元素内部的超文本内容,只获取一个
== 传递一个参数的时候,就是设置元素内部的超文本内容
2 text()
== 一个读写方法
== 不传递参数的时候,获取的是元素内部的超文本内容,获取全部
== 传递参数的时候,就是设置元素内部的超文本内容
3 val()
== 一个读写方法,操作input标签
== 不传递参数的时候,就是获取input元素的value值
== 传递参数的时候,就是设置元素的value值
总结
获取:不传参
== html() 只能获取第一个超文本内容
== text() 获取全部文本内容
== val() 获取第一个input元素的value
设置:传参
== html() 设置所有的元素的超文本内容
== text() 设置所有元素的文本内容
== val() 设置所有input元素的value
七、 jQuery操作元素的类名
1 addClass() 添加类名
== 执行这个方法会给元素集合里面的所有元素添加指定的类名
== 如果元素已经有相同的类名,就不再添加,没有才会加
2 removeClass() 移除类名
== 执行这个方法会给元素集合里面的所有元素移除指定的类名
3 toggleClass()切换类名
4 hasClass()判断是否有类名
== 执行这个方法会返回一个布尔类型
== 如果元素几个里面有一个元素有这个类名就返回true,都没有就返回false
$('.add')[0].onclick = function () {
$('div').addClass('box')
}
$('.del')[0].onclick = function () {
$('div').removeClass('box')
}
$('.toggle')[0].onclick = function () {
$('div').toggleClass('box')
}
$('.has')[0].onclick = function () {
alert($('div').hasClass('box'))
}
八、 jquery操作元素样式
1 css()
一个读写方法
不同操作需要用到不同的参数
css('样式名') ==》 获取元素的样式值
== 获取元素的样式值,不管是行内还是非行内都可以获取
== 获取集合里面的第一个值,返回的值是字符串类型
console.log($('div').css('width'))
css('样式名','样式值') ==》 获取元素的样式值,并对这个值进行修改
== 设置元素集合里面所有内容的样式值
== 设置的时候,单位可以不写,默认添加px单位
$('div').css('width','200px')
$('div').css('width', '200')
css(对象)
批量设置css样式
给元素集合里面的所有内容批量设置样式
$('div').css({
height: '50px',
opacity:0.5,
// display: 'none',
border: '2px solid pink'
})
九、jquery操作元素的属性
1 attr() 和 removeAttr()
- attr()
== 是一个读写方法
attr('要读取的属性名')传递一个参数的时候读取
atte('要读取的属性名','要修改的属性值') 传递两个参数的时候设置
- removeAttr() 移除属性
== 所有的属性都会显示在标签上(原生属性和自定义属性都会在结构里显示)
== 不管你设置什么样的数据类型,都会变成字符串
== removeAttr删除attr设置的属性时是有多少删多少
2 prop() 和 removeProp()
prop ======= property
- prop()
== 是一个读写方法
prop('要读取的属性名')传递一个参数的时候读取
prop('要读取的属性名','要修改的属性值') 传递两个参数的时候设置
- removeProp() 移除属性
attr 这套方法注意
== 不会显示在标签上的属性,但是可以获取使用
== 你存储的是什么类型的数据,就是什么样的数据类型
== removeProp删除prop设置的属性时是有多少删多少
== 不能删除标签上的属性
十、 jQuery绑定事件
给元素绑定一个事件
on()方法专门用来绑定事件
$('li').click(function () {
console.log('常用的事件 click')
})
1 on('事件类型',事件处理函数)
== 给元素集合内的所有元素绑定事件
$('li').on('click', function () {
console.log(this)
})
2 on('事件类型','事件委托',事件处理函数)
== 把事件委托位置的元素的事件委托给了前面的元素集合
$('ul').on('click', 'li', function () {
console.log(this)
})
3 on('事件类型',复杂数据类型, 事件处理函数)
== 第二个参数是一个复杂数据类型可以用来传参
$('li').on('click', ['hello', 'world'], function (e) {
console.log(e.data)
})
4 on('事件类型','事件委托',复杂数据类型, 事件处理函数)
$('ul').on('click', 'li', ['hello', 'world'], function (e) {
console.log(e.data)
console.log(this)
})
5 on(对象)
== 给一个属性绑定多个事件
$('li').on({
'click': function () {
console.log('点击')
},
'mouseleave': function () {
console.log('鼠标移入')
}
})
1 one() 方法专门用来绑定只执行一次的事件
function handlerA() {
console.log(this)
}
$('li').one('click', handlerA)
2 off() 专门解绑元素的事件
== off('事件类型')给该事件类型的所有事件处理函数解绑
== off('事件类型','事件处理函数')解绑指定的事件处理函数
$('li').off('click')
$('li').off('click',handlerA)
3 trigger()专门用来触发事件的函数
$('li').trigger('click')
4 hover()
== jQuery里面唯一一个特殊的事件函数
== 表示一个鼠标悬停动作
== hover(鼠标移入触发事件,鼠标移出触发事件)
$('li').hover(function () {
console.log('hover 移入')
}, function () {
console.log('hover 移出')
})