《jquery教学课件 高级吧》由会员分享，可在线阅读，更多相关《jquery教学课件 高级吧（63页珍藏版）》请在金锄头文库上搜索。
1、jQuery是一套Javascript脚本库.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同类JS库：Dojo Extjs,什么是JQuery,提供了强大的功能函数 解决浏览器兼容问题 实现丰富的UI 丰富的插件 VS中智能感知,JQuery的优势,JQuery简介,jQuery基本语法 jQuery(“选择器”)或者$(“选择器”) 其中： jQuery 是JQuery中的核心对象 $是jQuery的简写形式，二者是等价的 “选择器” 是我们本章讲解的重点,JQuery简介,页面加载事件,$(document).ready(func
2、tion() / 在这里写你的代码. ),$(function() /在这里写你的代码. );,和onload的区别 window.onload 方法是在整个页面完全加载之后执行语句。及资源显示完毕之后调用、而jQuery的ready方式仅仅是在DOM对象加载完成后就调用。并且jQuery的ready方法可以指定多次,传统的javascript,var div = document.getElementById(“testDiv“); var divs = document.getElementsByTagName(“div“);,获取的Dom对象,JQuery包装集,Dom对象和JQuery
3、包装集,jQuery包装集,var jQueryObject = $(“#testDiv“);,JQuery概念 jQuery包装集可以说是Dom对象的扩充. 所有的对象, 无论是一个还是一组, 都封装成一个jQuery包装集 ，并且具有丰富的属性和方法,Dom对象和JQuery包装集,Dom转Jquery包装集 1.使用选择器直接构建jquery包装集,$(“#testDiv”); /只含有一个id是testDiv的元素的包装集.,Dom对象与JQuery对象的转换,2.转换,var div = document.getElementById(“testDiv”); / DOM对象 var
4、domToJQueryObject = $(div); / Jquery包装集对象,如果要使用jQuery提供的函数, 就要首先构造jQuery包装集,Jquery包装集转DOM对象 jQuery对象是一个数组对象，可以通过index的方法，来得到相应的DOM对象 2. jQuery本身提供，通过.get(index)方法，得到相应的DOM对象,Dom对象与JQuery对象的转换,类似于CSS中的选择器，但比CSS选择器提供了更灵活的选择方式,但JQuery选择返回的结果为包装集 选择器分类 选择 从整个页面中选择 过滤 从前面匹配的内容中筛选，也可以单独使用，格式为 “ *：条件 ”,什么是
5、JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,JQuery选择器,总结,JQuery 的优势 Dom对象和JQuery包装集的区别 DOM对象和JQuery包装集的相互转换 常用的JQuery选择器,$(html) return jQuery包装集 动态创建有jQuery对象包装的元素、想当于DOM里的createElement(“div”)、用法是 $(“”)或者$(“”)、但不推荐$(“”) $(e
6、lements) return jQuery包装集 将一个或多个DOM元素转化为jQuery对象、例如： var div = document.getElementById(“div2”); var jqueryDiv = $(div); $(expression) return jQuery包装集 这个函数接受一个选择器的字符串，得到jQuery包装集 $(fn) 参数是一个函数，如： $(function() alert(欢迎使用JQuery););,JQuery核心函数,html() 取得第一个匹配元素的html内容 html(val) 设置每一个匹配元素的html内容,Html,Tex
7、t,Text 和html用法一样，但text()获取的是内容,Val,Val Val() 获得第一个匹配元素的当前值 Val(val) 设置每一个匹配元素的值 Val(array) check,select,radio等都能使用为之赋值,属性 attr(name) 取得第一个匹配元素的属性值 attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性 attr(key,value) 为所有匹配的元素设置一个属性值,属性,CSS css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性 属性名包含 “-“的话，必须使用引号 css(name,v
8、alue) 在所有匹配的元素中，设置一个样式属性的值 css(name) 访问第一个匹配元素的样式属性,CSS,addClass(class) 为每个匹配的元素添加指定的类名 removeClass(class) 从所有匹配的元素中删除全部或者指定的类 toggleClass(class) 如果存在（不存在）就删除（添加）一个类 toggleClass(class,switch) 如果开关switch参数为true则加上对应的class，否则就删除,动态操作样式,内部插入 append(content), appendTo(content), prepend(content), prepend
9、To(content) 外部插入 after(content), before(content), insertAfter(content), insertBefore(content),文档处理,文档处理,包裹 Wrap(html|elem|fn)、unwrap()、 wrapAll(html|elem)、wrapInner(html|elem|fn) 替换 replaceWith(content)、replaceAll(selector) 删除 Empty()、remove(expr)、detach(expr) 复制 Clone()、clone(true),位置 Offset()、offs
10、et(coordinates)、position()、scrollTop()、scrollTop(val)、scrollLeft()、scrollLeft(val) 尺寸 Height()、height(val) 、width() 、width(val) 、innerHeight() 、innerWidth() 、outerHeight(options) 、outerWidth(options),文档处理,文档处理,形式一： 形式二：,DOM中的事件,$(function () $(“#Button1“)0.onclick = a; ); function a() alert(“ Hello
11、World “); ,$(function () $(“#Button1“)0.onclick = function () alert(“Hello World“); );,Dom对象,匿名函数,bind,JQuery中的事件,$(function () $(“#Button1“).bind(“click“, a); ); function a() alert(“ Hello World “); ,$(function () $(“#Button1“).bind(“click“, function () alert(“Hello World“); ); );,Bind的优势,添加的是多播事件委
12、托. 也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.,$(“#Button1“).bind(“click“, function(event) alert(“one“); ); $(“# Button1 “).bind(“click“, function(event) alert(“two“); );,Val,Val Val() 获得第一个匹配元素的当前值 Val(val) 设置每一个匹配元素的值 Val(array) check,select,radio等都能使用为之赋值,Bind的优势,统一了事件名称. ie中是事件名称前面有“on”. 但是使用b
13、ind()函数我们不用区分ie和dom。 可以将对象行为全部用脚本控制. 让HTML代码部分只注意“显示“逻辑. 现在的趋势是将HTML的行为, 内容与样式切分干净. 其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式. 使用jQuery事件处理函数可以避免在HTML标签上直接添加事件.,事件,JQuery中的事件,One 用法和bind相同，只是该事件只执行一次，执行完之后处理程序就会自动删除,one,trigger和triggerHandler 用来触发一个事件，不同之处在于trigger触发完之后再执行浏览器本身事件，triggerHandler不触发,trig
14、ger和triggerHandler,Unbind 删除绑定事件,unbind,$(“#Button1”).unbind(); /取消所有事件 $(“# Button1 ”).unbind(“click”); /取消click事件,toggle,toggle 每次点击后依次调用函数,$(“td“).toggle( function () $(this).addClass(“selected“); , function () $(this).removeClass(“selected“); );,基本动画 $(“div”).hide（）； /隐藏 $(“div”). hide（1000）； /隐
15、藏，历时1秒 $(“div”).show（）； /显示 $(“div”). show（1000）； /显示，历时1秒 $(“div”). toggle（）； /切换 $(“div”). toggle（1000）；/切换,动画,滑动动画 $(“#divPop“).slideDown(200); $(“#divPop“).slideUp(“fast“); $(“#divPop“).slideToggle(“slow“); 用法和基本动画相同,动画,淡入淡出动画 $(“#divPop”).fadein(200); $(“#divPop”).fadeout(1000); $(“#divPop”).fa
16、deto(1000,0.7); /第二参数透明度 用法和基本动画相同,动画,自定义动画 animate $(“#divPop”).animate（width:”200px”，2000）； Stop 停止动画 $(“#div”).stop(); jQuery.fx.off 禁止动画,动画,XMLHttpRequest对象 Open方法 Send方法 onreadystatechange事件 readyState属性 Stautes属性,回顾原始AJAX,语法 其中： url ：请求的地址 date：可选，发送的数据 callback： 可选 ，回调函数,JQuery中的load方法,$(选择器）.load(url,data,callback),load方法能够载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式, 如果传递了data参数则使用Post方式 它主
