jQuery学习 -- 基础语法基础选择器

最新推荐文章于 2023-07-20 11:19:09 发布

冲鸭嘟嘟可

最新推荐文章于 2023-07-20 11:19:09 发布

阅读量540

点赞数

文章标签： jquery javascript 学习

本文链接：https://blog.csdn.net/fuhao6363/article/details/129506132

版权

文章介绍了jQuery的基本语法，包括$符号的使用，元素对象的选择如document对象、标记选择器、id选择器、类选择器，以及方法如hide()、css()。还讲解了document对象的ready()方法确保代码在元素加载后执行，以及如何避免与其他JavaScript库冲突的noConflict()方法。此外，提到了复合选择器和属性选择器的应用。

摘要由CSDN通过智能技术生成

jQuery的语法

基本语法格式：

$("元素对象").方法();

1、jQuery 符号 $
jQuery 语句以 $ 符号开始。这个符号是jQuery的别称。

在同时使用多个JavaScript函数库的HTML文档中，jQuery可能会和其他相同的字符的函数产生冲突，因此可以使用jQuery的noConflict()方法自定义jQuery的别称符号，noConflict()方法的基本语法格式：

新的别称符号 = jQuery.noConflict();

例如下面的语句自定义jQuery的别称符号jq，则之后的jQuery语句以jq开始。

jq = jQuery.noConflict();

2、元素对象

元素对象是jQuery语句中操作的对象，可以采用选择器、过滤器的方式，用于选择文档中的HTML元素对象。

$(document)表示整个HTML文档对象，$("p") 表示选择网页中的标记<p>元素对象。

3、方法
方法是对选择的对象进行的操作。

$("p").hide()

hide()方法是隐藏对象

还可以使用css方法：

$("p").css("color")

这里是获取p元素的color属性

$("p").css("color","red")

这里是把p元素的color改成red

4、document对象的ready()方法;

在元素加载前就执行jQuery代码，容易导致潜在的错误，所有的jQuery语句需要写在document对象的ready()方法中，才不会报错：

$(document).ready(
        function(){
            $("p").css("color","red")
        }
    )

实例代码：

<!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>jquery学习1</title>
    <script src="../jquery-3.5.1.min.js"></script>
</head>

<body>
    <p>这是一段话</p>
</body>
<script>
    $(document).ready(
        function () {
            $("p").hide()
        }
    )
</script>

</html>

在这里插入图片描述

jQuery选择元素对象

jQuery 语句中首先要选择元素对象才能进行操作，jQuery选择元素的方式有选择器、过滤器和遍历方法。

全局选择器

全局选择器可以标记文档页面中所有的元素

$("*").方法();

标记选择器

标记选择器可以指定标记名称的全部元素

$("标记名称").方法();

id选择器

id选择器能够指定唯一id名称的单个元素

$(#"id名称").方法();

类选择器

类选择器可以选择所有具有一个类名的元素

$(."类名称").方法();

实例：

<!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>jquery学习1</title>
    <script src="../jquery-3.5.1.min.js"></script>
    <style>
        p {
            color: red;
        }
    </style>
</head>

<body>
    <p class="a">这是一段话</p>
    <p id="b">这是一段话</p>
    <p class="a">这是一段话</p>
</body>
<script>
    $(document).ready(
        function () {
            var x = $("p").css("color");
            alert("段落颜色本来是" + x);

            $("*").css("border", "1px solid")
            $(".a").css("font-style", "italic")
            $("#b").css("font-size", "20px")
        }
    )
</script>

</html>

在这里插入图片描述

复合选择器

复合不是和前女友复合而是用多种选择器指定一个或多个元素

1、多重选择器
多重选择器是用，分隔多个选择器，用于同时选择多个元素。多个选择器可以是基础选择器的任意一种或几种，只要元素对象匹配其中任意一种选择器，则元素对象被选中：

$("p ,.a , #b").hide()

示例：

<script>
    $(document).ready(
        function () {
            $("p,.a,#b").css("border", "1px solid")
        }
    )
</script>

在这里插入图片描述
2、属性选择器
属性选择器用于选择具有某种属性或者属性值特征的所有元素对象。

$("a[href$='.com']").css("color","red")

<!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>jquery学习1</title>
    <script src="../jquery-3.5.1.min.js"></script>
    <style>
        p {
            color: red;
        }
    </style>
</head>

<body>
    <div style="width:200px;height:100px;background-color: red;"></div>
    <div style="width:150px;height:150px;background-color: red;"></div>
    <a href="/">baidu</a>
</body>
<script>
    $(document).ready(
        function () {
            $("[width]").css("width", "50")
            $("[height]").css("height", "50")
            $("a[href$='.com']").css("font-style", "italic")
        }
    )
</script>

</html>