jQuery学习总结(二)

             紧接上一篇博客jQuery总结(一),jQuery总是会给我太多的便利、简洁还有一点点的零散,所以,需要我们好好的总结,将零散的它们串成线,再结合以前的JS织成网……

 

1、关于load方法

             JQuery中的load( )方法十分强大,可以把一个指定的静态,动态页面或服务器端程序输出的数据装入到执行load( )方法的JQuery对象包装着的元素中。

             load( )方法还支持部分装载,在装入的页面地址后面加空格,然后使用选择器,就可以把页面中符合选择器的部分装入进来。但有一点要注意的是被load的页面一定要是UTF-8编码的,否则装入后中文会出现乱码。

 

2、关于元素

1)效果

             fadeOut( )和fadeIn( )可以实现淡出淡入的效果,参数内容和slideUp( ),slideDown( )方法类似。
animate( )方法可以实现任意的动画效果,可以控制某个css属性在某个时间内进行变化,从而达到动画的效果。

             opacity( )可以改变元素的透明度,IE中使用过滤器实现,100表示完全显示,0表示完全透明,非IE浏览器使用opacity属性,1表示完全显示,0表示透明。JQuery在animate( )方法中屏蔽了浏览器差异,直接使用opacity就可以达到淡入淡出的效果。

 

2)定位

           position属性可以控制元素定位的方式,值为relative时表示相对原来的位置进行定位。可以通过设定top,left,bottom,right的值来控制元素相对原来的位置进行移动

           z-index可以控制元素在页面中的层高,值越大就会在页面的层越靠前,也就会覆盖住一些z-index值较低的元素。只有position的值为relative或absolute的元素,z-index才会生效。

 

3、获取节点

           parent()方法可以获得一个节点的父节点

           next()方法可以获得一个节点的下一个兄弟节点

           previous()方法可以获得一个节点的上一个兄弟节点

           attr()方法可以设置或获取某一个节点的属性值

           each(),一个包含了多个元素的JQuery对象上执行each()方法,可以注册给each()方法的那个function的内容被每一个元素执行。同时这个function还可以接收到一个参数,表示这个元素的索引值。

           eq()方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一个元素,并仍然返回元素对应的新JQuery对象。

       例如$(“div:eq(1)”)

 

4、扩展

1)与ajax相关

         ajaxStart在每一个JQuery发出的ajax请求开始前执行

         ajaxStop在JQuery队列中所有的ajax请求结束后执行

         ajaxComplete在每一个JQuery发出的ajax请求结束后执行

         ajaxStart,ajaxStop对应ajax交互开始前和结束后的事件,给某一个节点注册了这两个事件后,当前页面的ajax交互开始前和结束后,就会执行指定的方法。

 

2)一些不同点的对比:

          visibility的属性值为hidden时,元素隐藏,但是和display为none不同的时,在页面中任然占据一定空间,只是不显示

 

3)和JS的对比:

          change()方法对应标准Javascript中的onchange事件,可以处理下拉框内容变化的事件

          Javascript中的setTimeout()方法可以延时执行某些代码,对应的clearTimeout()可以清除设定的延时操作。

          JQuery中的mouseover(),mouseout()方法对应标准javascript的onmouseover,onmouseout事件,可以处理鼠标进入和离开的事件。

 

          bind可以用于给指定的节点绑定Javascript的事件或JQuery中定义的事件。对于JQuery中没有直接提供注册方法的事件,可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。

          JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容,比如{key1:value1, key2: [1,2,3]}或[1,2,{key2: value2}]

          可以直接$(“<option></option>”)的方法来建立下拉框中的选项,然后用appendTo这样的方法加入到下拉框中

          $("<optionvalue=‘‘>请选择汽车类型</option>").appendTo(cartypeSelect);


         JS的学习还在继续中,总结也是未完待续……

 

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。