Jquery day_2

1.1 jQuery 属性操作

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

1.1.1 元素固有(自带)属性值 prop( )

// 所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。 
1.获取属性 prop('属性')
2.设置属性 prop('属性','属性值')
// $(this).prop("checked") 获取checkbox的选中状态，
prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

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

// 用户自己给元素添加的属性，称为自定义属性。比如给div添加index
1.获取属性 attr('属性')  // 类似原生 getAttribute()
2.设置属性 attr('属性','属性值') // 类似 setAttribute()
// 获取自定义属性
// $("div").attr("index") 获取自定义属性的索引

1.1.3 数据缓存 data( )

//data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
1.附加数据 data('name','value') // 向被选元素附加数据
2.获取数据 data('name') // 向被选元素获取数据
// 能读取自定义属性 data-index,得到的是数字型

1.2 jQuery 文本属性值

   常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

1.2.1 jQuery 内容文本值

// 1. 普通元素内容 html() (相当于原生inner HTML)
html()   // 获取元素内容
html('内容')  // 设置元素内容
html() 可以识别标签，text()不能识别标签()
// 2. 普通元素文本内容 text() (相当于原生 innerText)
text()  // 获取元素的文本内容
text('文本内容')  // 设置元素的文本内容
// 3. 表单的值 val() (相当于原生value)
val()   // 获取表单的值
val('内容')  // 设置表单的值

1.3 jQuery 元素操作

1.3.1 遍历元素

语法1:
// $('div').each(function ( index, domEle){ xxx ;} )
index是每个元素的索引号；demEle是每个DOM元素对象，不是jQuery对象，使用jQuery方法，需要把这个DOM元素转换为jquery对象 $(domEle)
语法2:
// $.each(object,function(index,ele){ xxx;})

1.3.2 创建，添加，删除

// 1. 创建 (动态创建一个li)
$('<li></li>')
// 2. 内部添加（类似于原生appendChild）
element.append('内容')  // 在元素内部从后面添加
element.prepend('内容')  // 在元素内部从前面添加
// 3. 外部添加
element.after('内容')  // 把内容放在目标元素后面
element.before('内容')  // 把内容放在目标元素前面
- 内部添加元素，生成之后，它们是父子关系
- 外部添加元素，生成之后，它们是兄弟关系
// 4. 删除元素
element.remove()    // 删除匹配元素本身
element.empty()     // 删除匹配元素集合的所有子元素
element.html('')    // 清空匹配元素的内容，还可以赋值操作

1.4 jQuery 尺寸，位置操作

1.4.1 jQuery 尺寸操作

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

语法: 他们可以设置获取元素
// 1.  匹配元素宽度和高度值，只算width/height
width()/height() 
// 2.  匹配元素宽度和高度值，包含padding
innerWidth()/innerHeight()
// 3. 匹配元素宽度和高度值，包含padding,border
outerWidth()/outerHeight()
// 4. 匹配元素宽度和高度值，包含padding,border,margin
outerWidth(true)/outerHeight(true) 
- 如果他们的参数为空，则获取相应的值，返回的是数字型
- 如果参数为数字，则修改相应的值
- 参数可以不用写单位

1.4.2 jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() 

语法:
- 1. offset()设置或获取元素偏移
// offset() 设置或返回被选元素相对于文档的偏移坐标，跟父元素没有关系
// offset().top 用于获取距离文档顶部的距离
// offset().left 用于获取距离文档左侧的距离
// 可以设置元素的偏移：offset({top:10,left:30});
- 2. position获取元素偏移
// position() 返回被选元素相对于带有定位的父级偏移坐标。如果父级没有定位，则以文档为准
// position().top 用于获取距离定位父级顶部的距离
// position().left 用于获取距离定位父级左侧的距离
// 该方法只能获取
- 3. scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
// scrollTop() 方法设置或返回被选元素被卷去的头部
// 不跟参数是获取，参数为不带单位的数字是设置被卷去的头部