每日学到 48 - jQuery基本操作

目录

1.节点操作

    创建节点元素

    插入节点

    删除节点

    替换节点

    复制节点

    获取与设置元素属性

    删除元素属性

2.内容操作

    HTML代码/标签内容操作

    属性值操作

3.样式操作

    设置和获取样式值

    追加和移除样式

    切换样式

    判断是否含指定的样式

4.节点遍历

    遍历子元素

    遍历同辈元素

    遍历前辈元素

    其他遍历方法

5.CSS-DOM操作

---

1.节点操作

    创建节点元素

        $(selector)：通过选择器获取节点
        $(element)：把DOM节点转化成jQuery节点
            $("<li></li>")
        $(html)：使用HTML字符串创建jQuery节点
            $("<li>你喜欢哪些冬季运动项目？</li>")

    插入节点

        元素内部插入子节点

            append(content)
                $(A).append(B)表示将B追加到A中
            appendTo(content)
                $(A).appendTo(B)表示把A追加到B中
            prepend(content)
                $(A). prepend (B)表示将B前置插入到A中
            prependTo(content)
                $(A). prependTo (B)表示将A前置插入到B中

        元素外部插入同辈节点

            after(content)
                $(A).after (B)表示将B插入到A之后
            insertAfter(content)
                $(A). insertAfter (B)表示将A插入到B之后
            before(content)
                $(A). before (B)表示将B插入至A之前
            insertBefore(content)
                $(A). insertBefore (B)表示将A插入到B之前

    删除节点

        remove()：删除整个节点
        empty()：清空节点内容
        detach()：删除整个节点，保留元素的绑定事件、附加的数据

    替换节点

        replaceWith()
            $A.replaceWith(B);
                A替换为B
        replaceAll()
            $B.replaceAll(A);
                B替换A

    复制节点

        clone()
            clone():此函数中可以传递一个boolean类型的参数，默认值是false,表示复制元素上的绑定事件不复制，如果为true，则复制元素上的绑定事件也会一起复制

    获取与设置元素属性

        attr()是获取和设置元素的属性，css()是获取和设置元素的样式
        attr({name:value,name:value})

    删除元素属性

        removeAttr()
            removeAttr(name)

2.内容操作

    HTML代码/标签内容操作

        html( )
            无参数
                用于获取第一个匹配元素的HTML内容或文本内容
        html(content)
            content为元素的HTML内容
                用于设置所有匹配元素的HTML内容或文本内容
        text( )
            无参数
                用于获取所有匹配元素的文本内容
        text (content)
            content为元素的文本内容
                用于设置所有匹配元素的文本内容

    属性值操作

        val()
            可以获取或设置元素的value属性的值
            一般用于input表单标签
            有些标签没有value属性，但是我们给其增加一个value的值，这个也是可以拿到的
            val()
                获取元素的value属性值
            val(value)
                设置元素的value属性值

3.样式操作

    设置和获取样式值

        使用css()为指定的元素设置样式值或获取样式值
            css(name)
                获取属性值
            css(name,value);
                设置单个属性
            css({name:value, name:value,name:value…});
                同时设置多个属性

    追加和移除样式

        addClass()
            addClass('class样式名')：给元素添加类样式，可以添加一个或者多个样式，添加的类样式不会覆盖之前已经存在的样式
            addClass('class1 class2 class3 ... classN')
        removeClass()
            removeClass('class样式名')：移除元素上的class样式，可以移除一个或者多个
            removeClass('class1 class2 class3 ... classN')

    切换样式

        toggleClass()
            点击按钮，如果div具备.demo的样式，就移除该样式，如果不具备，就添加该样式
            模拟了addClass()与removeClass()实现样式切换的过程
            $('button').click(function(){
    $('div').toggleClass('demo');
});

    判断是否含指定的样式

        hasClass( )
             hasClass('class')

4.节点遍历

    遍历子元素

        children()
            可以用来获取元素的所有子元素

    遍历同辈元素

        next()
            用于获取紧邻匹配元素之后的元素
        prev()
            用于获取紧邻匹配元素之前的元素
        siblings()
            用于获取位于匹配元素前面和后面的所有同辈元素

    遍历前辈元素

        parent()：获取元素的父级元素
        parents()：元素元素的祖先元素

    其他遍历方法

        each( )
            规定为每个匹配元素规定运行的函数
        end( )
            结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

5.CSS-DOM操作

    css()
        设置或返回匹配元素的样式属性
    height([value])
        设置或返回匹配元素的高度
    width([value])
        设置或返回匹配元素的宽度
    offset([value])
        返回以像素为单位的top和left坐标。仅对可见元素有效
    offsetParent( )
        返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
    position( )
        返回第一个匹配元素相对于父元素的位置
    scrollLeft([position])
        参数可选。设置或返回匹配元素相对滚动条左侧的偏移
    scrollTop([position])
        参数可选。设置或返回匹配元素相对滚动条顶