jQuery——操作DOM对象

目录

样式操作

内容及value值操作

节点操作

操作属性

节点遍历

---

jQuery对JavaScript中的DOM操作进行了封装jQuery中的DOM操作

1.样式操作
    2.内容及value值操作
    3.节点操作
    4.节点属性操作
    5.节点遍历
    6.CSS-DOM操作

样式操作

设置单个样式：.css("属性名称","属性值")
设置多个样式：.css({"属性名称1":"属性值1","属性名称2":"属性值2"})
获取样式值：  .css("属性名称")
添加类样式：	 .addClass("类样式名称 类样式名称")		添加多个用空格隔开
切换类样式： 	 .toggleClass("类样式名称 类样式名称")
判断元素是否包含指定的样式：	hasClass("类样式名称 类样式名称")		返回值：boolean类型
移除类样式：	.removeClass("类样式名称  类样式名称")	移除多个用空格隔开

 

内容及value值操作

获取元素中的htnl代码	.html()
设置元素中的html代码	.html("<h1>CCTV</h1>")
获取元素中的文本内容	   .text()
设置元素中的文本内容	   .text("CCTV")
元素失去焦点：	         .blur()
元素获得焦点：		     .focus()
获取元素的value属性值    .val()
设置元素的value属性值  	 .val("设置的属性值")

节点操作

获取或创建节点
    工厂函数 							$("")
	通过选择器获取节点：					$("selector")
	把BOM节点转换为jQuery节点：			 $("<p>")
	使用HTML字符串创建jQuery节点：		$("<p>内容</p>")

元素内部追加子节点
	to:到/给予
	将A节点追加到B节点里					 B.append(A)
	将A节点追加到B节点里					 A.appendTo(B)
	把A节点追加到B节点最前				B.prepend(A)
	把A节点追加到B节点最前				A.prependTo(B)

元素外部插入同辈节点
	把A节点插入到B节点之后				B.after(A)
	把A节点插入到B节点之后				A.insertAfter(B)
	把A节点插入到B节点之前				B.before(A)
	把A节点插入到B节点之前				A.insertBefore(B)

删除节点
	删除h1节点							$("h1").remove()
	清空h2节点							$("h2").empty()
	$("selector").detach()：删除整个节点，保留元素的绑定事件、附加的数据

替换节点
	将A节点替换为B节点					 B.replaceWith(A)
	将A节点替换为B节点					 A.replaceAll(B)

克隆节点
	克隆节点							$("selector").clone(true/false)
clone():方法默认是false 不克隆方法
复制节点，参数为true复制事件，false则不复制事件
true克隆事件，false则相反

 

操作属性

添加元素属性
	给A节点添加属性						A.attr("属性名称","属性值")
	给A节点添加多个属性					   A.attr({"属性名称":"属性值","属性名称":"属性值"})
	给A节点添加属性						A.prop("属性名称","属性值"):一般用于操作checkbox是否被选中
	
移除元素的属性
	将A节点的属性移除						A.removeAttr("属性名称")

节点遍历

遍历子元素	
	children():获取元素的所有子节点
    find(""):获取选中的子元素
    
遍历同辈元素
	prev():上一个 可以获取紧邻其前的元素
	next():下一个  可以获取紧邻其后的元素
    siblings():位于该元素前与后的所有同辈元素	
    
遍历前辈元素    
	closest(""):获取最近的"祖先级"元素
	parent():获取元素的"父级"元素
	parents():获取元素的"祖先"元素
    
遍历其他元素    
each()
each():为每个匹配的元素规定要运行的函数
语法：$(selector).each(function(index,element));
index:选择器的位置  element:当前的元素
例子：
    $(function () {
        let str="";
        $("img").click(function () {
            $("li").each(function (index,element) {
                console.log(index);//选择器的位置
                console.log($(this));//获取到的jQuery对象
                console.log(element);//当前的元素
                str+=$(this).text()+"<br>";
            })
            $("section").append(str)
        })
    })
    
end()
end():结束当前链条中的"最近的一个"筛选操作,并将匹配元素集还原之前的状态