《锋利的Jquery第二版》读书笔记 第三章

时间:2021-08-26 09:47:41

DOM操作的分类

1.DOM Core不专属JavaScript,任何一种支持DOM的程序设计语言都可以使用它,也可以处理XML等标记语言编写出来的文档,getElementById()、setAttribute()等都是DOM Core的组成部分

2.HTML-DOM专属web文档,document.forms

3.CSS-DOM针对CSS操作element.style.color="red"

jQuery属性操作方法(与w3school网站结合学习)

addClass()向匹配的元素添加指定的类名

$("p:first").addClass("intro");

$(selector).addClass(class)//语法

$("p:first").addClass("intro note")//类似如此可以添加".intro"、".note"两个class//

attr()设置或返回匹配元素的属性和值

$("img").attr("width","180");

$(selector).attr(attribute)//一个参数代表获取属性

$(selector).attr(attribute,value)//两个参数代表更改属性,如第一行

$(selector).attr({attribute:value, attribute:value ...})//规定一个或多个属性/值对

hasClass()检查匹配的元素是否拥有指定的类

alert($("p:first").hasClass("intro"));//返回的是布尔值

$(selector).hasClass(class)//语法

html()设置或返回匹配的元素集合中的 HTML 内容

$("p").html("Hello <b>world</b>!");

$(selector).html()//圆括号内无参数,它会返回第一个匹配元素的内容

$(selector).html(content)//圆括号内设置一个值,它会覆盖所有匹配元素的内容

removeAttr()从所有匹配的元素中移除指定的属性

 $("p").removeAttr("id");

$(selector).removeAttr(attribute)//从被选元素中移除属性

removeClass()从所有匹配的元素中删除全部或者指定的类

$("p:first").removeClass("intro");

$(selector).removeClass(class)/*如果没有规定参数,则该方法将从被选元素中删除所有类,如需移除若干类,请使用空格来分隔类名*/

toggleClass()从匹配的元素中添加或删除一个类

$("p").toggleClass("main");

$(selector).toggleClass(class,switch)/*检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之,通过使用可选 "switch" 参数(布尔值),能够规定只删除或只添加类*/

val()设置或返回匹配元素的值

$(":text").val("Hello World");

$(selector).val(value)//如果该方法未设置参数,则返回被选元素的当前值
//如果该方法设置参数.设置值