脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
1、**
2、容错性好
$().css(‘color’, ’red’); //理论上合法,但实际上缺少元素而报错
3、连缀功能
值得一提的是,执行了.css()这个功能函数后,最终返回的还是jQuery对象,那么也就是说,jQuery的代码模式是采用的连缀方式,可以不停的连续调用功能函数。
简单选择器
支持后代 、群组、多类、统配、指明元素前缀
//$('.box>p').css('color','whITe'); //其实css样式也是允许这样写的但是ie6不支持 box类下的p标签 // console.LOG($('.box>p')[0].innerHTML); //后代选择器 将这个jquery对象转化为js原生对象 //console.log($('.box.pox').html()) ; //jquery选择多类的方法 选择的这个对象及有box类,也有pox类 $('.box,.pox').css('color','pink'); //jquery的群组选择器 $('p.box'); //限定必须是.box 元素获取必须是 p 类为box的p $('p#box p.side'); //同上
高级选择器
1、find(‘p’)方法 寻找后代 后代选择器包括 子 孙 从孙等
2、chidren(‘p’)方法 子选择器 只能选择到子 不能选择 孙
3、$(‘#box+p’)方法 p节点的同级的后一个节点==next方法
$('#box').next('p').css('color', 'red'); //和 next 选择器等价
4、(‘#box~p’)方法==nextAll选择器(后面所有同级节点)
5、prev和PRevAll(‘#box’).prev(‘p’).css(‘color’, ‘red’); //同级上一个元素
$(‘#box’).prevAll(‘p’).css(‘color’, ‘red’); //同级所有上面的元素
属性选择器
过滤选择器简称:过滤器。它其实也是一种选择器,而这种选择器类似与 CSS3(http://t.mb5u.COM/css3/)里的伪类
1.基本过滤器
First last focus even odd eq gt header not
2.内容过滤器
内容过滤器的过滤规则主要是包含的子元素或文本内容上
1、设置元素及内容
VAR bb=$('.box').css(['background','width']) for(var i in bb){ console.log(bb[i]); }
所以jquery提供了工具集 $.each()这个方法可以轻松地遍历原生态的JS数组
var bb=$('.box').css(['background','width']) $.each(bb,function(attr,value){ console.log(attr+":"+value); })
使用$.each()可以遍历原生的 JavaScript 对象数组,如果是 jQuery 对象的数组怎么使用.each()方法呢?
$('p').each(function (index, element) { //index 为索引,element 为元素 DOM alert(index + ':' + element); });
addClass removeClass
toggleClass(‘类名’),两个类的切换 有和没有这个类名的效果
toggleClass(‘类名’,动产生true或者false的 函数)
4、CSS 方法
width() 这个方法同上可以没有参数,可以传递一个宽度,可以传递一个函数
height() 方法
获取元素的边框+内外边距的方法
@H_959_@R_360_2621@@
1.创建节点
$('')
2.插入节点
内部插入
4.节点操作 一.绑定事件 jQuery 不但封装了大量常用的事件处理,还提供了不少高级事件方便开发者使用。比如模拟用户触发事件、事件委托事件、和统一整合的 on 和 off,以及仅执行一次的 one 方法。这些方法大大降低了开发者难度,提升了开发者的开发体验。 这两个函数的区别 事件委托 live die 已经废除 新版本的on和off建议使用 事件对象的属性
除了创建、插入和包裹节点,jQuery 还提供了一些常规的节点操作方法:复制、替换、删除节点
复制节点 clone()
注意:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true参数的话,这个元素附带的事件处理行为也复制出来。
删除节点 remove();
注意:.remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的,比如:(‘p’).remove(‘#box’);只删除id=box的p。(‘p’).detach<"/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPigpOyAvL7GjwfTKwrz+0NDOqrXEyb6z/TxiciAvPg0Kyc/D5rXEwb249re9t6i2vMrHt7W72LG7yb6z/bXEvdq14zxiciAvPg0KPHN0cm9uZz7H5b/Vvdq14zwvc3Ryb25nPiBlbXB0eSgpPGJyIC8+DQo8c3Ryb25nPszmu7u92rXjPC9zdHJvbmc+IHJlcGxhY2VXaXRoKCk8L3A+DQo8aDIgaWQ9"7基础事件">7、基础事件
jQuery 通过.bind()方法来为元素绑定这些事件。 可以传递三个参数: bind(tyPE, [data], fn),
type 表示一个或多个类型的事件名字符串;
[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;
fn 表示绑定到指定元素的处理函数。
//使用 unbind 删除绑定的事件
$(‘input’).unbind(); //删除所有当前元素的事件
二.简写事件
为了使开发者更加方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。 我
们称它为简写事件。
使用鼠标移入移出的时候建议使用hover
键盘事件的charCode(字符的ASCII编码)和keyCode(键盘码)的8、高级事件
模拟用户操作 trigger triggerHandler
在事件触发的时候,有时我们需要一些模拟用户行为的操作。例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击。
$(‘input’).trigger(‘click’);
$('p').bind('click','bind',function (e,data1) { alert('我的第一次点击来自模拟!'+ e.type+'|'+ data1+'|'+ e.data); //click+saa+bind }).trigger('click',['sas']);
在常规的使用情况下,两者几乎没有区别,都是模拟用户行为,也可以可以传递额外参数。但在某些特殊情况下,就产生了差异:
1、triggerHandler()方法并不会触发事件的默认行为,而.trigger()会
2..triggerHandler()方法只会影响第一个匹配到的元素,而.trigger()会影响所有。
3..triggerHandler()方法会返回当前事件执行的返回值,如果没有返回值,则返回undefined;而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)
4..trigger()在创建事件的时候,会冒泡。但这种冒泡是自定义事件才能体现出来,是jQuery 扩展于 DOM 的机制,并非 DOM 特性。而.triggerHandler()不会冒泡。
命名空间
有时,我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦,这个
时候,可以使用事件的命名空间解决。
$('p').bind('click.abc', function () { console.log('abc'); }); $('p').bind('click.xyz', function () { console.log('xyz'); }); $('p').unbind('click.xyz');
已经废除的一个方法:.live()原理就是把 click 事件绑定到祖先元素
使用die来取消这个事件委托。
delegrate 和undelegrate
//绑定谁,谁就在开头 就是点击谁 $('.Big_test').delegate($('.test'),'click',function(e){ $('
').appendTo($(this)); })
/*var test=$('.test'); var big=$('.big_test'); test.on('click',{user:'sasa'},function(e){ console.log('test'); },false) //最后传递一个false表示取消了默认行为和冒泡行为 big.on('click',{user:'sasa'},function(e){ console.log('big'); }) test.off('click');*/ //使用On来模拟事件委托 var test=$('.test'); //子 var big=$('.big_test'); //父 big.on('click','.test',function(){ console.log(this); //子 $(this).clone(true).appendTo(big); }) big.off('click','.test')
9、事件对象
使用js的事件对象会存在很多兼容性的问题,但是使用jquery的事件对象就不会
可以使用事件对象可以得到的信息
type 得到事件的类型
target 获取绑定事件的元素(触发事件的DOM)
data 函数传递过来的额外的数据
注意:获取事件对象的额外数据(这些数据是通过bind函数的第二个参数得到的)
relatedTarget
currentTarget 得到的是监听元素的DOM(绑定的那个)这个也可以用this来代替
relatedTarget 从哪移入、移出最邻近的 使用Mouseover,mouseout来演示
pageX /pageY 相对于页面原点的横/纵坐标(缩放)
screenX/screenY
clientX/clientY
在没有滚动条的时候1和3 的值是一样的,有滚动条的时候1和3 的值是不一样的 2的值会受到缩放的影响
timeStamp 获取事件发生的时间戳
which 鼠标的左、中、右 键盘的按键
演示target和currentTarget的区别
html代码
js代码
var wai=$('p'); wai.click(function(e){ console.log(e.target); //p或者p console.log(e.currentTarget); //输出的始终是p console.log(this); //输出的始终是p })
事件对象的冒泡和默认行为
冒泡
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题。
jQuery 提供了一个事件对象的方法:event.stopPropagation();这个方法设置到需要触发的事件上时,所有上层的冒泡行为都将被取消。
$('input').click(function (e) { alert('按钮被触发了!'); e.stopPropagation(); });
默认
网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据
@H_956_304@
show hide 自动切换 toggle
同步动画:一起显示
异步动画:逐个显示
$('.show').click(function(){ $('span').first().show('slow',function aa(){ $(this).next().show('slow',aa); }) }) $('.hidden').click(function(){ $('span').last().hide('slow',function aa(){ $(this).prev().hide('slow',arguments.callee); }) })
滑动、卷动 slideDown slideUp
$('.show').click(function(){ $('.box').slideDown('slow'); }) $('.hidden').click(function(){ $('.box').slideUp('slow'); }) });
淡入、淡出 fadeIn fadeOut fadeTo
aniMATE函数
$('.show').click(function(){ $('.box').animate({ 'height':'400px', 'backgroundColor':'red', 'fontSize':'30px', 'left':'+=100px' },function(){ console.log('动画执行完了'); }); })
但是如果只是单独的调用这个方法,实现的是同步动画
队列动画:自定义实现列队动画的方式,有两种:1.在回调函数中再执行一个动画;2.通过连缀或
顺序来实现列队动画。
1、连缀实现队列动画
$('.show').click(function() { $('.box') .animate({'height': '400px'}) .animate({'left': '+=100px'}) })
2、回调函数实现队列动画
$('.show').click(function() { $('.box') .animate({'height': '400px'},function(){ $(this).animate({'left': '+=100px'}) }) })
使用queue来模拟队列动画
$('.show').click(function() { $('.box') .animate({'height': '400px'},function(){ $(this).animate({'left': '+=100px'}) }).queue(function(next){ $(this).css('background','red') next(); }); })
动画方法
很多时候需要停止正在运行中的动画,jQuery 为此提供了一个.stop()方法。它有两个可
选参数:.stop(clearQueue, gotoEnd);clearQueue 传递一个布尔值,代表是否清空未执行完的
动画列队,gotoEnd 代表是否直接将正在执行的动画跳转到末状态
使用无参数的stop()方法的时候,停止的时候只是停止掉当前的这个列队动画,然后继续执行后面的列队动画
第一个参数为true 停止当前的动画并且清除后面的列队动画,默认值是false
第二个参数是false 会停止跳转到目标的位置上,而且不会执行后边的,默认值为false
delay()方法
有时在执行动画或列队动画时,需要在运动之前有延迟执行,jQuery 为此提供了.delay()方法。这个方法可以在动画之前设置延迟,也可以在列队动画中间加上。
动画属性
jQuery 提供了两种全局设置的属性, 分别为:
概述
Ajax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术,是一串
技术的集合,主要有:
1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为;
2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向@R_406_2769@发送请求;
3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据;
4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其呈现到页面上。
由于 Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点:
1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可) ;
2.用户体验极佳(不刷新页面即可获取可更新的数据) ;
3.提升 Web 程序的性能(在传递数据方面做到按需放松,不必整体提交) ;
4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端) ;
而 Ajax 的不足由以下几点:
1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前);
2.前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会几率前后页面) ;
3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容) ;
4.开发调试工具缺乏(相对于其他语言的工具集来说,JS 或 Ajax 调试开发少的可怜) 。
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jquery全部内容,希望文章能够帮你解决javascript代码实例教程-jquery所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。