一些有用的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 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 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
php长字符串定义方法
2012/07/12 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript 节点遍历函数
2010/03/28 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python Django批量导入数据
2016/03/25 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
ktv总经理岗位职责
2014/02/17 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
实习协议书范本
2014/04/22 职场文书
销售岗位职责范本
2014/06/12 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
车辆年检委托书范本
2014/10/14 职场文书
场地使用证明模板
2014/10/25 职场文书
复兴之路展览观后感
2015/06/02 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android