jQuery 选择器项目实例分析及实现代码


Posted in Javascript onDecember 28, 2012

首先废话一句,jQuery选择器真心很强大!
在项目中遇到这么一个问题easyui的问题
jQuery 选择器项目实例分析及实现代码 
如图所示,当前页面显示的是“原始报文查询”的页面,当时左侧导航栏却选中的是“重发报文查询”。如何让右侧的菜单和左侧的导航实现联动即:左侧点击“原始报文查询”,那么右侧的“补发运抵报文”展开,并选中“原始报文查询”,“后台管理”关闭?
实现方式如下
1、右侧的“原始报文查询”等用到的是easyui的tabs控件,查看api知道,tabs有个onSelect方法,只要在onSelect方法中写入自己想做的事情就可以了。
2、触发事件是找到了,那么具体怎么实现想要的效果呢?
jQuery 选择器项目实例分析及实现代码  
左侧导航栏代码结果如上图:最外层是easyui的accordion控件,accordion里有很多pannel,一个pannel对应图1中的一个父目录和其下面的子目录,比如“补发运运抵报告”这一模块。panel里有两个div,
第一个div是父目录,第二个div里包含了很多子目录。
首先实现选中右侧的tabs时,左侧对应的导航条被选中。先取出所有子目录的选中状态,然后让当前子目录被选中。

$('#idaccordion li div').removeClass("selected"); 
$('#idaccordion span:contains("'+title+'")').parent().parent().addClass("selected");

3、问题是该选中的是选中了,但选中的子菜单的父菜单并没有展开。easyui中的panel有个expand方法,但是怎样知道哪个panel(既父菜单)应该展开呢?如图2所示:一直选中了“原始报文查询”,现在要让补发运抵报告这个父菜单展开。“原始报文查询“所在的元素span的祖先节点的兄弟节点的第一个子节点才是”补发运抵报告“所在的节点。
if( $('#idaccordion span:contains("'+title+'")').length > 0 ){ 
var accordionTitle = $('#idaccordion span:contains("'+title+'")').closest('.panel-body').prev().find('.panel-title').text(); 
var p = $('#idaccordion').accordion('getPanel',accordionTitle); 
p.panel('expand'); 
}

首先在id为idaccordion的子孙节点中查找包含文本为title的span(即<span class="icon icon-users"> 原始报文查询</span>),然后找到最近的class为panel-body的祖先节点,然后找到这个节点的前一个兄弟节点(即<div class="panel-header accordion-header accordion-header-selected" style="height: 15px; width: 161px;">),然后找到这个节点的类为panel-title的子节点,就获取到了这个节点的文本,即”补发运抵报告“。
整体代码如下
//当右侧选择某个tab时,左边对应的菜单也被选中,且这个菜单所在的accordion展开,其他的accordion关闭 
$('#tabs').tabs({ 
onSelect:function(title){ 
$('#idaccordion li div').removeClass("selected"); 
$('#idaccordion span:contains("'+title+'")').parent().parent().addClass("selected"); 
if( $('#idaccordion span:contains("'+title+'")').length > 0 ){ 
var accordionTitle = $('#idaccordion span:contains("'+title+'")').closest('.panel-body').prev().find('.panel-title').text(); 
var p = $('#idaccordion').accordion('getPanel',accordionTitle); 
p.panel('expand'); 
} 
} 
});

平时用的比较少的是closest方法,该方法可以获取某个元素最近的父元素,还有一个类似的方法parents,两者的区别如下
parents([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
代码如下
$('#items').parents('.parent1'); 
closest([expr])

closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
$('#items1').closest('.parent1');

closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。
closest对于处理事件委派非常有用。
Javascript 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
js有关元素内容操作小结
Dec 20 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
ES6 fetch函数与后台交互实现
Nov 14 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 #Javascript
JS声明变量背后的编译原理剖析
Dec 28 #Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 #Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 #Javascript
web性能优化之javascript性能调优
Dec 28 #Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 #Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 #Javascript
You might like
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python文件写入write()的操作
2019/05/14 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
struct与class的区别
2014/02/03 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
秋季运动会稿件
2014/01/30 职场文书
授权委托书格式
2014/07/31 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
离婚协议书样本
2015/01/26 职场文书
升学宴来宾致辞
2015/07/27 职场文书
客户答谢会致辞
2015/07/30 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python