JQuery快速入门

来源：互联网发布：c指针编程之道购买编辑：程序博客网时间：2024/06/10 06:25

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 = “文本值”

*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>

阅读全文

0 0