jQuery常用的功能

最新推荐文章于 2024-03-14 07:30:00 发布

海伦•

最新推荐文章于 2024-03-14 07:30:00 发布

阅读量146

点赞数

分类专栏： ==========前端========= 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_42794545/article/details/127150713

版权

==========前端========= 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1 常用的API导读

常用方法：

选择器
样式操作
效果
属性操作
文本属性值
元素操作
元素尺寸位置操作

2 选择器

jQuery做了一个封装，获取元素统一一个标准：$("选择器")

<!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="jquery.min.js"></script>
</head>
<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>P</p>
    <ol>
        <li>ol</li>
        <li>ol</li>
        <li>ol</li>
        <li>ol</li>
    </ol>
    <ul>
        <li>ul</li>
        <li>ul</li>
        <li>ul</li>
        <li>ul</li>
    </ul>
    <script>
        $(function(){
            //1 获取元素
           console.log( $(".nav"));
           console.log( $("ul li"));
            // 2 获取div的样式
            $("div").css("background"," pink");
            
            // 3 隐式迭代就是把匹配的所有元素内部进行循环遍历，给每个元素添加css方法
            $("ul li").css("color","red")

        })
    </script>
</body>
</html>

2 筛选选择器

下面是筛选器的方法

<!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="jquery.min.js"></script>
</head>
<body>
    <div>我是div</div>
    <div class="nav">我是nav div
        <p>P</p>
    </div>
   
    <ol class="father">
        <li class="son">ol son</li>
        <li>ol</li>
        <li>ol</li>
        <li>ol</li>
    </ol>
    <ul>
        <li>ul</li>
        <li>ul</li>
        <li>ul</li>
        <li>ul</li>
    </ul>
    <script>
        $(function(){
            // 筛选选择器
            $("ul li:first").css("color","red");
            $("ul li:eq(2)").css("color","blue");
            $("ol li:odd").css("color","pink");
            $("ol li:even").css("color","skyblue");

            // 筛选方法
            // 1.父节点:最近一级的父级元素
            console.log($(".son").parent());

            // // 2 子
            // $(".nav").children("p").css("color","red")
            // 3 find 所有的孩子包括孙在都选择出来
            $(".father").find("li").css("color","red")



        })
    </script>
</body>
</html>