《[计算机软件及应用]jquery简单教学-1》由会员分享，可在线阅读，更多相关《[计算机软件及应用]jquery简单教学-1（39页珍藏版）》请在金锄头文库上搜索。
1、北京传智播客教育 ,.,课前说明,内容：掌握JQuery编程思想，使用JQuery进行常见网页效果开发。 目标：能够使用JQuery开发常见网页效果。 参考书：锋利的JQuery,JQuery简介,普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Dojo、ExtJS、JQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，也就是咱们调用JQuery的一句函数，JQuery内部这句函数帮我们调用JavaScript中的
2、代码几十句，因为JQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术，Jquery本身就是一堆JavaScript函数。 Jquery是最火的JavaScript库，已经被集成到VS2010了，得到了MS的支持，MS的Ajax toolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。,JQuery简介,JQuery能做什么。JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。 JQue
3、ry的优点：尺寸小、使用简单方便（Write Less, Do More，吃得少干得多。链式编程（$(“#div1“).draggble().show().hide().fly()）、隐式迭代（自动对于多个元素进行迭代方法调用）、屏蔽浏览器差异跨浏览器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件丰富、开源、免费。 VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS008需要安装VisualStudio 和VS90SP1-KB958502-x86补丁会更强更好用。然后引用jquery-1.4.2
4、.js，jquery-1.4.2-vsdoc.js放到同目录下。（2010内置仅指的是不用自己把js文件放进去了，页面照样引用） vsdoc是vs2008sp1以后增加的一个技术，将js文件对应的vsdoc（相当于js库提供的方法的说明库）放到和js一起，就有会这个第三方js的自动提示的功能。 通过DomJQuery的例子简单复习Dom。,简单的JQuery,$(document).ready(function() alert(“加载完毕！“); );/注册事件的函数，和普通的dom不一样，不需要在元素上标记on*这样的事件。 当页面Dom元素加载完毕时执行代码，可以简写为： $(functi
5、on() alert(“加载完毕！“); ); 和onload类似，但是onload只能注册一次(window.onload=function.)（没有C#中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。 JQuery的ready和Dom 的onload的区别(*)：onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。,JQuery提供的函数,$.map(array,fn)对数组
6、array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。猜猜内部实现。 例子，得到一个元素值是原数组值二倍的新数组 var arr = 3, 5, 9; var arr2 = $.map(arr, function(item) return item * 2; );/联想C#委托的例子。函数式编程。 $.map不能处理Dictionary风格的数组。 $.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值。猜猜内部实现。 var arr = “tom“: “汤姆“, “jerry“: “杰瑞“, “lily“: “莉莉“ ; $.e
7、ach(arr, function(key, value) alert(key+“=“+value); ); 如果是普通风格的数组，则key的值是序号。 还可以省略function的参数，这时候用this可以得到遍历的当前元素： var arr = 3, 6, 9; $.each(arr, function() alert(this); );/能读懂。 普通数组推荐用无参，用dict风格的就用key、value。,jQuery对象、Dom对象,jQuery对象就是通过jQuery包装Dom对象后产生的对象：alert($(#div1).html()。Dom对象要想通过jQuery进行操作，先要
8、转换为JQuery对象。 $(#div1).html()等价于：document.getElementById(“div1“).innerHTML; $(#div1)得到的就是jQuery对象，jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所以alert($(#div1).innerHTML是错的，因为innerHTML是DOM对象的属性。 Array是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用 （*）将Dom对象转换为JQuery对象的方法，$(dom对象)；当调用jQuery没有封装
9、的方法的时候必须用Dom对象，转换方法：var domobj = jqobj0或者var domobj=jqobj.get(0) jQuery修改样式：$(“#div1“).css(“background“, “red“);获得样式$(“#div1“).css(“background“)；修改value：$(“#un“).val(“abc“)，获得value：$(“#un“).val()，类似的获得、设置innerText、innerHTML用text()和html()。val、html、text等是方法，不是属性，jQuery中很少有属性的用法，因为属性写法很难“链式编程”。,JQuery选
10、择器,JQuery选择器用于查找满足条件的元素，比如可以用$(“#控件Id“)来根据控件id获得控件的jQuery对象，相当于getElementById： $(“#div1”).html(“hello”)。语法、意义类似于CSS选择器 $就是函数，自己动手写一把。 $(“TagName“)来获取所有指定标签名的jQuery对象，相当于getElementsByTagName： $(function() $(“#btnClick“).click(function() $(“p“).html(“我们都是P“); ); ); 匿名函数的写法如果嵌套层数过多，可以将匿名函数写到单独的一个匿名函数然后
11、用变量指向它，但是不推荐直接写一个命名函数再传进去 JQuery中注册事件监听的写法：click()、leave()、focus()、blur.，自己动手写click函数。,JQuery选择器2,CSS选择器，同时选择拥有样式的多个元素（类似于CSS选择器）： .test background-color:Red $(function() $(“.test“).click(function() alert($(this).text(); ); ); test1 test2 test3,JQuery选择器3,标签选择器，拥有样式的标签选择器 多条件选择器：$(“p,div,span.menuit
12、em“)，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器） 注意选择器表达式中的空格不能多不能少。易错！ 层次选择器： （1）$(“div li“)获取div下的所有li元素（后代，子、子的子） （2）$(“div li“)获取div下的直接li子元素 （3）$(“.menuitem + div“)获取样式名为menuitem之后的第一个div元素（不常用） （4）$(“.menuitem div“)获取样式名为menuitem之后所有的div元素（不常用）,JQuery的迭代,如何判断对象是否存在，jQuery选择器返回的是一个对象数组(数组中的每
13、个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写： if ($(“#btn1“).length = 0) alert(“id为btn1的元素不存在！“); ,JQuery的Dom操作,1、使用html()方法读取或者设置元素的innerHTML： alert($(“#btn1“).html(); $(“#btn1“).html(“hello“); 2、使用text()方法读取或者设置元素的innerText： alert($(“#btn1
14、“).text(); $(“#btn1“).text(“hello“); 3、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。 alert($(“#btn1“).attr(“href“); $(“#btn1“).attr(“href“, “http:/“); 4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份。,节点遍历,next()方法用于获取节点之后的挨着的第一个同辈元素，$(“.menuitem“).next(“div“)、nextAl
15、l()方法用于获取节点之后的所有同辈元素，$(“.menuitem“).nextAll(“div“) prev、prevAll兄弟中之前的元素。 siblings()方法用于获取所有同辈元素，$(“.menuitem“).siblings(“li“)。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。 案例：选中的p变色 $(this).css();$(this).siblings().css() 案例：评分控件。prevAll,this,nextAll 重申问题，不要$().click=function；好多时候能.出来；不要在引用js的代码里再写代码。,链
16、式编程,高亮选中项：给所有有menuitem这个样式的元素添加click监听事件，当click的时候，向被点击的元素添加highlight这个样式，然后从其兄弟节点（siblings）中移除highlight风格。“.”的时候是针对的上一步的返回值的节点集合的操作。链式编程就是对象一棒棒向下传，能不能正确传下来要看返回值，html()不能传，prevAll().nextAll()也传错。自己动手写。 $(“#tableRating td“).click(function() $(this).prevAll().next().html(“a“); );/经典！ .menuitembackground-color:Yellow; .highlight background-color: Red; $(function() $(“.menuitem“).click(
