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

更新时间：2009年10月13日 20:54:58 作者：

jQuery与javascript对照学习(获取父子前后元素) ，需要的朋友可以参考下，看看与js有什么不同。

<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需再刷新一下页面才能执行]

您可能感兴趣的文章:

JQuery触发事件例如click
JQuery触发事件的通常写法，比如click事件的触发如下所示，感兴趣的朋友可以参考下
2013-09-09
jquery 防止表单重复提交代码
网站中防止表单重复提交是一个比较普遍的需求，先看原理实现方法也有很多。
2010-01-01
jQuery动画效果相关方法实例分析
这篇文章主要介绍了jQuery动画效果相关方法,结合实例形式较为详细的分析了jQuery实现动画效果所用到的常见方法与相关注意事项,需要的朋友可以参考下
2015-12-12
jQuery.each()用法分享
昨天写了个小插件，用到这个方法，不太明白$.each()这个方法，今天查了下手册，学习一下
2012-07-07
jQuery插件slicebox实现3D动画图片轮播切换特效
Slicebox是一款效果非常华丽的jquery和css3 3d幻灯片插件。Slicebox幻灯片插件能够将图片切片，然后做3d旋转。Slicebox幻灯片插件共有4种效果，视觉冲击感非常强。
2015-04-04
Tab页界面，用jQuery及Ajax技术实现
从桌面开发的时代开始，Tab页就是一个优异的界面布局形式，兼有菜单的样式和充分复用有限的界面的优点。
2009-09-09
jQuery中slideUp 和 slideDown 的点击事件
这篇文章主要介绍了jQuery中slideUp 和 slideDown 的点击事件的相关资料,需要的朋友可以参考下
2015-02-02
页面元素绑定jquery toggle后元素隐藏的解决方法
元素绑定jquery中的toggle后，元素隐藏，开始的时候我怎么也没想到是这里有问题，我找了半天才发现是因为绑定了toggle方法
2014-03-03
$.format,jquery.format 使用说明
$.format,jquery.format 使用说明，需要的朋友可以参考下。
2011-07-07
easyui简介_动力节点Java学院整理
这篇文章主要介绍了easyui简介，详细的介绍了什么是easyui和easyui的用法，有兴趣的可以了解一下
2017-07-07