jQuery常用功能使用总结1

2017-07-04 本文已影响311人 cd72c1240b33

这篇文章出生的原因：

因我的学员要求让我出一份jquery常用功能总结，所以才有今天的文章，如果你有工作中常用的，希望我帮你系统总结的，只要我会的，你留言后我就会更新文章，欢迎一起技术交流；

基本介绍

jQuery是用原生js封装的库，在企业开发中可以加快我们开发的速度，下面是我对jquery常用的属性和方法的总结，但大家要清楚，jquery只是工具，最重要的还是你得知道自己想要什么？这就涉及到编程思想了；

选择器

基本选择器：$()

$('p')         所有的<p> 
$('#some-id')          id是some-id的元素 
$('.some-class')      class是some-class的所有元素

CSS 选择方式跟css中选择元素基本一样

$('#some-id > li')     id是some-id的元素的所有子<li>元素 
$('#some-id li:not(.some-class)')  id是some-id的元素的所有class不是some-class的子元素

属性选择器

$("input[name='leilei']")  选择的是属性“name=leilei”的input元素
$("input[name !='leilei']") 选择的是属性“name !=leilei”的input元素
$("input[name ^='leilei']") 选择name属性值"以leilei开头"的input元素
$("input[name $='leilei']") 选择name属性值"以leilei结尾"的input元素

自定义选择器

$('div.leilei(1)') 第二个类为leilei的<div> 
$('tr:odd') 奇数行 
$('tr:even') 偶数行 
$('td:contains("leilei")') 包含"leilei"的<td>

DOM过滤选择器

$('tr').filter(':odd') 奇数行 
$('tr:not([th]):even') 
$('th').parent() 
$('td:contains("leilei")').next() 
$('td:contains("leilei")').parent().find('td').not(':contains("leilei")') )

jquery和原生之间的相互转换

原生转jquery通过 $()

//这是原生
var  oDiv=document.getElementById('div');
//转成jquery
var $div=$(oDiv)

jquery转原生，通过get()和【】
- $('#my-element').get(0)
- $('#my-element')[0]

jquery中DOM操作

页面加载事件 - 传统：window.load ； jquery: $();
- 前者是HTML所有元素加载完成后执行，后者是只要DOM加载完成后，就开始执行，显然，$()对于window.load，性能方面做了很大提升
关于dom元素的获取，功能跟我之前带你们用原生封装dom库非常类似，功能一样；
包含：parent，parents，children，sibling，siblings，next，prev，index，append,addClass,removeClass等，具体查看http://jquery.cuishifeng.cn/中的“文档处理”，相信我，真的很简单；

jquery中的事件

原生js中事件都是以on开头，注意，jquery中事件都没有on,并且每个事件都是方法，如click();change()等；
由于jquery中的事件尽可能的往兼容浏览器做努力，这里推荐使用Jquery中的事件，而抛弃传统事件；
具体方法名这里不一一列举，参考我们原生学的，去掉on即可，这里只是介绍几个jquery所独有的，兼容浏览器并很常用的一些方法
- hover(f1,f2)
  这个方法可以看做为传统js方法onMouseOVer与onMouseOut的结合体，
  其中参数f1,f2为自定义的方法，f1为onMouseOVer时执行的方法，f2为onMouseOut执行的方法；

var f1=function(e){  
 alert("鼠标移入了");  
}   
var f2=function(e){  
 alert("鼠标移出了");  
}   
$("#t1").hover(f1,f2);

toggle(f1,f2,[f3,f4....]); 每当触发click事件时，依次轮流执行f1,f2,f3....定义的方法；

var f1=function(){  
   alert("第一次点击");  
}  
var f2=function(){  
   alert("第二次点击");  
}   
$("#t1").toggle(f1,f2);

one(eventType,function);使用该函数，方法只会执行一次;

var f2=function(){  
   alert("投圆梦源一票");  
}  
 $("#t1").one("click",f2);

