1 jQuery快速入门
1)服务端和客户端有三种方式传递数据a)HTML(无需与其它应用程序共享数据的情况下)
b)XML(需与其它应用程序共享数据,尤其是在不同的系统中,平台中,同时内容较多的情况下)
c)JSON(需与其它应用程序共享数据,同时内容不多的情况下)
2)为了将JS代码简化,同时要达到业务的需要,
3)jQuery的目标是做更多事情,写更少代码
4)jQuery是一个开源,免费的JavaScript库,有不同的版本,真正上线运行时,可以使用min版本。
5)jQuery开发步骤:
a)通过<script/>导入jquery的js类库
b)使用$("#id"),通过id来定位html元素
c)通过val()和html()分别取得html元素的值
注意:val()和html()是能由jQuery对象调用,不能由dom对象调用
val()---value属性
html()---innerHMTL属性
6)将dom对象,通过$()转换,就变成了jquery对象,dom对象能做的情况,jquery对象也能,只是方式不一样,
反之,jquery对象能做的事情,dom不一定行
2 什么是JQuery对象?
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:
document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但是jQuery对象无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variableElement = DOM 对象
Var variable = “文本值”
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:
document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但是jQuery对象无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variableElement = DOM 对象
Var variable = “文本值”
*3 DOM对象和jQuery对象相互转换
1)jquery对象是一个数组对象,下标从0开始2)dom->jquery,通过$(dom对象)->jquery对象
3)jquery->dom,通过
a)$div[index下标从0开始]
b)$div.get(index下标从0开始)
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this is a jquery page</title>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
</head>
<body>
<input id="inputID" align="center" size="3" type="button" value="这是jquery框架" />
<div id="divID"> JQuery框架 </div>
<script type="text/javascript">
//传统做法
var elementInput=document.getElementById("inputID");
var value=elementInput.value;
// alert(value);
//
var elementInput=document.getElementById("divID");
var divID=elementInput.innerHTML;
// alert(divID);
//JQuery对象
var $input=$("#inputID");
//调用JQuery对象的val方法,取得value值
var inp=$input.val();
//alert(inp);
//dom对象转为jQuery对象
var elementInput2=document.getElementById("inputID");
var $elein=$(elementInput2);
var elein=$elein.val();
alert(elein);
//JQuery对象转为dom对象
var $elein2=$("#divID");
var elein2=$elein2[0];
var ele=elein2.innerHTML;
alert(ele);
//JQuery对象转为dom对象,调用get方法
var $elein3=$("#divID");
alert($elein3.get(0).innerHTML);
</script>
</body>
</html>