jQuery知识

最新推荐文章于 2024-10-06 16:18:14 发布

Lkun_99

最新推荐文章于 2024-10-06 16:18:14 发布

阅读量103

点赞数

分类专栏：前端文章标签： jquery ajax html

本文链接：https://blog.csdn.net/qq_38056518/article/details/120293915

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了jQuery中的DOM元素操作，包括append和html方法的使用。append用于在元素内部追加内容，而html则会替换选中元素的所有内容。此外，还讲解了jQuery的click事件处理。接着，文章探讨了Ajax的基础应用，展示了$.get方法的参数及其实现异步数据获取的示例，包括超时处理和错误回调。

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

jQuery知识

1、DOM元素的操作

append和html添加内容的用法

append的用法，效果：追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/jquery-3.4.1.js"></script>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody id="my">
    <tr>
        <td>1</td>
        <td>小刘</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>小刘</td>
        <td>25</td>
    </tr>
    <tr>
        <td>3</td>
        <td>小刘</td>
        <td>25</td>
    </tr>
    </tbody>
</table>
<br>
<button id="mybody">点击改变tbody的值</button>
<script>
    $("#mybody").click(function () {
        $("#my").append("<tr><td>1</td><td>小刘</td><td>123</td><td>12</td></tr>");
    });
</script>
</body>
</html>

html的用法,里面是双引号，双引号里面可以使html标签和文字,效果：会把选中标签里的全部替换掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/jquery-3.4.1.js"></script>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody id="my">
    <tr>
        <td>1</td>
        <td>小刘</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>小刘</td>
        <td>25</td>
    </tr>
    <tr>
        <td>3</td>
        <td>小刘</td>
        <td>25</td>
    </tr>
    </tbody>
</table>
<br>
<button id="mybody">点击改变tbody的值</button>
<script>
    $("#mybody").click(function () {
        $("#my").html("<tr><td>1</td><td>小刘</td><td>123</td><td>12</td></tr>");
    });
</script>
</body>
</html>

jQuery只有click函数，表示鼠标单击触发事件，一般事件就是一个匿名函数，DOM的click是checkbox上模拟一次鼠标单击，DOM通过鼠标单击调用函数使用onclick，如：οnclick=“函数名()”

2、Ajax

$.get({   
    	 url: url,
    	//默认就是get请求
		dataType:'json',//返回的数据类型
		timeout:2000,//超时
        async: false,   //默认即使true
        contentType: 'application/json;charset=utf-8',  //发送的数据类型
        data: JSON.stringify(params),  //json化
		//请求成功
		success:function(data,status){
			//alert(data);
			//alert(status);
		},
		//失败/超时
		error:function(XMLHttpRequest,textStatus,errorThrown){
				if(textStatus==='timeout'){
					alert('請求超時');
					setTimeout(function(){
					alert('重新请求');
					},2000);
		}
			//alert(errorThrown);
	}
})