jquery简单使用（看教程：快全有实例）（固定样式：$().val()设置属性，$().click()设置方法）

jquery简单使用（看教程：快全有实例）（固定样式：$().val()设置属性，$().click()设置方法）

一、总结

1、jquery不懂之处直接看教程，案例都有，有简单又快

2、jquery给input设置值半天没弄出来，因为使用格式错误啊：本来应该是：$("#username").val("student"); 写成了$("#username").val="student";

3、jquery格式：$().()形式，$().val()设置属性，$().click()设置方法，全部是这样的形式，想清楚了怎么可能写错嘛

 

4、jquery都是放在ready函数中的

5、jquery不管是取值还是设置内容，格式都是$().()形式，所以所jquery很简单嘛

 

二、jquery简单使用

1、文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

 

2、获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

 

 

3、设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

 

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});