JQuery 简介

提纲

• Javascript“ 运行时面向对象”• JQuery selectors• JQuery 辅助方法• 扩展 JQuery

Javascript“ 用途”

• 浏览器 --DOM• 服务器端脚本

Javascript“ 运行时面向对象”

• 所有对象都是字典（ json ）• 普通对象：数字、日期 ....• 自定义对象： {}• Function ：面向对象的基础

Javascript“ 运行时面向对象” --Function

• 上下文• prototype

Javascript“ 运行时面向对象” --Function

var User = function(name){this.name = name;this.show = function(){

alert(this.name);}

}var name="name1";var user = User("name2");alert(name);var user = new User("name3");user.show();

Javascript“ 运行时面向对象” --Function

var Fruit = function(name){this.name = name;this.show = function(){

alert(this.name);}

}var fruit = new Fruit("fruit");var Apple = function(address){

this.address = address;}Apple.prototype=fruit;var apple = new Apple(" 山东 ");apple.show();Apple.prototype.shape="shape";var apple2 = new Apple(" 潍坊 ");alert(apple2.shape);

Javascript“ 运行时面向对象” --Function

apple

Apple | prototype

Object | prototype

Javascript“ 运行时面向对象” --Function

Apple.prototype=fruit;var apple = new Apple(" 山东 ");apple.show();fruit.name="fruit2";apple.show();

JQuery selectors

• JQuery 的核心• DOM• 浏览器兼容

JQuery selectors

<div id="myDiv" class="myC">id="myDiv"</div>

• $("#myDiv").click(function(){}).XXX• $(".myC").click(function(){}).XXX• $("div:first").XXX• $("div:contains('myDiv')")• .....

JQuery 辅助方法

• DOM 事件 / 属性• Ajax• 工具

JQuery 辅助方法 --DOM

jQuery(function($) { // 你可以在这里继续使用 $ 作为别名 ...});

JQuery 辅助方法 --Ajax

$.ajax({ url: "test.html", context: document.body, success: function(){

$(this).addClass("done");}});

JQuery 辅助方法 -- 工具

• 浏览器• 数组、对象继承• 动画 -- 滑动、淡入淡出 ... $("p").fadeIn("slow");

扩展 JQuery

• jQuery.extend(object); 为扩展 jQuery 类本身 .为类添加新的方法

• jQuery.fn.extend(object); 给 jQuery 对象添加方法

扩展 JQuery

jQuery.fn.extend({ /// 这个函数是全部选择所有的元素 check: function() { return this.each(function() { this.checked = true; }); //

必须 return 回一个 jquery 对象 }, uncheck: function() { return this.each(function() { this.checked = false; }); }}); $("input:checkbox").check().XXXX;