jquery簡單使用（看教程：快全有實例）（固定樣式：$().val()設置屬性，$().click()設置方法）

jquery簡單使用（看教程：快全有實例）（固定樣式：$().val()設置屬性，$().click()設置方法）

1、總結

一、jquery不懂之處直接看教程，案例都有，有簡單又快

二、jquery給input設置值半天沒弄出來，由於使用格式錯誤啊：原本應該是：$("#username").val("student"); 寫成了$("#username").val="student";

三、jquery格式：$().()形式，$().val()設置屬性，$().click()設置方法，所有是這樣的形式，想清楚了怎麼可能寫錯嘛

 

四、jquery都是放在ready函數中的

五、jquery無論是取值仍是設置內容，格式都是$().()形式，因此所jquery很簡單嘛

 

2、jquery簡單使用

一、文檔就緒函數

您也許已經注意到在咱們的實例中的全部 jQuery 函數位於一個 document ready 函數中：

$(document).ready(function(){ --- jQuery functions go here ---- }); 

這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。

若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。下面是兩個具體的例子：

• 試圖隱藏一個不存在的元素
• 得到未徹底加載的圖像的大小

 

二、得到內容 - text()、html() 以及 val()

三個簡單實用的用於 DOM 操做的 jQuery 方法：

• text() - 設置或返回所選元素的文本內容
• html() - 設置或返回所選元素的內容（包括 HTML 標記）
• val() - 設置或返回表單字段的值

下面的例子演示如何經過 jQuery text() 和 html() 方法來得到內容：

1 $("#btn1").click(function(){ 2   alert("Text: " + $("#test").text()); 3 }); 4 $("#btn2").click(function(){ 5   alert("HTML: " + $("#test").html()); 6 });

 

 

三、設置內容 - text()、html() 以及 val()

咱們將使用前一章中的三個相同的方法來設置內容：

• text() - 設置或返回所選元素的文本內容
• html() - 設置或返回所選元素的內容（包括 HTML 標記）
• val() - 設置或返回表單字段的值

下面的例子演示如何經過 text()、html() 以及 val() 方法來設置內容：

 

1 $("#btn1").click(function(){ 2   $("#test1").text("Hello world!"); 3 }); 4 $("#btn2").click(function(){ 5   $("#test2").html("<b>Hello world!</b>"); 6 }); 7 $("#btn3").click(function(){ 8   $("#test3").val("Dolly Duck"); 9 });