[JavaScript知识库]使用jQuery操作DOM对象

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

样式操作

设置单个样式：?? ?.css("属性名称"，"属性值");
设置多个样式：?? ?.css({"属性名称1","属性值1":"属性名称2","属性值2"});
获取样式值：?? ? .css("属性名称");
添加类样式：?? ? .addClass("类样式名称");
移除类样式：?? ? .removerClass("类样式名称");
切换类样式：?? ? .toggleClass("类样式名称");
判断元素是否包含指定样式：?? ?.hasClass("判断类样式名称");

????????

内容及value值操作

获取元素中的html代码?? ??? ??? ?.html();
设置元素中的html代码?? ??? ??? ?.html("<h1>我最帅！</h1>");这里面可以直接使用标签
获取元素中的文本内容?? ??? ? ? ? ?.text()
设置元素中的文本内容?? ??? ??? ? ?.text("我最帅")
元素失去焦点 ? ? ? ? ? ? ? ? ? .blur()
元素获得焦点?? ??? ??? ??? ??? ? .focus()
获取元素的value属性值?? ??? ??? ?.val()设置元素的value属性值?? ??? ??? ?.val("设置的属性值")

?

节点操作

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

元素内部追加子节点
? ? ? ? to:到/给予
? ? ? ? 将li节点追加到ul节点里?? ??? ??? ??? ?ul.append(li);
? ? ? ? 将li节点追加到ul节点里?? ??? ??? ??? ?li.appendTo(ul);
? ? ? ? 把li节点追加到ul节点最前?? ??? ??? ?ul.prepend(li);
? ? ? ? 把li节点追加到ul节点最前?? ??? ??? ?li.prependto(ul);

元素外部插入同辈节
?? ??? ?把h1节点插入到h2节点之后?? ??? ??? ?h2.After(h1)
?? ??? ?把h1节点插入到h2节点之后?? ??? ??? ?h1.insertAfter(h2);
?? ??? ?把h1节点插入到h2节点之前?? ??? ??? ?h2.before(h1)
?? ??? ?把h1节点插入到h2节点之前?? ??? ??? ?h1.insertBefore(B);??

?
删除节点：
?? ??? ?删除h1节点?? ??? ??? ??? ?$("h1").remove();
?? ??? ?清空h2节点?? ??? ??? ??? ?$("h2").empty();

替换节点：
?? ??? ?将p节点替换为span节点?? ??? ??? ?p.replaceWith(span)?? ?
?? ??? ?将p节点替换为span节点?? ??? ??? ?span.replaceAll(p)

克隆节点：
?? ??? ?克隆节点:?? ??? ??? ??? ?$("selector").clone(true/false)
复制节点，参数为true复制事件，false则不复制事件

节点遍历

?遍历子元素：
?? ?children:获取元素的所有子元素
? ? find

遍历父元素：
?? ?parent():获取元素的父级元素
? ? parents():获取元素的祖先元素
? ? closest：获取最近的祖先级别元素

遍历同辈节点:
?? ?next：可以获取紧邻其后
? ? prev：可以获取紧邻其前
? ? siblings() ? 位于该元素前与后的所有同辈元素

遍历节点：
?? ??? ?let str = "";
? ? ? ? $("img").click(function (){
? ? ? ? ? ? $("li").each(function (index,element){
? ? ? ? ? ? ? ? str += $(this).text()+"</br>"
? ? ? ? ? ? })
? ? ? ? ? ? $("section").append(str);
? ? ? ? })；
? ? each：为每个匹配的元素规定要运行的函数
? ?? ?语法：$(selector).each(function(index,element));
? ? index：选择器的位置
? ? element:当前的元素