一些有用的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 相关文章推荐
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 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微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
Python中删除文件的程序代码
2011/03/13 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
超级实用的8个Python列表技巧
2020/08/24 Python
韩国11街:11STREET
2018/03/27 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
物流业务员岗位职责
2014/02/08 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
培训讲师岗位职责
2014/04/13 职场文书
市场营销调查计划书
2014/05/02 职场文书
社保委托书怎么写
2014/08/02 职场文书
村级四风对照检查材料
2014/08/24 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript