jQuery

最新推荐文章于 2024-10-18 11:46:13 发布

遠2002

最新推荐文章于 2024-10-18 11:46:13 发布

阅读量139

点赞数

文章标签： jquery css 前端

本文链接：https://blog.csdn.net/asdfg_asdsa/article/details/126312498

版权

jQuery中的css方法

css()方法设置或返回被选元素的一个或多个样式属性。

返回CSS属性

如需返回指定的CSS属性的值，请使用如下语法:

css("propertyname");

设置多个CSS属性

如需设置多个CSS属性，请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        body {
            background-color: black;
        }
        
        div {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background-color: black;
            overflow: hidden;
            border: 1px solid white;
        }
        
        ul li {
            float: left;
            margin: 0 10px 10px 0;
        }
        
        img {
            display: block;
            border: 0;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>
                <a href=""><img src="img/01.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="img/02.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="img/03.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="img/04.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="img/05.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="img/06.jpg" alt=""></a>
            </li>
        </ul>
    </div>

    <script>
        $(function() {
            $("ul li").mouseover(function() {
                $(this).css("opacity", 1).siblings().css("opacity", 0.5)
            })
            $("ul li").mouseout(function() {
                $("ul li").css("opacity", 1)
            })
        })
    </script>
</body>

</html>

jQuery的class操作

除了通过设置css()方法，也可以修改class名来修改样式效果。

jQuery addClass()方法

addClass()方法向被选元素添加一个或多个类名。

该方法不会移除已存在的class属性，仅仅添加一个或多个类名到class属性

提示:如需添加多个类，请使用空格分隔类名。

$(selector).addclass(classname);

jQuery removeClass()方法

removeClass()方法向被选元素移除一个类名。

$("li").removeclass("bigger");

jQuery hasClass()方法

hasClass()方法判断被选元素是否包含这个类名。

alert($("li").hasclass("bigger")) ;

jQuery toggleClass()方法

toggleClass()方法判断被选元素是否有该类名，如果有就移除他，如果没有，添加他。

$("li").toggleclass("basic");

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jQuery.min.js"></script>
    <style>
        ul {
            list-style: none;
        }
        
        ul li {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
            margin-right: 10px;
        }
        
        .basic {
            background-color: aqua;
        }
        
        .bigger {
            font-size: 60px;
            color: blueviolet;
        }
    </style>
</head>

<body>
    <input type="button" value="添加basic">
    <input type="button" value="添加bigger">
    <input type="button" value="移除bigger">
    <input type="button" value="判断bigger">
    <input type="button" value="切换">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        $(function() {
            $("input:first").click(function() {
                $("ul li").addClass("basic")
            })

            $("input:eq(1)").click(function() {
                $("ul li").addClass("bigger")
            })

            $("input:eq(2)").click(function() {
                $("ul li").removeClass("bigger")
            })

            $("input:eq(3)").click(function() {
                alert($("ul li").hasClass("bigger"))
            })

            $("input:eq(4)").click(function() {
                $("ul li").toggleClass("bigger")
            })
        })
    </script>
</body>

</html>

html()与text()与val()

HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

提示:如只需设置或返回被选元素的文本内容，请使用text()方法。

语法:

返回内容:

$(selector).htm1();

设置内容，会自动解析html标签

$(selector).html(content)

文本操作

text()可以获取或设置元素的文本内容

当该方法用于返回内容时，则返回所有匹配元素的文本内容(会删除HTML标记)

节点操作

jQuery添加元素

通过JavaScript操作DOM，来实现获取页面元素，做一些修改等，同样的利用jQuery也可以操作DOM。

append() 方法在被选元素的结尾插入子元素

$("ul").append("<li>葡萄</li>")

appendTo() 方法在被选元素的结尾插入子元素

$("<li>榴莲</li>").appendTo("ul")

prepend() 方法在被选元素的前面插入子元素

$("ul").prepend("<li>芒果</li>")

prependTo() 方法在被选元素的前面插入子元素

$("<li>橘子</li>").prependTo("ul")

before() 方法在被选元素的前面添加兄弟元素

$("ul").before("<h3>水果列表</h3>")

after() 方法在被选元素的后面添加兄弟元素

$("ul").after("<span>注意：水果不宜长时间保存，请尽快食用</span>")

jQuery删除节点

remove() 方法移除了被选元素，包括所有的文本和子节点

该方法也会移除被选元素的数据和事件

语法

 $("ul li").remove(":eq(2)")

empty() 方法移除被选元素的所有子节点和内容

语法

$("ul").empty()

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

replaceWith() 方法把被选元素替换为新的内容

语法

$("ul li:eq(1)").replaceWith("<li>西瓜</li>")

replaceAll() 方法把被选元素替换成新的HTML元素

语法：

$("<li>西瓜</li>").replaceAll("ul li:eq(1)")

jQuery复制节点

clone() 方法生成被选元素的副本，包含子节点、文本和属性

如下代码是将复制的元素替换到目标元素上

$("ul li:eq(2)").clone().appendTo("ul")

遠2002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