一些有用的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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
JavaScript的9个陷阱及评点分析
May 16 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
React组件生命周期详解
Jul 03 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
react的hooks的用法详解
Oct 12 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
用cookies来跟踪识别用户
2006/10/09 PHP
杏林同学录(八)
2006/10/09 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
20个实用的JavaScript技巧分享
2014/11/28 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
Python的面向对象编程方式学习笔记
2016/07/12 Python
python 读写中文json的实例详解
2017/10/29 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
小城镇建设汇报材料
2014/08/16 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
归元寺导游词
2015/02/06 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python