2013年3月25日 星期一

[jQuery]jQuery 使用及選取(Selector)元素

一、jQuery的使用

錢記號 $ 是 jQuery 的物件,使用 $("div") 就是用 jQuery 來選取元素,

jQuery("div")
這個範例可以選取文件內所有的 <div> 元素。

$("div").text("Next Step...");
可以讓你一次幫文件上有的 <div> 元素,加入一串字。

請注意喔,剛剛的例子可以針對已選取的多個元素做批次的操作,
也就是說如果文件上有三個 <div>,
那就會一次找出三個 <div> 並且全部套用後續的動作。
這和你原本自己使用 JavaScript 來寫程式有很大的差異,
原本自己寫可能會需要用到迴圈之類的語法,而 jQuery 的函數大多具有批次處理的功能,
光是這點就可以讓你的程式更簡潔了。

關於錢記號 $ 將會是你學習及使用 jQuery 的過程中最重要的物件
(或者你要把 $ 當成一個函數也可以,事實上也是這樣),
使用方式就像剛剛你看到的,用來找元素用的,
把參數帶入即可。或許你不習慣錢記號也可以當成函數名稱,
那麼你也可以用 jQuery 這個名字,錢記號其實是被當成 jQuery 的縮寫,
讓你的函數看起來更簡潔一些,

前面的例子使用 $("div") 來選取元素,並帶入的參數 div ,而div是表示你要找的元素,
這就是 CSS 選擇器(CSS Selector) 的語法,
如同 CSS 在做排版和外觀所使用的選擇器語法一樣。
jQuery 所支援的 CSS Selector 包含了 CSS 1、CSS2 以及 CSS3,
此外透過 plugin 還可支援常用的 XPath 語法,
善用這些 CSS、XPath 語法就可以很容易地找到你要處理的網頁元素,
底下來看看更多的範例。


這是一段 HTML 程式碼:

<!DOCTYPE html>
<html>
<head>
<title>jQuery TEST1</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
//用使用二種方法
<script>
    //第一種  function 會在網頁所有的 elements 都 load 完後才呼叫.
$(document).ready(function(){
//你的初始 jQuery or JavaScript code here....
$("div").text("Next Step...");
});
</script>
</head>
<body>
<div id="main1">11</div>
<div id="main2">22</div>
<script>
//第二種 會在網頁load順序才呼叫.
//$("div").text("Next Step...");
</script>
<div id="main3">23</div>
<div id="main4">44</div>
</body>
</html>

----END  HTML 程式碼----

第一種  結果








第二種   結果










二、$() 別名

在某些情況可能你無法使用 $(),
例如你進行中的專案已經使用了其他的 JavaScript Library,
而 $ 這個名稱已經被使用了,
例如另一套知名的 prototype,也使用了 $() 這樣的函數名稱,
這時如果你需要再搭配使用 jQuery 的話,
jQuery 本身有提供一個方式來避免 $() 的衝突。

在使用 jQuery 前,先下達 jQuery.noConflict() 這樣就可以避免掉 $() 衝突的問題,
接著再用 jQuery 物件來進行操作即可。
jQuery.noConflict();
jQuery(document).ready(function() {
  $("div").text("Next Step...");
});

此外,你也可以自行幫 jQuery 這個物件設定另一個別名,
例如:
var $j = jQuery.noConflict();
$j(document).ready(function() {
  $j("div").text("Next Step...");
});

使用一個變數來接 jQuery.noConflict() 的回傳值,
這個變數就可以做為 jQuery 的一個別名,
透過這個別名不但避免了和其他 Library 錢記號的衝突。




三、jQuery Selector
Selector 取得一個或多個元素組成的群組,
然後再串接我們要對群組裡各元素所做的各項動作。

選取元素樣式
說明
div
選取所有<div>
$("div")
#myDiv
選取 id myDiv 的元素
$("#myDiv")
div#myDiv
選取 id   myDiv <div> 元素
$("div#myDiv")
.myclass 
選取所有套用指定 CSS 類別的元素
$(".myClass")
*
選取所有文件中的元素
$("*")
div.myclass p
選取 class myclass <div> 所屬的所有下層的 <p>
$("div.myclass p")
div > div
選取被 <div> 所屬的下一層 <div>
$("div > div")
table tr
選取選取table元素所屬所有的tr的集合
$("table tr")
body + table
選取緊跟著body元素的table元素
$("body + table")
div:has(div)
選取至少有所屬一個 <div> <div>
$("div:has(div)")











