一些有用的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 相关文章推荐
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
vue 实现走马灯效果
Oct 28 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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的FTP学习(三)
2006/10/09 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
用正则表达式替换图片地址img标签
2013/11/22 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
想学python 这5本书籍你必看!
2018/12/11 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
python连接mysql有哪些方法
2020/06/24 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
零基础学python应该从哪里入手
2020/08/11 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
党员承诺书格式
2014/05/21 职场文书
委托书范本
2014/09/13 职场文书
医院见习报告范文
2014/11/03 职场文书
2015年教师国培感言
2015/08/01 职场文书
超市店长竞聘书
2015/09/15 职场文书
Go gorilla/sessions库安装使用
2022/08/14 Golang