事件细节———————————————————————
ev直接使用，不需要兼容操作
ev.pageX(Y) 鼠标的坐标(相对于文档) : ev.clientX(相对于窗口)
ev.which(能监控鼠标键值) : ev.keyCode
ev.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加载完就执行里面的代码，性能要好
高版本的浏览器用 DOMContentLoaded
parents()
获取元素的所有祖先节点
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()
删除包装(父级)
注意，不包括body
add()
$(‘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对象。
}
})版权声明：本文为博主原创文章，转载还请留言。
时间： 2024-09-29 14:27:52