一些有用的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()函数的三种语法介绍
Oct 09 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
vue实现简单的登录弹出框
Oct 26 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实现的增强性mhash函数
2015/05/27 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP 无限级分类
2017/05/04 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Django rest framework实现分页的示例
2018/05/24 Python
python绘制立方体的方法
2018/07/02 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python partial函数原理及用法解析
2019/12/11 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
Python简单实现区域生长方式
2020/01/16 Python
什么是python的函数体
2020/06/19 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
精细化工应届生求职信
2013/11/17 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
大学体育课感想
2015/08/10 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
PHP实现两种排课方式
2021/06/26 PHP
SpringBoot详解执行过程
2022/07/15 Java/Android