一些有用的JavaScript和jQuery的片段分享


Posted in Javascript onAugust 23, 2011

为指定元素添加 CSS 类:

通过添加 CSS 类改变元素的外观和感觉,非常干净的方法,而不是添加内联样式。使用 jQuery,这很容易做到:

$('#myelement').addClass('myclass');

从指定元素移除 CSS 类:

你可能觉得添加 CSS 类的操作已经灰常牛逼,但我们还需要知道如何移除不需要的 CSS 类。下面的代码能做到这一点:

$('#myelement').removeClass('myclass');

检测指定元素是否具有某个 CSS 类:

如果应用程序或网站经常涉及对指定元素添加或移除 CSS 类,它将变得非常有用,能够检测元素是否具有某个 CSS 类。

$(id).hasClass(class)

使用 jQuery 切换 CSS:

正如我们所看到的,使用 jQuery 添加或移除元素的 CSS 样式非常简单方便。但是如果你要完全移除整个 CSS 文件,并附加新样式文件呢(例如常见的页面颜色切换等效果)?事实上这相当简单,如下面的例子所示:

$('link[media='screen']').attr('href', 'Alternative.css');

来源:http://addyosmani.com/blog/50-jquery-snippets-for-developers/

向某个元素追加 HTML 代码:

当你需要向某个元素追加一些 HTML 内容时,append() 方法省时省力:

$('#lal').append('sometext');

检测某个元素是否存在:

当使用 JavaScript 进行工作时,我们经常需要检查某个元素是否存在。使用 jQuery 和 length 长度属性,它是非常简单的事:如果长度为 0,页面没有该元素,反之则页面中有使用该元素。

if ($('img').length) {  log('We found img elements on the page using "img"');} else {  log('No img elements found');}

来源:http://jqueryfordesigners.com/element-exists/

获取指定元素的父级元素:

使用 DOM 你可能需要知道某个元素的直接父级元素。closest() 方法将让你知道:

var id = $("button").closest("div").attr("id");

来源:http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery

获取元素的兄弟节点:

用于得到元素的兄弟节点的 siblings() 方法是一个非常方便的工具。如下图所示,使用这种方法非常简单:

$("div").siblings()

从选择列表中移除选项:
当使用选择列表时,您可能需要根据用户的操作来更新内容。若要删除一个选择列表中的选项,可以使用下面的代码:

$("#selectList option[value='2']").remove();

来源:http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/

获取列表选项的文本内容:

当你需要快速检测出用户从选择菜单中选中的选项时,这个方法非常有用。

$('#selectList :selected').text();

在表格中应用“斑马”效果(隔行换色):

当使用表格时,为了更好的可读性,隔行换色的风格是良好的解决方案。使用 jQuery,这是可以轻松做到这一点,没有任何额外 HTML 标记。

$("tr:odd").addClass("odd");

来源:http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

计算元素的子节点个数:

如果你想看看 #foo 元素包含多少 div 子节点元素,下面的代码将让你知道。简单而有效!

$("#foo > div").length
来源:http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/
Javascript 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 #Javascript
jQuery最佳实践完整篇
Aug 20 #Javascript
jQuery的deferred对象使用详解
Aug 20 #Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 #Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 #Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 #Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
php实现的zip文件内容比较类
2014/09/24 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
关于反爬虫的一些简单总结
2017/12/13 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
数据员岗位职责
2013/11/19 职场文书
求职自荐信范文格式
2013/11/29 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
大学活动邀请函
2014/01/28 职场文书
硕士论文致谢范文
2015/05/14 职场文书
贷款担保书范本
2015/09/22 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers