学习记录---02jQuery---获取设置元素属性-选择器-获取文本内容-返回指定的祖先级元素-遍历元素-创建删除元素-元素尺寸-元素位置-卷曲的距离-带有动画的返回顶部

设置或获取元素的固有属性

元素本身自带的属性
.prop('属性')----一个值–>获取
.prop('属性'，'属性值') ----两个值–>设置

设置或获取元素的自定义属性
.attr('属性')
.attr('属性'，'属性值')
可以获取h5自定义属性

数据缓存
data() 这个里面的数据是存放在元素的内存里面 不会修改DOM结构，刷新消失
.data('属性')
.data('属性'，'属性值')
获取 data-index h5自定义属性，不用写data- 返回的是数字型

代码示例

dataset('data-user-name');
date('userName')

---

选择器

:checked· 选择器–选择check为check即被选择的复选框的元素，返回的是伪数组

---

获取文本内容

.html()–包括标签–innerHTML()
一个值 —> 设 置
空 —> 获取

.text()—只有文字–innerText()
一个值 —> 设置
空 —> 获取

.val ()-表单值–value
一个值 —> 设置
空-----> 获取

---

返回指定的祖先级元素

·parents()----返回所有祖先元素，是一个伪数组
.parents('选择器')----返回指定选择器

---

保留小数位—这是js的方法
.toFixed(n) 保留n位小数

---

jq遍历元素

each(function(index,domEle){})
回调函数中的第一个参数一定是索引号，可以自己指定索引号名称
第二个参数一定是dom对象
注意：
第二个参数是dom对象，是不能使用jq方法的，先转换为jq对象$(domEle)

$.each(对象,function(index,ele) { })
主要用于遍历数据，处理数据 例如数组对象等

---

jq创建元素

$("");

代码实例

var li = $('<li>aaa</li>');

添加元素

1. 内部添加(父子关系)

   $('ul').append(li)内部添加放到内容的最后
   $('ul').prepend(li)内部添加放到内容的前面

2. 外部添加(兄弟关系)

   $('ul').before(li);
$('ul').after(li);

删除元素
element.remove();可以删除匹配的元素
element.empty();删除匹配元素里面的子节点—孩子
element.html("");与empty()相同

---

jq元素尺寸

1. 内容宽度
   .width()
.height()

2. 包含padding
   .innerWidth()
.innerHeight()

3. padding+border
   .outerWidth()
.outerHeight()

4. padding+border+margin
   .outerWidth(true)
.outerHeight(true)

参数为空为获取
参数为数值为修改
不必写单位

---

jq元素位置

1. 距离文档的位置—offset
   返回的是对象{}
   只获取一个值ele.offset().top;
   设置偏移 ele.offset({top:100,left:100})
2. 距离最近的具有定位的父盒子的位置—position
   ele.position()—返回对象
   只能获取值不能设置

---

卷曲的距离

页面滚动事件 $(window).scroll(function(){});

1. 被卷曲的头部-scrollTop()
   有参数 设置卷曲的距离
2. 被卷曲的左侧-scrollLeft()
   有参数 设置卷曲的距离

---

带有动画的返回顶部

动画animate动画函数里面有个scrollTop属性
做动画是不能是文档(document)做动画
页面滚动做动画的例子

$("body,html").stop().animate({scrollTop:0})