jQuery(入门&选择器)

@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>

效果如下:
jQuery(入门&选择器)_第1张图片

层次选择器
可以查询所有元素和子元素
表单选择器
获得选择单选框的值
获得多选框的值
获取选择下拉值

总的来说,jQuery就是JavaScript库,使用它可以减少代码的数量,使得代码运行速度更快,编写代码时更加简单
好了,今天就分享到这,下期再给你们带来更精彩的内容

你可能感兴趣的:(jquery,javascript,前端)