【jQuery】之DOM操做

时间  2019-12-09
标签 jQuery dom 栏目 JQuery 繁體版
原文   原文链接

jQuerycss

DOM操做

查找节点

查找元素节点

以选择器来查找元素节点html

查找文本节点

以text()方法来查找文本节点jquery

查找属性节点

以attr()方法来查找属性节点数组

<body>
<script src="js/jquery.js"></script>
<script></script>
</body>
<script is="qyc">  name="button"</script>
<script>
    var $qyc = $('#qyc');
    console.log('$qyc');
    console.log($qyc.text);
    console.log($qyc.attr('neme'));
    $qyc.text('新按钮')
    $qyc.attr('class','cls');

    /*
    * jQuery查找元素-
    * text()方法-等于DOM的textContent属性
    * 获取-text()
    * text(textContent)
    * textContent新的的文本内容
    *
    * attr()方法
    * 获取- attr（name,value）-等于DOM的setAttribute(mnm，valus)*/

</script>

获取父节点

selector:即是jQurery中的选择器 另外parent()：获取父级元素 parents()：获取祖先级元素 closest():匹配上级元素，并返回相同的元素app

<body>
<div class="qh">
    <ul>
        <li id="dy">端游</li>
        <li>单机</li>
        <li>手游</li>
    </ul>
</div>
<script>
    var $dy = $('#dy');
    console.log($dy.psrent('div'));

    /*获取端游节点全部祖先节点
   * parent(expr)方法
   * 获取元素全部父元素
   * expr-表示选择器，并有过滤的做用
    */
    console.log($dy.psrent('div'));
    /*获取端游节点全部祖先节点
    * parents(expr)方法
    * 获取元素全部祖先元素
    * expr-表示选择器，并有过滤的做用
     */

    console.log($dy.chosect('div'));
    /*closest()方法
    * 获取元素指定祖先元素；返回第一个匹配元素
    * expr-表示为选择器，并有过滤的做用
    * 注意- jQuery用不报错，不会提供结果
     */

</script>
</body>

获取子节点

children()只获取子级元素（不获取后代元素）函数

<script src="js/jquery.js"></script>
</head>
<body>
<div class="qh">
    <ul id="dy">端游
        <li>联盟</li>
        <li>地下城</li>
        <li>火线</li>
    </ul>
    <ul>手游</ul>
    <ul>页游</ul>
</div>
<script>
    var $ul = $('ul:first');
    console.log($ul.children());
//    获取元素全部的子元素
    console.log($ul.find('li'));
//    获取元素的后代元素
</script>
</body>

获取兄弟节点

next()：获取元素的下一个相邻兄弟元素 prev()：获取元素的上一个相邻兄弟元素 siblings：获取元素全部兄弟元素code

<body>
<div class="qh">
    <ul>
        <li id="dy">端游</li>
        <li>单机</li>
        <li>手游</li>
    </ul>
</div>
<script>
    var dy = document.getElementById('dy');
    var ul = dy.parentElement;
    var div = ul.parentElement;
    var body = div.parentElement;
    var html = body.parentElement;
    var root = html.parentElement;//null
    console.log(root);
    var arr = [];//用于存储元素的全部祖先元素
    function parents(element) {
        var parent = element.parentElement;
//        获取元素的父元素
        if(parent === null){ return; }
        arr.push(parent);
//        获取父元素，并增长到数组中
        parents(parent);
//        定义个递归函数
    }
    parents(dy);
    console.log(arr);
</script>
</body>

查找后代元素

以find：获取全部匹配其元素的选择器htm

<body>
<div class="qh">
    <ul id="qh">
        <li>端游</li>
        <li>单机</li>
        <li id="sy">手游</li>
        <li>掌机</li>
    </ul>
</div>
<script>
    var $sy = $('#sy');
    console.log($sy.next());//获取下个相邻兄弟元素
    console.log($sy.prev());//获取上个相邻兄弟元素
</script>
</body>

3.建立节点

工厂函数：以attr()该属性来创建属性节点递归

<script src="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
    <li>端游</li>
    <li>单机</li>
    <li id="sy">手游</li>
    <li>掌机</li>
</ul>
<script>
    //    var $newli = $('<li></li>');
    //    $newli.text('掌机');
    //    $newLi.attr('id','zj');
    var $newli = $('<li id="q1">页游</li>');
    //    jQuery的工厂函数接收字符串类型HTML代码
    $('#qh').append($newli);
</script>
</body>

