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

　　推荐阅读

　　jquery 查找iframe父级页面元素的实现代码

父页面代码复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h>>>详细阅读

本文标题：一些有用的JavaScript和jQuery的片段分享

地址：http://www.17bianji.com/kaifa2/JS/24260.html

1/2 1