jQuery 选择器（基础恶补之二)

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

实例

$("p").css("background-color");

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

实例

$("p").css("background-color","yellow");

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

实例

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的 <div> 元素的宽度和高度：

实例

$("button").click(function(){

  var txt="";

  txt+="Width: " + $("#div1").width() + "</br>";

  txt+="Height: " + $("#div1").height();

  $("#div1").html(txt);

});

jQuery - 更多的 width() 和 height()

下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

实例

$("button").click(function(){

  var txt="";

  txt+="Document width/height: " + $(document).width();

  txt+="x" + $(document).height() + "\n";

  txt+="Window width/height: " + $(window).width();

  txt+="x" + $(window).height();

  alert(txt);

});

什么是遍历？

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

图示解释：

<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent()
parents()
parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素：

实例

$(document).ready(function(){

  $("span").parent();

});

jQuery 选择器 （基础恶补之二)

返回 CSS 属性

实例

设置 CSS 属性

实例

设置多个 CSS 属性

实例

jQuery 尺寸 方法

jQuery width() 和 height() 方法

实例

jQuery - 更多的 width() 和 height()

实例

什么是遍历？

图示解释：

向上遍历 DOM 树

jQuery parent() 方法

实例

jQuery parents() 方法

实例

实例

jQuery parentsUntil() 方法

实例

向下遍历 DOM 树

jQuery children() 方法

实例

实例

jQuery find() 方法

实例

实例

在 DOM 树中水平遍历

jQuery siblings() 方法

实例

实例

jQuery next() 方法

实例

jQuery nextAll() 方法

实例

jQuery nextUntil() 方法

实例

jQuery prev(), prevAll() & prevUntil() 方法

缩写搜索元素的范围

jQuery first() 方法

实例

jQuery last() 方法

实例

jQuery eq() 方法

实例

jQuery filter() 方法

实例

jQuery not() 方法

实例

jQuery 选择器 （基础恶补之二)的更多相关文章

随机推荐

热门专题

jQuery 选择器（基础恶补之二)

jQuery 尺寸方法

jQuery 选择器（基础恶补之二)的更多相关文章