楼主在学习的过程中注意到JQuery的强大、灵活;给出一个简单的教程,让你在最短的时间学会常用JQuery的用法!
jQuery 是一个 JavaScript 函数库。 |
基础语法是:$(selector).action()
可以理解为3部分,1、$->告诉浏览器你用的是JQuery,2->选择你要操作的节点,3->对节点的操作!
元素选择器
选择所有的p:$("p")
选择id=‘Fox_zhuang’的所有元素:$("#Fox_zhuang")
属性选择器:选择href='www.cnblogs.com/Fox_zhuang'的标签:$("a[href='www.cnblogs.com/Fox_zhuang']")
等~
这里给出几个常用的选择方式:
1、选择table除了表头的所有行:$("#tableid tr:gt(0)")
2、选择到当前节点的左右节点:
<table id="mytab"><tr><td><input type="text" value="123"/></td><td><input type="button" value="345"/></td></tr></table>
$("#mytab td").find("input[type='text']").parent().next().find("input[type='button']")
事件处理 |
几种常用的事件绑定方式:
.on() 在选择元素上绑定一个或多个事件的事件处理函数。V1.7+
.off() 在选择元素上移除一个或多个事件的事件处理函数。V1.7+
.bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。V1.0
.one(type,[data],fn) 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。V1.1+
.unbind(type,[data|fn]]) bind()的反向操作,从每一个匹配的元素中删除绑定的事件。V1.0+
几个常用方法的方法:
$(document).ready(function(){}-----
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数,在onload()前触发;
$("input[type='text']").blur(function(){alert('123')});-----给所有的文本框绑定失去焦点事件
.change(),.click(),.dbclick(),.focus()等...
当然有一些不规范的写法:比如控件zhuangsd的点击事件
1 function myBind() 2 { 3 $("#zhuangsd").click(function() 4 { 5 alert("i am click!"); 6 }); 7 }
其他方法同理也可以这么写,这里再提一下冒泡型事件(在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次 的最顶层,即document对象(有些浏览器是window)。),当然还有捕获型事件有兴趣的小伙伴们,可以自己写一个demo感受一下,自己理解这个原理;便于以后bug排查。
异步请求Ajax |
何为异步请求,简单描述:请求通过事件触发->服务器处理(同时浏览器仍然可以作其他事情)->处理完毕,比如网站的注册页面,对用户名重复校验,输入完成即开始验证,与此同时你还可以填写其他信息~
1 //异步请求数据 2 function myLoadDataByGet(url, data) { 3 var returnValue; 4 $.ajax({ 5 url: url, 6 type: 'GET', 7 dataType: 'json', 8 timeout: 1000, 9 data: data, 10 cache: false, 11 success: function(rdata) { 12 returnValue = rdata; 13 } //成功执行方法 14 }); 15 return returnValue; 16 }
这里给一个简单的demo,大神勿喷;给小白参考~