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 });