一些有用的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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
原生JS实现相邻月份日历
Oct 13 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
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 base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
详解python发送各类邮件的主要方法
2016/12/22 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python异常处理知识点总结
2019/02/18 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
退休教师欢送会主持词
2014/03/31 职场文书
争先创优演讲稿
2014/09/15 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
内勤岗位职责
2015/02/10 职场文书
《迟到》教学反思
2016/02/24 职场文书
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android