javascript库-jQuery简化编程

955字约3分钟

2024-09-29

jQuery介绍

jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程，例如JS原生代码几十行实现的功能，jQuery可能一两行就可以实现，因此得到前端程序猿广泛应用。

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

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

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

基本使用

下载地址：

https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js

jQuery代码编写位置与JS位置一样，但需要先head标签里引入jquery.min.js文件：

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

JQuery语法：

<button type="button" id="btn">点我</button>
<script type="text/javascript">
$("#btn").click(function () {
    alert('亲，有什么可以帮助你的？')
})
</script>

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

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

JS语法：

<button type="button" id="btn">点我</button>
<script type="text/javascript">
    var x = document.getElementById("btn")
    x.onclick = function () {
        alert('亲，有什么可以帮助你的？')
    }
</script>

选择器

操作HTML

隐藏和显示元素：

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

示例：

<p id="demo">这是一个段落。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button id="toggle" type="button">切换</button>

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

获取与设置内容：

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的HTML内容
val() 设置或返回表单字段的值

示例：

<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();
        $("#demo").text(x).css("color","red")   //不会解析b标签
    });
    $("#btn2").click(function () {
        x = $("#txt").html();   //获取
        $("#demo").html(x).css("color","red")   //会解析b标签，.html()设置
    })
</script>

示例：

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

设置CSS样式：

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

示例：

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

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

Ajax 前后端数据交互

Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML），AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等

无刷新的好处：

减少带宽、服务器负载
提高用户体验

jQuery Ajax主要使用$.ajax()方法实现，用于向服务端发送HTTP请求。

语法：$.ajax([settings]);

settings 是$.ajax ( )方法的参数列表，用于配置 Ajax 请求的键值对集合，参数如下：

Ajax使用案例

<div id='demo'>
    <p id='notice' style="color: red;"></p>
    <h1>用户列表</h1>
    <ul></ul>
</div>

<script type="text/javascript">
    $.ajax({
    type: "GET",
    url: "http://www.baidu.cn/test-table/user.json",
    success: function (result) {   // result是API返回的JSON数据
        if(result.code == 200) {
            for (i in result.data) {
                $('#demo ul').append("<li>" + result.data[i]['username'] + "</li>"); // 将li标签追加到ul标签
            }
        } else {
            $('#notice').text('数据获取失败！')
            }
    },
    error: function () {
        $('#notice').text('连接服务器失败，请稍后再试！')
    }
    })
</script>

回调函数：参数引用一个函数，并将数据作为参数传递给该函数。

jqXHR：一个XMLHttpRequest对象