Juery操作Dom

2020-10-10 20:03发布

查找元素的节点并找到元素的内容:

var idText = $("#id").text();

获取p元素的title属性值

var text = $("p").attr("title")

创建文本节点并追加:

var ele = $("<li> 香江</li>")

$("ul").append(ele)

内部追加元素append()

追加前:

<a>追加前</a>

追加后:

<a>追加前<b>追加内容</b></a>

内部插入prepend()

插入前:

<a>插入前</a>

插入后:

<a><b>追加内容</b>追加前</a>

外部追加after()

追加前:

<a>追加前</a>

追加后:

<a>追加前</a><b>追加内容</b>

外部插入before()

插入前:

<a>插入前</a>

插入后:

<b>追加内容</b><a>追加前</a>

移除元素

remove()

清空元素

empty()

复制节点

clone()

替换元素

replaceWith("<li>测试</li>")

裹上其他元素

原:<a>原来</a>

wrap("<b></b>")

现:<b><a>现在</a></b>

内部包裹

原:<a>原来</a>

wrapInner("<b></b>")

现:<a><b>现在</b></a>

获取属性

var prop = $("#id").attr("title")

设置属性

$("#id").attr("title","替换后的")

删除属性

$("#id").removeAttr("title")

追加类

$("#id").addClass("is-active")

删除类:

$("#id").removeClass("is-active")

切换样式

$toogleBtn.toogle(function(){

//代码1

},function(){

//代码2

})

切换类:

$("p").toogleClass("is-active")

判断是否含有类:

$("p").hasClass("is-active")

读取元素的内容

$("#id").html()

设置元素的内容:

$("#id").html("这是新的内容")

读取元素的内容(含标签)

$("#id").text()

设置元素的文本内容(纯文本)

$("#id").text("这是新的内容")

获取元素的value

$("#id").val()

设置元素的value

$("#id").val("设置内容")

遍历子元素

$("#id").children();

获取紧邻其后的同辈元素

$("#id").next();

获取紧邻其前的同辈元素

$("#id").prev();

获取所有同辈元素

$("#id").siblings();

查找最近的元素

$("#id").closest("li");

获取样式属性

$("p").css("color");

设置样式

$("p").css("color","red");

设置多个样式

$("p").css({"fontSize":"30px","backgroundCoor":"#888888"})

获取或设置高度

$("p").height();

$("p").height("10em")

获取或设置宽度

$("p").width();

$("p").width("400px")

获取偏移

$("p").offset().left

$("p").offset().top

获取位置

$("p").posotion().left

$("p").position().top

获取或设置滚动条距离顶端或左侧的距离

$("p").scrollTop()

$("p").scrollLeft()

$("p").scrollTop(300)

$("p").scrollLeft(300)



作者:dayAndnight2018

链接:https://blog.csdn.net/Day_and_Night_2017/article/details/85766357

来源:CSDN
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。