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