一些有用的JavaScript和jQuery的片段分享
为指定元素添加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("Wefoundimgelementsonthepageusing"img"");}else{log("Noimgelementsfound");}
来源:http://jqueryfordesigners.com/element-exists/
获取指定元素的父级元素:
使用DOM你可能需要知道某个元素的直接父级元素。closest()方法将让你知道:
varid=$("button").closest("div").attr("id");
来源:http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery
获取元素的兄弟节点:
用于得到元素的兄弟节点的siblings()方法是一个非常方便的工具。如下图所示,使用这种方法非常简单:
$("div").siblings()
从选择列表中移除选项:
当使用选择列表时,您可能需要根据用户的操作来更新内容。若要删除一个选择列表中的选项,可以使用下面的代码:
$("#selectListoption[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/
相关文章
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- 【说站】javascript中Promise的异常捕获用法
- JavaScript中this指向哪儿?如何确定this?-前端面试进阶
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- javascript系列学习笔记-this
- 检测设备平台,操作系统,方向 Javascript 库:Device.js
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- javaScript之jQuery框架详解编程语言
- jQuery表单插件jquery.form.js详解编程语言
- 关于Javascript的prototype问题。
- javascript实现的类似hao123的多邮箱登录效果
- 从JavaScript到JQuery(1)学习小结
- javascript日期时间函数(经典+完善+实用)
- javascript支持链式调用的异步调用框架Async.Operation
- 理解JavaScript预解析
- Jquery实战_读书笔记1—选择jQuery
- javascript获取HTMl文件指定元素的代码
- jquery下组织javascript代码(js函数化)
- 让JavaScript拥有类似Lambda表达式编程能力的方法
- 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
- jQuery对象和Javascript对象之间转换的实例代码
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- 在javaScript中关于submit和button的区别介绍
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- javascript和jquery修改a标签的href属性
- JavaScript实现鼠标拖动元素实例代码
- javascript/jquery获取地址栏url参数的方法
- JavaScript格式化日期时间的方法和自定义格式化函数示例
- JavaScript中的prototype和constructor简明总结
- 浅析javascript的间隔调用和延时调用
- Javascript学习笔记之对象篇(四):forin循环
- 分享2个jQuery插件--jquery.fileupload与artdialog
- Javascript基础教程之JavaScript语法
- JavaScript用JQuery呼叫Server端方法示例代码