软件开发培训班 >> 编程开发 >> JavaScript

jQuery与javascript对照学习获取父子前后元素实现代码

<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>

技术文章快速查找

Jquery 最近浏览过的商品的功能实现代码

js数字转换为float,取N位小数

没有form表单情况下敲回车键提交表单的js代码

JavaScript动态创建div属性和样式示例代码

jquery多浏览器捕捉回车事件代码

基于jQuery实现点击同时更改两个iframe的网址

初窥JQuery(二)事件机制(2)

JavaScript 判断判断某个对象是Object还是一个Array

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

jQuery与javascript对照学习 获取父子前后元素 实现代码

jQuery与javascript对照学习获取父子前后元素实现代码