jQuery对元素、节点的操作

一、文本内容的操作

方法:text()  text(val)

例子:$div = $(‘div’) //获取div元素

  Console.log($div.text())  //获取文本内容

      $div.text(“aaaaa”) //设置了文本的内容

二、HTML内容的操作

html():用于获取第一个匹配元素的HTML内容

html(val):用于设置全部匹配元素的HTML内容

注意:内容中包含HTML代码可以被浏览器解析

三、对元素值的操作

主要对于inputcheckradio元素

val()  //获取值

val(“”)  //设置值

四、对于DOM节点的操作

①创建元素节点:

Var $jsp = $(“<p></p>”)   //创建了一个p节点

插入到div里面

$(“div”).append($jsp)

②插入节点:

方法:1)往元素的内部插入

append():为所有匹配的元素的内部追加内容

  appendTo():将所有匹配的元素添加到另一个元素集合中

          prepend():往元素的集合的前面添加内容

  prependTo()

2)往元素的外部插入

  after():在每个匹配的元素之后插入

  insertAfter()

  before():在每个匹配的元素前边插入

  insertBefore()

③删除节点:

remove():用于从DOM中删除匹配的元素(常用)

detach():也是用于删除匹配的元素,与remove不同的是,detach不会将jQuery中的对象删除。

empty():把标签的内容清空掉,不是绝对意义上的删除

④复制节点

clone():

示例:$(“#box1 p:eq(1)”).bind(“click”,function(){

$(this).clone().insertAfter($(this))

})

带参数:clone(True):加了这样之后会将事件处理程序一并复制

⑤替换节点

replaceAll(Seletor):用于使所有的元素替换掉Seletor匹配的元素

示例:$(“<div>good</div>”).replaceAll(“div”)

replaceWith(content):用匹配的元素替换掉指定的HTML元素

示例:$(“#box1”).replaceWith(“<div>sunck</div>”)

⑥遍历节点

each():

示例:

$(“p”).each(function(index){    //index表示第几个

$(this).attr(“title”,”我是第”+(index+1)+”p标签”)

})

⑦包裹节点:

wrap():把匹配到的标签用另一个标签包裹起来

unwarp():去除包裹

warpAll():整体包裹

warpInner():包裹内部

五、修改CSS样式

addClass(class)

removeClass(class)

toggleClass(class):若有这个class类就删除,若无就添加

六、修改CSS的属性

方法:css(attr,value)
示例:

$(“#btn”).bind(“click”,function(){

$(“#box2”).css(“background-color”,”red”)   //修改背景颜色的属性

console.log($(“#box2”).css(“background-color”))  //获取值

})

猜你喜欢

转载自blog.csdn.net/weixin_38654336/article/details/80713644