AI智能
改变未来

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 就是指第一个lialert(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对象。//做到灵活运用其实不难,理解了方法就好。

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

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jQuery对象和DOM对象