jQuery 学习笔记（二）

1.jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data()

1.1 元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href 属性，比如 元素里面的 type。

在这里插入图片描述

注意： prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected等。

1.2 元素自定义属性 attr()

用户自己给定元素添加的属性，我们称为自定义属性。比如给 div 添加 index="1" 等。

在这里插入图片描述

注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

1.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

在这里插入图片描述

注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

演示代码：

百度

我是 div
123

2.jQuery 文本属性值

jQuery 的文本属性值常见操作有三种：html() / text() / val()。分别对应 JS 中的 innerHTML、innerText 和 value 属性。

在这里插入图片描述

注意：html() 可识别标签，text() 不识别标签。
演示代码：

    我是内容

3.jQuery 元素操作

jQuery 元素操作主要讲的是用 jQuery 方法，操作标签的遍历、创建、添加、删除等操作。

3.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作，如果要想给同类元素做不同操作，就需要用到遍历。

在这里插入图片描述

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换

在这里插入图片描述

注意：此方法用于 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

3.2 创建、添加、删除元素

jQuery 方法操作元素的创建、添加、删除方法很多，重点使用部分如下：

在这里插入图片描述

注意：以上只是元素的创建、添加、删除方法的常用方法，其它方法请参考 API。

示例代码：

    
原先的 li

我是原先的 div

4.jQuery 尺寸、位置操作

jQuery 中分别为我们提供了两套快速获取和设置元素尺寸和位置的 API，方便易用，内容如下：

4.1 jQuery 尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的 API 对应不一样的盒子模型。

在这里插入图片描述

演示代码：

注意：有了这套 API 我们将可以快速获取和设置宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

4.2 jQuery 位置操作

jQuery 的位置操作主要有 3 个：offset()、position()、scrollTop()/scrollLeft()，具体介绍如下：

在这里插入图片描述

    

        

    
        
    
返回顶部