`

Jquery操作DOM

jquery 
阅读更多
1. Jquery操作DOM 

1) Jquery操作DOM节点
1.1) 查找节点
1.2) 创建节点append()
1.3) 删除节点remove()
2) Jquery操作DOM节点属性
2.1) 查找属性
2.2) 设置属性
2.3) 删除属性
3) Jquery操作DOM节点样式
3.1) 获取样式
3.2) 设置样式
3.3) 追加样式
3.4) 移除样式
4) 设置和获取HTML，文本和值
4.1) 获取html，设置html
4.2) 获取文本，设置文本
4.3) 获取值，设置值
5) 遍历节点操作
5.1) 获取所有子节点children()
5.2) 获取邻近的下一个兄弟节点next()
5.3) 获取邻近的上一个兄弟节点prev()
6) Jquery操作DOM节点CSS
6.1) 获取DOM节点CSS样式
6.2) 设置DOM节点CSS样式



chap03/demo01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // 操作DOM节点
        // 1，查找节点
        /* var li2 = $("ul li:eq(1)");
        var li2_txt = li2.text();
        alert(li2_txt); */
        
        // 2，创建节点
        /* var li1 = $("<li title='这是马化腾'>马化腾</li>");
        var li2=$("<li title='这是李彦宏'>李彦宏</li>");
        var li22=$("ul li:eq(1)");
        $("ul").append(li1);
        li2.insertAfter(li22); */
        
        // 3，删除节点
        // $("ul li:eq(1)").remove();
        
        // 操作DOM属性
        // 获取属性
        /* var li2=$("ul li:eq(1)");
        var li2_attr=li2.attr("title");
        alert(li2_attr); */
        
        // 设置属性
        // $("ul li:eq(1)").attr("title","你懂的");
        
        // 删除属性
        // $("ul li:eq(1)").removeAttr("title");
        
        // 操作DOM节点样式
        // 获取样式
        /* var li2=$("ul li:eq(1)");
        var li2_class=li2.attr("class");
        alert(li2_class); */
        
        // 设置样式
        // $("ul li:eq(1)").attr("class","lc2");
        
        // 追加样式
        // $("ul li:eq(1)").addClass("lc3");
        
        // 移除样式
        // $("ul li:eq(1)").removeClass("lc");
        
        // 设置和获取HTML，文本和值
        // 获取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("呵呵");
        
        // 遍历节点
        // 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].innerHTML);
            alert($(u[i]).html());
        } */
        
        // next()
        /* var l=$("ul li:eq(1)").next();
        alert(l.html()); */
        
        // prev()
        /* var l=$("ul li:eq(1)").prev();
        alert(l.html()); */
        
        // CSS-DOM操作
        // 获取css样式
        /* var c=$("#jq").css("color");
        alert(c); */
        
        // 设置css样式
        $("#jq").css("color","blue");
    });
    
    function getUserName(){
        var userName=$("#userName").val();
        alert(userName);
    }
    function setUserName(){
        $("#userName").val("你懂的");
    }
</script>
</head>
<style type="text/css">
    .lc {background-color: red;}
    .lc2 {background-color: blue;}
    .lc3 {font-weight: bold;}
</style>
<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>
</html>
分享到：
| Jquery选择器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics