成果讲稿黑马503html和javascript

1、北京传智播客教育 北京传智播客教育 jQuery编程讲师：赵晓虎课前说明先发素材。内容：掌握jQuery编程思想，使用jQuery进行常见网页效果开发。目标：能够使用jQuery开发常见网页效果。参考书：锋利的jQueryjQuery官网： jQuery在线API： /api/ (xml文件。)jQuery UI： 北京传智播客教育 常见的JavaScript框架库什么是JavaScript框架库？普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库。常见的JavaScript框架库Protot

2、ype【prut.taip 】、YUI、Dojo【dodo ，豆粥】、ExtJS、jQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，内部都是用JavaScript实现的。（联想SQLHelper）jQuery:jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用jQuery的代码、编写jQuery的扩展插件等仍然需要JavaScript的技术，jQuery本身就是一堆JavaScript函数。jQuery是最火的JavaScript库，已经被集成到VS

3、2010了，得到了MS的支持，MS的Ajax toolkit和jQuery结合也是最方便，jQuery的扩展插件也是非常多。北京传智播客教育 jQuery简介1什么是jQuery？jQuery就是一个JavaScript函数库，没什么特别的。（开源）联想SQLHelper类jQuery能做什么？jQuery是做什么的？jQuery本身就是一堆JavaScript函数，JavaScript是做什么的，jQuery也一样。毕竟jQuery只是用JavaScript编写的函数库而已，有些功能jQuery没有封装，则还需要通过自己写JavaScript来实现。jQuery的特点？Write Less,

