javascript&j query简介
DESCRIPTION
Javascript&j query简介TRANSCRIPT
![Page 1: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/1.jpg)
JQuery 简介
![Page 2: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/2.jpg)
提纲
• Javascript“ 运行时面向对象”• JQuery selectors• JQuery 辅助方法• 扩展 JQuery
![Page 3: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/3.jpg)
Javascript“ 用途”
• 浏览器 --DOM• 服务器端脚本
![Page 4: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/4.jpg)
Javascript“ 运行时面向对象”
• 所有对象都是字典( json )• 普通对象:数字、日期 ....• 自定义对象: {}• Function :面向对象的基础
![Page 5: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/5.jpg)
Javascript“ 运行时面向对象” --Function
• 上下文• prototype
![Page 6: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/6.jpg)
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();
![Page 7: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/7.jpg)
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);
![Page 8: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/8.jpg)
Javascript“ 运行时面向对象” --Function
apple
Apple | prototype
Object | prototype
![Page 9: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/9.jpg)
Javascript“ 运行时面向对象” --Function
Apple.prototype=fruit;var apple = new Apple(" 山东 ");apple.show();fruit.name="fruit2";apple.show();
![Page 10: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/10.jpg)
JQuery selectors
• JQuery 的核心• DOM• 浏览器兼容
![Page 11: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/11.jpg)
JQuery selectors
<div id="myDiv" class="myC">id="myDiv"</div>
• $("#myDiv").click(function(){}).XXX• $(".myC").click(function(){}).XXX• $("div:first").XXX• $("div:contains('myDiv')")• .....
![Page 12: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/12.jpg)
JQuery 辅助方法
• DOM 事件 / 属性• Ajax• 工具
![Page 13: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/13.jpg)
JQuery 辅助方法 --DOM
jQuery(function($) { // 你可以在这里继续使用 $ 作为别名 ...});
![Page 14: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/14.jpg)
JQuery 辅助方法 --Ajax
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");}});
![Page 15: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/15.jpg)
JQuery 辅助方法 -- 工具
• 浏览器• 数组、对象继承• 动画 -- 滑动、淡入淡出 ... $("p").fadeIn("slow");
![Page 16: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/16.jpg)
扩展 JQuery
• jQuery.extend(object); 为扩展 jQuery 类本身 .为类添加新的方法
• jQuery.fn.extend(object); 给 jQuery 对象添加方法
![Page 17: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/17.jpg)
扩展 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;
![Page 18: Javascript&j query简介](https://reader038.vdocuments.us/reader038/viewer/2022103018/558c07dbd8b42a4d3a8b463d/html5/thumbnails/18.jpg)