jQuery对象，属性，样式的操作方法——学习2

jQuery对象

1. 什么是jQuery对象
   jQuery对象是一个伪数组
2. 什么是伪数组
   有0-length-1的属性，并且有length属性

jQuery对象是一个包含了dom对象的数组

原生JS属性和属性节点

1. 什么是属性？
   对象身上保存的变量就是属性。

2. 如何操作属性？
   赋值1 - - > 对象.属性名称 = 值；
   获取1 - - > 对象.属性名称；

   赋值2 - - > 对象["属性名称"] = 值；
   获取2 - - > 对象["属性名称"]；

3. 什么是属性节点？
   在编写html代码时，在html标签中添加的属性是属性节点
   在浏览器中的Watch中，attributes属性中保存的所有内容都是属性节点

4. 如何操作属性节点？
   设置 - -> DOM元素.setAttribute("属性名","属性值");
   获取属性节点值 - -> DOM元素.getAttribute("属性名")；

5. 属性和属性节点的区别？
   任何对象都有属性，只有DOM对象才有属性节点。

jQuery属性和属性节点

attr(name|pro|key,value|fn)

作用：获取或者设置属性节点的值
可以传递一个参数，代表获取属性节点的值
也可以传递两个参数，代表设置属性节点的值
注意：无论找到多少个元素，只会返回第一个元素指定属性节点的值
如果是设置，找到多少个元素就会设置多少个元素
如果是这是，设置的属性节点不存在，系统就自动新增

$("img").attr("src");
$("img").attr("src","test.jpg");
$("img").attr({ src: "test.jpg", alt: "Test Image" });

removeAttr(name)

作用：删除属性节点
注意：会删除所有找到元素指定的属性节点

$("img").removeAttr("src");
$("img").removeAttr("src alt");

prop(name|properties|key,value|fn)

prop不仅能操作属性，还能操作属性节点

removeProp(name)

attr和prop的区别

在操作属性节点时，具有true和false两个属性的属性节点，
如checked,selected,diasabled使用prop(),其他使用attr()

<input type="checkbox" checked>
$("input").attr("checked"); //checked
$("input").prop("checked"); //true

<input type="checkbox">
$("input").attr("checked"); //undefined
$("input").prop("checked"); //false

操作类相关的方法

addClass(class|fn)

一个或多个要添加到元素中的CSS类名，请用空格分开

$("p").addClass("class1");

removeClass([class|fn])

toggleClass(class|fn[,sw])

切换类，有就删除，没有就添加

操作文本值相关的方法

html([val|fn])

和原生js的innerHTML一样

$("p").html("Hello <b>world</b>!"); // 设置内容
$('p').html(); // 获取内容

text([val|fn])

和原生js的innerText一样

$("p").text("Hello world!"); // 设置内容
$('p').text(); // 获取内容

val([val|fn|arr])

$("input").val("hello world!"); // 设置文本框的值
$("input").val(); // 获取文本框中的值

操作样式相关的方法

css样式

css(name|pro|[,val|fn])

$("p").css("color"); // 取得第一个段落的color样式属性的值。
$("p").css("color","red"); // 将所有段落字体设为红色
$("p").css({ "color": "#ff0011", "background": "blue" }); // 批量设置
$("p").css("color","red");.css("height","100px").css("width","100px"); // 链式设置

尺寸

height([val|fn])

width([val|fn])

innerHeight()

innerWidth()

outerHeight([soptions])

outerWidth([options])

位置

offset([coordinates])

获取或者设置元素距离窗口的偏移位

$("p").offset().left; // 获取
$("p").offset({ top: 10, left: 30 }); // 设置

position()

获取元素距离定位元素的偏移位
不能设置

$("p").position().left; // 获取

scrollTop([val])

获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。

$("p").scrollTop(); // 获取
$("p").scrollTop(300); // 设置
// 为了保证网页的兼容
$("html").scrollTop() + $("body").scrollTop(); // 获取网页滚动的偏移位
$("html，body").scrollTop(); // 设置网页滚动的偏移

scrollLeft([val])