jquery 常用方法及事件操作 $工具方法
2016-05-20 15:53
501 查看
/** * //dom常用操作,DOM操作 * get() 就是把JQ转成原生js * outterWidth(); * 类似原生offsetWidth :获取不到隐藏元素(display:none)的值 * text(); * remove(); * detach()跟remove一样,不过会保留删除这个元素的操作行为 * parents()获取当前元素的所有祖先节点 * closest()获取最近的指定的祖先节点包括元素自身,必须要写筛选的参数,只能找到一个元素 * siblings() * nextAll()下面所有的兄弟节点 * prevAll() * parentsUntil() 到什么为止 * nextUntil() * prevUntil() * clone(true) 可以接收一个参数,作用:可以复制之前的操作行为 * warp() 外包装 * warpAll() * warpInner 内包装 * unwarp()删除包装删除父级,不包括body * add() * slice() 截取 * serialize() * serializeArray() * //运动 * animate() * 第三个参数:swing(默认) * linear * 第四个参数 callback * * stop() 默认阻止当前运动 * stop(true) 阻止后续的运动 * stop(true,true) 可以立即停止到指定的目标点 * finish()可以立即停止到所有指定的目标点 * * delay() * //事件委托 * delegate //优点:省略了循环操作,对后续添加的内容应用了事件操作 * undelegate() //阻止事件委托 * * trigger //触发被选中元素的指定事件 * ev.data e.target ev.type */
alert($(".div").get()[0].innerHTML); window.onload = function(){ } $(function(){ //等DOM加载完 }) || $(document).ready(function(){ //等DOM加载完 }) //delegate $("li").on("click",function(){ // event }) $("ul").delegate("li","click",function(){ // event $("ul").undelegate(); //阻止事件委托 }) $("div").click(function(){ }) $("div").trigger('click'); //主动触发 $(".div").on("click",{name:'hello'},function(ev){ alert(ev.data.name); //hello alert(ev.type); //click alert(ev.target); //事件源 })
<pre name="code" class="javascript">/** * $.xx(); 工具方法不仅可以jquery用,原生JS 也可以 * * $.type()可以返回具体类型 * $.trim()去掉空格 * $.inArray()类似于indexOf * $.porxy()改变this指向 * $.noConflict()防止冲突 * $.parseJSON() * $.makeArray() * * //插件 * $.extend 扩展工具方法下的插件形式 $.xxx() * $.fn.extend : 扩展到JQ对象下的插件 $().xxx() */ var a = "string"; alert(typeof a); alert($.type(a)); var arr = ['a','b','c','d']; alert($.inArray('w',arr)); //-1 function show(n1,n2){ alert(n1); alert(n2); alert(this); //window } $.proxy(show,document)(); //document $.proxy(show,document)(3,4); //3,4 $.proxy(show,document,3,4)(); //3,4 $.proxy(show,document,3)(4); //3,4 $(document).click($.proxy(show,window,3,4)); //window //noConflict var fun = $.noConflict(); fun(function(){ }) //ajax $.ajax({ url : 'xx.php', data : 'name=xxx&age=xxx', type : 'POST', success : function(){ }, error : function(){ } }) // $.extend $.extend({ leftTrim : function(){ return str.replace(/^\s+/,''); } }) $.leftTrim() //$.fn.extend() $.fn.extend(function(){ darg : function(){ var disX = 0; var disY = 0; var This = this this.mousedown(function(ev){ var disX = ev.pageX-$(this).offset().left; var disX = ev.pageX-$(this).offset().top; document.mousemove(function(){ this.css('left',ev.pageX-disX); this.css('top',ev.pageY-disY); }) document.mouseup(function(){ $(this).off(); }) return false; }) } }) $("div").drag();
相关文章推荐
- jquery的checkbox,radio,select常用用法
- jQuery 查找on事件绑定元素的被绑定元素方法
- jQuery不同版本共存
- jquery-fullpage-js制作页全屏滚动插件
- jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
- JS及JQuery对Html内容编码,Html转义
- jquery.SuperSlide.js只需要调用一个插件就能实现网页大部分特效--推荐
- jquery-设内容和属性的回调函数
- JQuery 00002
- JQuery 00001
- jQuery选择器及jquery案例详解(必看)
- Jquery插件:提示框
- jQuery 实现广告条效果
- Jquery $when done then的用法详解
- jquery.getJSON跨域方案实现原理
- jQuery笔记
- jquery.cookie.js插件使用方法
- jQuery Validate使用记录
- jquery 插件编写
- jQuery的案例及必知重要的jQuery选择器