jQuery与javascript对照学习 获取父子前后元素 实现代码
作者:bea
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery与javascript对照学习(获取父子前后元素)</title> <style type="text/css"> .c1{background-color:green;padding:20px;} .c2{background-color:red;padding:20px;} .c1
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery与javascript对照学习(获取父子前后元素)</title>
<style type="text/css">
.c1{background-color:green;padding:20px;}
.c2{background-color:red;padding:20px;}
.c1 div{background-color:gray;}
</style>
<script type="text/javascript" src="style/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function fNext(obj){//许多时候需要元素之间没有间隙才能取到
//alert(obj.nextSibling.id);
alert(jQuery(obj).next().attr("id"));//传递this,通过$(obj)转化为jQuery对象
}
function fPrev(obj){
//alert(obj.previousSibling.id);
alert(jQuery(obj).prev().attr("id"));
}
function fParent(obj){
//alert(obj.parentNode.className);
//alert(jQuery(obj).parent().attr("class"));
jQuery(obj).parent().removeClass("c1").addClass("c2")
alert(jQuery(obj).parent().attr("className"));//取得className,当成属性来取
}
function fChild(obj){
//var childs = obj.childNodes;
var childs = jQuery(obj).children();
for(i=0;i<childs.length;i++){
alert(childs[i].id);
}
//jQuery的each遍历
}
</script>
</head>
<body>
<div class="c1" onclick="fChild(this);">
<div id="first" onclick="fNext(this);">first</div>
<div id="second" onclick="fPrev(this);">second</div>
<div id="third" onclick="fParent(this);">parent</div>
</div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript读取中文cookie时的乱码问题的解决方法
- jQuery 标题的自动翻转实现代码
- JavaScript 替换Html标签实现代码
- JavaScript null和undefined区别分析
- JavaScript iframe的相互操作浅析
- jQuery入门 构造函数
- 使用jQuery简化Ajax开发 Ajax开发入门
- jQuery技巧大放送 学习jquery的朋友可以看下
- Jquery 学习笔记(二)
- ie与firefox下的event使用说明与详细区别
- JS+XML 省份和城市之间的联动实现代码
- jquery 常用操作整理 基础入门篇
- 一些技巧性实用js代码小结
- Jquery 学习笔记(一)
- extjs 学习笔记(二) Ext.Element类
- extjs 学习笔记(一) 一些基础知识
- javascript 变速加数功能实现代码
- JQuery 绑定事件时传递参数的实现方法
- 通用javascript脚本函数库 方便开发