jQuery基础-CSDN博客

本文链接：https://blog.csdn.net/qq_46492364/article/details/118411360

文章目录

前言
jQuery基础
总结

前言

开始学习jQuery，首先来学习一下基础。为更深层次的学习做好铺垫。

jQuery基础

jQuery是一个高效、精简并且功能丰富的JavaScript工具库。
下载地址1
下载地址2

1.$()语法

在jQuery 中，只有一个全局变量 $, 这是 j Q u e r y 的一大特点，避免了全局变量的污染。最开始变量不叫做$ ，叫做 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>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // $("p").css("background-color","red")
        jQuery("p").css("background-color","red")
    </script>
</body>
</html>

2.jQuery对象

jQuery对象得到后，只能使用jQuery 对象的方法，不能使用原生 js元素对象的方法。原生JS 对象也不能使用 jQuery 的方法。
jQuery对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的jQuery 的方法和属性。（可以通过原型调用）

3.jQuery对象与原生js对象的转化

<!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>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //jQUery对象元素的个数
        // console.log($("p").length)
        // console.log($("p").size())

        //jq对象转为原生js对象
        var $ps = $("p")
        $ps[0].innerHTML = "你好"

        //将原生js转化为jq对象
        var p = document.getElementsByTagName("p")[1]
        $(p).css("background-color","skyblue")

    </script>
</body>
</html>

4.jQuery选择器

css2.1和css3中的选择器，jQuery中都可以使用。例如：一些基本选择器和高级选择器，另外还增加了根据表单的不同类型的选择器。
点击jQuery API文档进行查看

<!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>
</head>
<body>
    <div class="box">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2" disabled="disabled">
    <input type="button" value="按钮3">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <div class="demo">
        <p>段落6</p>
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //基础选择器
        $("*")
        $("p")
        $(".box")
        $("#demo")
        //高级选择器
        $(".box p").html("你好")

        //表单
        // $(":input").css("background-color","pink")

        //表单对象属性
        $("input:disabled").css("background-color","pink")

    </script>
</body>
</html>

5.筛选选择器和筛选方法

筛选选择器也叫作过滤选择器，是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>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p class="demo">段落4</p>
    <p>段落5</p>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //筛选选择器
        // $("p:first").css("background-color","pink")
        // $("p:last").css("background-color","pink")
        // $("p:eq(2)").css("background-color","pink")
        // $("p:gt(2)").css("background-color","pink")
        // $("p:lt(2)").css("background-color","blue")
        // $("p:odd").css("background-color","pink")
        // $("p:even").css("background-color","pink")
        // $("p:not(.demo)").css("background-color","pink")

        //筛选方法
        // $("p").first().css("background-color","skyblue")
        // $("p").last().css("background-color","skyblue")
        $("p").eq(3).css("background-color","skyblue")
        
    </script>
</body>
</html>

6.案例：表格隔行变色案例

使用jQuery比使用原生js，代码更加简洁。

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
        }
        td {
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //原生js
        // var trs = document.getElementsByTagName("tr")
        // 遍历数组
        // for (var i = 0; i <= trs.length; i += 2) {
        //     trs[i].style.backgroundColor = "skyblue"
        // }

        //jquery
        $("tr:even").css("background-color","yellowgreen")
    </script>
</body>
</html>