JQUERY
来源:互联网 发布:棒球帽 知乎 编辑:程序博客网 时间:2024/05/18 02:10
前言
为什么学习jQuery
原生JavaScript写代码很不方便而且容易出错(一直感觉写getElementById非常地烦),再加上浏览器之间差异处理起来就更烦躁了,jQuery刚好能解决这些问题,而且:
- 轻量级 ;链式编程; 隐式迭代 ;丰富的插件支持。
正文
元素选择及操作
用jQuery在选择元素时和用CSS选择非常像且代码量很少,因此上手很容易:
遇到特殊字符时需要转义,比如对<div id=”id#b”>bb</div>需要用$(‘#id\#b’)来选取,编写时尤其需要注意空格,挨着和不挨着的区别太大了:
- $(‘.test :hidden’)
- $(‘.test:hidden’)
除了可以使用jQuery,还有其他的方式支持CSS选择器,这里就省略了~ 用选择器拿到的是jQuery对象(对dom对象做了封装),可用$cr[0]拿到对应的dom对象~
另外jQuery对DOM操作的封装有:
事件与动画
以前经常在代码中看到:
$(function(){ // DOM就绪时执行的方法});
作用像是绑定了对ready的响应,而对于普通的事件(鼠标点击等)可以用on来统一搞定:
on(events, [, selector] [, data], handler) on( eventsMap [, selector ] [, data ] )
参数的含义如下:
- events:一个或多个用空格分隔的事件类型和可选的命名空间
- eventsMap:属性对应事件类型和可选的命名空间,属性值对应绑定的事件处理函数
- selector:指定哪些后代元素可以触发绑定的事件
- data:触发事件时,需要通过event.data传递给事件处理函数的任意数据
- handler:事件处理函数
注:在jQuery1.8之后bind、delegate、live都不建议使用,所以干脆就都用on好了!
另外并不是每个事件都只有一个处理函数,在jQuery中有两个合成事件:hover和toggle,其中hover的使用方法如下:
hover(enter, lever)
分别用两个函数来响应移入和移出,相比较toggle就更加暴力了:
toggle(f1, f2, …., fn)
在第一次点击时调用f1、第二次调用f2、依次类推,n个方法循环调用(没想到需要用到什么地方- -!),jQuery对事件对象进行了封装,提供如下方法:
既然能绑定就应该能解除:
jQueryObject.off( [ events [, selector ] [, handler ] ] ) jQueryObject.off( eventsMap [, selector ] )
注:可以用trigger来模拟事件,用来实现一些功能(比如快捷键)还是非常方便的!在jQuery中对DOM元素上的动画做了一些封装(不用再蛋疼地使用setTimeout):
其中animate的定义如下:
animate(params, speed, callback)
参数含义如下:
- params:包含样式属性及值的映射,用来控制动画的行为
- speed:速度
- callback:结束时的回调函数
下面来看几个实际的例子感受下:
$(this).animate({left:"500px"}, 3000);// 使left从原来的值变为500$(this).animate({left:"+=500px"}, 3000);// 使left从原来的值增加500$(this).animate({left:"+=500px",height:"+=600px"}, 3000);// 多重动画$(this).animate({left:"+=500px"}, 3000) .animate({height:"+=500px"}, 3000);// 两个动画效果链式写法
延迟总是会带来问题,比如为元素的移入、移出设计了动画,但是在鼠标快速移动的时候动画的效果可能就与实际鼠标的位置不一致了,这时候需要
stop([cleanQueue] [, gotoEnd])
其中:
- cleanQueue:是否清空未执行完成的动画
- gotoEnd:是否将正在执行的动画跳转到末状态
另外可以使用$(this).is(“:animated”)判断元素是否处于动画状态!
Ajax
全称为Asynchronous JavaScript and XML,并不是指一种单一的技术,而是有机地利用一系列交互式网页应用相关的技术所形成的结合体,优势:
- 不需要插件支持
- 优秀的用户体验
- 提高Web程序的性能
- 减轻服务器和带宽的负担
不足:
- 浏览器对XMLHttpRequest对象的支持度不足
- 破坏浏览器前进、后退按钮的正常功能
- 对搜索引擎的支持不足
- 开发和调试工具的缺乏
关于JavaScript原生的写法可以看这里,在jQuery中的封装如下:
方法ajax()的参数如下:
- url:发送请求的地址
- type:请求方式(GET or POST)
- timeout:请求超时时间(毫秒)
- data:发送到服务端的数据
- dataType:预期服务器返回的数据类型
- beforeSend:发送请求前执行的函数
- complete:请求完成后的回调函数
- success:请求成功后的回调函数
- error:请求失败时的回调函数
- global:是否触发全局Ajax事件
对于巨大的表单在提交的时候获取参数是非常繁琐的,在jQuery做了简单的封装serialize()、serializeArray()、param()。在用上面的方法发送请求的过程中会触发事件:
- ajaxStart
- ajaxSend
- ajaxSuccess
- ajaxComplete[](http://)
- ajaxError
- ajaxStop
利用这些事件我们可以很容易为请求的各个环节封装相同的响应!
插件
jQuery的插件非常多,再很多地方(比如这里)可以搜索,这里主要来看下自己如何造插件,涉及到的方法有:
jQuery.extend( target [, object1 ] [, objectN… ] ) jQuery.extend( [ deep ], target , object1 [, objectN… ] )
该方法用来将一个或者多个对象的成员属性和方法复制到指定的对象上,参数的含义为:
- deep:是否深度合并对象
- target:目标对象,其他对象的成员属性将被复制到该对象上
- object1:第一个被合并的对象
- objectN:第N个被合并的对象
还有一个用来扩展jQuery对象方法:
jQuery.fn.extend( object )
现在可以编写插件了:
;(function($){ // 封装jQuery对象方法$.fn.extend({ "color" : function(value){/* 插件代码 */} }) // 直接对jQuery对象进行扩展 $.extend({ ltrim : function(text) { return (text || "") } })})(jQuery);
编写一些插件写法需要对jQuery本身的运行的机制由一定的了解~
总结
jQuery主要是用来简化开发,对JavaScript做了一些封装,不需要再考虑很多兼容性的东西,而且代码也更加简洁,列出一些参考资料:
- api
- codeplayer
- jquery之家
- jquery最佳实践
- jquery设计思想
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQUERY
- jquery
- jQuery
- jquery
- jquery
- 第十一周项目一-二叉树算法验证(2)二叉树构造算法的验证
- @ResponseBody 传到前台中文乱码
- centos 6.4 升级 python 安装pip
- 控件,App.config文件,数据库,之间的联系
- 第八周 项目5 计数的模式匹配
- JQUERY
- 项目三——图遍历算法实现
- 使用注解为HibernateDaoSupport注入sessionFactory
- 常见HTTP状态码
- 自定义View将圆角矩形绘制在Canvas上
- mysql忘记root密码拯救方法(flush privileges)
- 反射的简单实用
- 第12周 项目4(1)- 是否有简单路径?
- 第12周 项目1 - 图基本算法库