jQuery对象和DOM对象详解

   在我们做web程序中,前后台代码的交互,显得尤为重要,如何拿到元素,如何拿到自己想要的元素的值更是很重要,因为经常使用,所以对jQuery常用的一些选择器进行了整理,方便查看阅读。不足之处也请留下建议。

通常在使用JQuery的过程中,我们使用它的别名$()来表示JQuery的命名空间,同时把调用的函数放在$()函数中;该函数其实就是$(“document”).ready()的简写。其实也就是相当于JS方法中的Window.Onload=function XX(){}的处理函数。
这里有个函数执行的先后顺序,$()方法要比window.οnlοad=function 方法先一步执行。

1. JQuery 选择某一个元素

一般jquery去选着某一个元素有三种方法,jquery对象和DOM对象是可以相互转换的因为他们所操作的元素都是DOM元素,只不过Jquery对象包含了多个DOM元素,而DOM对象本身就是一个DOM元素,简单说一下就是:JQuery对象是DOM元素的集合,DOM对象就是一个DOM元素。既然JQuery对象是DOM元素的集合,那判断JQuery对象是否有值,可用,可以用它的length属性的长度来判断。

1.1 把JQuery对象转化为DOM对象

因为JQuery对象和DOM对象所能调用的方法不能互通,如果想使用彼此的方法,就涉及到对象之间的转化。转化的方式有2种。
第一种:借助数组下标来读取JQuery对象集合中的某个DOM对象

这个是主要是对象之间的转化
<ul>
<li>这个是第一个</li>
<li>这个是第二个</li>
</ul>
//js代码
<script>
$(function(){
var $li=$("li");//返回JQuery的对象  其实就是拿到文档中所有的li 将这个所有的li元素转化为一个JQuery对象
//的集合。至于这个jquery对象我们怎么判断 可以用length的属性去查看这个对象是不是存在。
var li =$li[0];//拿到jquery对象中下表为0的DOM对象,这就是返回了一个DOM对象。该li 就是指第一个li
alert(li.innerHTML);//输出内容
})
</script>

第二种:直接借助JQuery对象的方法,从JQuery对象中取出一个DOM对象。注意取出的是DOM对象。

利用JQuery对象的方法,从jquery对象中取出一个DOM对象
<ul>
<li>这个是第一个</li>
<li>这个是第二个</li>
</ul>
<script>
$(function(){
var  $li=$("li");//返回jquery对象
var li =$li.get(0);//利用get方法将下标为0的元素从JQuery对象中取出来,生成一个DOM对象。
alert(li.innerHTML);//输出内容
})
</script>
1.2把DOM对象转化为JQuery对象

使用方法:对于DOM对象来说,直接把它传递给$()函数即可,JQuery会自动把它转化为JQuery对象,然后就可以直接使用jQuery的方法。

<ul>
<li>这个是第一个</li>
<li>这个是第二个</li>
</ul>
<script>
$(function(){
var li=document.getElementsByTagName("li");//拿到所有的li元素
var $li=$(li[0]);//先拿到第一个li 方法就是li[0],将li[0]放在$()方法中,就获取到第一个li的jQuery对象。
alert($li.html());
})
</script>
//本方法中还可以将li整个放在$()方法中得到jQuery对象。 然后再用Jquery对象使用get()方法拿到Do对象。
//做到灵活运用其实不难,理解了方法就好。

选择器下一节写吧,想起什么来写点什么。。。。晚安

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhangguan96

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值