2015年3月9日 星期一

jQuery 選擇器

jQuery 選擇器

選擇器允許您對元素組或單個元素進行操作。

jQuery 選擇器

在前面的章節中，我們展示了一些有關如何選取HTML 元素的實例。
關鍵點是學習jQuery 選擇器是如何準確地選取您希望應用效果的元素。
jQuery 元素選擇器和屬性選擇器允許您通過標籤名、屬性名或內容對HTML 元素進行選擇。
選擇器允許您對HTML 元素組或單個元素進行操作。
在HTML DOM 術語中：
選擇器允許您對DOM 元素組或單個DOM 節點進行操作。

jQuery 元素選擇器

jQuery 使用CSS 選擇器來選取HTML 元素。
$("p") 選取<p> 元素。
$("p.intro") 選取所有class="intro" 的<p> 元素。
$("p#demo") 選取所有id="demo" 的<p> 元素。

jQuery 屬性選擇器

jQuery 使用XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有href 屬性的元素。
$("[href='#']") 選取所有帶有href 值等於"#" 的元素。
$("[href!='#']") 選取所有帶有href 值不等於"#" 的元素。
$("[href$='.jpg']") 選取所有href 值以".jpg" 結尾的元素。

jQuery CSS 選擇器

jQuery CSS 選擇器可用於改變HTML 元素的CSS 屬性。
下面的例子把所有p 元素的背景顏色更改為紅色：

實例

$("p").css("background-color","re​​d");
親自試一試

更多的選擇器實例

語法描述
$(this)當前HTML 元素
$("p")所有<p> 元素
$("p.intro")所有class="intro" 的<p> 元素
$(".intro")所有class="intro" 的元素
$("#intro")id="intro" 的元素
$("ul li:first")每個<ul> 的第一個<li> 元素
$("[href$='.jpg']")所有帶有以".jpg" 結尾的屬性值的href 屬性
$("div#intro .head")id="intro" 的<div> 元素中的所有class="head" 的元素
如需完整的參考手冊，請訪問我們的jQuery選擇器參考手冊。
資料來源: http://www.w3school.com.cn/jquery/jquery_selectors.asp
張貼者： 於 沒有留言:

HTML DOM getElementById() 方法

定義和用法

getElementById() 方法可返回對擁有指定ID 的第一個對象的引用。

語法

document.getElementById(id)

說明

HTML DOM 定義了多種查找元素的方法，除了getElementById() 之外，還有getElementsByName() 和getElementsByTagName()。
不過，如果您需要查找文檔中的一個特定的元素，最有效的方法是getElementById()。
在操作文檔的一個特定的元素時，最好給該元素一個id 屬性，為它指定一個（在文檔中）唯一的名稱，然後就可以用該ID 查找想要的元素。

實例

例子 1

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x= document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>

例子 2

getElementById() 是一個重要的方法，在DOM 程序設計中，它的使用非常常見。我們為您定義了一個工具函數，這樣您就可以通過一個較短的名字來使用getElementById() 方法了：
function id(x) {
  if (typeof x == "string") return document.getElementById(x) ;
  return x;
  }
上面這個函數接受元素ID 作為它們的參數。對於每個這樣的參數，您只要在使用前編寫x = id(x) 就可以了。

TIY

使用getElementById()
資料來源: http://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp
張貼者： 於 沒有留言:
訂閱： 意見 (Atom)