一、概述
- jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
- jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。
- Query的语法设计可以使开发者更加便捷,例如操作对象、选择元素、制作动画效果、事件处理、使用以及其他功能。
二、jQuery使用
1、 导入js文件,可以通过从谷歌CDN库获取,<script type=
"text/javascript"
src=
""
></script>
百度CDN库 <script type=
"text/javascript"
src=
""
></script>,还可以从新浪等CDN库获取,具体百度吧。个人倾向于
从jQuery官网下载js文件,直接引用本地文件,这样在无网的情况下也是可以用的。
官网下载地址 : http://jquery.com/download/
2、在HTML引入
① ②
这里需要注意两点:
第一点,由于浏览器加载js的顺序是按照<script>出现顺序加载的,所以要注意引入的js文件的位置要位于编写js code 之前,就像上面的顺序一样,②必须位于①后,否则会调不到方法。
第二点,如果考虑到性能加载问题,可能引入的js文件、编写的js code 可以考虑写在body的最底部
三、选择器
(这里暂时不展开,后续会详细解)
$("p") 选取全部元素。$("p.intro") 选取所有包含class为"intro"的
元素。$("#demo") 选取 id为"demo" 的元素。$("[href]") 选取所有带有 href 属性的元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。$("[href^='/imgaes/']") 选取所有 href 值以 /imgaes/" 开头的元素。
四、事件处理
(这里暂时不展开,后续会详细解)
.change() 表单元素的值发生变化.click() 鼠标单击.dblclick() 鼠标双击.focus() 表单元素获得焦点.hover() 同时为mouseenter和mouseleave事件指定处理函数.keydown() 按下键盘(长时间按键,只返回一个事件).keypress() 按下键盘(长时间按键,将返回多个事件).keyup() 松开键盘.load() 元素加载完毕.mousedown() 按下鼠标.mouseout() 鼠标离开(离开子元素也触发).mouseover() 鼠标进入(进入子元素也触发).mouseup() 松开鼠标.ready() DOM加载完成.select() 用户选中文本框中的内容.submit() 用户递交表单......
五、Ajax请求
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
jQuery 异步请求方法jQuery.ajax({ type:'post', url:url, data:{ key:value, key:value, }, cache:false, dataType:'json', success:function(data,textStatus) { // todo } }) 参数说明 type :请求方式,常见有:get 、post URL : 请求地址 data : 请求参数,key-value 形式出现 cache : 设置为false 不会从浏览器缓存中加载请求信息 dataType : 返回数据类型格式,如果后台返回数据类型是json格式,可以在这里设为‘json’,这样前端直接拿到 data,就不需要再去转为json,如果没指定,得去转换。
success :请求成功后的回调函数,通常这里就是写异步请求成功后的逻辑代码了,比如请求成功后,往table追加tr内容 error :请求失败后的回调函数
提示:如果没有 jQuery,AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
jQuery的选择器、事件处理由于事件关系,先不展开,后续会完善。上面也是简单提下,也是我做到项目用到的知识,了解肤浅,毕竟不是专业做前端开发的。
参考在线文档 http://api.jquery.com/
推荐学习网站:
http://www.w3school.com.cn/jquery/