一些有用的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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
获取body标签的两种方法
Oct 13 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
使用js 设置url参数
2013/07/08 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
pyqt5自定义信号实例解析
2018/01/31 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
优秀中专生推荐信
2013/11/17 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
实习单位鉴定评语
2014/04/26 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
初二学生评语大全
2014/12/26 职场文书
客服专员岗位职责
2015/02/10 职场文书
目标责任书格式范文
2015/05/11 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
员工旷工检讨书
2015/08/15 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
MySQL约束超详解
2021/09/04 MySQL