jQuery入门 (三) jQuery DOM操作

最新推荐文章于 2024-08-19 21:21:31 发布

kong7906928

最新推荐文章于 2024-08-19 21:21:31 发布

阅读量726

点赞数 6

分类专栏：前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/kong7906928/article/details/140783273

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery DOM 操作

一、JQuery 的DOM 操作

1、操作文本

操作文本- 常用方法:

1. 方法 : html() 作用 : 获取标签的文本内容

2. 方法 : html(value) 作用 : 设置标签的文本内容，解析标签

示例代码 :

<!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>

2、操作对象

操作对象- 常用方法:

      1. $("元素") 作用 : 创建指定元素
2. append(element) 作用 : 添加成最后一个子元素，由添加者对象调用
3. appendTo(element) 作用 : 添加成最后一个子元素，由被添加者对象调用
4. prepend(element)   作用 : 添加成第一个子元素，由添加者对象调用
5. prependTo(element) 作用 : 添加成第一个子元素，由被添加者对象调用
6. before(element) 作用 : 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
7. after(element)   作用 : 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
8. remove()    作用 : 删除指定元素(自己移除自己)
9. empty()   作用 : 清空指定元素的所有子元素

示例代码 :

<!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>城市列表 </li>
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
    	<li>描述列表 </li>
        <li id="mx1">描述1</li>
        <li id="mx2">描述2</li>
        
        <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"));//prepend(element)  添加成第一个子元素，由添加者对象调用
        $("#jy").prependTo($("#city"));// prependTo(element) 添加成第一个子元素，由被添加者对象调用
    });
    

    //按钮四：将雄起添加到上海下方
    $("#btn4").click(function(){
        $("#sh").after($("#xq"));//after(element)     添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
    });
    

    //按钮五：将雄起添加到上海上方
    $("#btn5").click(function(){
        $("#sh").before($("#xq"));//before(element)    添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
    });

    //按钮六：将雄起删除
    $("#btn6").click(function(){
        $("#xq").remove();//remove()           删除指定元素(自己移除自己)
    });
    

    //按钮七：将描述列表全部删除
    $("#btn7").click(function(){
        $("#desc").empty();//empty()            清空指定元素的所有子元素  <ul id="desc"><ul> 还在
        // $("#desc").remove(); //
    });
    
</script>
</html>

3、操作样式

操作样式- 常用方法:

1.css(name) 作用 : 获取css样式

2.css(name,value) 作用 : 设置CSS样式

3.addClass(value) 作用 : 给指定的对象添加样式类名

4.removeClass(value) 作用 : 给指定的对象删除样式类名

5.toggleClass(value) 作用 : 如果没有样式类名，则添加。如果有，则删除

示例代码 :

<!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;
     <input type="button" id="btn6" value="获取背景样式">&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");
       //  alert($("#div").css("background"));
    });


  	$("#btn6").click(function(){
       // $("#div").css("background","blue");
         alert($("#div").css("background"));
    });
    // 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");//设置或删除cls1 样式
    });
    
</script>
</html>

4、操作属性

操作属性- 常用方法:

1.attr(name,[value]) 作用 : 获得/设置属性的值

2.prop(name,[value]) 作用 : 获得/设置属性的值(checked，selected)

示例代码 :

<!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","设置username ");
    });
    

    // 2.prop(name,[value])   获得/设置属性的值(checked，selected)
    //按钮三：选中女
    $("#btn3").click(function(){
        $("#gender2").prop("checked",true);
    });

    //按钮四：选中本科
    $("#btn4").click(function(){
        $("#bk").prop("selected",true);
    });
</script>
</html>

二、总结

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