一些有用的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 void(0)的妙用
Oct 21 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
vue 解决异步数据更新问题
Oct 29 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 array_multisort()函数的使用札记
2011/07/03 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
javascript实现弹幕墙效果
2019/11/28 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
python实现保存网页到本地示例
2014/03/16 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
火车的故事教学反思
2014/02/11 职场文书
南京导游词
2015/02/03 职场文书
2015学校年度工作总结
2015/05/11 职场文书
联欢会开场白
2015/06/01 职场文书
寒假致家长的一封信
2015/10/10 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
java基础——多线程
2021/07/03 Java/Android