jquery中如何获取当前DOM对象里的子元素

jquery中如何获取当前DOM对象里的子元素,第1张

jquery中获取当前dom元素的子元素的方法有很多,常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素,find()方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

工具原料:jQuery、编辑器、浏览器

一、使用children()方法获得子元素

1、使用该方法获取子元素并设置子元素的字体为蓝色,代码如下:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="/jquery/jqueryjs"></script>

<style>

  body { font-size:16px; font-weight:bolder; }

  p { margin:5px 0; }

</style>

</head>

<body>

  <div>

    <span>Hello</span>

    <p class="selected">Hello Again</p>

    <div class="selected">And Again</div>

    <p>And One Last Time</p>

  </div>

<script>$("div")children("selected")css("color", "blue");</script>

</body>

</html>

2、运行的效果如下图:

二、使用find()方法获取子元素

1、使用fand()方法获取子元素并且进行选择器的筛选,代码如下图:

<!DOCTYPE html>

<html>

<head>

  <script type="text/javascript" src="/jquery/jqueryjs"></script>

</head>

<body>

  <p><span>Hello</span>, how are you</p>

  <p>Me I'm <span>good</span></p>

<script>

  $("p")find("span")css('color','red');

</script>

</body>

</html>

2、运行的结果如下图:

每个Img规定一个ID;

<img src="1jpg" id="img1">

<img src="1jpg" id="img2">

<img src="1jpg" id="img3">

点击一个按钮获取src

<input type="button" value="获取src" onclick="aa()">

js中:

function aa(){

var img1 = documentgetElementById("img1")src;

//别的一样获取。这样获取的src是绝对路径

}

或者这样:

function aa(){

var img1 = documentgetElementById("img1")getAttribute("src");

//跟上面效果一样。

}

跪求高手解决啊:现在我的一个项目:需要链接一个别人的页面(不在同一个域),我把这个页面装到我的Iframe里面,但是别人的这个页面是:采用post提交的,我想在我的项目里面监视他的提交,来截取这个post的数据,不通过监视也行,只要获取这个数据就行(jquery的跨域请求只能获取:get方式提交的数据啊,post不行),我把分全部奉上了啊,,

先给你看下面两段代码:

<div id="div1">test!</div>

<script>

   consolelog(documentgetElementById("div1"));  //这个能够获得值

</script><script>

   consolelog(documentgetElementById("div1"));  //这个不能获得值!

</script>

<div id="div1">test!</div>

看出原因没有?当js代码是先于html运行时,是获取不到DOM元素的!因为这时候该DOM元素尚未加载到内存,相当于不存在!

要想实现js代码放到任何位置都能获得DOM元素,就要保证代码在页面完全加载完毕后才开始运行,比如:

<script>

   windowonload=function(){  //网页完全加载完毕才会触发这个事件

      consolelog(documentgetElementById("div1")); //这时候就能获得了

   }

</script>

<div id="div1">test!</div>

利用javascript

写一个在页面点击加减按钮实现数字的累加。

简略的html大概如此。看得懂就好不要在意这些细节啊

<input

type="button"

value="+"

onclick="jia(this)"

/>

<label

class="num">0</label>

<input

type="button"

value="-"

onclick="jian(this)"

/>

样子是这样的

javascript

代码如下

<script

type="text/javascript">

function

jia(a)

{

var

nextnode

=

anextElementSibling;//获取下一个节点

alert(nextnodeinnerHTML);

var

a

=

parseInt(nextnodeinnerHTML)

a

+=

1;

nextnodeinnerHTML

=

a;

}

function

jian(a)

{

var

previousnode

=

apreviousElementSibling;

var

a

=

parseInt(previousnodeinnerHTML)

a

-=

1;

a

=

a

>

0

a

:

0;

previousnodeinnerHTML

=

a;

}

</script>

解释一下:

function

jian(a)和

function

jia(a)就是当前点击的对象了。在onclick事件接的方法里加了this;

-

nextElementSibling

获取当前节点的下一个节点(获得下一个兄弟节点)

-

previousElementSibling

获取当前节点的上一个节点

注意:

IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie

中用nextSibling便可读取到的下一个节点元素,在FF中就需要这样写:nextElementSibling了。

上面的解释的意思的使用

nextElementSibling

和previousElementSibling

获得下一个兄弟节点和上一个兄弟节点,可以去掉换行,空格上面之类的,直接找到我们标签元素。但是下面的两个

nextSibling

previousSibling

也是得下一个兄弟节点和上一个兄弟节点的,只是在IE中好用

--------------------关键字解释

parseInt

转化功能。

a

=

a

>

0

a

:

0;----三元表达式。

以上就是关于jquery中如何获取当前DOM对象里的子元素全部的内容,包括:jquery中如何获取当前DOM对象里的子元素、JS如何取得当前对象的属性、js怎么获取iframe页面中的dom元素等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存