一些有用的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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
了解jQuery技巧来提高你的代码
Jan 08 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
js实现删除json中指定的元素
Sep 22 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
截获网站title标签之家内容的例子
2006/10/09 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
Python选课系统开发程序
2016/09/02 Python
python框架django基础指南
2016/09/08 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
python实现网页录音效果
2020/10/26 Python
Django跨域请求原理及实现代码
2020/11/14 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
行政助理的职责
2013/11/14 职场文书
四年级数学教学反思
2014/02/02 职场文书
致200米运动员广播稿
2014/02/06 职场文书
公司授权委托书
2014/04/04 职场文书
文秘求职信范文
2014/04/10 职场文书
红色故事演讲稿
2014/05/22 职场文书
询价采购方案
2014/06/09 职场文书
网络妈妈观后感
2015/06/08 职场文书
2016中秋节问候语
2015/11/11 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
如何利用python创作字符画
2022/06/25 Python