一些有用的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 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
原生javascript单例模式的应用实例分析
Feb 23 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 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中执行系统外部命令
2006/10/09 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
javascript 继承实现方法
2009/08/26 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
js常用代码段整理
2011/11/30 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
canvas绘制七巧板
2017/02/03 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
使用Python读取大文件的方法
2018/02/11 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
毕业学生推荐信
2013/12/01 职场文书
升旗仪式主持词
2014/03/19 职场文书
英文版辞职信
2015/02/28 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
用php如何解决大文件分片上传问题
2021/07/07 PHP