jQuery常用方法及使用示例汇总
什么是jQuery？
jQuery是一个快速、简洁的JavaScript库，使得JavaScript更容易使用。通过jQuery，您可以处理HTML文档遍历和操作，使得动态效果和用户交互变得更加简单和快速。
常用方法
1. 事件处理
click()：点击事件hover()：鼠标悬停事件mousedown()：鼠标按下事件mouseup()：鼠标松开事件keyup()：键盘抬起事件keydown()：键盘按下事件
2. DOM操作
text()：设置或获取元素的文本内容html()：设置或获取元素的HTML内容val()：获取和设置表单元素的值addClass()：添加类名removeClass()：移除类名hasClass()：判断元素是否含有某个类名append()：追加内容prepend()：前置内容detach()：将元素从DOM中移除，但不删除remove()：彻底删除元素和其子元素
3. Ajax请求
$.ajax()：发起一个Ajax请求$.get()：发起一个get请求$.post()：发起一个post请求
4. 动画效果
show()：显示元素hide()：隐藏元素fadeIn()：淡入元素fadeOut()：淡出元素slideDown()：下滑显示元素slideUp()：上滑隐藏元素
示例说明
示例一：设置和获取文本内容
<!DOCTYPE html>
<html>
<head>
<title>示例一：设置和获取文本内容</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>这是一个段落</p>
<button id="getTxtBtn">获取文本内容</button>
<button id="setTxtBtn">设置文本内容</button>
<script>
$(function(){
//获取文本内容
$('#getTxtBtn').click(function(){
alert($('p').text());
});
//设置文本内容
$('#setTxtBtn').click(function(){
$('p').text('这是新的文本内容');
});
});
</script>
</body>
</html>
在该示例中，我们通过text()方法来设置和获取元素的文本内容，并通过按钮点击事件来触发相应的操作。在点击“获取文本内容”按钮时，将会弹出当前段落元素的文本内容；在点击“设置文本内容”按钮时，段落元素的文本内容将会被修改为“这是新的文本内容”。
示例二：发送Ajax请求
<!DOCTYPE html>
<html>
<head>
<title>示例二：发送Ajax请求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<button id="getDataBtn">点击获取数据</button>
<script>
$(function(){
$('#getDataBtn').click(function(){
$.get('data.json', function(res){
$('#content').html(JSON.stringify(res));
}, 'json');
});
});
</script>
</body>
</html>
该示例演示了如何使用jQuery的Ajax请求方法$.get()，通过点击按钮触发Ajax请求，拉取JSON格式的数据并将其展示在页面上。在该示例中，我们使用了$.get()方法发起了一个get请求，请求的url为data.json，获取到数据后将其转换为字符串格式并通过html()方法设置给某个元素的内容。在这个过程中，我们还为$.get()方法的第三个参数指定了“json”选项，指示返回的数据格式为JSON。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery常用方法及使用示例汇总 - Python技术站
微信扫一扫 
支付宝扫一扫 