JQueryDOM和遍历

1、JQuery DOM操作【重点】

1.1获取和修改内容

html

text

val

//html()
//获取双标签中的值，获取的内容包含其他标签
//在括号内赋值即可更改

//text()
//获取双标签中的文本，获取的内容不包含其他的标签
//在括号内赋值即可更改

//val()
//获取单标签的值
//在括号内赋值即可更改

1.2获取和修改属性

attr

//attr("属性名")
//获取标签的属性

//attr("属性名" , "值")
//给对应的标签的属性重新赋值

//attr({属性:'值',属性:'值'})
//同时设置多组属性

1.3追加元素

• append() 追加,元素内部追加,加入的元素是子元素
• prepend() 前追加,元素内部前追加,加入的元素是子元素
• after() 后面追加,元素外部追加,加入的元素是兄弟元素
• before 前追加,元素外部追加,加入的元素是兄弟元素

//append("<p>   </p>")
//标签内后追加

//prepend("<p>   </p>")
//标签内前追加

//after("<p>   </p>")
//标签外后追加

//before("<p>   </p>")
//标签外前追加

1.4删除元素

remove

empty

//remove()
//删除整个标签

//remove("选择器")
//删除标签中对应选择器的元素

//empty();
//删除标签内所有，不删除

1.5CSS操作

1.5.1 css类

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

//addClass("类名")
//给一个标签定义一个类

//removeClass("类名")
//删除标签的这个类

//toggleClass("类名")
//更改标签的类

//addClass("类1   类2")
//同时添加多个类名
//直接用添加标签就行，中间用空格隔开

1.5.2 css方法

css()

//css("属性名")
//获得样式属性值

//css("属性","值")
//设置属性css("background-color","red")

//css({属性:"值" , 属性:"值"})
//同时设置多个:
//css({width:"300px",height:"300px",border:"2px solid black"})

2、JQuery遍历(熟悉)

2.1祖先

• parent() 返回直接父级
• parents() 返回所有父级,直到html
• parentsUntil(“元素名”) 返回所有父级,直到指定元素,不包含该元素

//parent()
//向外获得一个元素的直接父级元素

//parents()
//向外获得元素的所有祖先元素包含body和html

//parentsUntil("元素")
//向外获得元素的所有祖先元素，不包含参数元素和参数元素以外的元素

2.2后代

• children() 返回直接后代
• find(“选择器”) 返回所有层级的后代,会再次根据指定选择器过滤

//children()
//向内获得一个元素的直接子级元素

//find(*)
//*代表所有，可以指定标签获取
//如find("<p>") 、 find("<div>")
//获取元素的所有子级

2.3兄弟

• siblings() 所有兄弟
• next() 下一个兄弟元素
• prev() 上一个兄弟元素

//siblings()
//获取所有同级兄弟元素

//next()
//获取同级后边的兄弟元素

//prev()
//获取同级前边的兄弟元素

2.4过滤

• first() 第一个
• last() 最后一个
• eq(index) index从0开始,获得指定下标元素
• filter(“选择器”) 根据选择器过滤
• not(“选择器”) 不选指定选择器的

//$("p").first()
//所有p标签的第一个

//$("p").last()
//所有p标签的最后一个

//$("p").last(下标)
//所有p标签中下标为参数的

//$("p").filter(选择器)
//所有p标签中对应选择器的元素

//$("p").not(".或#选择器")
//获取p标签中除指定选择器的所有元素