1、jquery获取元素
jquery首先页面加载,window.onload=function(){}替换成 $(function () { ... })这种格式
jquery里通过 $() 获取元素,里面可以放标签名,class名,id名,各种选择器
选择器:
可以有子集选择器,例::first、:odd、:even 等,新版本也新增了root ,target选择器
属性选择器:[ 属性名=属性值],里面也可以选择,例: ^是以什么开始,$是以什么结束等
子集选择器:nth-child、 nth-last-child、:first-of-type
表单元素:例:选中:checked 、不可用:disabled、其他的:enabled、:selected、:input 、:button 等
$.escapeSelector(selector),,在类选择器或者ID选择器中包含一些CSS特殊字符的选择器
2、jquery的事件
jquery的事件都是事件绑定的
jquery里的事件与js事件不同的是,事件都不用加on、常用的事件,在jq里也都有,例:mousedown 鼠标按下 ,scroll 滚动,foucus 获取焦点,toggle切换等,用法与原生没什么区别。
3、jquery效果
slideup(); 向上滑, 写法:slideUp([speed,[easing],[fn]])
//speed: 划时的速度(fast/slow/nromal),
easing: 切换效果,默认是"swing",可用参数"linear",
fn: 在动画完成时执行的函数,每个元素执行一次。
fadein(),fadeout(),淡入淡出的效果,写法:fadeIn([s],[e],[fn])
//s:速度可以写 slow,normal,fast或时间的毫秒数值(如:1000)
e:切换效果swing或linear
fn: 在动画完成时执行的函数
animate(); 运动 写法:animate(params,[speed],[easing],[fn]) ,
//(动画属性和终值的样式属性和及其值的集合,slow/normal/fast/动画时长,linear/swing,动画完成时执行的函数),
运动这个效果用起来也比较方便,比js的运动简单方便,在animate里可以写要改变的样式,运动形式,运动速度,运动后要执行的函数
也可以写成 animate({必填的:要变化的属性},{'可选项duration':运动时间,'complete':function(){运动完成后执行的代码})
运动是封装的时候用了定时器,所以在使用时,要先停止运动,再让运动走,eg: obj.stop().animate(...);
4、循环$.each ( arr, fnction ( i , v) { ....})
//循环数组,i代表下表,v代表下标对应的值 ,函数里的this指的是当前循环的内容 ,each可以便利对象,例如json,eg:
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
5、其它小方法
$.trim(str); //去掉字符串起始和结尾的空格 eg: $.trim(" hello, how are you? ");
$.extend([d],tgt,obj1,[objN]) //用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
$(对象).size(); //计算这个对象元素个数 ,像length
$(对象).css('样式名','样式值'); eg: $ ( 'div' ) . css ( { ....});
$('div').attr('属性名','属性值'); eg : $( 'div ') . attr ( {....} );
addClass() 追加
removeClass() 去掉某个class
innerHTML jq变成 html()
value jq变成 val()
text jq变成 text()
appendTo() ;追加到...
事件对象event ,在jq里写成e用法和原生js一样 eg:e.pageX //鼠标的X轴坐标
delay(d,[q]);延迟,一般配合运动,延迟运动效果等,一般只写时间,后面是延迟之后要执行队列的项目
总结:
jq里都是事件绑定的,在jq里事件绑定一般都用on,解绑用off
jq和原生最好不要混着用,否则别看看代码很混乱
jq可以转原生,在后面加 [ 0 ]/ get ( 0 ) ,原生js也可以转jq,加$(..);
jq对象必须使用jq方法,js对象使用js方法,
jq里也可以加定时器,只是用定时器的时候,写原生的定时器就好,定时器和原生的一样
jq好多方法其实比原生好用,但是原生js有的方法jq不应定有
jq的方法看jquery api就好,api就可以看懂使用方法,简单易学