`
sw1982
  • 浏览: 511508 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

惊叹jQuery(解决jQuery对象到DOM的转换)

阅读更多

jQuery是一个javascript框架,但绝对不是通常意义上的一些包装,个人感觉是一个改变js控制方式的框架。我们可以像美工通过写css分离页面代码一样,通过jQuery来分离页面与效果、。下面转一段介绍:

jQuery具有如下一些特点:
1.            代码简练、语义易懂、学习快速、文档丰富。
2.            jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。
3.            jQuery支持CSS1-CSS3,以及基本的xPath
4.            jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
5.            可以很容易的为jQuery扩展其他功能。
6.            能将JS代码和HTML代码完全分离,便于代码和维护和修改。
7.            插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。
        jQuery的设计会改变你写JavaScript代码的方式,降低你学习使用JS操作网页的复杂度,提高网页JS开发效率,无论对于js初学者还是资深专家,jQuery都将是您的首选。
       jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不同的Web应用程序中。
官方站点:http://jquery.com/  中文站点:http://jquery.org.cn/
在使用过jQuery后,也发现了一些不爽的地方 :
        1.大量使用回调(类似java中使用匿名内部类)格式。导致代码不好阅读,更麻烦的是,一不小心就会丢失});结束符,导致js失败。。调试js是一个痛苦的过程。
        2.使用${}获取到的对象都是jQuery对象,导致DOM中的函数,事件失效。
比如一个<input type="checkbox" id="aaa"/>, 使用$("#aaa")得到jQuery对象,但是$("#aaa").checked会出错
jQuery使用自己的API,与标准js不兼容. 
p.s.解决jQuery到DOM对象的转换:
<input type="checkbox" id="aaa"/>
1. 使用$("#aaa")得到jQuery对象 。使用$("#aaa")[0]则可以取得DOM对象,$("#aaa")[0].checked使用无误。
2. jQuery的API中提到了一个get()函数,可以解决对象到DOM的转换。
get() 取得所有匹配的 DOM 元素集合。
这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。
如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。
-------------------------------------------------------------------------------- Access all matched DOM elements. This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions.
返回值 Array<Element>

     注意到返回的是队列,$("#aaa").get()[0] 就可以返回当前DOM的 input元素。$("#aaa").get()[0].checked使用无误

分享到:
评论

相关推荐

    使用jquery实现各种特效

    在JavaScript的世界里,jQuery是一个非常流行且强大的库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本教程将重点介绍如何使用jQuery来实现各种特效,以提升网页的用户体验。 首先,我们来看看“3D...

    结合jQuery+CSS3的酷炫特效.zip

    在前端开发领域,jQuery与CSS3的结合使用可以创造出许多令人惊叹的动态效果,提升用户体验。这个名为"结合jQuery+CSS3的酷炫特效.zip"的压缩包很可能包含了一系列示例代码,帮助开发者学习如何利用这两项技术进行...

    jquery css3随机掉落旋转菜单.zip

    在前端开发中,jQuery、CSS3以及HTML5的结合常常能创造出令人惊叹的交互效果,而"jquery css3随机掉落旋转菜单"就是这样一个实例。这个压缩包文件包含了一个使用jQuery库、CSS3技术和HTML5元素构建的动态菜单,它...

    星球旋转插件jquery.planetarium.js.zip

    《星球旋转插件jquery.planetarium.js:构建交互式宇宙漫游体验》 在Web开发领域,为了提供...借助这个插件,开发者可以在网页上构建出令人惊叹的宇宙场景,让用户仿佛置身于浩渺星海之中,体验到前所未有的互动乐趣。

    实现DOM元素平滑过渡变形动画的js插件

    在ramjet中,它将一个元素的初始状态和目标状态作为关键帧,通过计算每一帧之间的差异并逐渐改变元素的样式属性,从而实现从一个DOM元素到另一个DOM元素的平滑过渡。这种技术特别适用于创建复杂的变形动画,比如文字...

    jquery css3图片变换3D立体展示轮播切换效果代码

    首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在图片轮播切换效果中,jQuery主要负责事件监听、图片的显示与隐藏以及动画的控制。 1. **事件监听**:jQuery提供了`.on()...

    jQuery+CSS3打造超酷3D按钮效果.zip

    首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互。在本项目中,jQuery将用于实现按钮的动态效果,如点击反馈和过渡动画。通过使用jQuery的`.click()`方法,我们可以监听...

    ( 超炫的3d图片效果-自己开发(增加元素绝对定位功能)Jquery 特效 保证您没见过的

    总的来说,这个项目展示了如何结合Jquery库和CSS3的3D转换特性,创造出令人惊叹的3D图片特效。通过绝对定位,开发者可以精细地控制每个图片元素在屏幕上的位置和运动轨迹,从而营造出逼真的立体感。这种技术在现代...

    html5图片切换jquery css3 Transitions属性制作超酷的3D图片切换代码.zip

    jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画效果。在这个案例中,jQuery可能被用来监听用户的点击事件,触发图片的切换,并可能配合CSS3的Transition属性实现平滑过渡。jQuery的链式调用和...

    html5 canvas立体图片展示特效.zip

    jQuery插件在其中的作用可能在于简化DOM操作和事件处理,使得代码更简洁,性能更高。jQuery的`$(document).ready()`函数可以在页面加载完成后执行代码,而`$('.selector').click(function() {...})`可以方便地为元素...

    jQuery 3D星球大战字幕引导特效

    jQuery是一款广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。jQuery的核心特性是易用性、高性能和模块化,使得开发者可以更高效地编写JavaScript代码,实现复杂的功能。在本...

    jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】

    接下来,我们引入了jQuery库(版本1.11.1),用于简化DOM操作。同时,`prefixfree.min.js`用于自动处理CSS前缀,确保在不同浏览器中的兼容性。`modernizr.js`是一个功能检测库,用于检测浏览器支持哪些HTML5和CSS3...

    jQuery宽屏3D旋转切换图片代码

    在这个项目中,jQuery被用来操控DOM元素,实现图片的平滑切换和3D旋转效果。 2. **响应式设计**:这是一种网页设计方法,使网站能够根据访问设备的屏幕尺寸和方向自动调整布局、内容和功能。在宽屏3D旋转切换图片...

    图片3D展示效果

    jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作等任务。结合3D技术,jQuery可以创建出令人惊叹的交互式图像展示效果。描述中提到的"视觉震撼的图片3D切换效果"可能是指通过...

    HTML5旋涡粒子光标动画特效.zip

    再者,jQuery是一个流行的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画制作。在这个特效中,jQuery可能用于监听鼠标移动事件,实时更新粒子的位置,从而实现光标跟随的效果。jQuery的动画方法也可能...

    HTML5立体小球运动动画效果.zip

    如果项目中使用了jQuery库,它提供了一套方便的DOM操作和事件处理方法,可以简化JavaScript代码,提高效率。 jQuery是一个广泛使用的JavaScript库,它通过提供更简单、更人性化的API来操作DOM、处理事件、执行动画...

    带闪亮特效的缩略图相册源码

    `js`目录可能包含了项目中使用的JavaScript文件,可能是单独的脚本文件或者是已经打包压缩的库,如jQuery,用于简化DOM操作和事件处理。 最后,`fonts`目录可能包含了自定义字体文件,用于提升相册界面的视觉风格,...

    超酷图片显示特效js效果

    这些特效可以通过操纵DOM(文档对象模型)来实现,通过改变图片的CSS属性或者利用JavaScript的定时器和事件监听功能来触发特定的动画。 在压缩包的文件名“glossy”中,我们可以猜测这个特效可能具有光泽或镜面反射...

    javascript制作动画

    JavaScript是一种强大的客户端脚本语言,广泛...开发者可以根据需求选择适合的方法,从简单的平移、缩放,到复杂的路径动画、3D转换等,JavaScript都能胜任。通过不断实践和学习,你可以创建出令人惊叹的网页动画效果。

    绝对令人的惊叹的CSS3折叠效果(3D效果)整理

    Makisu是一个利用jQuery生成CSS3D菜单的插件,它能够自动转换任何列表元素,创建出独特的滚动折叠效果,这种下拉式菜单效果在移动设备上尤其引人注目,能够显著提升用户的交互体验。 PaperLikeUnfoldingEffect是一...

Global site tag (gtag.js) - Google Analytics