怎么通过JQuery 获取 该对象 的 所有 属性和值

怎么通过JQuery 获取 该对象 的 所有 属性和值,第1张

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)//移除某一个属性

1documentgetElementById("id名")

通过id属性的值查找,返回满足条件的第一个元素

2documentgetElementsByTagName("标签名")

通过标签名来获取页面中的元素。返回的是多个标签。

并不是真正的数组,但是我们可以想 *** 作数组一样 *** 作他(类数组)

3documentgetElementsByClassName("class名")

通过类名来获取页面中的元素。返回的也是多个标签

4documentgetElementsByName("表单元素name")

通过表单的name属性的值来获取元素

5documentquerySelector("div p a")

匹配指定 CSS 选择器的 第一个元素 。 如果没有找到,返回 null。

6documentquerySelectorAll("div")

获取所有满足条件的元素

7三个特殊节点

8childNodes 所有节点。包括各种节点

9fristChild 获取一个元素的第一个子节点

10lastChild 获取一个元素的最后一个子节点

11parentNode 获取一个元素的父节点

12previousSibling 获取一个元素的上一个兄弟节点

13nextSibling 获取一个元素的下一个节点

14children 只获取子元素

15firstElementChild 获取第一个元素子节点

16lastElementChild 获取最后一个元素子节点

17nextElementsibling 获取下一个元素兄弟节点

18previousElementsibling 获取上一个元素兄弟节点

19parentElement 获取父元素节点

20childElementCount 获取子元素的个数

1documentcreateElement(元素名) 创建一个元素节点

2documentcreateTextNode("这是新创建的一段文本") 创建一个文本节点

3appendChild() 添加元素到容器中

4insertBefore() 在一个节点前插入新节点

5removeChild() 删除子节点

6replaceChild() 替换子节点

7cloneNode() 克隆节点 传入true则复制所有节点

8setAttribute() 给元素设置属性

参数1:属性的名

参数2:属性的值

如果属性不存在,则添加;存在,则修改

9romveAttribute() 删除属性

参数:要删除的属性名

10getAttribute() 获取属性的值

参数:属性名

11访问 元素 id 名

boxid

12访问 元素 class 名

boxclassName

boxclassList 类数组

13获取标签名

boxtagName

boxnodeName

14innerHTML属性

innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。

值为为文本

15innerText属性

16outerHTML

跟innerHTML相比多包括了一个它自身

1访问行内(内联)样式表

2内部样式表和外部样式表的获取

getComputedStyle()

参数1:表示样式表所属的元素

参数2:如果获取的是伪元素的样式,传入伪元素,正常元素传入null 或不传

兼容性问题

3获取元素实际的宽高

offsetWidth 宽

offsetHeight 高

4获取元素参考父容器的left 和 top

offsetLeft 距离左部

offsetTop 距离上部

offsetParent 查找这个元素的参照父容器

<div id="d1">

<div>a</div>

<div>b</div>

<div>c</div>

</div>

var d = documentgetElementById("d1");

var divs = dchildNodes;

//或者 var divs=dgetElementsByTagName("div");

//区别在childNodes是获取全部子节点

//getElementsByTagName是获取这个节点内的所有div节点,不管是子节点或孙节点

for(var i=0;i<divslength;i++)

{

alert(divs[i]innerText);

}

这样,不过要先获取最外面那个div的引用

首先你要搞清楚一个概念,iframe中的是“另一个网页”,要想获取其中的DOM元素,就涉及一个跨域的问题,如果当前网页与“另一个网页”是同域(通俗来说就是同一个域名下的不同网页),那么你可以这样来获取(比如说获取body):

documentgetElementsByTagName("iframe")[0]contentDocumentbody

而如果是不同域,比如你在自己的网页用iframe来嵌套百度的首页,那就无法通过上述方法获取了,浏览器会自动拦截,因为这违反了跨域调用的规则(技术上是没问题的,只是违规了),这时候就要通过一些曲折的“民间偏方”来达到目的了,比如通过自己的后台去获取对方网页的内容(这个不会跨域),再发回给前端,具体你自己搜索,这里三言两语说不明白的。

1、首先需要引入jquery脚本文件。

2、然后添加一些简单的html,这里主要的就是在一个div里添加了二个a链接,div和a链接就各自有id属性。还有一个 *** 作的按钮,加上了onclick事件的。

3、然后需要添加对应的点击事件函数。

4、在函数中,先利用jquery的选择器方法来获取到a链接,$("#my_div a")这个代码就是指在id为my_div下的所有a链接。

5、获取到链接后,就用一个for循环来得到div里所有链接的id,主要是通过jquery的attr方法来得到每个链接控件的id属性。得到后,将其保存进数组里。

6、然后通过alert方法来d出显示所有链接的id。

7、运行页面,可以看到现在有二个链接,点击一下按钮。

8、点击后,会d出一个alert窗口,这里显示出了二个链接的id属性,对比代码里的值,获取的结果是正确的。

下面例子通过documentgetElementsByClassName("class1")获取所有同一class的元素,使用for循环把取得的div元素的值存入数组arr中,完成的代码如下:

运行结果,打印数组如下:

扩展资料:

js或jQuery获取html元素的值的常用方法:

例如:<div id="aa">值</div>

js写法:

alert(documentgetElementById('aa')innerHTML);

jQuery写法:

alert($('#aa')html());

说明如下:

innerHTML是取元素的内部html代码,此例中即div内部的所有html代码。

html()方法作用也是取dom节点的内部html内容,是jQuery中的函数方法。

以上就是关于怎么通过JQuery 获取 该对象 的 所有 属性和值全部的内容,包括:怎么通过JQuery 获取 该对象 的 所有 属性和值、JS DOM对象、在一个div里有N多子div,是动态循环进去的,我想取第N个div,子div都没有ID的,如何取等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9746707.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存