一些有用的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 input textare 事件绑定及用法学习
Apr 03 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
js实现简单的计算器功能
Jan 16 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
基于ionic实现下拉刷新功能
May 10 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php 生成文字png图片的代码
2011/04/17 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php中使用websocket详解
2016/09/23 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python处理按钮消息的实例详解
2017/07/11 Python
Pandas中resample方法详解
2019/07/02 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
导师评语大全
2014/04/26 职场文书
新学期开学演讲稿
2014/05/24 职场文书
运动会方队口号
2014/06/07 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
vue动态绑定style样式
2022/04/20 Vue.js