一些有用的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('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/

赞 (0)

相关推荐

  • 15个非常实用的JavaScript代码片段

    本文实例为大家分享了非常实用的js片段,供大家参考,具体内容如下 1.如何区分IE及非IE浏览器: if(!+[1,]){ //IE 11 不支持 alert("这是 IE 浏览器"): }else{ alert("这不是 IE 浏览器"): } 2.将日期直接转换为数值: +new Date(); 3.非IE浏览器下将类数组对象 "arguments"转为数组: Array.prototype.slice.call(arguments); 4.

  • 在多个页面使用同一个HTML片段的代码

    问题描述 有一个比较复杂的HTML片段(A),如果把这个HTML片段嵌入到其他页面中(B,C,D....). 问题的关键是在HTML片段中有大量的JavaScript逻辑需要处理,比如说分页,点击事件响应等. 对于这个问题,我们用一个简单的例子来说明: "页面上有一个按钮,点击此按钮引入一个HTML片段,此HTML片段中有分页按钮." 1. 使用IFrame 主页面,点击一个按钮向页面引入一个IFrame: 复制代码 代码如下: <script type="text/j

  • 分享8个最佳的代码片段在线测试网站

    分享8个最佳的代码片段在线测试网站

    有时候,我们需要测试一些代码片段,而电脑中没有安装针对该语言的运行环境,没关系,你可以在线测试它们. 本文为你带来 8 款非常好用的代码片段在线工具,帮助你快速.方便地测试.编辑代码片段. 1.   ideone ideone 是一个在线代码编辑.调试工具,允许开发者在线编译.运行代码,支持超过 40 种编程语言. 2.   Codepad Codepad 是一个在线编译/解释器,还是一个简单的协作工具.在文本框中粘贴代码片段,Codepad 将会运行它,并会生成一个短 URL,你可以共享给其他

  • JavaScript和JQuery实用代码片段（一）

    (一)怎样用JQuery刷新一幅图片? 说明:我们都知道,当我们在请求一个资源(比如网页,图片等)的时候,如果该资源被缓存到浏览器了,那么请求返回的就是缓存的副本,不是我们希望获取的资源(该资源内容已经被更新了),此时最普遍的一个办法就是在请求的页面后面或者图片的src后面加上一个查询字符串"ran=" + Math.random(),这样就会请求到最新版本的资源啦! 代码: 复制代码 代码如下: $(imageObj).attr('src',$(imageObj).attr('src

  • AngularJS中取消对HTML片段转义的方法例子

    今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-bind 的话是被转义过的,使用 data-ng-bind-html 则可以取消转义. 但是直接使用 data-ng-bind-html 的话会提示错误 复制代码 代码如下: Error: [$sce:unsafe] Attempting to use an unsafe value in a saf

  • 你一定会收藏的Nodejs代码片段

    以下就是为大家分享的四段Nodejs值得收集的代码片段,供大家参考,具体内容如下 1.关于Nodejs的静态资源压缩与缓存参见:Nodejs打造静态资源服务器与文件上传刚学Express那会,动态文件的gzip压缩,好长一段时间都没找到合适的方法,才发现就是这么简单-- app.js里添加compression模块: 先安装:var compress=require('compression');app.use(compress()); OK了动态文件也能gzip压缩了: 2.抓取妹子的图片:

  • JS跨域代码片段

    下面的代码块是js调用一般处理程序的代理来实现js跨域的.如果js需要多次跨域,推荐下面的方法. 复制代码 代码如下: public string GetInfo(HttpContext context) { string post = "a=XX&b=XX"; return CreateHttpRequest("https://www.XXXX.com", post, "POST"); } #region 构造请求 /// <su

  • JavaScript的漂亮的代码片段

    动态构建正则表达式 复制代码 代码如下: new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) ) 来自sizzle,动态构建正则时,这样做避免了字符转义. 更灵活和巧妙的数字补零 复制代码 代码如下: function prefixInteger(num, length) {    return (num / Math.pow(10, length)).toFixed(length).substr

  • 总结AJAX相关JS代码片段和浏览器模型

    在.net开发中,充分利用免费控件是好事情,但是如果不能修改控件达到自己的需求,就要动用JS大法了,前提是研究好浏览器模型 的各种对象的方法属性.尤其是熟悉CSS+HTML就会做的很酷.就JS语言本身来说要求不高. 1.动态删除Table 里面内容技巧,不需要写太多代码,一行: tb.removeNode(true) 2.动态增加行,除了CreateElement方法,还可以这样比较短小: <table id=tb1></table> <SCRIPT> function

  • 用AJAX返回HTML片段中的JavaScript脚本

    这是AJAX开发中很常见的问题,如果你不是一直在用JavaScript框架做开发,相信你早就发现这个问题了.本文分析了两个解决办法,其中一个是讲解jQuery框架的实现. 一. 问题描述 下面举个简单的例子,演示问题所在.在下面的例子中,假设变量responseText就是AJAX加载的HTML片段数据,其中包含脚本弹出一条消息,用innerHTML方法插入ID为ajaxData的DIV中,你可能期望看到弹出那个消息框,结果你发现没有,问题就是这样. 复制代码 代码如下: <div id="

随机推荐