4、Do More很好的解决了不同浏览器的兼容问题（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）对于不同控件具有统一的操作方式。体积小（几十KB）、使用简单方便（Write Less Do More）链式编程$(#div1).draggble().show().hide().fly() 、隐式迭代、插件丰富、开源、免费。让编写JavaScript程序更简单、更强大！北京传智播客教育 jQuery简介2jQuery的文件：jquery-1.4.1.js【常规的jQuery文件】jquery-1.4.1.min.js【经过压缩的jQuery文件，项目

5、部署后使用】jquery-1.4.1-vsdoc.js【vs2008下，智能提示需要的文件】jQuery最新版本：jquery-1.7.2.jsjquery-1.7.2.min.js开发jQuery的工具vs2010【推荐，将jQuery添加到页面中后，即可以显示智能提示】vs2008【需要vsdoc文件】1.安装vs2008sp1补丁2.安装VS90SP1-KB958502-x86补丁，下载地址见备注1.3.将vsdoc文件添加到页面或者将vsdoc文件与常规jQuery放在同一个目录下。【引用jQuery-1.4.1.js并jQuery-1.4.1-vsdoc.js放到同目录下，不需要在页

6、面引用】注：vs2008下jQuery的智能提示依赖于vsdoc文件，而vs2010下的智能提示直接依赖于引入的jQuery文件。要想显示文档注释，必须依赖vsdoc文件。北京传智播客教育 jQuery中的顶级对象$(jQuery对象)jQuery中最常用的对象即$对象，要想使用jQuery的方法必须通过$对象。只有将普通的Dom对象封装成jQuery对象，然后才能调用jQuery中的各种方法。$是jQuery简写，在代码中可以使用jQuery代替$，但一般为了方便大家都直接使用$。写注释，后续jQuery代码会越写越多，所以必要的注释一定要写。北京传智播客教育 编写简单的jQuery代码需求

7、：页面加载完毕后弹出“加载完毕！”。通过window.onload实现。通过jQuery的方式实现。$(document).ready(fn);$(fn); 【等价于$(document).ready(fn);】window.onload与$(document).ready(fn);的区别window.onload需要等待页面完全加载完毕才会触发，即所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发。$(document).ready()只要Dom元素加载完毕即触发。这样可以提高响应速度。$(document).ready();可以多次注册事件处理程序，并且最终都会执行，而window

8、.onload每次注册新的事件处理程序时都会将前面的覆盖掉。使用jQuery实现window.onload的效果：$(window).load(fn);jQuery中注册事件是load(fn)而不是onload(fn);与Dom不一样。北京传智播客教育 jQuery中提供的两个函数$.map(array,callback(element,index);对于数组array中的每个元素，调用callback()函数，最终返回一个新的数组。原数组不变。jQuery1.4时处理“键值对”数组有问题，但在1.7中已经没有问题了。案例1：将一个数组中的元素翻倍，并返回一个新数组。备注1.案例：将一个数组中

9、索引大于3的元素的值翻倍，其余值不变，并返回一个新数组。备注2.$.each(array,fn)/遍历数组,return false来退出循环。主要用来遍历数组，不修改数组，对于普通数组或者“键值对”数组都没有问题。在each函数中可以直接使用this,表示当前元素的值。北京传智播客教育 jQuery中的trim()$.trim(字符串);/去掉两端空格，调试看实现方式。字符串.replace(/s+/,);trimLeft = /sxA0+/;trimRight = /sxA0+$/;北京传智播客教育 jQuery对象、Dom对象Dom对象如果想调用jQuery的方法必须先转换为jQuery

10、对象。Dom对象：文档树中的对象都是dom对象。jQuery对象：把Dom对象包装后就得到了jQuery对象。如何获取Dom对象？var spObj=document.getElementById(span1);spObj.innerText=Hello World;/存在浏览器兼容问题如何将Dom对象转换为jQuery对象？DomjQuery$(spObj).text();/$(Dom对象),就将Dom对象转换为了jQuery对象。不能通过jQuery对象调用Dom对象的方法，例如：$(spObj).innerHTML;如何将jQuery转换为Dom对象？jQueryDom$(spObj).

11、get(0).innerHTML$(spObj)0.innerHTML如何直接通过jQuery方式获取页面上的元素？（获取后直接就是一个jQuery对象）$(#id)、$(span)、$(.cls)、通过jQuery对象即可调用：.text()、val()、html()、css(color,red)、。jQuery中大多都是方法少有属性，因为属性很难链式编程。获取值、设置值都是使用的同一个方法，有参数表示设置值，无参数表示取值。北京传智播客教育 问题Array（数组）对象有没有对应的jQuery对象？数组本身就不是Dom对象。不存在与jQuery对象之间的转换。使用jQuery语句可以直接使用

12、数组，就像$.each()或$.map();补充：通过document.getElementsByTagName()或者document.getElementsByName()获取的返回值是一个类似于数组的值，但不是数组，没有数组特有的方法，比如reverse()等，类似于C#中的string可以看成是一个char数组，但是其实不是，string是对char数组的封装。parseInt()Array这些是不需要转换的。北京传智播客教育 jQuery选择器1jQuery核心选择器Sizzle.js【 】选择器：用于选取页面上的元素对象。jQuery选择器完全继承了CSS选择器的方式。(学会了cs

13、s的选择器就会jQuery的选择器了)jQuery选择器是学习jQuery的基础。Dom中如何获取页面中的元素对象？document.getElementById(id);document.getElementsByTagName(input);document.getElementsByName(gender);jQuery中获取页面中的元素对象Id选择器：$(#id);标签选择器：$(input)【$(*);选择页面上的所有元素。】(*)属性过滤选择器：$(*name=gender)或$(name=gender)案例1：设置某个div中显示的内容，通过Id选择器案例2：为某个按钮注册单击事

14、件，单击的时候设置页面上所有的p标签中显示文字为“我们都是P”。/隐式迭代北京传智播客教育 .html(val).text(val).css()链式编程，隐式迭代。链式编程注意：$(div).html(设置值).val(设置值);这样可以，但是$(div).html().text()这样是不对的，因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。【通过开发人员工具调试方法。】北京传智播客教育 jQuery选择器2类样式选择器：$(.class); .test background-color:Red $(function() $(.test).click(function() a

15、lert($(this).text(); ); ); test1 test2 test3北京传智播客教育 标签+类选择器$(function () $(#btn1).click(function () /必须即是div标签，还得应用功能了cls类样式才能被匹配到。 $(div.cls).text(找死.); ); );= divk content dsfdsafdfdsa 合法的沙发几点睡啊f佛军打撒 北京传智播客教育 jQuery选择器3多条件选择器(组合选择器、复合选择器)：($(“p,div,span.menuitem”)，同时选择p标签、div标签和拥有menuitem样式的span标

16、签元素。【将每个选择器匹配到的结果合并到一起】层次选择器：（1）后代，$(“div li)获取div下的所有li元素（后代，子、子的子）（2）子元素，$(“div li”)获取div下的直接li子元素 【必须是直接子元素】（3）相邻元素1：$(“.menuitem + div”)获取样式名为menuitem之后的相邻的（紧接着的）第一个div元素（不常用）等同于$(.menuitem).next(div);如果相邻的那个元素不是div,则不会继续向后找。（4）相邻元素2：$(“.menuitem div”)获取样式名为menuitem之后所有的兄弟div元素，等同于$(. menuitem )

17、.nextAll(div)。【nextAll(*)或nextAll()表示后面的所有元素。】$(*);选取所有的元素。注意：选择器表达式中的空格不能多不能少。易错！过滤器与表单选择器时注意。北京传智播客教育 获得兄弟元素的几个方法next(); /当前元素之后的紧邻着的第一个兄弟元素（下一个）nextAll();/当前元素之后的所有兄弟元素prev();/当前元素之前的紧邻着的兄弟元素（上一个）prevAll();/当前元素之前的所有兄弟元素siblings();/当前元素的所有兄弟元素案例：页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之

18、前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。注意：nextAll()、prevAll()等方法返回值是一个元素集合，这里链式编程时要想清楚当前返回的值是什么。参考备注1.案例2：评分控件。参考备注2、备注3.北京传智播客教育 jQuery的迭代(包装集)如何判断对象是否存在，jQuery选择器返回的是一个对象数组，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：if ($(#btn1).length 0/用途：可以判断页面上的某个元素是否存在

19、，如果存在则不再重新创建，如果不存在则创建一个新的并显示（动态创建元素的时候用。）北京传智播客教育 链式编程|addClass|removeClass高亮选中项：给所有有menuitem这个样式的元素添加click监听事件，当click的时候，向被点击的元素添加highlight这个样式，然后从其兄弟节点（siblings）中移除highlight风格。“.”的时候是针对的上一步的返回值的节点集合的操作。链式编程的时候一定要注意在什么时候“破坏”了链，当前对象的传递，如果传递被破坏，则继续链式编程会有意想不到的结果！nextAll(),prevAll(),sibilings()如何解决：调用e

20、nd()方法。（返回链 被破坏前的对象。）案例：被单击的p，引用highlight样式，其他p移除样式。见备注。toggleClass(class);/切换样式的显示。hasClass(class);/判断是否应用了某样式。北京传智播客教育 基本过滤选择器:first 选取第一个元素。$(div:first)选取第一个:last 选取最后一个元素。$(div:last)选取最后一个:not(选择器) 选取不满足“选择器”条件的元素，$(input:not(.myClass)选取样式名不是myClass的:even、:odd，选取索引是偶数、奇数的元素：$(input:even)选取索引是奇数的

21、:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$(input:lt(5)选取索引小于5的$(:header)选取所有的h1h6元素（*）$(div:animated)选取正在执行动画的元素。 （*）北京传智播客教育 案例第一行是表头，所以显示大字体（fontSize=30px），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（28）表格的偶数行是红色色背景。用Dom实现；用jQuery实现。对比差异！注意：gt(0):lt(3),表示先筛选出所有大于0的，然后在此基础上再筛选出所有小于3的，即：在所有大于0的基

22、础上再选择0,1,2。北京传智播客教育 案例案例：点击按钮，表格隔行变色。奇红，偶黄。案例：列表中的前三名粗体显示。（前三个li）font-weight:bolder案例:表格点击(鼠标over事件)行背景色变黄，其他行背景色变白。不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素. $( “ul”, $(this) ).css(“background”, “red”); $(选择器,context);例如：$(td,$(div table tr);context参数可以是用dom对象集合或jQuery对象默认如果不传递context则，

23、会在整个文档中搜索。案例：修改点击行的所有td的背景色，将当前点击行的td设置为奇数td背景色红色，偶数td背景色蓝色。通过$(td,context)。备注1练习：图片版评分控件。参考北京传智播客教育 属性、表单过滤器属性过滤选择器：$(divid)选取有id属性的$(divtitle=test)选取title属性为“test”的，jQuery中没有对getElementsByName进行封装，用$(inputname=abc)$(divtitle!=test)选取title属性不为“test”的还可以选择开头【name=值】、结束【 name$=值】、包含【 name*=值】等，条件还可以复

24、合。【属性1=a属性2=b】（*）表单对象属性选择器（过滤器）：$(#form1 :enabled)选取id为form1的表单内所有启用的元素$(#form1 :disabled)选取id为form1的表单内所有禁用的元素$(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.$(select :selected)选取所有选中的选项元素（下拉列表）北京传智播客教育 元素的eachjQuery元素也可以调用each方法，只是对$.each的简化调用。return false;终止循环.案例：页面中有多个复选框，显示选中的复选框信息。共选中2项。

25、值：tom,lily $(function() $(inputname=names).click(function() var names = $(inputname=names:checked); var arr = new Array(); names.each(function(key, value) arrkey = $(value).val(); ); $(#msgNames).text(共选中+names.length+条：+arr.join(,); ); ); tom jim lily 北京传智播客教育 表单选择器$(“:input)选取所有、和元素。和$(input)不一样，

26、$(input)只获得$(:text)选取所有单行文本框，等价于$(inputtype=text),$(inputtype=text),$(:text);$(“:password”)选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。代替了$(inputtype=*);inputtype=radio:radioinputtype=checkbox :checkboxinputtype=text :text北京传智播客教育 其他过滤器(*)可见性过滤器：:hidden选取所有不可见元素包括:(如果直接写

27、:hidden则会包含headtitlescriptstyle.)1.表单元素type=“hidden”2.设置css的display:none3.高度和宽度明确设置为0的元素。4.父元素时隐藏的，所以子元素也是隐藏的visibility: hidden 与opacity为0不算，因为还占位所以不认为是hidden.(与之前版本jQuery不太一样，1.3.2之前):visible选取所有可见元素注意：$(.cls :hidden);与$(.cls:hidden);是不一样的。内容过滤器：:contains(text),过滤出包含给定文本的元素。(innerText中包含。) :empty,过

28、滤出所有不包含子元素或者文本的空元素。:has(selector),过滤出元素中包含（即子元素中）selector选择器能选择到的元素。:parent,过滤出可以当做父元素的元素（即该元素有子元素或者元素中包含文本。）北京传智播客教育 子元素过滤器(*):first-child,与:fisrt的区别,:first只能选取第一个，而:first-child，则能选取每个子元素的第一个元素。$(ul li:first);只返回一个li元素。$(ul li:first-child);/为每个父元素（ul）都返回一个li。:last-child:only-child,匹配当前父元素中只有一个子元素的元

29、素。:nth-child,对比eq()来理解，eq()值匹配一个，nth-child()为每个父元素都要匹配一个子元素。:nth-child(index),index从1开始。:nth-child(even):nth-child(odd):nth-child(3n),选取3的倍数的元素:nth-child(3n+1),满足3的倍数+1的元素。.children()方法,只考虑子元素，不考虑后代元素。北京传智播客教育 jQuery的Dom操作1、使用html()方法读取或者设置元素的innerHTML：alert($(a:first).html();/innerHTML $(a:first).h

30、tml(hello);2、使用text()方法读取或者设置元素的innerText：alert($(a:first).text();$(a:first).text(hello);3、使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。 alert($(a:first).attr(href); $(a:first).attr(href, ); attr(key:value,k:v); 4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(name,)北京传智播客教育 动态创建Dom节

31、点使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到Dom中： var link = $(百度); $(div:first).append(link);$()创建的就是一个jQuery对象，可以完全进行操作var link = $(百度);link.text(百毒);$(“div:first”).append(link);。创建radio，使用$();，而不要在创建好后通过attr(name,gender)./通过attr()设置name,在IE6下有问题。append方法用来在元素的末尾追加元素（最后一个子节点）。prepe

32、nd，在元素的开始添加元素（第一个子节点）。after，在元素之后添加元素（添加兄弟）before：在元素之前添加元素（添加兄弟）案例：jQuery动态创建表格。(动态加载网站列表，从json中取数据)练习：无刷新评论。北京传智播客教育 其他追加方法(将自己追加到某元素)子元素.appendTo(父元素);/主动巴结!到最后一个子元素.prependTo(父元素);/主动巴结到第一个。(*)A.insertBefore(B);将A插入到B的前面，等同于B.before(A);(*)X.insertAfter(Y);将X插入到Y的后面，等同于Y.after(X);北京传智播客教育 删除节点emp

33、tys();清空某元素下的所有子节点内部实现：while(ele.firstChild)ele.removeChild(ele.firstChild);/不同版本可能不一样。remove(selector) 删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下：var lis = $(#ulSite li).remove();$(#ulSite2).append(lis);参数expr,是一个选择器，如果没有选择器，表示把选中的元素删掉，如果有选择器则表示在选中的元素中，再过滤出expr匹配的元素删除掉。案例：清空ul中的项，代码见备注。$(ul li.te

34、stitem).remove(); 删除ul下li中有testitem样式的元素。 权限选择：var items = $(“#select1 option:selected”).remove(); $(“#select2”).append(items); 更狠的：$(“#select1 option:selected”).appendTo($(“#select2”)；/在jQuery1.4.1下不太一样。（*）clone()克隆节点，只复制节点，没事件。clone(true)克隆节点带事件。添加到购物车案例，元素内容不变只是样式布局变了，简单。.clone().appendTo();北京传智播

35、客教育 补充写代码的好习惯，、(写完开始就写结束，省得忘了。，在jQuery中这样写就不容易写错了。如果报错“例外被抛出”等，很可能是选择器表达式有问题，比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库，没有任何的魔法，任何看似怪异的写法都是很合法的JavaScript语法。jQuery就是一堆写好的JavaScript函数库而已，没有什么特殊的，你也可以写出来，因此完全可以和普通JS代码混着用。最好不要dom、jQuery方式混着用。注意不同jQuery版本的区别。北京传智播客教育 练习加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。设置可用性等jQuery未封装方法：attr()setInterval()无刷新评论。(已做)案例1：创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是focus，焦点离开控件的事件是blur。案例：选择球队,两个ul。被悬浮行高亮显示（背景是红色），点击球队将它放到另一个的球队列表。/清除所有事件。.unbind();jQu