jQuery基础知识3--操作DOM的方法

  • 修改元素属性

获取元素属性的atrr语法: $(selector).attr(attribute)//返回属性值(字符串类型)

移除属性的语法:$(selector).removeAtrr(attribute)

设置元素的属性:$(selector).attr(attribute,value);还可以同时设置两个以上的属性值。例子:$('#div1').attr({'href' : 'http://www.baidu.com/','title':'百度官网'});

  • 修改元素内容

text():设置或返回所选元素的文本内容

html():设置或返回所选元素的内容(包括HTML标记)

val():设置或返回表单字段的值

  • 动态创建内容

jQuery动态创建HTML元素使用工厂模式$()实现,语法如下:$(html)

例子:$("<div>",{

text: "这是动态创建的页面元素",

click:function(){ 

 $(this).toggleClass('test');

}

}).appendTo('body');//将其添加到body元素中其他元素的后面

  • 动态插入节点

append() 方法在被选元素的结尾(仍然在内部)插入指定内容

appendTo()方法在被选元素的结尾(仍然在内部)插入指定内容

prepend()方法在被选元素的开头(仍位于内部)插入指定内容

prependTo()方法在被选元素的开头(仍位于内部)插入指定内容

after()在被选元素后插入指定的内容

before()在被选元素前插入指定内容

insertAfter()把匹配的元素插入到另一个指定的元素集合的后面

insertBefore()把匹配的元素插入到另一个指定的元素集合的前面

  • 动态删除节点

remove()方法:用来删除指定的DOM元素,它会将节点从DOM元素树中移除,但是会返回一个指向DOM元素的引用,因此它并不是真正的将jQuery引用到的元素对象删除,而是可以通过这个引用来继续操作元素。

empty()方法:该方法也不会删除节点,只是清空节点中的内容,DOM元素依然保持在DOM树中。

 

 

猜你喜欢

转载自blog.csdn.net/weixin_42210229/article/details/81234726
今日推荐