JQuery_DOM操作_内容操作与JQuery_DOM操作_属性操作_通用属性操作

JQuery_DOM操作_内容操作

　　　　　　DOM操作:

　　　　　　　　1.内容操作

　　　　　　　　　　　　1.html（）：获取/设置元素的标签体内容　　<a><font>内容</fonr></a>   ---><font>内容</fonr>

　　　　　　　　　　　    2.text()：获取/设置元素的标签体纯文本内容　　<a><font>内容</fonr></a>---->内容

　　　　　　　　　　　　3.val（）：　获取/设置元素的value属性值

　　　　　　　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script  src="../js/jquery-3.6.3.min.js"></script>
        <script>
            $(function (){
                // 获取myinput 的value值
                /*var value = $("#myinput").val();
                alert(value);*/
                //$("#myinput").val("李四");
                // 获取mydiv的标签体内容
                /*var html = $("#mydiv").html();
                alert(html)
                $("#mydiv").html(<p>"aaaaaa"</p>)*/
                // 获取mydiv文本内容
                /*var text = $("#mydiv").text();
                alert(text);*/
                $("#mydiv").text("bbb")
            });

        
        </script>
        
    </head>
    <body>
        <input id="myinput" type="text" name="username" value="张三" /><br />
        <div id="mydiv"><p><a href="#">标题标签</a></p></div>
    </body>
</html>

 

　　　　　　　　2.属性操作

　　　　　　　　3.CRUP操作

　　　　

JQuery_DOM操作_属性操作_通用属性操作

　　　　　　　DOM操作:

　　　　　　　　1.内容操作

　　　　　　　　2.属性操作

　　　　　　　　　　　1.通用属性操作

　　　　　　　　　　　　　　　　1.attr（）：获取/设置元素的属性

　　　　　　　　　　　　　　　　2.removeAttr（）:删除属性

　　　　　　　　　　　　　　　　3.prop():获取/设置元素的属性

　　　　　　　　　　　　　　　　4.removeProp():删除属性

　　　　　　　　　　　　　　attr和prop区别？

　　　　　　　　　　　　　　　　1.如果操作的是元素的固有属性，则建议使用prop

　　　　　　　　　　　　　　　　2.如果操作的是元素自定义的属性，则建议使用attr　　　　　　

　　　　　　　　　　　2.对class属性　　

　　　　　　　　　　　　　　　　1.addClass（）:添加Class属性值

　　　　　　　　　　　　　　　　2.removeClass():删除Class属性值

　　　　　　　　　　　　　　　　3.toggleClass():切换class属性

　　　　　　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <title>获取属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script  src="../js/jquery-3.6.3.min.js"></script>
    
    
    <style type="text/css">
             div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div.visible{
                display:none;
            }
     </style>
    
    <script type="text/javascript">
        $(function (){
            //获取北京节点的name属性值
            var attr = $("#bj").attr("name");
            //alert(attr);
            //设置北京节点的name属性的值为dabeijing
             $("#bj").attr("name","dabeijing");
            //新增北京节点的discription属性 属性值是didu
            $("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name")
            //获得hobby的的选中状态
            var checked = $("#hobby").prop("checked");
            alert(checked)
        });

        
        
    </script>
    
    
    </head>
     
    <body>
                
         <ul>
              <li id="bj" name="beijing" xxx="yyy">北京</li>
             <li id="tj" name="tianjin">天津</li>
         </ul>
         <input type="checkbox" id="hobby"/>
         
        
    </body>
    
    
   
</html>　　　　　　　　　　　　　　　　　　　　

　　　　　　　　3.CRUP操作　　

获取/设置元素的标签体
posted @ 2023-02-22 09:54  zj勇敢飞，xx永相随  阅读(14)  评论(0)  编辑  收藏  举报