JQuery中的常用事件、对象属性与使用方法分析
事件
在jQuery中，事件是用户与页面元素交互时触发的操作。下面列出了一些常用的事件：
click事件
click事件指鼠标左键单击元素时触发。一般常用于按钮或超链接。
$(selector).click(function(){
//事件处理函数
});
mouseover事件
mouseover事件指鼠标移动到元素上时触发。
$(selector).mouseover(function(){
//事件处理函数
});
keydown事件
keydown事件指在页面上按下任何键时触发。
$(selector).keydown(function(){
//事件处理函数
});
对象属性
在jQuery中，你可以访问许多对象属性：
.text()
.text()方法用于获取或设置元素的文本内容。
$(selector).text(); //获取元素的文本内容
$(selector).text("new text"); //将元素的文本内容修改成"new text"
.val()
.val()方法用于获取或设置用户输入框的内容。
$(selector).val(); //获取用户输入框的内容
$(selector).val("new value"); //将用户输入框的内容修改成"new value"
使用方法
jQuery提供大量的使用方法，下面列出一些更为常用的：
.hide()
.hide()方法隐藏元素。
$(selector).hide(); //隐藏选中的元素
.fadeIn()
.fadeIn()方法以淡入动画显示选中的元素。
$(selector).fadeIn(); //显示选中元素，并以渐变动画效果出现
示例说明
以下是一个简单的示例，该示例在页面加载完成时，向按钮添加了一个click事件，当按钮被点击时，显示一个文本框：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input").show(1000);
});
});
</script>
</head>
<body>
<button>显示文本框</button>
<input type="text" style="display: none">
</body>
</html>
另一个示例是通过鼠标移动到图片上时弹出提示信息：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img").mouseover(function(){
alert("Hello World!");
});
});
</script>
</head>
<body>
<img src="example.jpg">
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery中的常用事件、对象属性与使用方法分析 - Python技术站
微信扫一扫 
支付宝扫一扫 