JavaScript库：jQuery 选择器、操作HTML

富士康质检员张全蛋

已于 2024-09-10 21:09:01 修改

阅读量856

点赞数 1

分类专栏： html css javascript jquery 文章标签： jquery

于 2023-11-14 14:04:05 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/134392978

版权

html css javascript jquery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

jQuery介绍

官方网站: https://jquery.com

jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程，例如 JS 原生代码几十行实现的功

能， jQuery 可能一两行就可以实现，因此得到前端程序猿广泛应用。（现在处在比较边缘的状态）

发展至今，主要有三个大版本 :

1.x:常用版本
2.x，3.x:除非特殊要求，一般用的少

基本使用

cdn导入方式

<head>
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <script type="text/javascript">
    // jquery代码
    </script>
</body>

基础语法是 :$(selector).action()

$:代表jQuery本身
(selector):选择器，查找HTML元素
action():对元素的操作

js先要去获取dom元素，再去click，之后给其匿名函数。jquery就简单了，直接将$符号填进来，直接再去点click完事。

代码示例：按钮实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <button type="button" id="btn1">点我1</button>
    <button type="button" id="btn2">点我2</button>
<script type="text/javascript">

// js实现
    var x = document.getElementById("btn1")
    x.onclick = function () {
        alert('亲，有什么可以帮助你的?')
    }

// jquery实现
    $("#btn2").click(function () {
    alert('亲，有什么可以帮助你的?')
})
</script>
</body>
</html>

选择器

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<h2>在HTML中如何使用jquery</h2>
<button class="btn">点击</button>
<button id="btn">点击1</button>
<script type="text/javascript">

// 标签选择器
    $("h2").click(function() {
        alert("你好，标签")
})

//类选择器
    $(".btn").click(function() {
        alert("你好，类")
    })

//id选择器
    $("#btn").click(function() {
        alert("你好，id")
})
</script>
</body>
</html>

操作HTML

隐藏和显示元素:

hide() :隐藏某个元素
show() :显示某个元素
toggle() :hide()和show()方法之间切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <p>xxxxxxxxxxxx</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">切换</button>

    <script type="text/javascript">
    $("#hide").click(function(){
        $("p").hide()
    })

    $("#show").click(function(){
        $("p").show()
    })

    $("#toggle").click(function(){
        $("p").toggle()
    })
    </script>

</body>

</html>

获取与设置内容 :

text() 设置或返回所选元素的文本内容 text标签是不会获取到html元素的
html() 设置或返回所选元素的HTML内容
val() 设置或返回表单字段的值

下面其实就是先去获取text的内容，然后将内容放到这个demo选择器里面去。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<p id="txt">这是一个<b>段落</b>。</p>
<button type="button" id="btn1">显示文本</button>
<button type="button" id="btn2">显示HTML</button>
<p id="demo"></p>

<script type="text/javascript">
    $("#btn1").click(function () {
        x = $("#txt").text();
        console.log(x)
        $("#demo").text(x).css("color","red") //不会解析b标签
    })

    $("#btn2").click(function () {
        x = $("#txt").html(); //获取
        console.log(x)    
        $("#demo").html(x).css("color","red") //会解析b标签，.html()设置
    })
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <h1>欢迎访问运维管理系统</h1>
    用户名:<input type="text" id="uname" name="username"><br>
    密码:<input type="text" id="pwd" name="password"><br>
    <button type="button" id="btn">显示输入内容</button>
    <p id="demo"></p>

<script type="text/javascript">
    $("#btn").click(function () {
    x = $("#uname").val();
    y = $("#pwd").val();
    $("#demo").text(x + '，' + y).css("color","red")
})
</script>

</body>
</html>

设置 CSS 样式 :

css() 设置或返回样式属性(键值)
addClass() 向被选元素添加一个或多个类样式
removeClass() 从被选元素中删除一个或多个类样式
toggleClass() 对被选元素进行添加/删除类样式的切换操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

    <div id="demo">
        <p>这是一个段落</p>
    </div>
    <button id="btn">添加样式</button>

    <script type="text/javascript">
    $("#btn").click(function () {
    $("#demo p").css("color", "red")
    // $("#demo p").css({"color":"red","font-size": "30px"})
    // $("#demo").addClass("cls")
    // $("#demo").removeClass("cls")
    })
    </script>

</body>
</html>

菜鸟教程在线编辑器