深入解析jQuery的DOM操作与CSS应用-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

十。获取内容的方法：

.text() 设置或获取文本内容

.html()设置或获取元素内容，包括html标记；

.val()设置或获取表单的值。

在JS中，常用.innerHTML和.value的属性来获取或设置。

.attr("属性"),设置和获取属性值。

比如：以下两种方法都可以获取第一个input的value值：

alert($("input").slice(0,1).attr("value"));

alert($("input").slice(0,1).val());

十一。设置内容和属性：

直接在.text() .html() .val() 里面写内容，要加引号。

.attr()　可设置属性，写法：

比如：.attr("href","http://www.w3cschool.cc/jquery");

属性和属性值都要用引号，中间用逗号。

同时设置多个属性的时候中间用冒号，每个属性之间用逗号：

比如：

$("#ha").attr({
    "title":"我是一个DIV",
    "style":"background:yellow;border:2px solid blue"
    })

常用到的要设置的属性并不多，如果是a标签的话，还可以设置"href"，上面是div的属性设置。

设置style的话，可以起来和css()相同的效果。

另外，text() html() attr()都提到回调函数，对这个概念不太理解！

链接在这里：http://www.runoob.com/jquery/jquery-dom-set.html　先放一下。

十二。添加元素：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

把要添加的文本内容或者HTML代码写到括号内并加引号，也可以把要写的东西设置了变量，括号内引进变量，中间用逗号隔开。

可重复添加，比如单击后添加的话，每单击一次就添加一次内容。

十三。删除元素：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

比如：

$("#div1").remove();//删除id="div1"的元素

$("#div1").empty();//清空id="div1"的所有子元素

$("p").remove(".italic");//删除P标签里class="italic"的元素（过滤被删除元素）

十四。操作CSS：设置类（添加或删除类的属性）

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

可同时给多个元素添加类：

$("h1,h2,p").addClass("blue");　中间用逗号隔开；

可同时给同一元素添加多个类，中间用空格隔开：

$("#div1").addClass("important blue");

但同时给多个元素添加多个类，实测后发现好像是不行的。

十五。css()方法：

获取css中某种样式的值：$("p").css("background-color");

如果对象是一个集合，则返回第一个对象的值。

设置属性：$("p").css("background-color","yellow");

如果对象是一个集合，则设置所有对象的样式。

设置多个css属性：$("p").css({"background-color":"yellow","font-size":"200%"});

　　注意：1.最外层要用大括号；2.属性与值之间用冒号；3.属性之间用逗号（前面的笔记有提到）

十六、尺寸：

width()-->不包括padding,border,margin的宽度
innerWidth()-->包括padding但不包括border,margin的宽度
outerWidth()-->包括padding,border但不包括margin的宽度
outerWidth(true)-->包括padding,border,margin的宽度，也就是大多数浏览器认为的宽度。

height同理，图示链接：http://www.runoob.com/jquery/jquery-dimensions.html　

可获取和设置。

转载于:https://my.oschina.net/agui1989/blog/475131