4.插入节点

插入内部节点

append()方法
表示插入到指定节点列表中的最后面
appendTo()方法
表示插入到指定节点列表中的最后面
prepend()方法
表示插入到指定节点列表中的最前面
prependTo()方法
表示插入到指定节点列表中的最前面
<body>事件

<script src="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
    <li>端游</li>
    <li>单机</li>
    <li id="sy">手游</li>
    <li>掌机</li>
</ul>
<script>
    //    var $newli = $('<li></li>');
    //    $newli.text('掌机');
    //    $newLi.attr('id','zj');
    var $newli = $('<li id="q1">页游</li>');
    //    jQuery的工厂函数接收字符串类型HTML代码
    $('#qh').append($newli);
</script>
</body>

插入外部节点

before()方法
表示插入到指定元素节点前一个位置
insertBefore()方法
表示插入到指定元素节点前一个位置
after()方法
表示插入到指定元素节点后一个位置
insertAfter()方法
表示插入到指定元素节点后一个位置

<script src="js/jquery.js"></script>
</head>
<body>
<ul>
    <li>端游</li>
    <li>单机</li>
    <li>手游</li>
</ul>
<script>
    var $li = $('<li id="q1">页游</li>');
    //    建立新li元素
    // $('ul').before($li);
    //    插入li元素的上方
    $('ul').after($li);
    //    插入li元素下方
</script>
</body>

5.删除节点

remove():用来删掉DOM全部的元素 empty():用来删除DOM的全部子节点

<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">联盟</li>
    <li>火线</li>
    <li>地下城</li>
</ul>
<script>
//元素调用remove()该元素被删除
//    $('#lm').remove();
//    empty()表示删除后代节点；保留自身节点-清空
</script>
</body>

6.替换节点`

replaceWith()方法将全部匹配元素替换成HTML和DOM元素

<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">联盟</li>
    <li>火线</li>
    <li>地下城</li>
</ul>
<script>
//    替换的元素调用replaceWith()，该方法接收参数是替换元素
//    $('#lm').replaceWith($('<li id="zj">战甲</li>'));
//    replaceAll()就是颠倒replaceWith()
    $('<li id="zj">战甲</li>').replaceAll(('#lm'));
</script>
</body>

7.复制节点

jQuery的clone方法 - 参数表示是否复制事件
DOM的cloneNode方法 - 参数表示是否复制后代节点

<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
    $('#qyc').click(function () {
        console.log('you my button');
    });
    var $copy = $('#qyc').clone(true);
    $('body').append($copy);
    /*jQuery的clone方法 - 参数表示是否复制事件
      DOM的cloneNode方法 - 参数表示是否复制后代节点
     */
</script>
</body>

8.属性节点

<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">联盟</li>
    <li>火线</li>
    <li>地下城</li>
</ul>
<script>
    $('#bj').removeAttr('id');
//    removeAttr()-至关于DOM中的removeAttribute()
</script>
</body>

9.样式操做

<style>
        .qh {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
        }
        .cq {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background-color: red;
        }
    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="qyc"></div>
<script>
    // $('#qyc').attr('style','width:100px;height:100px;background-color:red;');
//    attr设置style属性的样式
    $('#qyc').attr('class','qh');
    // 经过设置class属性为<div>元素添加外联样式
    $('#qyc').addClass('cq');
    // $('#qyc').attr('class','cq');// 替换样式
    // addClass(className)方法 - 表示添加样式(并不影响指定元素本来的样式)
    console.log($('#qyc').hasClass('qh'));
    // hasClass(className)方法 - 判断指定元素中是否包含指定样式名称

    console.log($('#qyc').css('width'));
   /* removeClass()方法 - 删除样式
    * removeClass()方法 - 删除全部样式
    * removeClass(className) - 删除指定样式
    */

    // $('#qh').removeClass('cq');

    // toggleClass()方法 - 在删除指定样式与添加指定样式之间切换
    // $('#qh').toggleClass('cq');

    // hasClass(className)方法 - 判断指定元素中是否包含指定样式名称


    $('#qyc').css({
        width: '600px',
        height: '600px'
    });
</script>
</body>

10.HTML操做

<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">联盟</li>
    <li>火线</li>
    <li>地下城</li>
</ul>
<script>
    console.log($('#yx').html());

    var $html = $('#yx').html();
    $html += '<li>战甲</li>';
    $('#yx').html($html);

    console.log($('input').val());

    $('input').val('密码');
</script>
</body>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程