一些有用的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 相关文章推荐
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
简单实现js上传文件功能
Aug 21 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
用python找出那些被“标记”的照片
2017/04/20 Python
python如何获取服务器硬件信息
2017/05/11 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Django--权限Permissions的例子
2019/08/28 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python requests获取网页常用方法解析
2020/02/20 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
优秀毕业生推荐信
2013/11/02 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
索赔员岗位职责
2015/02/15 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
Django程序的优化技巧
2021/04/29 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