jQuery —— 操作DOM节点

最新推荐文章于 2022-10-03 13:26:02 发布

Jxinyun1314

最新推荐文章于 2022-10-03 13:26:02 发布

阅读量159

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Cocoomg/p/9901159.html

版权

html 内容！

<body >
    <p>你最喜欢的名人是？</p>
    <ul>
        <li title="这是乔布斯"><font color="green">乔布斯</font></li>
        <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
        <li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
    </ul>
    <input type="text" id="userName"/>
    <input type="button" value="获取数据" onclick="getUserName()"/>
    <input type="button" value="设置数据" onclick="setUserName()"/>

    <p id="jq" style="color: red">Jquery掉渣天</p>
</body>

1. Jquery 操作 DOM 节点

查找节点
创建节点 append()

删除节点 remove()

<script type="text/javascript">
    $(document).ready(function(){
        // 1，查找节点
        var li2=$("ul li:eq(1)"); // 获取节点 "1"代表第二个元素
        var li2_txt=li2.text();   // 获取文本 比尔盖茨
        alert(li2_txt); 
        
        // 2，创建节点 append()
        var li1=$("<li title='这是马化腾'>马化腾</li>");
        var li2=$("<li title='这是李彦宏'>李彦宏</li>");
        var li22=$("ul li:eq(1)");
        $("ul").append(li1);    //自动添加到最末尾
        li2.insertAfter(li22);  //在指定的节点后面添加，添加在"比尔盖茨"之后
        
        // 3，删除节点 remove()
        $("ul li:eq(1)").remove();
        
    });
</script>

2. Jquery 操作 DOM 节点属性

查找属性
设置属性

删除属性

<script type="text/javascript">
    $(document).ready(function(){
        // 获取属性
        var li2=$("ul li:eq(1)");
        var li2_attr=li2.attr("title"); //attr 查找 title 属性的值
        alert(li2_attr); 
        
        // 设置属性
        $("ul li:eq(1)").attr("title","哈哈哈"); //attr 修改 title 属性的值
        
        // 删除属性
        $("ul li:eq(1)").removeAttr("title"); //removeAttr 删除 title 属性
</script>

3. Jquery 操作 DOM 节点样式

获取样式
设置样式
追加样式

移除样式

<script type="text/javascript">
    $(document).ready(function(){

        // 获取样式
        var li2=$("ul li:eq(1)");
        var li2_class=li2.attr("class"); //class样式为 lc
        alert(li2_class); 
        
        // 设置样式
        $("ul li:eq(1)").attr("class","lc2");
        
        // 追加样式
        $("ul li:eq(1)").addClass("lc3");
        
        // 移除样式
        $("ul li:eq(1)").removeClass("lc");
</script>

4. 设置和获取 HTML，文本和值

获取 html，设置 html
获取文本，设置文本

获取值，设置值

<script type="text/javascript">
    $(document).ready(function(){
        // 获取html
        var l1_html=$("ul li:eq(0)").html();
        alert(l1_html); 
        
        // 设置html
        $("ul li:eq(0)").html("<font color=red>哈哈</font>");
        
        // 获取文本
        var l1_text=$("ul li:eq(0)").text();
        alert(l1_text); 
        
        // 设置文本
        $("ul li:eq(0)").text("呵呵");
    });
    
    //获取值
    function getUserName(){
        var userName=$("#userName").val();
        alert(userName);
    }
    
    //设置值
    function setUserName(){
        $("#userName").val("Cocoomg");
    }
</script>

5. 遍历节点操作

获取所有子节点 children()
获取邻近的下一个兄弟节点 next()

获取邻近的上一个兄弟节点 prev()

<script type="text/javascript">
    $(document).ready(function(){        
        //获取所有子节点children()
        var b=$("body").children();
        alert(b.length);
        var u=$("ul").children();
        alert(u.length);
        for(var i=0;i<u.length;i++){
            // alert((u[i]).html());  //不可以，(u[i])取出的是原生（未由jQuery包装过）的DOM节点，没有这些功能
            // alert($(u[i]).html()); //可以，用$ 包装
            alert(u[i].innerHTML);    //可以
        } 
        
        //获取邻近的下一个兄弟节点next()
        var l=$("ul li:eq(1)").next();
        alert(l.html()); 
        
        //获取邻近的上一个兄弟节点prev()
        var l=$("ul li:eq(1)").prev();
        alert(l.html()); 
    });
</script>

6. Jquery 操作 DOM 节点 CSS

获取 DOM 节点 CSS 样式

设置 DOM 节点 CSS 样式

<script type="text/javascript">
    $(document).ready(function(){
        // 获取css样式
        var c=$("#jq").css("color");
        alert(c); 
        
        // 设置css样式
        $("#jq").css("color","blue");
    });
</script>

转载于:https://www.cnblogs.com/Cocoomg/p/9901159.html

Jxinyun1314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery —— 操作DOM节点

html内容！<body > <p>你最喜欢的名人是？</p> <ul> <li title="这是乔布斯"><font color="green">乔布斯</font></li> <li title="这是比尔盖茨" c...
复制链接

扫一扫