一些有用的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 相关文章推荐
使用JQuery进行跨域请求
Jan 25 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
js判断节假日实例代码
Dec 27 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
简单了解JavaScript arguement原理及作用
May 28 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
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
微信小程序静默登录的实现代码
2020/01/08 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python多线程分块读取文件
2019/08/29 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
python中如何使用虚拟环境
2020/10/14 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
团员的自我评价
2013/12/01 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
青年文明号口号
2014/06/17 职场文书
小学开学标语
2014/07/01 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
办理护照工作证明
2014/10/10 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技