jQuery 学习笔记

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 插件使用步骤：

1. 引入相关文件。（jQuery 文件 和 插件文件）
2. 复制相关html、css、js (调用插件)。