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() 方法来获得内容:
1 $("#btn1").click(function(){ 2 alert("Text: " + $("#test").text()); 3 }); 4 $("#btn2").click(function(){ 5 alert("HTML: " + $("#test").html()); 6 });
3、设置内容 - 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 });