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元素等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)