文章目录

1.jQuery属性操作
- 1.1 元素固有属性值 prop()
- 1.2 元素自定义属性值 attr()
- 1.3 数据缓存 data()
2. jQuery 文本属性值
3. jQuery 元素操作
- 3.1 遍历元素
- - 3.1.1 each()
  - 3.1.2 $.each()
- 3.2 创建元素、添加元素、删除元素
4. jQuery 尺寸、位置操作
- 4.1 jQuery 尺寸操作
- 4.2 jQuery 位置操作
5. 总结

1.jQuery属性操作

1.1 元素固有属性值 prop()

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

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

1.2 元素自定义属性值 attr()

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

1.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

2. jQuery 文本属性值

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

3. jQuery 元素操作

3.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

3.1.1 each()

3.1.2 $.each()

<body><div>1</div><div>2</div><div>3</div><script>$(function() {// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）var sum = 0;var arr = ["red", "green", "blue"];// 1. each() 方法遍历元素 $("div").each(function(i, domEle) {// 回调函数第一个参数一定是索引号  可以自己指定索引号号名称// console.log(i);// 回调函数第二个参数一定是 dom 元素对象，也是自己命名// console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)$(domEle).css("color", arr[i]);sum += parseInt($(domEle).text());})console.log(sum);// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据// $.each($("div"), function(i, ele) {//     console.log(i);//     console.log(ele);// });// $.each(arr, function(i, ele) {//     console.log(i);//     console.log(ele);// })$.each({name: "andy",age: 18}, function(i, ele) {console.log(i); // 输出的是 name age 属性名console.log(ele); // 输出的是 andy  18 属性值})})</script>
</body>

3.2 创建元素、添加元素、删除元素

// 1.创建元素var p = $('<p>新创建的p</p>')// 2.添加元素// 内部添加append() 放到匹配元素的最后面 //prepend()添加元素到匹配元素的最前面 父子关系// $('div').append(p)$('div').prepend(p)// 外部添加 后面：after() 前面：before() 兄弟关系var div = $('<div>外部添加</div>')// $('.text').after(div)$('.text').before(div)// 3.删除元素// 1.remove():删除匹配的元素// 2.empty():删除匹配元素里面的子节点 孩子// 3.html():删除匹配元素里面的子节点 孩子

4. jQuery 尺寸、位置操作

4.1 jQuery 尺寸操作

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

4.2 jQuery 位置操作

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

5. 总结

jQuery之属性操作相关推荐

jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
[jQuery基础] jQuery对象 -- 属性操作
属性操作属性和属性节点 1.什么是属性? 对象身上保存的变量就是属性 2.如何操作属性? 对象.属性名称 = 值对象.属性名称对象["属性名称"] = 值对象[" ...
JQuery的属性操作及事件
一.属性操作 1.固有属性 (1)获取:选中元素.prop('属性名') console.log($('img').prop('src')); (2)设置:选中元素.prop('属性名','值') & ...
JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
jQuery（六）元素属性操作和jQuery循环
文章目录 jQuery元素属性操作 jQuery循环练习-手风琴式展示图片 jQuery元素属性操作 html() //取出或设置元素内包裹的内容 var $box = $('.box');aler ...
二、属性操作，文本属性值，元素操作，尺寸、位置操作
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属 ...
JQuery-jq属性操作、jq文本属性值、jq元素(创建、添加、移除)操作、jq尺寸、位置操作
属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 元素固有属性值 prop() - 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元 ...
jQuery源码分析系列：属性操作
属性操作 1.6.1相对1.5.x最大的改进,莫过于对属性.attr()的重写了.在1.6.1中,将.attr()一分为二: .attr()..prop(),这是一个令人困惑的变更,也是一个破坏性的升 ...
web前端----jQuery属性操作
知识点总结 1.属性属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...

jQuery之属性操作

文章目录

1.jQuery属性操作

1.1 元素固有属性值 prop()

1.2 元素自定义属性值 attr()

1.3 数据缓存 data()

2. jQuery 文本属性值

3. jQuery 元素操作

3.1 遍历元素

3.1.1 each()

3.1.2 $.each()

3.2 创建元素、添加元素、删除元素

4. jQuery 尺寸、位置操作

4.1 jQuery 尺寸操作

4.2 jQuery 位置操作

5. 总结

jQuery之属性操作相关推荐

最新文章

热门文章