一些有用的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 解析读取XML文档 实例代码
Jul 07 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
vue 项目地址去掉 #的方法
Oct 20 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
详解React 元素渲染
Jul 07 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与C#的值类型指向区别的详解
2013/05/21 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
python字符串的方法与操作大全
2018/01/30 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
总经理助理的八要求
2013/11/12 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
庆国庆活动总结
2014/08/28 职场文书
工商局个人工作总结
2015/03/03 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书