一些有用的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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
requireJS使用指南
Apr 27 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
php过滤html标记属性类用法实例
2014/09/23 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
js实现密码强度检验
2017/01/15 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
python 基础教程之Map使用方法
2017/01/17 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
青年教师典范事迹材料
2014/01/31 职场文书
三查三看党性分析材料
2014/02/18 职场文书
家教广告词
2014/03/19 职场文书
房产公证书范本
2014/04/10 职场文书
幸福家庭标语
2014/06/27 职场文书
应届生求职自荐信
2014/07/04 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
优秀英文求职信范文
2015/03/19 职场文书
歌咏比赛主持词
2015/06/29 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android