打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jQuery学习大总结(一)jQuery对象与dom对象转换

这几天会将jQuery的一些使用方法总结一下,希望能对jQuery初学者起到一定的帮助作用。

今天主要看看jQuery对象和dom对象的相互转换,明白了这个,以后用起jQuery会方便很多。

1、方法名冲突的解决办法 在开始使用jQuery时,我们首先应该避免jQuery与其他类库或自定义js的冲突。 先看一段最简单的代码:

jQuery(document).ready(function() {    alert("Welcome!");});

在这里没有使用$(document)这种写法,因为很多时候我们自己定义了$(id)方法用来获得元素,并且在prototype等类库中也定义了$()方法。所以,为了避免冲突,建议大家也使用jQuery("#id")这种写法。

2、jQuery对象与dom对象的相互转换 jQuery对象转dom对象: jQuery("#id")获得的是一个jQuery对象,它和普通的dom对象是不同的,所以不能直接使用dom对象定义的方法。由于jQuery对象本身就是一个集合,所以可以通过索引将jQuery对象转换成dom对象,如jQuery("#id")[0]就是一个dom对象。 看下边一个例子:

<div id="show">    <span>要显示的内容1</span>    <span>要显示的内容2</span>    <span>要显示的内容3</span></div>

要获得span中的内容,使用以下方法均正确。

//jQuery方法,获得第一个span内容jQuery("#show span").html();//获得第三个span内容jQuery("#show span")[2].innerHTML;//eq()返回jQuery对象,从eq(0)开始。获得第二个span内容jQuery("#show span").eq(1)[0].innerHTML;//get()直接返回dom对象,从get(0)开始。获得第三个span内容jQuery("#show span").get(2).innerHTML;

dom对象转jQuery对象: 使用jQuery()就可将dom对象转为jQuery对象。 如:

jQuery(document.getElementById("show")).html();

输出结果为:

<div id="show">    <span>要显示的内容1</span>    <span>要显示的内容2</span>    <span>要显示的内容3</span></div>

这样就实现了jQuery对象和dom对象的相互转换,比如想让焦点停留在id为focus的文本框。只需:

jQuery("#focus")[0].focus();
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
JQuery常用小知识
JQuery技巧总结
js动态生成html元素并为元素追加属性
前端学习
常用的jquery元素转化成dom元素
Jquery常用技巧总结
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服