小强的HTML5移动开发之路（36）——jQuery中的DOM操作-html教程-PHP中文网

小强的HTML5移动开发之路（36）——jQuery中的DOM操作

黄舟

发布： 2017-02-04 14:49:47

原创

1116人浏览过

1、查询

利用选择器查找节点

使用 html() / text() / attr() 输出节点文本和属性值。

注意：下拉列表使用 val()

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $('#b1').click(function(){  
                    //$('#d1').html('java');  
                    //将节点的属性读出来  
                    //$('#d1').attr('style');  
                    //$('#d1').attr('style','font-size:30pt');  
                    $('#d1').attr('class','s1');  
                });  
            });  
        </script>  
        <style>  
            .s1{  
                color:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="d1">hello</div>  
        <ul>  
            <li>item1</li>  
            <li id="i1">item2</li>  
            <li>item3</li>  
        </ul>  
        <input type="button" id="b1" value="点我"/>  
    </body>  
</html>

登录后复制

2、创建

立即学习“前端免费学习笔记（深入）”；

$(html)

3、插入节点

append();

prepend();

after();

before();

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $('#b1').click(function(){  
                    var $node = $('<li>item4</li>');  
                    $('ul').append($node);  
                    //$('ul').append('<li>item4</li>'); 和上面是等价的  
                });  
            });  
        </script>  
        <style>  
            .s1{  
                color:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="d1">hello</div>  
        <ul>  
            <li>item1</li>  
            <li id="i1">item2</li>  
            <li>item3</li>  
        </ul>  
        <input type="button" id="b1" value="点我"/>  
    </body>  
</html>

登录后复制

4、删除节点

remove();

remove(selector);

empty();清空内容

$('#b1').click(function(){  
    //$('ul li:eq(1)').remove();  
    $('ul li').remove('li[id=i1]');  
            $('ul li:eq(1)').empty();  
});

登录后复制

5、复制节点

clone();

clone(true); 使复制的节点也具有行为

6、属性操作

读取：attr(' ');

设置：attr(' ', ' ');

小爱开放平台

小米旗下小爱开放平台

查看详情

或者一次设置多个属性attr({" ", " "});

删除：removeAttr(' ');

$('#b1').click(function(){  
    $('#d1').attr({"class":"s1","style":"font-size:40pt"});  
});

登录后复制

7、样式操作

获取和设置：attr("class", " ");

追加：addClass(' ', ' ');

切换样式：toggleClass(' ', ' ');

是否有某个样式hasClass(' ');

css(' ', ' ');

css({ ' ': ' ', ' ': ' '});

$('#b1').click(function(){  
    $('div:first').addClass('s1 s2');  
    $('div:first').removeClass('s2');  
    $('div:first').toggleClass('s1');  
});

登录后复制

8、设置和获取html,文本和值

html() / html(' ')

text() / text(' ')

val() ; 设置和读取元素的值

9、遍历

children()

next();

prive();

siblings():所有兄弟

10、综合实例

<script>  
$(function(){  
  
    $('#b1').click(function(){  
        //$('#d1').html('java');  
        //将节点的属性读出来  
        $('#d1').attr('style');  
        $('#d1').attr('style','font-size:30pt');  
        $('#d1').attr('class','s1');  
    });  
  
    $('#b1').click(function(){  
        var $node = $('<li>item4</li>');  
        $('ul').append($node);  
        //$('ul').append('<li>item4</li>'); 和上面是等价的  
    });  
  
    $('#b1').click(function(){  
        //$('ul li:eq(1)').remove();  
        $('ul li').remove('li[id=i1]');  
                $('ul li:eq(1)').empty();  
    });  
  
    $('#b1').click(function(){  
        var $node = $('ul li:eq(2)').clone();  
        $('ul').append($node);  
          
        var $node = $('ul li:eq(2)').clone(true);  
        $('ul').append($node);  
    });  
  
    $('ul li:eq(2)').click(function(){  
        //可以使用this来访问符合$('selecotr')查询条件的节点  
            //alert(this.innerHTML);  
            alert($(this).html());  
    });  
  
    $('#b1').click(function(){  
        $('#d1').attr({"class":"s1","style":"font-size:40pt"});  
    });  
  
    $('#b1').click(function(){  
        $('div:first').addClass('s1 s2');  
        $('div:first').removeClass('s2');  
        $('div:first').toggleClass('s1');  
    });  
    $('#b1').click(function(){  
        alert($('input[type=text]').val();  
        alert($('select').val());  
        //单选和多选框不能这样写  
        alert($(':radio').val());  
        alert($(':checkbox').val());  
        //要这样去写  
        var $node = $(':radio');  
        $node.each(function(){  
            //if($(this).attr('checked')){  
            //  alert($(this).val());  
            //}  
            if(this.checked){  
                alert(this.value);  
            }  
        });  
    });  
    $('#b1').click(function(){  
        var $items = $('ul').children();  
        //如果查询返回的是多个节点，可以使用length属性返回节点的个数  
        alert($items.length);  
        //如何遍历  
        $items.each(function(i){  
            //$(this)html();  
            alert(this.innerHTML);  
        });  
    });  
});  
</script>  
      
<style>  
    .s1{  
        color:yellow;  
    }  
    .s2{  
        border:1px solid black;  
    }  
</style>  
  
<body>  
    <div>hello</div>  
    <ul>  
        <li>item1</li>  
        <li id="i1">item2</li>  
        <li>item3</li>  
    </ul>  
    <div id="d1" style="background-color:red;">hello</div>  
    <input type="button" value="clickMe" id="b1"/>  
    <input type="text" name="name"/><br/>  
    male:<input type="radio" name="sex" value="m"/>  
    female:<input type="radio" name="sex" value="f"/>  
    fishing:<input type="checkbox" name="intrest" value="fishing"/>  
    cookinng:<input type="checkbox" name="intrest" value="cooking"/>  
    sleeping:<input type="checkbox" name="intrest" value="sleeping"/>  
    <select>  
        <option value="bj">beijing</option>  
        <option value="sh">shanghai</option>  
        <option value="tj">tianjing</option>  
    </select>  
</body>

登录后复制

以上就是小强的HTML5移动开发之路（36）——jQuery中的DOM操作的内容，更多相关内容请关注PHP中文网（www.php.cn）！