【前端学习笔记】JQuery事件细节、JQ进阶常用方法
来源:互联网 发布:武汉java工作好找吗 编辑:程序博客网 时间:2024/04/18 23:45
事件细节———————————————————————
ev直接使用,不需要兼容操作ev.pageX(Y) 鼠标的坐标(相对于文档) : ev.clientX(相对于窗口)ev.which(能监控鼠标键值) : ev.keyCodeev.preventDefault(); //阻止默认事件ev.stopPropagation(); //阻止冒泡事件函数结尾return false;既能阻止冒泡又能阻止默认事件one()
$('div').one('click',function(){}); //事件只执行一次
JQ进阶方法—————————————————————–
get()
$('#div').get(0).innerHTML //将JQ取的元素转化为原生JS识别的写法,
get()取的是获取的一组元素 get(i)取的是获取的一组元素第i个 不过在JQ下也有length这个属性。 JQ取的一组元素也能通过下标[i]变成原生JS识别的元素 如:
$('li')[i].style.background = 'red';
outerWidth() 针对隐藏元素和参数true outerWidth(false)相当于原生JS的offsetWidth 但offsetWidth不能获取隐藏元素的值 outerWidth()能获取隐藏元素值text() $('div').html();只能获取一组元素第一个元素的html内容 而$('div').text();获取的是该组元素所有元素的文本内容(不含标签)remove() $('div').remove();返回的是被删除的这个元素对象,以方便下次 再添加这个元素。另外这个方法执行后会移除调用这个方法的元素 的所有绑定事件。detach() 跟remove()方法一样,但是会保留这个元素删除前的所有操作行为。$(function(){});/$(document).ready(function(){}); 和原生JS的window.onload=function(){}相似 区别是onload要等所有html结构(例如图片)加载完,才能执行代码 $(function(){});是等dom加载完就执行里面的代码,性能要好 高版本的浏览器用 DOMContentLoadedparents() 获取元素的所有祖先节点 parents('div')还可以筛选所有祖先节点中的指定节点closest() 获取最近的指定祖先节点(包括当前元素自身) closest('div')筛选最近一个的指定祖先元素, 和parents()的区别是只能找到一个元素siblings() 获取所有的指定兄弟节点 nextAll() 获取元素所有后面的指定兄弟节点 prevAll() 获取元素所有前面的指定兄弟节点 parentsUntil() 向上获取每层祖先节点直到指定祖先节点位置nextUntil() 获取元素所有后面的兄弟节点,直到指定节点结束prevUntil() 获取元素所有前面的兄弟节点,直到指定节点结束clone() 克隆节点。克隆出来的节点没有之前的绑定事件 加一个参数true可以将原节点的绑定事件也克隆出来wrap() $('span').wrap('<div>')给元素包裹指定标签 wrapAll() $('span').wrapAll('<div>')给找到的元素整体包裹指定标签 会把其他非span的元素排除在wrap外,使用时要注意wrapInner() $('span').wrap('<div>')给元素内容包裹指定标签 unwrap() 删除包装(父级) 注意,不包括bodyadd() $('div').add('span').css() 元素合并操作(不是把span加到div里) slice() $('li').slice(0,4); 一组元素中取下标范围[a,b)的元素返回 a=b返回空serialize() $('form').serialize() 对表单数据进行序列化(串联化),形成一个字符串serializeArray() $('form').serializeArray() 对表单数据进行序列化,形成一个JSON数组animate() 运动 第一个参数:json{属性:值} 第二个参数:时间(运动快慢) 默认400ms 第三个参数:运动形式 默认swing(慢快慢)。 linear(匀速) 第四个参数:回调函数,运动完以后要做的事(也可以用链式调用)stop() 默认:只会阻止当前运动 一参:true 阻止所有后续的运动 二参:true 直接使元素到达当前运动目的地位置finish() 立即停止到指定的所有目标点。delay(100) 链在animate后,延时运动、delegate() 事件委托
$('ul').delegate('li','click',function(){ this.style.background = 'red'; });
undelegate() 阻止事件委托
$('ul').undelegate();
trigger() 主动触发事件
$('#div').trigger('click');
事件细节: 事件传参
$('#div').on('click',{name:'hello'},function(ev){ alert(ev.data.name);//获取外部传进来的参数 alert(ev.target); //获取操作源(全兼容) alert(ev.type); //获取事件类型 });
$下常用方法(工具方法)——————————————————-
$().fn() 只能给JQ对象用$.xxx() $.yyy() $.zzz() : 不仅能给JQ用还能给原生JS用,叫做工具方法$.type() 判断类型,返回字符串 和原生JS typeof方法不同的是,该方法可以返回更细的类型 对object细分了 regexp date array json等类型$.trim() $.trim(str) 去str的前后空格$.inArray() $.inArray('b',arr); 类似于字符串方法indexOf();$.proxy() 改变this指向
function show(n1,n2){ alert($(this)); alert(n1); alert(n2); } $.proxy(show,documnet,3,4)(); $.proxy(show,documnet)(3,4); /*一参是方法,二参是指向的对象 而该函数的形参可以写在三参及以后或者后面的执行括号内 方便在非立即执行的时候传入参数。 例如:*/ function show(n1,n2){} $(document).click( $.proxy(show, $(#div1),3,4) );
$.noConflict() 防止命名冲突 var _$ = $.noConflict(); 可以用_$代替$了$.parseJSON() 将字符串解析成JSON$.makeArray() 把类数组转化为数组,使其可以使用数组方法 例如 类数组 var aLis = $('li');
$.makeArray(aLis).push($('#li1'));
ajax for JQ—————————————————————–
//参数为json形式 $.ajax({ url : 'xxx.php', data : 'name=loe&age=20', type : 'POST', comtentType : '', success : function(data){//请求成功以后的回调函数 $.parseJSON(data) }, error : function(){ //... } }); //抽象出来的方法 $.get('xxx.php',{数据},function(){ //成功的回调函数 }); $.post('xxx.php',{数据},function(){ //成功的回调函数 }); $.getJSON('xxx.php?callback=show|?',function(){ });//?代表随机返回函数名字 functuin show(data){ //处理JSONP返回数据 }
JQ插件操作———————————————————-
$.extend 扩展工具方法下的插件形式 $.xxx() $.yyy() 写法如下
$.extend({ leftTrim : function(){}, rightTrim : function(){} })
$.fn $.fn.extend 扩展到jq对象上的插件形式$().xxx() $().yyy() 写法:
$.fn.extend({ name : function(){ $(this)//代表调用这个方法的JQ对象。 } })
0 0
- 【前端学习笔记】JQuery事件细节、JQ进阶常用方法
- 【前端学习笔记】JQuery的基本思想、常用方法
- 前端学习-jQuery学习小笔记(1)——jQ基础以及各种选择器
- 前端学习-jQuery学习小笔记(2)——jQ属性样式篇
- 常用前端jq插件
- android学习笔记(17)广播事件处理进阶(注册方法)
- 前端之jquery常用方法
- JQ前端方法容器
- $()下的常用方法:事件细节
- jQuery学习笔记:事件
- Jquery事件学习笔记
- jQuery事件学习笔记
- 【前端基础进阶系列】学习笔记
- 常用的 jQuery 事件方法
- jQuery常用事件方法详解
- 前端学习笔记4-jquery
- jQuery笔记-常用方法
- JQuery四:JQuery事件常用方法
- mysql sql查询过程分析之explain关键字
- 【java】List接口
- 电脑黑屏的处理技巧
- 【特征匹配】SIFT原理与C源码剖析
- httpClient断线重连机制
- 【前端学习笔记】JQuery事件细节、JQ进阶常用方法
- 华为上机 亮灯的个数 java
- Nginx入门
- java编写一个分页类
- java中static作用
- 关于项目管理专业人士(PMP)认证考试5P的个人心得
- 代理作用之二:代理回调(反向传值)
- 笔记本电脑显示器不停的闪动怎么办
- HDU 1996 汉诺塔VI