jQuery--语法

最新推荐文章于 2021-10-06 14:28:46 发布

IT利刃出鞘

最新推荐文章于 2021-10-06 14:28:46 发布

阅读量311

点赞数 1

文章标签： jquery html5 html

本文链接：https://blog.csdn.net/feiying0canglang/article/details/109401257

版权

jQuery 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

原文网址：jQuery--语法_IT利刃出鞘的博客-CSDN博客

选择器

与

描述

与选择器用于选择同时满足多个项的元素。

格式

$("Selector1Selector2SelectorN") //连着写

示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="a b c" style="background-color: red">
    这是abc
</div>

<p class="a b d" style="background-color: red">
    这是abd
</p>
<script>
    $(".a.d").css('background-color', 'yellow');
</script>
</body>
</html>

结果

其他

见：jQuery在线手册_3.1

属性

.text()

简介

.text()括号中的参数是可变参数

可以这样用：$("xxx").text(text1, text2);

.text()设置内容有两种用法

用法1：$(选择器).text(内容) //此种方法会设置已经存在的标签的内容。
用法2：$(标签对).text(内容) //此种方法会新建标签并设置内容。

实例

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>

<body>
<script src="./lib/jquery.js"></script>

<p>here</p>

<script>
    function appendText() {
        var txt1 = "<p>文本-1。</p>";              // 使用 HTML 标签创建文本
        var txt2 = $("p").text("文本-2。");  // 使用 jQuery 创建文本
        var txt3 = document.createElement("p");
        txt3.innerHTML = "文本-3。";               // 使用 DOM 创建文本 text with DOM
        $("body").append(txt1, txt2, txt3);        // 追加新元素
    }

    appendText();
</script>

</body>
</html>

结果

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>

<body>
<script src="./lib/jquery.js"></script>

<p>here</p>

<script>
    function appendText() {
        var txt1 = "<p>文本-1。</p>";              // 使用 HTML 标签创建文本
        var txt2 = $("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
        var txt3 = document.createElement("p");
        txt3.innerHTML = "文本-3。";               // 使用 DOM 创建文本 text with DOM
        $("body").append(txt1, txt2, txt3);        // 追加新元素
    }

    appendText();
</script>

</body>
</html>

结果