JavaScript学习Day008(jQuery操作)

最新推荐文章于 2024-07-20 10:36:53 发布

放在糖果旁的是我很想回忆的甜

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量313

点赞数 4

分类专栏： javaScript 文章标签： javascript jquery 学习

本文链接：https://blog.csdn.net/qihaojinqiuma/article/details/127055091

版权

javaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

DOM操作分类

DOM操作分为三类

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color="green"

jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装

jQuery中的DOM操作

样式操作
内容及Value值操作
节点及节点属性操作
节点遍历

样式

设置和获取样式值

使用css()为指定的元素设置样式值或获取样式值

语法

设置单个属性 css(name,value) ;
同时设置多个属性 css({name:value, name:value,name:value…}) ;
获取属性值 css(name)

追加和移除样式

追加样式

语法
$(selector).addClass(class);
$(selector).addClass(class1 class2 … classN);

移除样式

语法
$(selector).removeClass("class") ;
$(selector).removeClass("class1 class2 … classN ") ;

<body>
    <p>我是段落元素</p>
</body>
<script>
    $(function(){
        //获取样式
        var result = $('p:first').css('color');
        console.log(result);
        //设置样式
        //设置一个样式
        $('p:first').css('background-color','#ccc');
        //设置多个样式
        $('p:first').css({
            'text-align':'center',
        });
    });
</script>

<body>
    <p class="demo">我是老六</p>
    <button>添加类样式</button>
</body>
<script>
    $(function(){
        //addClass('class样式名')：给元素添加类样式，可以添加一个或者多个样式，添加的样式不会覆盖原来的样式
        // $('p').addClass('test');
        $('button').click(function(){
            $('p').addClass('test');
        })

        //remove('class样式名')移除元素上的class样式，可以移出一个或者多个
        $('p').removeClass('demo')
    });
</script>

切换样式

toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
语法：$(selector).toggleClass(class) ;

对比：

//需求:点击按钮，如果div具备.demo样式，就移出改样式，如果不具备就添加改样式
    //使用jQuery来实现,使用addclass()和removeClass()实现
    // $(function(){
    //     var result=true;
    //     $('button').click(function(){
    //         if(result){
    //             $('div').addClass('demo');
    //             result=false;
    //         }else{
    //             $('div').removeClass('demo');
    //             result=true;
    //         }
    //     })
    // })
    $('button').click(function(){
        $('div').toggleClass('demo');
    })

判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式
语法：$(selector). hasClass(class);

内容操作

HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML
语法 $("div.left").html(); $("div.left").html("<div class='content'>…</div>");

标签内容操作

text()可以获取或设置元素的文本内容
语法 $("div.left").text(); $("div.left").text("<div class='content'>…</div>");

html( ) 和text( )方法的区别

属性值操作

val()可以获取或设置元素的value属性的值
语法 $(this).val(); $(this).val(value);

<body>
    <input type="radio" value="ttt"/>选我选我选我
</body>
<script>
    $(function(){
        var val = $('input').val();
        console.log(val);

        $('input').val('hellojs');
        var val2=$('input').val();
        console.log(val2);
    });
</script>

节点操作

创建节点

工厂函数$()用于获取或创建节点

$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

插入节点

元素内部插入子节点

元素外部插入同辈节点

删除节点

jQuery提供了三种删除节点的方法
remove()：删除整个节点
empty()：清空节点内容
detach()：删除整个节点，保留元素的绑定事件、附加的数据

    $(function(){
        //获取li元素并删除
        // $('li:first').remove();
        $('li').eq(0).remove();
    });

替换节点

replaceWith()和replaceAll()用于替换某个节点

复制节点

clone()用于复制某个节点
参数ture或flase, true复制事件处理，flase时反之

<body>
    <ul>
        <li>
            <p>列表项第1项</p>
        </li>
        <li>
            <p>列表项第2项</p>
        </li>
        <li>
            <p>列表项第3项</p>
        </li>
        <li>
            <p>列表项第4项</p>
        </li>
    </ul>
</body>
<script>
    $(function () {
        $('li:eq(3)').click(function () {
            alert('你好');
        });


        //需求：将第4个li元素赋值并添加到ul中的第一个位置

        //获取第4个li元素并克隆
        //clone():此函数中可以传递一个boolean类型的参数，默认值是false,表示复制元素上的绑定事件不复制，如果为true，则复制元素上的绑定事件也会一起复制
        // $('li').eq(3).clone().prependTo($('ul'));
        $('li').eq(3).clone(true).prependTo($('ul'));
    });
</script>

属性操作

获取与设置元素属性

attr()用来获取与设置元素属性
语法:$(selector).attr([name]) ; $(selector).attr({[name1:value1]…[nameN:valueN]}) ;

删除元素属性

removeAttr()用来删除元素的属性
语法:$(selector).removeAttr(name) ;

节点遍历

遍历子元素

children()方法可以用来获取元素的所有子元素
语法$(selector).children([expr]);
获取子节点，但是不获取子节点的子节点

遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

遍历前辈元素

jQuery中可以遍历前辈元素
parent()：获取元素的父级元素
parents()：元素元素的祖先元素

        //获取ul元素的所有子元素
        var ulChildren= $('ul').children();
        console.log(ulChildren);

        //获取id名称为demo的元素的前面一个兄弟元素
        console.log($('#demo').prev());
        //获取id名称为demo的元素的后面一个兄弟元素
        console.log($('#demo').next());

        //获取id名称为demo的元素的前面和后面的所有兄弟元素
        console.log($('#demo').siblings());

        //获取id名称为demo的元素的父元素
        console.log($('#demo').parent());
        //获取id名称为demo的元素的父元素
        console.log($('#demo').parents());