jquery 获取对象有多少个属性 jquery获取对象的方式

转载

ghpsyn 2023-08-02 12:19:27

文章标签 jquery 获取对象有多少个属性 javascript c# java ViewUI 文章分类 jQuery 前端开发

核心方法的使用
jQuery对象访问：
each(callback)
根据我的理解，each是jQuery中的一种循环机制。一般与this关键字配合使用。学过程序的朋友都知道程序中的循环方式有以下几种do...while()、while()、for(expression1,expression2,expression3)以及C#和javaEE中JSTL标签中独有的forEach循环。jQuery中的each循环与forEach循环类似。具体使用方法在本节案例中讲述。
$("Element").length
表示某个对象在HTML页面中的数量，与size用法一致，此方法不带有()。
$("Element").size()
表示某个对象在HTML页面中的数量，与length用法一致。
$("Element").get()
表示获得某个元素在HTML页面中的集合，以数组方式构建。
$("Element").get(index)
作用同上，如果get方法里面带有数字则表示获得数组中的第几个元素，索引从0开始。
$("Element").get().reverse()
表示将获取到得dom元素集合构建成的数组进行反向。比如默认排序是1,2,3使用了此方法则为3,2,1
$("Element").index($("Element"))
搜索index中所获得的元素在所匹配对象元素中的索引值（从0开始计数），若没有找到则返回-1。比如有5个div，其中第4个标签的ID是#bar那么$("div").index($("#bar"))所返回的索引值就是3。

jQuery插件机制：

$.extend
({
 max:function(num1,num2){return num1 > num2 ? num1:num2;},
 min:function(num1,num2){return num1 < num2? num1:num2;}
})

$.extend等同于jQuery.extend在这里面的max和min是两个自定义的函数，并且都有2个参数，在方法体内进行比较。方法体内使用的是条件表达式，与if条件判断差不多。此条件表达式的意思是：如果num1>num2相比较后如果num1大于num2那么返回“true”,那么此方法返回“？”之后“：”之前的内容也就是num1，反之是num2。调用的时候只要使用$.max(2,3)传入任意的两个参数，那么将返回num2也就是数字3;$.min(7,8)则返回num1因为num1比num2小。$替换成jQuery完全没有问题。

$.fn.extend
({
 check:function()
 {
 return this.each(function() { this.checked = true; });
 }
 uncheck:function()
 {
 return this.each(function() { this.checked = false; });
 }
})

此方法也是一种插件的实现方法，其中this表示是调用者当前所指dom对象，比如$("#abc").click(function(){this})这里的this指的就是#abc这个dom对象。each在上面已经讲解过了。在此插件方法extend中定义了两个方法分别是check和uncheck。
比如：
$("input[@type=checkbox]").check()表示将input标签的type属性设置为选中，其中，中括号中的内容表示如果input的type属性是checkbox的话，再设置为选中。
$("input[@type=radio]").uncheck()表示将input标签的type属性设置为未选中，其中，中括号中的内容表示如果input的type属性是radio的话，再设置为未选中。
多库共存：
有的时候我们可能在同一个页面内调用多种js库，比如即使用jQuery类库又使用ProToType类库，按理说没有问题，但是他们都用到了“$”符号，因此为了避免与其他库产生冲突，可以使用以下两种方法将其区别开来。
jQuery.noConflict()
使用方法，var j=noConflict();表示j在jQuery中将代替"$"符号。
jQuery.noConflict(true)
使用方法，dom.query = jQuery.noConflict(true)则表示将$和jQuery的控制权都交还给原来的库。比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。因此用的时候一定要考虑清楚。dom.query将代表"$"符号。

基本对象获取
向jQuery进军中的战友们，通过前面两章的学习，大家肯定对jQuery中的“$”函数不明不白，没关系，只要大家挺得住，咱们定能得到最终胜利。言归正传，通过下面几章的学习，一定能明白“$”函数，trust me ！
现在大家想一下在CSS中有哪几种选择器？
通用选择器：*
id选择器：#element
类选择器：.element
标签选择器：element
jQuery对象的获取也是如此，方法如下：
$("*")
表示获取所有的对象
$("#element")
等同于document.getElementById("element");
$(".abc")
表示获得HTML中所有使用了abc这个样式的元素
$("div")
表示获得HTML中所有的div元素

以下两种是层级对象的获取
$("#a,.b,p")
表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素
$("#a .b p")
表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素
层级对象获取
层级对象的获取
$("Element1 Element2 Element3 Element...")
css定义层级元素方式一样,只需要不同的元素之间有空格表示，前者父级后者子级以此类推。
$("div > input")
表示获取div下所有的input。
如果记不清到底是用“>”符号还是 “<”符号，可以这么理解。如果你选择的元素有父子关系，那么是父亲辈儿长还是儿子辈儿长？当然是父亲辈儿长喽，因此使用“>”，那么选择的时候就是：$("父亲 > 儿子 > ...")
$("div + p")
表示匹配紧跟在 div 元素后的 p 一个元素
这个可以这么记忆，既然紧跟着，当然就得使用“+”紧密的连在一起。
$("div ~ p")
表示匹配跟在 div 元素后的所有 p 元素

