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的checkbox下拉框插件代码
风雲初次编写插件，望高手指点，基于jquery的checkbox下拉框插件
2010-06-06
分享8款优秀的 jQuery 加载动画和进度条插件
加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快，但是我们的网站越来越复杂，同时用户对网站的使用体验的要求也越来越高
2012-10-10
基于jquery的大众点评，分类导航实现代码
基于jquery的大众点评，分类导航实现代码，需要的朋友可以参考下。
2011-08-08
JQuery省市联动效果实现过程详解
这篇文章主要介绍了JQuery省市联动效果实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
jQuery查找dom的几种方法效率详解
这篇文章主要记录了在近期开发中遇到的jQuery dom基本查找方法，然后将各种方法性能做了一个比较，目的是希望自己在以后dom元素查找时，使用最优的方案。文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-05-05
jQuery实用函数用法总结
这篇文章主要介绍了jQuery实用函数用法总结,汇总了jQuery常用的函数及相关技巧,需要的朋友可以参考下
2014-08-08
jQuery实现3D文字特效的方法
这篇文章主要介绍了jQuery实现3D文字特效的方法,通过鼠标与css样式来实现文字特效的技巧,需要的朋友可以参考下
2015-03-03
jQuery中insertBefore()方法用法实例
这篇文章主要介绍了jQuery中insertBefore()方法用法,实例分析了insertBefore()方法的功能、定义及把匹配的元素插入到另一个指定的元素集合前面的使用技巧,需要的朋友可以参考下
2015-01-01
基于JQuery的浮动DIV显示提示信息并自动隐藏
浮动DIV定时显示提示信息,如操作成功, 失败等,需要的朋友可以参考下。
2011-02-02
浅析jquery数组删除指定元素的方法:grep()
下面小编就为大家带来一篇浅析jquery数组删除指定元素的方法:grep()。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05