一些有用的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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
es6数值的扩展方法
Mar 11 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 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中的array数组类型分析说明
2010/07/27 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
js 操作select相关方法函数
2009/12/06 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
2016/12/23 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python字典键值对的添加和遍历方法
2016/09/11 Python
Python 3中的yield from语法详解
2017/01/18 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python实现图片彩色转化为素描
2019/01/15 Python
Python 支付整合开发包的实现
2019/01/23 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Pandas中resample方法详解
2019/07/02 Python
python实现简单图书管理系统
2019/11/22 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python实现四人制扑克牌游戏
2020/04/22 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
怎样声明子类
2013/07/02 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
幼师求职自荐信
2014/05/31 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python