jQuery学习笔记（三）之属性、内容文本、元素、尺寸位置等操作1、jQuery属性操作 2、jQuery 文本属性值

1、jQuery属性操作

1.1 操作固有属性 `prop()`

元素固有属性就是元素本身自带的属性，比如input多选按钮里的checked,a里的type属性

获取元素固有的属性值:

prop("属性名")
设置元素固有的属性值：

prop("属性名","属性值")

1.2 操作自定义属性 `attr()`

用户给元素添加的属性为自定义属性，例如：index=1

获取元素自定义属性值：

attr("属性名") 类似原生js getAttribute()
设置元素自定义属性值：

attr("属性名","属性值") 类似原生js setAttribute()

此方法也可以获取 HTML5 自定义属性

1.3 数据缓存 `data()`

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

附加数据语法:

data("key","value")
获取数据语法：

data("key")

如果浏览器支持HTML5，还可以读取HTML5自定义属性

<div index="1" data-index="2">我是div</div>

//这个方法获取h5自定义属性 data-index ,不用写 data- ,而且返回的是数字型
 console.log($("div").data("index"));   //数值型 2

2、jQuery 文本属性值

2.1 普通元素内容

获取设置元素内容 html() 相当于原生js的innerHTML

$("div").html();   //获取元素的内容
$("div").html("内容");  //设置元素的内容

2.2 普通元素文本内容

获取设置元素的文本内容 text() 相当于原生js innerText

$("div").text();   //获取元素的文本内容
$("div").text("内容");  //设置元素的文本内容

2.3 表单元素文本内容

获取设置元素的文本内容 val() 相当于原生js value

$("input").val();   //获取元素的文本内容
$("input").val("内容");  //设置元素的文本内容

3、jQuery 元素操作

主要是遍历、创建、添加、删除元素操作。

3.1 遍历元素

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

each() 方法遍历元素

    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>

var arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
    // 回调函数第一个参数是索引号
    console.log(i);
    // 回调函数第二个参数是dom元素对象，不是jQuery对象
    console.log(domEle);
    // domEle.css("color");  错误！！dom对象没有css方法
    $(domEle).css("color", arr[i]);  //内容1字体为红色，内容2字体为绿色，内容3字体为蓝色
}

$.each() 可以用于遍历任何对象，主要用于数据处理，比如数组，对象

$.each({
   name: "andy",
   age: 18
   }, function(i, ele) {
   console.log(i); // 输出的是 name age 属性名
   console.log(ele); // 输出的是 andy 18 属性值
})

3.2 创建元素

动态创建一个li: $("<li>我是后来创建的li</li>");

3.3 添加元素

内部添加（兄弟关系）

在后面添加内容：$("ul").append(li);
在前面添加内容：$("ul").prepend(li);
外部添加（父子关系）

在后面添加内容：$("ul").after(li);
在前面添加内容：$("ul").before(li);

3.4 删除元素

删除元素本身：remove()

<ul>
    <li>原先的li</li>
    <li>我是后来创建的li</li>
</ul>

$("ul").remove();  //删除整个ul标签（自杀）

删除元素里面的内容：empty();

$("ul").empty();  //删除ul标签里的li标签，ul标签还存在（孩子）

删除元素里面的内容：html("");

$("ul").html("");  //删除ul标签里的li标签，ul标签还存在（孩子）

4、jQuery 尺寸、位置操作

4.1 jQuery 尺寸

width() / height() 获取设置元素 width和 height大小

$("div").width();  //获取div的宽度
$("div").width(300);  //设置div的宽度

innerWidth()/innerHeight() 获取设置元素 width/height + padding 大小
outerWidth()/outerHeight() 获取设置元素 width/height + padding + border 大小
outerWidth(true) / outerHeight(true) 获取设置 width/height + padding + border + margin

以上参数为空，则是获取相应值，返回的是数字型数值；

如果参数为数字，则是修改相应值；

参数可以不写单位。

4.2 jQuery 位置

获取设置距离文档的位置（偏移） offset()

<div class="father" style="position: relative;">
   <div class="son" style="position: absolute;left: 10px;
        top: 10px;"></div>
</div>

$(".son").offset();  //返回一个对象，距离文档的left和top
$(".son").offset().top;  //返回数值，距离文档顶部距离
$(".son").offset({
   top: 200,
   left: 200
});   //设置距离文档的左侧距离和顶部距离，以对象形式

获取距离带有定位父级位置（偏移）position()

$(".son").position();  //返回一个对象，距离father的left:10和top:10
$(".son").position().top;  // 10
$(".son").position({  
    top: 200,
    left: 200
});   //不生效，这个方法只能获取不能设置偏移

注意：如果没有带有定位的父级，则以文档为准

设置或获取元素被卷去的头部和左侧 scrollTop()/scrollLeft()

jQuery学习笔记（三）之属性、内容文本、元素、尺寸位置等操作