jquery对象(jquery中有哪些对象)
本篇文章给大家谈谈jquery对象，以及jquery中有哪些对象对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
深刻了解jQuery对象和普通DOM对象的区别
一、JavaScript对象JavaScript提供多个内建对象，比如 String、Date、Array等等。
对象只是带有属性和方法的特殊数据类型。
访问对象的属性:
[javascript]
var message="Hello World!";
var x=message.length;
创建 JavaScript对象:
[javascript]
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
使用对象构造器:
[javascript] view plaincopy
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
[javascript]
var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");
二、DOM对象
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API）。
通过 DOM，可以访问所有的 HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML DOM独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript和 VBScript使用。
DOM对象，即是我们用传统的方法(javascript)获得的对象。
三、jQuery对象
jquery对象其实是一个javascript的数组
这个数组对象包含125个方法和4个属性
4个属性分别是
jquery当前的jquery框架版本号
length指示该数组对象的元素个数
context一般情况下都是指向HtmlDocument对象
selector传递进来的选择器内容如：#yourId或.yourClass等
如果你通过$("#yourId")方法获取jquery对象，
并且你的页面中只有一个id为yourId的元素
那么$("#yourId")[0]就是HtmlElement元素
与document.getElementById("yourId")获取的元素是一样的
简单理解，就是jQuery创建的对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法
四、DOM对象和jquery对象的区别
[javascript]
var domObj= document.getElementById("id");//DOM对象
var$obj=$("#id");//jQuery对象;
[javascript]
$(“#img”).attr(“src”,”test.jpg”);//这里的$(“#img”)就是获取jQuery对象；
[javascript]
document.getElementById(“img”).src=”test.jpg”;//这里的document.getElementById(“img”)就是DOM对象；
再说一个例子：就是this，我在写jQuery的时候经常这样写：
this.attr(“src”,”test.jpg”);
可是就是出错。其实this是DOM对象，而
.attr(“src”,”test.jpg”)
是jQuery方法，所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象，例如：
$(this).attr(“src”,”test.jpg”);
五、DOM对象和jquery对象的转换
DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。
方法：$(DOM对象)
[javascript]
var v=document.getElementById(“v”);//DOM对象
var$v=$(v);//jQuery对象
jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
[javascript]
var$v=$(“#v”);//jQuery对象
var v=$v[0];//DOM对象
alert(v.checked)//检测这个checkbox是否被选中
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象。
[javascript]
var$v=$(“#v”);//jQuery对象
var v=$v.get(0);//DOM对象
alert(v.checked)//检测这个checkbox是否被选中
怎么判断元素是jquery对象
这个太多了！
1、JQuery的核心的一些方法
each(callback)'就像循环
$("Element").length;‘元素的个数，是个属性
$("Element").size();'也是元素的个数，不过带括号是个方法
$("Element").get();‘某个元素在页面中的集合，以数组的形式存储
$("Element").get(index);'功能和上面的相同，index表示第几个元素，数组的下标
$("Element").get().reverse();‘把得到的数组方向
$("Element1").index($("Element2"));'元素2在元素1中的索引值是。
2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴)
$("*")‘表示获取所有对象但是我至今没这样用过
$("#XXX")'获得 id=XXX的元素对象（id可以是标签的id或CSS样式id）常用
$("input[name='username']")获得input标签中name='userName'的元素对象常用
$(".abc")'获得样式class的名字是.abc的元素对象常用
$("div")'标签选择器选择所有的div元素常用
$("#a,.b,span")'表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a.b p")'ID号是a的并且使用了 b样式的所有的p元素
3、层级元素获取
$("Element1 Element2 Element3....")'前面父级后面是子集
$("div> p")'获取div下面的所有的 p元素
$("div+ p")'div元素后面的第一个 p元素
$("div~ p")'div后面的所有的 p元素
4、简单对象获取
$("Element:first")'HTML页面中某类元素的第一个元素
$("Element:last")'HTML页面中某类元素的最后一个元素
$("Element:not(selector)")'去除所有与给定选择器匹配的元素,如：$("input:not(:checked)")表示选择所有没有选中的复选框
$("Element:even")'获得偶数行
$("Element:odd逗）'获得奇数行
$("Element:eq(index)")'取得一个给定的索引值
$("Element:gt(index)")'取得给定索引值的元素之后的所有元素
$("Element:lt(index)")'取得给定索引值的元素之前的所有元素
5、内容对象的获取和对象可见性
$("Element:contains(text)")'元素中是否包含text文本内容
$('Element:empty")'获得元素不包含子元素或文本的
$("Element:partnt")'获得元素包含子元素或文本的
$("Element:has(selector)")‘是否包含某个元素，如：$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden")'选择所有可见元素
$("Element:visible")'选择所有不可见元素
6、其他对象获取方法
$("Element[id]")'所有带有ID属性的元素
$("Element[attribute= youlika ]"'获得所有某个属性为youlika的元素
$("Element[attribute!= youlika ]"'获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]"'获得所有某个属性为不是youlika的开头的元素
$("Element[attribute$= youlika ]"'获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute*= youlika ]"'获得所有某个属性包含youlika的开头的元素
$("Element[selector1][selector2][....]")'符合属性选择器，比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika的input元素。
7、子元素的获取
$("Element:nth-child(index)")'选择父级下面的第n个元素
$("Element:nth-child(even)")'选择父级下面的偶数
$("Element:nth-child(odd)")'选择父级下面的奇数
$("Element:nth-child(3n+1)")'表达式
$("Element:first-child")'选择父级下面的第一个子元素
$("Element:last-child")'选择父级下面的最后一个子元素
$("Element:only-child")'匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt
8、表单对象获取
$(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域，例如
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素，作用与上相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表
9、元素属性的设置与移除
$("Element").attr(name)'取得第一个匹配的属性值，比如$("img").attr("src")
$("Element".attr(key,value)")'某一个元素设置属性
$("Element".attr({key:value,key1:value,....}))‘为某个元素一次性设置多个属性
$("Element").attr(key,function)'为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)//移除某一个属性
JQuery对象和DOM对象的区别
一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的，开始的时候不理解，现在此案知道，原来jQuery
获得的对象并不和我们平时使用getElementById获得的对象是一样的对象。所以一些新手就很迷惑，为什么${”#Element”}不能直接
innerHTML，这就是原因所在，解决方式请看下文。
jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：
$(document.getElementById("msg"))
则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：
$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]
这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
jQuery查找对象是按照标准的dom层级关系来查找的
如table中无论你是否有tbody，在查找子对象的时候都要按照table-->tbody-->tr的层级关系来查找
关于this
<input name="testThis" type="text" onchange="textThis(this)"/>
function textThis(obj)
{
//在引用自己用的this是dom对象
alert($(obj).val());
}
该this为dom对象
innerHTML和outerHTML
innerHTML设置或获取对象起始和结束标签内的HTML
outerHTML设置或获取对象及其内容的HTML形式
好了，文章到这里就结束啦，如果本次分享的jquery对象和jquery中有哪些对象问题对您有所帮助，还望关注下本站哦！