使用jQuery操作DOM元素

简介: 使用jQuery操作DOM元素

一、DOM分类:

1.DOM core

2.Html-DOM

3.CSS-DOM

二、css样式

$(this).css(“font-size”,“25px”);

$(this).css({“font-size”:“30px”,“color”:“white”});

$("#div3").addClass(“div3_style”);

//移除样式
$("#div3").removeClass("div3_style");
//切换样式toggleClass
$("#div3").toggleClass("div3_style");
//判断是否有该样式hasClass
  if($("#div3").hasClass("div3_style")){
    alert("有");
  }else{
    alert("没有");
  }

三、///html操作

1.html,获取元素内的html内容,包含内部的标签

console.log($("#div3").html());

//给元素赋值
$("#div1").html("这是第一个div");
2.text,获取元素的文本内容
  console.log($("#div3").text());
  //使用text给元素赋值(不会解析内部标签,而html会解析内部标签)
  $("#div1").text("<li>text赋值</li>");
3.获取表单的value值
   alert($("#inp").val());
   
  //给表单赋值
  $("#inp").val("张三");

四、jQuery中的节点操作

//1.创建节点

var nodes = $(“

  • No.6
  • ”);
    //2.插入节点(内部插入)
    //(1)append,给最后插入节点
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").appen…("#div3 ul"));
    //(3)prepend,在元素的内部前面插入节点
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").prepe…("#div3 ul"));
    //(5)外部插入,after,给元素外部的后面插入节点
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").after…("#div3 ul"));
    //(7)外部插入,before,给元素外部的前面插入节点
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").befor…("#div3 ul"));
    //3.删除节点remove
    $("#div3 li:eq(1)").remove();
    //4.删除节点empty
    $("#div3 li:eq(0)").empty();
    //5.替换节点replaceWith
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 li:first")…("#div3 li:first"));
    //7.复制节点
    var fu = $("#div3 li:first").clone(true);
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3 ul").appen…("#inp").attr(“value”));
    //2.设置属性
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲inp").attr("val…("#inp").removeAttr(“value”);
    六、节点遍历
    //1.获取子节点children
    var chi = $("#div3").children().children().length;
    console.log(chi);
    //2.获取下一个节点
    var i = $("#div3 li:first").next().text();
    alert(i); //输出No.2
    //3.获取上一个节点
    var p = $("#div3 li:last").prev().text();
    alert§; //输出No.4
    //4.siblings,获取同辈元素
    $("#div3 li:eq(2)").siblings().css(“background”,“red”);
    //5.parent,获取父辈元素
    $("#div3 li:first").parent().css(“background”,“red”);
//6.parents,获取祖先元素
$("#div3 li:first").parents().css("background","red");
//7.遍历节点each
$("#div3 ul").each(function(){
  console.log($(this).text());
});
目录
相关文章
|
9天前
|
缓存 JavaScript
|
4天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
6 1
|
9天前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,&lt;slot&gt;元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
10 0
|
9天前
|
JavaScript
jQuery创建、删除、添加元素
jQuery创建、删除、添加元素
|
9天前
|
前端开发 JavaScript
|
11天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
22 1
|
11天前
|
移动开发 JavaScript 前端开发
jQuery 根据 DOM 元素 attribute 进行过滤的语法
jQuery 根据 DOM 元素 attribute 进行过滤的语法
13 2
|
12天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
15 2
|
12天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
14 0
|
12天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
18 0