简单对象获取
$("Element:first")
获得在HTML页面中某种元素的第一个，比如$("div:first")表示获得第一个div
$("Element:last")
获得在HTML页面中某种元素的最后一个，比如$("div:last")表示获得最后一个div
$("Element:not(selector)")
去除所有与给定选择器匹配的元素，比如$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even")
获得偶数行，从0开始计数
$("Element:odd")
获得奇数行，从0开始计数
$("Element:eq(index)")
匹配一个给定索引值的元素，从0开始计数，比如$("div:eq(3)")表示获得HTML中的第4个div
$("Element:gt(index)")
匹配所有大于给定索引值的元素，从0开始计数，比如$("p:gt(3)")表示获得比索引3也就是第4个p开始，之【后】所有的p
$("Element:lt(index)")
匹配所有小于给定索引值的元素，从0开始计数，比如$("p:lt(3)")表示获得比索引3也就是第3个p开始，之【前】所有的p
注：如果上面两个方法的大于号小于号记不清，就想想HTML标记中的[& gt ;]和[& lt ;](中括号中内容去掉空格)就行了哈。
$(":header")
匹配h1,h2,h3...标题之类的元素
$("Element:animated")
匹配所有没有在执行动画效果中的元素（关于动画效果，在后面会讲到，在此只是一提，不必要在意，看不懂不要紧）

【内容获取】
$("Element:contains(text)")
匹配元素对象中的文本是否包含某个字母或者某个字符串（符串或串(String)是由零个或多个字符组成的有限序列。）

$("Element:empty")
获得对象元素不包含文本或子元素

$("Element:parent")
以上面相反，获得对象元素包含文本或子元素

$("Element:has(selector)")
匹配含有某个元素是否包含某个元素比如$("p:has(span)")表示所有包含span元素的p元素
【可见性】
$("Element:hidden")
匹配所有不可见元素，包括display:none以及input的属性是hidden都可以匹配得到。

$("Element:visible")
与上面相反，匹配所有可见元素

对象获取进阶
$("Element[id]")
获得所有带有ID属性的元素
$("Element[attribute=KwooShung]")
获得所有某个属性为KwooShung的元素
$("Element[attribute!=KwooShung]")
获得所有某个属性不为KwooShung的元素，我想如果学过C#和java的人都明白"!"在程序中表示非
$("Element[attribute^=Kwoo]")
获得所有某个属性值是以Kwoo开头的元素
$("Element[attribute$=Kwoo]")
获得所有某个属性值是以Kwoo结尾的元素
$("Element[attribute*=Kwoo]")
获得所有某个属性值包含Kwoo的元素
$("Element[selector1][selector2][....]")
符合属性选择器，比如$("input[id][name][value=kwooshung]")表示获得带有ID、Name以及value是KwooShung的input元素。

子元素的获取
到目前为止，我写的jQuery教程已经到了第八章了，不知大家现在对jQuery是否还比较陌生，如果你还很陌生的话，没关系。css学习网也在教程的后面留下了作业或案例，希望朋友们能认真的完成作业认真的看案例。我相信大家一定能好好的驾驭这匹烈马的。
本节课相对来说比较简单，就四个函数。
$("Element:nth-child(index)")
选择父级下的第N个子级元素，索引从1开始，而eq函数（eq函数会在后面学习到）从0开始。
┣━:nth-child(even)偶数
┣━:nth-child(odd)奇数
┣━:nth-child(3n)表达式
┣━:nth-child(2)索引
┣━:nth-child(3n+1)表达式
┗━:nth-child(3n+2)表达式
$("Element:first-child")
匹配父级下的第一个子级元素
$("Element:last-child")
匹配父级下的最后一个子级元素
$("Element:only-child")
匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt

表单对象的获取

$(:input)
只能匹配Input元素类型为input button select textarea
$(:text)
匹配所有的单行文本框
$(:password)
匹配所有的密码框
$(:radio)
匹配所有的单选按钮
$(:checkbox)
匹配所有的复选框
$(:submit)
匹配所有的提交按钮
$(:image)
匹配所有的图像域，例如<input type="image" />
$(:reset)
匹配所有的重置按钮
$(:button)
匹配所有的按钮
$(:file)
匹配所有的文件上传域
$(:hidden)
匹配所有的不可见元素或者type为hidden的元素
$(:enabled)
匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)
匹配所有的不可用input元素，作用与上相反
$(:checked)
匹配所有选中的复选框元素
$(:selected)
匹配所有的下拉列表

元素属性的设置与移除

$("Element").attr(name)
取得第一个匹配元素的属性值，比如$("img").attr("src")
$("Element").attr({key:value,key,value,....})
表示为某一个元素一次性设置多个属性
$("Element").attr(key,value)
为某一个元素设置属性
$("Element").attr(key,function)
为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)
移除某一个属性