使用jQuery操作节点

Posted 2022-12-30

DOM的分类：

  DOM core  指所有支持DOM的功能都可以进行使用操作

  html DOM  网页中的所有标签或节点

  CSS  DOM  指网页中的优化样式

在控制台输出信息：

  console.log("元素的宽为"+w)

设置和获取样式：

  $(选择器).css("属性","属性值")      设置单个样式

  $(选择器).css("属性1":"属性值1","属性2":"属性值2"........)  设置多个样式

  $(选择器).css(属性)      获取指定属性值

添加类样式：

  $(选择器).addClass("类名")  添加单个样式

  $(选择器).addClass("类名1 类名2")  添加多个类样式

移除类样式

  $(选择器).removeClass("类名");  移除单个样式

  $(选择器).removeClass("类名1 类名2");  移除多个样式

添加和移除样式

  $(选择器).toggleClass("类名")  指元素在添加样和移除样式式中切换

  $(选择器).toggleClass("类名1 类名2....") 来回添加和移除多个样式

判断元素是否含有类样式

  $(选择器).hasClass("类名");  如果含有类名，则返回true，否则返回false

HTML代码操作

  $(选择器).html("");    获取选择器的内容（文本、标签）

  $(选择器).html("内容");    将元素内容进行替换（文本、标签）

  $(选择器).text("");    获取选择器的内容（文本）

  $(选择器).text("内容");    将元素内容进行替换（文本）

  $(选择器).val("");    获取表单value值

  $(选择器).val("内容");    替换表单value的值

  $(选择器).attr("src");    获取src属性值

节点的创建和插入

  var $newcon= $("创建的内容");  创建节点（可以是标签，可以是文本）

  $("ul").append($newcon);  将新节点插入到ul内的最后面

  $newcon.appendTo($("ul"));  同上

  $("ul").prepend($newcon);  将新节点插入到ul内的最前面

  $newcon.prependTo($("ul"));  同上

同辈插入

  ("ul").after($p);    将p元素插入到ul之后

        $p.insertAfter($("ul"))    同上

  $("ul").before($p);    将p元素插入到ul之前

        $p.insertBefore($("ul"));  同上

节点的删除和替换

  $(选择器).remove();    删除当前选择的节点

  $(选择器).empty();    清空当前选择的节点内容（保留标签）

  $(选择器).detach();    删除当前节点，但是可以保留删除的节点

      可以用变量进行接收

  $(选择器).replaceWith(新节点);  选择的内容被新节点替换

  新节点.replaceAll(选择器);  新节点替换选择的内容

复制节点

  $(选择器).clone(true);    复制当前选择的节点

      true复制节点的事件  false不复制事件

属性节点操作

  设置和获取属性节点

  $(选择器).removeAttr("属性名")  移除指定的属性节点

遍历节点

  $(选择器).children();    获取所有子节点，但是不会获取后代其他节点

      得到一个子节点数组，数组取值为DOM对象，不

      使用jQuery方法

  $(选择器).next();    选中当前元素的下一个兄弟元素

  $(选择器).prev();    选中当前元素的上一个兄弟元素

  $("选择器).siblings();   选中当前元素的所有兄弟元素

访问父级和祖先元素

  $(选择器).parent();    选择当前元素的父级元素

  $(选择器).parents();    选择当前元素的父级元素，得到一个数组，通过下标取值

      需要转为jQuery对象才能使用jQuery方法  $(arr[index])

  $(选择器).each(function(index,element));  获取页面上的使用当前元素，进行遍历，index是下标，

        element代表当前元素；this也可以代表当前元素

  $(选择器).end();    结束当前的筛选，从最近一次筛选开始选择