jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库jQuery 理念: 写得少, 做得多. 优势如下:轻量级强大的选择器出色的 DOM 操作的封装可靠的事件处理机制完善的 Ajax出色的浏览器兼容性
链式操作方式
Eclipse下创建static Web Project ,导入jquery-1.9.1.js
JQuery:Hello World
<html><head><meta charset="UTF-8"><title>Insert title here</title><!– 导入Jquery 库 version 1.9.1 –><script type="text/javascript" src="jquery-1.9.1.js"></script><script type="text/javascript">//$(function(){}) 相当于window.onload,代码写在{}之间$(function(){//1.选取button//2.为button添加onclick响应函数$("button").click(function() {//3.弹出Helloworldalert("HelloWorld");});})</script></head><body><button> Click Me</button></body></html>
1、JQuery 对象
jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $. var $variable = jQuery 对象var variable = DOM 对象
1.1jQuery 对象转成 DOM 对象
jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法:
(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
<!DOCTYPE html><html><head><script type="text/javascript" src="jquery-1.9.1.js"></script><script type="text/javascript">$(function(){$("button").click(function() {//alert($(this).text());//将this封装的成为一个JQuery对象，，调用方法//1.将JQuery 对象转为DOM对象//获取一个Jquery对象var $btn = $("button");//JQuery 对象是一个数组alert($btn.length);// 3 ,无论点哪个显示都是3,这是Jquery的隐士转换,获取所有的button的clickalert($btn[0].firstChild.nodeValue);//alert($btn.get(0).firstChild.nodeValue);});})</script></head><body><button id="btn"> Click Me</button><button> Click Me1</button><button> Click Me2</button></body></html>
1.2DOM 对象转成 jQuery 对象
对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象.
转换后就可以使用 jQuery 中的方法了
<html><head><meta charset="UTF-8"><title>Insert title here</title><!– 导入Jquery 库 version 1.9.1 –><script type="text/javascript" src="jquery-1.9.1.js"></script><script type="text/javascript">$(function(){$("button").click(function() {var btn = document.getElementById("btn");var $btn = $(btn);alert($btn.text()); //显示value});})</script></head><body><button id="btn"> Click Me</button><button> Click Me1</button><button> Click Me2</button></body></html>
一直觉得人应该去旅行，在年轻的时候，
