JQuery实例总结一
现在对于web页面的开发基本上分工明确,HTML负责页面内容,CSS负责页面的样式, JavaScrtpt负责页面行为。
JavaScrtpt库封装了很多预定义的对象和使用函数,帮助开发者轻松建立高交互性的客户端页面,并且能够兼容各种浏览器。
对JQ的学习首先是通过几个例子来进行的jq 学习,现在对前2个例子中的内容总结下从局部来看待整体。关于对html的css设计这里就不写了。
1.JQ选择器
JQ要进行操作首选是得到元素的节点,参数为某种css选择器
var codeObj=$("#id") //通过id得到, $(".class") //通过class得到 $("html") //通过html标签得到 $("tbody tr:even")//得到内容中奇数行的节点 .children("input").get(0) //得到子节点input数组节点中的第一个节点。
通过查询jQueryAPI帮助手册,获取节点的方法大都在选择器中出现。
得到元素节点后可以执行各种的jQuery方法。获取数据,定义事件,执行操作等。
2.JQ属性
.val()获取节点的value属性值 .html()得到和设置某个节点中的html内容 .Addclass(); 为某一个节点添加类:通过这个类可以为这个节点附加该类对应的css样式。 .Removeclass();为某一个节点删除一个类
通过jq属性可以对节点进行一些基本的属性操作。
3..JQ事件
1.页面载入
$(document).ready(function() { //页面加载完成之后执行的代码。 } $(function(){ //同上 }
2.事件处理
$("p").bind("click", function(){ alert("为某个节点绑定事件"); });
3.常见事件:
1.keyup();按键释放时触发。
<head> <scripttype="text/javascript" src="/jquery/jquery.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ $("input").keydown(function(event){ //按下按钮回车键背景框为红色 $("input").css("background-color","red"); }); $("input").keyup(function(event){ if(event.which == 13) { //松开键背景框为蓝色 $("input").css("background-color","blue"); }; }); }); </script> </head> <body> Enter yourname: <input type="text" value="回车操作" /> <p>keyup的用法:text背景色按下为红色,按回车为蓝色</p> </body> </html
执行结果:
2.trigger():在每一个匹配的元素上触发某类事件。
<html> <head> <scripttype="text/javascript" src="/jquery/jquery.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ $("input").select(function(){ //选择文本框中的任意字符,显示文本框被选中。 $("input").after("文本被选中!"); }); $("button").click(function(){ //按下button按钮文本框被选中 $("input").trigger("select"); }); }); </script> </head> <body> <input type="text"name="txtName" value="Hello World" /> <br /> <button>选中文本框内容</button> </body> </html>执行结果为:
JQuery作为一个优秀的 JavaScrtpt库他的宗旨就是写最少的代码,做更多的事情。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。