元素选择器
注意：不管使用任何选择器，获取到的元素都是一个元素集合
语法 : $(“元素名称”)
语法 : $(“元素:nth-child(odd)”) //获取所有奇数元素 even偶数
筛选器
语法: $(“选择器”).筛选器名称( )
常用筛选器：
1.first()
$(“选择器”).first( ) //被选择的选择器中第一个
2.last()
$(“选择器”).last( ) //被选择的选择器中最后一个
3.eq(索引值)
$(“选择器”).eq(索引值) //被选择的选择器中的第索引值个
4.next()
$(“选择器”).next( ) //被选择的选择器中的下一个元素
5.nextAll()
$(“选择器”).nextAll( ) //被选择的选择器中的下面所有元素
6.prev()
$(“选择器”).prev( ) //被选择的选择器中的上一个元素
7.prevAll()
$(“选择器”).prevAll( ) //被选择的选择器中的上面所有元素
8.parent()
$(“选择器”).parent( ) //获取的是选择器的父元素
9.parents()
$(“选择器”).parents( ) //获取的是选择器的所有父元素逐层获取直到html标签为止
10.siglings()
$(“选择器”).siglings( ) //获取到该元素的所有兄弟元素
11.find(“选择器”)
$(“选择器”).find(“选择器”) //找到该元素的所有后代元素中，满足要求的元素
操作内容
操作文本内容
1.html()
语法：元素集合.html(你要设置的内容)
可以识别并解析html结构字符串
$(“选择器”).html(“
我是后来设置的内容
”)2.text() 等价于原生js中的innerText
3.val()
语法：元素集合.val(你要设置的内容)
作用：用来设置该表单元素的value值
操作元素类名
1.addClass()
语法：元素集合.addClass(‘需要添加的类名’)
2.removeClass()
语法：元素集合.removeClass(‘需要删除的类名’)
3.toggleClass()
语法：元素集合.toggleClass(‘你要切换的类名’)
切换：如果本身有这个类名，那么就删除，如果本身没有这个类名那么就添加
操作元素样式
1.css 获取样式
注意：可以获取到元素的行内样式，也可以获取到元素的非行内样式
语法：元素集合.css(你需要获取的样式名称)
返回值：该样式的样式值
$(‘div’).css(‘width’)
当获取颜色时，默认把所有颜色转换为rgb样式
2.css 设置样式
语法:元素集合.css(样式名,样式值)
注意：当你需要给一个元素设置样式值为px单位的时候，可以省略单位不写
$(‘div’).css(‘width’,‘300’)
3.css 批量设置样式
语法：元素集合.css( { 你所有需要设置的样式 } )
$(‘div’).css({
width:200,
height:300,
‘background-color’:‘purple’
})
操作元素属性
1.attr()
=》可以进行设置和获取元素的属性
=》注意：一般用于操作元素的自定义属性
=》注意：attr操作的所有属性都会直接出现在元素的标签身上
attr() 获取
语法：元素.attr(你要获取的属性名)
返回值：该属性名对应的属性值
$(‘div’).attr(‘hello’) //获取div中的hello属性
attr() 设置/修改
$(‘div’).attr(‘hello’,‘100’) //设置div中的hello属性值为100
2.removeAttr()
=》对于元素的属性进行删除操作
=》语法：元素合集.removeAttr(你要删除的属性名)
$(‘div’).removeAttr(‘hello’) //删除div中的hello属性
3.prop()
可以获取和设置元素的属性
注意：
=》当prop设置元素的原生属性，会直接响应在元素标签身上
=》当prop设置元素自定义属性，不会直接响应在元素标签身上，会响应在元素对象身上
注意：prop方法不能获取元素标签身上的自定义属性，只能获取到prop方法自己设置的自定义属性
prop() 设置
语法：元素合集.prop(‘属性名’,‘属性值’)
$(‘div’).prop(‘id’,‘contar’)
prop() 获取
语法：元素集合.prop(‘你要获取的属性名’)
返回值：该属性对应的值
$(‘div’).prop(‘id’)
4.removeProp()
用来删除元素属性的方法
注意：
=》不能删除原生属性
=》只能删除由prop方法设置的自定义属性
语法：元素集合.removeProp(‘你要删除的属性名’)
获取元素尺寸
==注意：不管该元素是否隐藏都可以拿到元素值 ==
1.width()和height()
返回值：元素内容区域的尺寸
$(‘div’).width()
2.innerWidth()和innerHeight()
返回值：元素内容区域的尺寸+内边距
3.outerWidth()和outerHeight()
返回值：元素内容区域的尺寸+内边距+边框
4.outerWidth(true)和outerHeight(true)
返回值：元素内容区域的尺寸+内边距+边框+外边距
操作元素偏移量
获取元素偏移量
1.offset()
获取元素相对于页面左上角的坐标位置
注意：返回值是一个对象数据类型，{ top:yyy,left:xxx }
$(‘div’).offset()
2.position()
获取的是元素的定位位置
注意：如果你设置的是right和bottom，会自动换算成left和top返回给你
$(‘div’).position()
事件绑定
1.on() 方法绑定事件
基础绑定事件
语法：元素集合.on(‘事件类型’,事件处理函数)
$(‘div’).on(‘click’,function(){ console.log (“我是普通点击事件”) } )
事件委托绑定事件
语法：元素集合.on(‘事件类型’,‘选择器’,事件处理函数)
$(‘div’).on(‘click’,‘p’,function(){ console.log (“我是事件委托点击事件”) } )
把事件绑定给div元素，当你在div内的p元素触发事件的时候，执行事件处理函数
事件委托把p元素的事件委托给了div元素来绑定
批量绑定事件
语法：元素集合.on({ 事件类型1:处理函数,事件类型2,处理函数})
注意：不能进行事件委托了
$(‘div’).on({
click:function(){ console.log(‘点击事件’)},
mouseover:function(){ console.log(‘鼠标移入事件’)},
mouseout:function(){ console.log(‘鼠标移出事件’)}
})
2.one()
用来绑定事件，和on方法绑定事件的方式是一样的
区别：one方法绑定的事件，只能执行一次
3.hover()
注意：jQuery里面一个特殊的事件
语法：元素集合.hover(移入时触发的函数，移出时触发的函数)
当你只传递一个函数的时候，会在移入和移出时都触发此函数
4.常用事件函数
jQuery把我们最长用到的一些事件，单独做成了事件函数
我们通过调用这些事件函数，来达到绑定事件的效果
click()，mouseover()，mouseout()，change()，…
事件解绑和触发
事件解绑
1.off() 事件解绑
解绑全部事件处理函数
语法：元素集合.off(事件类型)
$(‘div’).off(‘click’) //会把div的click事件对应的所有事件处理函数全部移除
解绑指定的事件处理函数
语法：元素集合.off(‘事件类型’,要解绑的事件处理函数)
$(‘div’).off(‘click’,函数名) //会把div的click事件对应的函数移除
事件触发
1.trigger() 事件触发
语法：元素集合.trigger(事件类型)