jQuery(入门&选择器)

清晨喂

已于 2022-03-15 14:20:30 修改

阅读量996

点赞数 1

文章标签： jquery javascript 前端

于 2022-03-15 14:17:33 首次发布

本文链接：https://blog.csdn.net/m0_63772104/article/details/123493215

版权

@TOC
今天带大家了解一下jQuery,往后的一段时间内也会给大家分享更多关于jQuery的内容，那就开始喽

3W1H

WHAT?是什么
首先，我们要认识它是什么，它封装了很多JS代码，是JS的升级简化，所以我们把它称作JavaScript库
WHY?为什么要学
为了简化JavaScript开发：选择器，CSS，HTML事件处理，JS动画，浏览器兼容，丰富插件
WHERE？哪些情况下用
中大型网站开发中我们都需要用到它，它是一些前端框架的基础，比如EasyUI,Bootstrap
HOW?怎么用
使用jQuery步骤
1.下载jQuery库官方网址http://jQuery.com/
2.下载好后时隔js文件,将js文件复制到项目中就可以正常使用了

jQuery选择器

在了解了3W1H后，我们接下来要了解一下jQuery选择器
基本选择器
ID选择器:#ID
类选择器:.class
元素选择器:element
通配符:*
例:用基本选择器，点击按钮是背景颜色改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <!--引入jquery-->
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <button onclick="fn02()">点我改变颜色</button>
    <script>
        //jquery 不是一门语言
        //jquery 是js的框架（是js的升级+简化）
        function fn01() {
            let ds=document.getElementsByClassName("container")
            //多个元素
            for(let d of ds){
                d.style.background="blue"
            }
        }

        console.log($) //输出jquery

        function fn02() {
            //$就是jquery
            let div=$(".container")
            //修改样式
            div.css("background","blue")
        }
    </script>
</body>
</html>

过滤选择器
获得第一个元素:first
获得最后一个元素:last
获得偶数下标的元素:even
获得奇数下标的元素:odd
获的某个范围内的元素:
:gt大于
:lt小于
例:隔行换色

<!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>
        </tr>
        <tr>
            <td>小明</td>
            <td>8000/月</td>
            <td>10001</td>
        </tr>
            <tr>
            <td>小辉</td>
            <td>9000/月</td>
            <td>10002</td>
        </tr>
            <tr>
            <td>小红</td>
            <td>8500/月</td>
            <td>10003</td>
        </tr>
            <tr>
            <td>小白</td>
            <td>10000/月</td>
            <td>10004</td>
        </tr>
            <tr>
            <td>阿黑</td>
            <td>7000/月</td>
            <td>10005</td>
        </tr>
            <tr>
            <td>阿明</td>
            <td>12000/月</td>
            <td>10001</td>
        </tr>
    </table>
    <script>
        //奇数
        $("tr:gt(0):odd").addClass("aa")
        //偶数
        $("tr:gt(0):even").addClass("bb")
    </script>
</body>
</html>