目录
1,jQuery 对象转 DOM 对象
有两种方式:
$('div')[index]
:index 是索引号$('div').get(index)
:index 是索引号
2,jQuery 样式操作
$('div').css('属性', '值')
:设置样式- 属性必须加引号
- 值如果是数字,则不用加单位和引号
- 参数可以是对象形式,用于设置多个属性,属性可以不用加引号
$(this).css({"color":"white","font-size":"20px"});
$('div').css('属性')
:获取样式值
3,jQuery 属性操作
1,设置固有属性
固有属性是元素本身自带的属性,比如 <a>
元素里面的 href
,<input>
元素里面的 type
。
语法:
.prop('属性')
:获取属性值.prop('属性', '值')
:设置属性
2,设置自定义属性
自定义属性是用户自己给元素添加的属性, 比如给 div
添加 index ="1"
。
.attr('属性')
:获取属性值,类似原生getAttribute()
.attr('属性', '值')
:设置属性,类似原生setAttribute()
3,内容文本值
普通元素内容
html()
:获取元素的内容html('内容')
:设置元素的内容
普通元素文本内容
text()
:获取元素的文本内容text('文本内容')
:设置元素的文本内容
4,数据缓存
data()
方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。
data('name','value')
:向被选元素附加数据。date('name')
:从被选元素获取数据。
4,jQuery 层级选择器
1,层级选择器
- 子代选择器:
$("ul>li")
:获取亲儿子层级的元素,不包括孙子层级的元素。 - 后代选择器:
$("ul li")
:获取ul
下的所有li
元素,包括孙子层级元素。
2,筛选选择器
:first
:$('li:first')
:获取第一个li
元素。:last
:$('li:last')
:获取最后一个li
元素。:eq(index)
:$('li:eq(2)')
:获取索引号为 2 的li
元素,索引号从 0 开始。:odd
:$('li:odd')
:获取索引号为奇数的元素。:even
:$('li:even')
:获取索引号为偶数的元素。
3,筛选方法
parent()
:$('li').parent()
:查找父级。children(selector)
:$('ul').children('li')
:相当于$('ul>li')
,最近一级(亲儿子)。find(selector)
:$('ul').find('li')
:相当于$('ul li')
,后代选择器siblings(selector)
:$('.first').siblings('li')
:查找兄弟节点,不包括自己本身。nextAll([expr])
:$('.first').nextAll()
:查找当前元素之后的所有同辈元素。prevtAll([expr])
:$('.last').prevAll()
:查找当前元素之前的所有同辈元素。hasClass(class)
:$('div').hasClass('protected')
:检查当前元素是否有某个特定的类。eq(index)
:$('li').eq(2)
:相当于$('li:eq(2)')
,index 从 0 开始。
5,遍历操作
1,遍历标签
$("div").each(function (index, domEle) { xxx; })
说明:
each()
方法遍历匹配的每一个元素。主要用DOM处理。- 其中的回调函数有2个参数:
index
是每个元素的索引号;demEle
是每个DOM元素对象,不是jquery对象。要想使用jquery方法,需要将dom元素转为jquery对象$(domEle)
2,遍历对象
$.each(object,function (index, element) { xxx; })
说明:
$.each()
方法可遍历任何对象。比如数组,对象- 其中的回调函数有2个参数:
index
是每个元素的索引号;element
是遍历内容
6,jQuery 插件库
http://www.jq22.com/
http://www.htmleaf.com/
jQuery 插件使用步骤:
- 引入相关文件。(jQuery 文件 和 插件文件)
- 复制相关html、css、js (调用插件)。