[jQuery] DOM

Arce

17-DOM-操作文本

常用方法

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作文本</title>
</head>
<body>
  <div id="div">我是div</div>
  <input type="button" id="btn1" value="获取div的文本">
  <input type="button" id="btn2" value="设置div的文本">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
   //1. html()   获取标签的文本内容
   $("#btn1").click(function(){
     //获取div标签的文本内容
     let value = $("#div").html();
     alert(value);
   });
   //2. html(value)   设置标签的文本内容，解析标签
   $("#btn2").click(function(){
     //设置div标签的文本内容
     //$("#div").html("我真的是div");
     $("#div").html("<b>我真的是div</b>");
   });
</script>
</html>

18-DOM-操作对象

常用方法

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作对象</title>
</head>
<body>
  <div id="div"></div>
  <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>
  <input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
  <input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
  <input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
  <input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
  <ul id="city">
    <li id="bj">北京</li>
    <li id="sh">上海</li>
    <li id="gz">广州</li>
    <li id="sz">深圳</li>
  </ul>
  <ul id="desc">
    <li id="jy">加油</li>
    <li id="xq">雄起</li>
  </ul>  <br><br><br>
  <input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;
  <input type="button" id="btn7" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
  /*
    1. $("元素")   创建指定元素
    2. append(element)   添加成最后一个子元素，由添加者对象调用
    3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用
    4. prepend(element)  添加成第一个子元素，由添加者对象调用
    5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
    6. before(element)  添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
    7. after(element)   添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
    8. remove()       删除指定元素(自己移除自己)
    9. empty()      清空指定元素的所有子元素
  */
  
  // 按钮一：添加一个span到div
  $("#btn1").click(function(){
    let span = $("<span>span</span>");
    $("#div").append(span);
  });
  
  //按钮二：将加油添加到城市列表最下方
  $("#btn2").click(function(){
    //$("#city").append($("#jy"));
    $("#jy").appendTo($("#city"));
  });
  //按钮三：将加油添加到城市列表最上方
  $("#btn3").click(function(){
    //$("#city").prepend($("#jy"));
    $("#jy").prependTo($("#city"));
  });
  
  //按钮四：将雄起添加到上海下方
  $("#btn4").click(function(){
    $("#sh").after($("#xq"));
  });
  
  //按钮五：将雄起添加到上海上方
  $("#btn5").click(function(){
    $("#sh").before($("#xq"));
  });
  //按钮六：将雄起删除
  $("#btn6").click(function(){
    $("#xq").remove();
  });
  
  //按钮七：将描述列表全部删除
  $("#btn7").click(function(){
    $("#desc").empty();
  });
  
</script>
</html>

19-DOM-操作样式

常用方法

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作样式</title>
  <style>
    .cls1{
      background: pink;
      height: 30px;
    }
  </style>
</head>
<body>
  <div style="border: 1px solid red;" id="div">我是div</div>
  <input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;
  <input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;
  <br><br><br>
  <input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;
  <input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
  <input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
  // 1.css(name)   获取css样式
  $("#btn1").click(function(){
    alert($("#div").css("border"));
  });
  // 2.css(name,value)   设置CSS样式
  $("#btn2").click(function(){
    $("#div").css("background","blue");
  });
  // 3.addClass(value)   给指定的对象添加样式类名
  $("#btn3").click(function(){
    $("#div").addClass("cls1");
  });
  // 4.removeClass(value)  给指定的对象删除样式类名
  $("#btn4").click(function(){
    $("#div").removeClass("cls1");
  });
  // 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除
  $("#btn5").click(function(){
    $("#div").toggleClass("cls1");
  });
  
</script>
</html>

20-DOM-操作属性

常用方法

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作属性</title>
</head>
<body>
  <input type="text" id="username"> 
  <br>
  <input type="button" id="btn1" value="获取输入框的id属性">  &nbsp;&nbsp;
  <input type="button" id="btn2" value="给输入框设置value属性">
  <br><br>
  <input type="radio" id="gender1" name="gender">男
  <input type="radio" id="gender2" name="gender">女
  <br>
  <input type="button" id="btn3" value="选中女">
  <br><br>
  
  <select>
    <option>---请选择---</option>
    <option id="bk">本科</option>
    <option id="zk">专科</option>
  </select>
  <br>
  <input type="button" id="btn4" value="选中本科">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
  // 1.attr(name,[value])   获得/设置属性的值
  //按钮一：获取输入框的id属性
  $("#btn1").click(function(){
    alert($("#username").attr("id"));
  });
  
  //按钮二：给输入框设置value属性
  $("#btn2").click(function(){
    $("#username").attr("value","hello...");
  });
  
  // 2.prop(name,[value])   获得/设置属性的值(checked，selected)
  //按钮三：选中女
  $("#btn3").click(function(){
    $("#gender2").prop("checked",true);
  });
  //按钮四：选中本科
  $("#btn4").click(function(){
    $("#bk").prop("selected",true);
  });
</script>
</html>

21-DOM-DOM操作的小结

操作文本
- html() html(…)：获取或设置标签的文本，解析标签。
操作对象
- $(“元素”)：创建指定元素。
- append(element)：添加成最后一个子元素，由添加者对象调用。
- prepend(element)：添加成第一个子元素，由添加者对象调用。
- before(element)：添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用。
- after(element)：添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用。
- remove()：删除指定元素(自己移除自己)。
操作样式
- addClass(value)：给指定的对象添加样式类名。
- removeClass(value)：给指定的对象删除样式类名。
操作属性
- attr(name,[value])：获得/设置属性的值。
- prop(name,[value])：获得/设置属性的值(checked，selected)。

[jQuery] DOM

相关帖子

电脑竖屏了变回来如何操作

添加页眉页脚如何操作

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

uniapp & vue 父子、子父、兄弟组件之间的传值

文件对比工具/Beyond Compare

php实现超简的分页功能

PHP版贪吃蛇小游戏

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

Arce LV4