沒有留言:

張貼留言

標籤

Oracle (150) Oracle DB (144) Oracle_DB (143) Oracle SQL (135) JAVA (84) css-基本類 (65) MySQL (59) CSS Selector (58) jQuery (49) JavaScript-基本類 (39) Spring Boot (38) JavaScript (37) JavaScript HTML DOM (37) JavaScript-HTML_DOM (36) CSS3 (30) JAVA-基本類 (28) jQuery UI (27) Apache (23) Oracle GROUP BY (20) datepicker (20) Android (18) Oracle Date (17) c (17) JAVA-lang套件 (16) Linux (16) Oracle Sub Query (16) Spring-基本類 (16) jQuery-基本類 (16) MySQL-進階系列教學 (15) Android基本類 (14) Grails (14) Oracle join (14) SQLite (13) Spring (13) WIN7-基本類 (13) grails-基本類 (13) linux cent os (13) CKEditor (12) JAVA-流程控制類 (12) JAVA_Spring (12) PHP (11) Spring MVC (11) MySQL-基本系列教學 (10) Notepad (10) Notepad++ (10) SQLite for java (10) Windows (10) c/c++ (10) eclipse (9) jQuery-Selector (9) sqldeveloper (9) DB_Toad (8) JAVA_IDE_Eclipse (8) JavaScript-String類 (8) MySQL DB Toad (8) MySQL-DATE相關 (8) MySQL-函式相關 (8) Spring Bean (8) Android Studio (7) HTML5 (7) Hibernate (7) JAVA-OCWCD (7) JavaScript-陣列類 (7) Docker (6) JAVA-程式分享 (6) JAVA.util套件 (6) JavaScript-數學類 (6) MinGw (6) MySQL-其它類 (6) Servlet (6) centos (6) Apache_Tomcat (5) Apache套件_POI (5) CSS (5) JavaScript-Date物件 (5) JavaScript-其它類 (5) PostgreSQL (5) httpd (5) log4j (5) 基本資訊 (5) 開發工具 (5) CSS Properties (4) Dev-C++ (4) IntelliJ IDEA (4) Oracle DDL (4) Sublime (4) TortoiseSVN (4) apache_Maven (4) Android NDK (3) Eclipse IDE for C/C++ (3) Hibernate-基本類 (3) JAVA-問題 (3) JAVA-綀習分享 (3) JVM (3) Linux 指令 (3) Proxy Server (3) Spring Mobile (3) Spring web (3) Squid (3) VirtualBox (3) maven (3) zk (3) 生活其它 (3) Bootstrap (2) Filter (2) JAVA_IO (2) JAVA_其它_itext套件 (2) JBoss-問題 (2) JSP (2) Jboss (2) Listener (2) MySQL-語法快速查詢 (2) Spring AOP (2) Spring Batch (2) Spring Boot Actuator (2) Spring i18n (2) Subversive (2) Tomcat 8 (2) UML (2) WebJars (2) WinMerge (2) c++ (2) c語言綀習題 (2) jQuery Mobile (2) jQuery-事件處理 (2) jQuery-套件類 (2) putty (2) svn (2) weblogic (2) Apache_JMeter (1) Apache套件_BeanUtils (1) Apache套件_StringUtils (1) Base64 (1) Google API (1) HTML5-基本類 (1) Heap (1) JAVA 7 (1) JAVA SE 、JAVA EE、JAVA ME (1) JAVA 日期 (1) JAVA-OCJP (1) JAVA-WEB (1) JAVA_IDE (1) JAVA其它 (1) JBoss Server (1) JDK (1) JMX (1) JRE (1) Java RMI (1) Java String (1) Joda Time (1) Linux_其它 (1) MySQL教學 (1) Oracle_VirtualBox (1) SQL Server (1) SWT (1) Session (1) Stack (1) Struts 2 (1) Tool (1) ZK Studio (1) csv (1) grails-其它類 (1) jQuery-進階 (1) java mail (1) java web (1) java8 (1) jsoup (1) mockmvc (1) modules (1) tomcat (1) win10 (1) 其它類 (1) 圖片工具 (1) 模擬器 (1) 讀書分享 (1) 開發資訊 (1)

精選文章

初學 Java 的 HelloWorld 程式

撰寫一個JAVA程式 public class HelloWorld{ public static void main(String[ ] args){ System.out.println("我第一支Java程式!!"); } } ...