jQuery是一个快速、小巧且富有特色的JavaScript库,HTML文档遍历和操作、事件处理、动画和Ajax交互等Web开发常见任务
jQuery是一个快速、简洁的JavaScript库,主要用于简化HTML文档的遍历、事件处理、动画和Ajax交互等操作。
以下是一些使用jQuery的常见示例:
- 元素的选择和操作
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
在上述代码中,我们首先使用$(document).ready()
确保文档已经加载完毕。然后,我们选择所有的<p>
元素,并为它们添加了一个点击事件,当任何<p>
元素被点击时,它会被隐藏。
- 动画效果
$(document).ready(function(){
$("button").click(function(){
$("p").animate({height: '+=100px'}, 500);
});
});
在这个例子中,当按钮被点击时,所有的<p>
元素会增加100px的高度,并且这个变化会在500毫秒内完成。
- AJAX请求
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("div").html(result);
}});
});
});
在这个例子中,当按钮被点击时,一个AJAX请求会被发送到"demo_test.txt"
,如果请求成功,返回的结果会被放置在<div>
元素中。
- 添加和移除类
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
在这个例子中,当按钮被点击时,所有的<p>
元素会添加或移除"main"
类。
- 获取和设置内容
$(document).ready(function(){
$("button").click(function(){
$("#test").text("Hello world!");
});
});
在这个例子中,当按钮被点击时,id为"test"
的元素的内容会被设置为"Hello world!"
。
- 获取和设置属性
$(document).ready(function(){
$("button").click(function(){
$("#test").attr("value", "Hello world!");
});
});
在这个例子中,当按钮被点击时,id为"test"
的元素的value
属性会被设置为"Hello world!"
。
以上就是一些使用jQuery的基本示例,实际上jQuery提供了更多强大而方便的功能,如链式调用、事件代理、动画等等。
评论已关闭