微信扫一扫打赏支持

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

 

posted @ 2018-05-23 15:05  范仁义  阅读(567)  评论(0编辑  收藏  举报