- 浏览: 260380 次
- 性别:
- 来自: 北京
最新评论
-
haixin3036:
jQuery是一套跨浏览器的JavaScript库,简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang:
非常感谢分享,正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369:
不错。。。
移动端webapp开发必备知识
下面是一个用jQuery编写选择器的模版文件,你需要的全都在这里:
$.extend($.expr[':'], { selectorName: function(el, i, m) { return true/false; }, selectorName2: function(el, i, m) { return true/false; } });
下面是两种调用一个选择器的方法,一种带有一个参数而另一种则没有参数:
i与m参数可以是缺省的,当传入一个集合,他们只是用来匹配一个参数的当前元素的索引。当你传入一个参数时,匹配器便开始工作了,这是一个正则表达式匹配器,返回类似如下信息:
[":width(>100)", "width", "", ">100"]
你会经常使用到m[3]的值,至此,便由你决定如何处理传入的参数。下面给出了一系列的例子。
我们可以与jQuery已有的选择器一起进行链式的调用,这是相当有意思的:
$("#container :isBold:even"); $("#container :leftOf(#element):width(>100):height(>100)");
以下列出12个自定义的选择器实例,你可以在这些选择器中放入任何内容,只要你根据当前元素是否通过选择器测试返回true或者false值即可。
1、:loaded
选择所有加载完的图片:
$.extend($.expr[':'], { loaded: function(el) { return $(el).data('loaded'); } } $('img').load(function(){ $(this).data('loaded', true); }); $('img:loaded');
2、:width
选择所有宽度大于或小于指定值的元素:
$.extend($.expr[':'], { width: function(el, i, m) { if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;} return m[3].substr(0,1) === '>' ? $(el).width() > m[3].substr(1) : $(el).width() < m[3].substr(1); } } $('#container :width(>100)');
3、:height
选择所有高度大于或小于指定值的元素:
$.extend($.expr[':'], { height: function(el, i, m) { if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;} return m[3].substr(0,1) === '>' ? $(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1); } } $('#container :height(<100)');
4、:leftOf
选择在指定元素左边的所有元素
$.extend($.expr[':'], { leftOf: function(el, i, m) { var oe = $(el).offset(); var om = $(m[3]).offset(); return oe.left + $(el).width() < om.left; } } $('#container :leftOf(#element)');
5、:rightOf
选择在指定元素右边的所有元素
$.extend($.expr[':'], { rightOf: function(el, i, m) { var oe = $(el).offset(); var om = $(m[3]).offset(); return oe.left > om.left + $(m[3]).width(); } } $('#container :rightOf(#element)');
6、:external
选择所有带外站链接的锚点标签
$.extend($.expr[':'], { external: function(el) { if(!el.href) {return false;} return el.hostname && el.hostname !== window.location.hostname; } } $('#container :external');
7、:target
选择指定target属性的锚点标签
$.extend($.expr[':'], { target: function(el, i, m) { if(!m[3]) {return false;} return (m[3] === '_self' && ($(el).attr('target') == '' || !el.target)) || (m[3] === $(el).attr('target')); } } $('#container :target(_self)');
8、:inView
选取位于可视窗口内的所有元素
$.extend($.expr[':'], { inView: function(el) { var offset = $(el).offset(); return !( (offset.top > $(window).height() + $(document).scrollTop()) || (offset.top + $(el).height() < $(document).scrollTop()) || (offset.left > $(window).width() + $(document).scrollLeft()) || (offset.left + $(el).width() < $(document).scrollLeft()) ) } } $('#container :inView');
9、:largerThan
选取比指定元素大的所有元素
$.extend($.expr[':'], { largerThan: function(el, i, m) { if(!m[3]) {return false;} return $(el).width() * $(el).height() > $(m[3]).width() * $(m[3]).height(); } } $('#container :largerThan(#element)');
10、:isBold
选择font-weight为700的所有元素、
$.extend($.expr[':'], { isBold: function(el) { return $(el).css("fontWeight") === '700'; } } $('#container :isBold');
11、:color
选择颜色为指定RGB值的所有元素
$.extend($.expr[':'], { color: function(el, i, m) { if(!m[3]) {return false;} return $(el).css('color') === m[3]; } } $("#container :color(rgb(255, 0, 0))");
12、:hasId
选择存在id属性的所有元素
$.extend($.expr[':'], { hasId: function(el) { return $(el).attr('id') !== undefined && $(el).attr('id') !== ''; } } $("#container :hasId");
- wSelectors.rar (833 Bytes)
- 下载次数: 0
发表评论
-
Javascript类定义语法,私有成员、受保护成员、静态成员等
2014-05-29 10:59 725JS只是一门支持面向对象编程的语言,通过OO可以让我们的 ... -
Javascript 继承模式
2014-05-29 10:59 722在面向对象的JavaScript开发中使用继承可以提高代码 ... -
用JavaScript实现自己的DOM选择器
2014-05-28 14:27 680解释器模式(Interpreter):定义一种语法格式,通过 ... -
Javsript代码的注释和模块定义
2014-05-28 14:21 835可以这样定义模块: (function(ns, re ... -
在JavaScript中应用单例模式管理命名空间
2014-05-28 10:56 801单例模式确保一个类在整个应用程序中只有一个是实例对象,在J ... -
移动WEB开发中媒体查询里的width, device-width, resolution
2014-05-28 10:14 1009/*1、width: viewport的宽度,css像素,三星 ... -
前端性能优化
2014-05-27 15:16 8851. 请减少HTTP请求 基本原理: ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1214看了jquery的源码,jquery用的选择器的引擎是siz ... -
jQuery 1.8,1.9和2.0分别带来的新特性
2014-05-26 14:17 1335jQuery 1.8 可定制 在jQuery ... -
jquery点击div之外的地方div本身消失
2014-05-15 12:22 881<!DOCTYPE html PUBLIC " ... -
jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本
2014-05-14 16:31 652这个插件可以用来检测和恢复在jQuery1.9版本中已删除或 ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 637Codiqa,https://codiqa.com 简单试用 ... -
Android手机版浏览器DIV滚动条失效解决方案
2014-05-08 11:09 1214除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支 ... -
解耦HTML、CSS和JavaScript
2014-02-14 11:32 626当前在互联网上, ... -
使用console.table()调试javascript
2014-01-20 15:42 612或许你已经习惯了console.log()来调试js,非常好 ... -
JS对象复制
2014-01-17 16:18 606在JavaScript很多人复制 ... -
jQuery反向排序(倒序)子对象
2013-12-26 10:53 2281<!DOCTYPE html><html&g ... -
js object写法 参数传递jquery对象
2013-12-24 11:21 926<!DOCTYPE HTML PUBLIC &quo ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-12-24 11:08 588一、思路 1、单击元素时,使元素可以编辑,并获得焦点 2 ... -
ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性
2013-12-19 15:47 806IE6-IE8浏览器,按照现代浏览器的API来工作就好了!也 ...
相关推荐
NULL 博文链接:https://hoodbc.iteye.com/blog/1107779
JQUERY的选择器:简洁的语法和跨平台的兼容性,极大的简化了javascript开发人员遍历HTML文档、操作DOM、处理事伯、执行动画操作AJAX的操作。 屏蔽浏览器差异,对DOM的操作提供了方便的扩展,易用的事件处理API和动画...
jQuery基于citypicker四级联动菜单选择器代码,数据异步获取,动态赋值。扩展需求可修改源码。
2.1 jQuery选择器是什么 2.2 jQuery选择器的优势 2.3 jQuery选择器 2.3.1 基本选择器 2.3.2 层次选择器 2.3.3 过滤选择器 2.3.4 表单选择器 2.4 应用jQuery改写示例 2.5 选择器中的一些注意事项 2.5.1 选择器中含有...
2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容过滤选择器/25 2.2.5 可见性过滤选择器/27 2.2.6 属性过滤选择器/28 2.2.7 子元素过滤选择器/30 ...
使用jquery需要导入的jar包,方便学习查阅,jquery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的...具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
我们使用热门的jquery进行设计,同时我们选择效果比较优秀的...这里介绍行业、职位和地区选择器,下载的Demo包含这三个选择器。 行业选择器:无关联,调用语句为Boxy.industry(value, callback, options),参数value为已
使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤...
自己学习jQuery过程中用jQuery强大的DOM选择器和方法扩展的JS代码,里面带了详细说明和demo,学习jQuery半个月,就这点成果,共享一下,呵呵
刚学完jQuery选择器,闲来无事,照着书上的范例敲了一段代码(HTML和CSS抄自书上),自己试着写了写jQuery的代码,感觉相当轻便啊。 显示效果: 功能说明: 1、点击上边的图书分类一栏,实现向下的伸缩扩展,...
jQuery是一个快速、简洁的JavaScript...具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 [1]
jQuery扩展返回两个选择器之间的冲突。 处理填充,边距,边界,并可以确定重叠或外部部分。 返回JQuery“重叠”对象。 需要:jquery1.8.3 +,示例还需要:jqueryui1.9.2 +试试看:...
这个插件向 jQuery 选择器 API 添加了一个新的选择器,用于按列索引检索表格单元格。 它透明地支持具有列和行跨度的表格,无论您的表格多么复杂。 语法简单且与其他 jQuery 选择器相似,因此学习曲线非常小。 以下...
具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 JQuery_1.5API中文参考手册
JQuery核心用法、快速查询文档、简单实用...具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery是一个快速、简洁的JavaScript框架...具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。 jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript...
其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName...
jQuery UI实际上是jQuery插件,专指由jQuery官方维护的UI方向的插件 jQuery UI 与 jquery 的主要区别是: (1) jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 (2) jQuery UI则是在jQuery的...