on('事件名',function) 给某个行为绑定某个方法，跟我带大家用DOM2级事件封装的on方法功能一样，都是只要出发行为，就会执行某个绑定的函数，没有次数的限制；
off(事件名，函数名) 接触事件绑定，不解释了
浏览器判断：$browser+浏览器关键字

if($.browser.mozilla){        
  alert("firefox");  
}

keydown(function(event){}) :键盘上的按键事件
这个不详细解释，下面的例子是一个按下回车时候执行的事件，由于浏览器原因，稍微进行了一下浏览器判断;

keydown(function(e){
  alert(e.keyCode);   //弹出对应键的键码；
})

jquery中动态效果

只需引入jqery.js,不需要引入插件，利用jquery定义的一些基本方法，就能实现诸如隐藏，显示，淡入，淡出，半透明等；
基本动画：显示（show），隐藏(hide)与组合（toggle）效果

show(speed,callback);

说明：这个方法可以显示隐藏的元素，其中参数也缺省，即写成show()这种形式；
+ speed ---指定显示的速度有3个参数可以选择 slow ,normal,fast,也可以自己指定数字（单位：毫秒);
+ callback---回调函数

var callback=function(){ //alert("我是回调函数");  
 }  
 var f1=function(){   
  // $("#t1").show(); 参数缺省   
  // $("#t1").show("fast",callback); 显示速度为fast方式   
  $("#t1").show(3000,callback);//自定义显示速度 3000毫秒   
};  
 $("#b1").click(f1);

hidden(speed,callback);
说明：相反与show方法，用于隐藏元素，参数与show相同;
toggle(speed,callback)
说明：这个可以理解为show()与hide()方法的结合体，轮换执行show()与hide()
比如：页面有一个隐藏的元素，第一次执行toggle()，显示元素，第二次执行，隐藏元素，第三次则又显示元素。。。

var callback=function(){ //alert("我是回调函数");   
}  
 var f1=function(){  
 //$("#t1").toggle(); // 参数缺省   
//$("#t1").toggle("fast",callback); //显示速度为fast方式  
 $("#t1").toggle(3000,callback);   
};   
$("#b1").click(f1);

元素的滑动效果（向下展开，向上收缩）

slideDown(speed,[callback]);
说明：改变对象的height以实现向下展开的动画效果，常用与显示隐藏的元素
slideUp(speed,[callback]););
说明：改变对象的height以实现向上展开的动画效果，常用隐藏显示的元素
slideToggle(speed,[callback])
说明：可以说是以上2个方法的综合体，可替代toggle();如果你是仔细看了上面的几个方法介绍，就应该知道怎么用了,其实这几个方法的用法和参数都是相同的，只是展现的形式不同，例子我就不写了;

元素的淡入淡出效果

fadeIn(speed,[callback]);
说明：实现淡出效果，用于显示隐藏元素
fadeOut(speed,[callback]);
说明：实现淡入效果，用于隐藏显示的元素
fadeTo(speed,opactity,callback);
说明：该方法用于更改显示元素的透明度
参数：speed，callback于上面介绍的其他动画方法参数相同，opactity参数表示透明度，取值范围为0-1

var callback=function(){  
//alert("我是回调函数");   
} ;  
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3为透明度30%   
};   
$("#b1").click(f1);

自定义动画

元素的显示有show,slideDown,fadeIn,隐藏有hide,slideUp,fadeOut的动画效果
，组合效果toggle,slideToggle,更改透明度效果fadeTo,实际需要中我们还可以自定义一些动画效果;
自定义动画使用方法：animate(params,speed,callback);
- params---一组包含作为动画属性和最终值哦样式属性和其值的集合
- speed----同前面介绍方法中的speed属性
- callback---回调函数
- 注意：params的样式属性必须书写成驼峰形式，即比如margin-left应该些微marginLeft的形式;

var callback=function(){   
//alert("我是回调函数");   
} ;  
var par={ height:"70%" };   
var f1=function(){  
 $("#t1").animate(par,1000,callback);   
};   
  
$("#b1").click(f1);