jQuery入门&选择器

最新推荐文章于 2023-03-23 09:18:28 发布

王真教掌门

最新推荐文章于 2023-03-23 09:18:28 发布

阅读量85

点赞数 3

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/WZJ278/article/details/123493209

版权

前言

什么是jQuery?

jQuery不是一门语言是JavaScript的框架（js的升级+简化）

jQuery 在HTML里用 $表示

引入jQuery

<script src="js/jquery-3.5.1.js"></script>

jQuery在官网下载来选择需要的js文件网址：https://learn.jquery.com/

下载文件会有两种格式

js和mini.js 首先是文件大小不一致

js文件呢可以根据自己的需求来修改的里面的代码

mini.js就不能来修改的里面的代码，里面的代码已经封装好了

jQuery API速查表可以查询一些不常用的方法格式

代码演练 class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            display: inline-block;
            background: red;
        }
    </style>
</head>
<body>
    <p>后天啊积极</p>
    <div id="aa">
        <p>今天啊哈哈</p>
        <p>明天啊喜喜</p>
    </div>
    <div class="bb"></div>
    <div class="bb"></div>
    <script>
        //jquery本身支持css选择器
        console.log($("#aa"))
        console.log($(".bb").eq(0))//直接拿去第0个jQuery对象

        //css是jquery的方法  只有jquery对象才才能调用
        //$(".bb")[0]拿出来的js中的正常对象
        //如何将js对象变成jquery: $(xx)
        // $(".bb")[0].css("background","blue")
        //$(...)[0].css is not a function

        console.log($("div"))

        console.log($("*"))

        //div中所有的p标签
        $("div p").css("color","white")

        //div中的第一级p标签（子标签）
        $("div>p").css("color","white")
    </script>
</div>
</body>
</html>

代码演练过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            background: blue;
            color: white;
        }

        .bb{
            background: green;
            color: orange;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
    <table border>
        <tr>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>商品编号</td>
            <td>商品描述</td>
        </tr>
        <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
    </table>
    <script>
        //第一个
        //$("tr").first().addClass("aa");
        //最后一个
        //$("tr").last().addClass("aa");

        //奇数
        $("tr:gt(0):odd").addClass("aa")
        //偶数
        $("tr:gt(0):even").addClass("bb")

        // $("tr:gt(1):lt(3)").addClass("bb")
    </script>
</body>
</html>

今天的内容就到这里了，后面会持续更新一些jQuery的操作讲解

拜拜啦！

王真教掌门

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门&选择器

前言什么是jQuery? jQuery不是一门语言是JavaScript的框架（js的升级+简化）jQuery 在HTML里用 $表示引入jQuery <script src="js/jquery-3.5.1.js"></script>jQuery在官网下载来选择需要的js文件网址：https://learn.jquery.com/ 下载文件会有两种格...
复制链接

扫一扫