2011级计算机专业web前端和后台

上传人：汤*** IP属地：北京上传时间：2023-04-27 格式：DOCX 页数：967 大小：21.74MB 积分：35 举报 版权申诉

已阅读5页，还剩962页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

前言web前台后台、网页游戏和手机游戏目前工作招聘状态今天下午(2014-5-30日)，张先智来了一趟，讲了一个故事。混。刚开始时月薪不到元，很苦呀！后来慢慢才换现用AS3.0写网页游戏程序很赚钱，便在毕业后第二年战，他现在在北京已经开始建立自己合伙网页游戏公司1了，我在两年前就讲过是未来网页游戏的主要特别是计师的同学，我已经讲了AS3.0，未来可以向网页游戏和游戏方向发展。这个方向未来前途远10级计师班的向庄源目前在做游戏方面的工作，他刚答辩完已经回了。。。他在答辩期间给我讲，他们，目前今天下午在我家里同学还告诉我，在重庆听2还有位06级计科万威同学，过去只学习过一点点语了目前戴老师给11级讲的前端和他目前的月薪在1.5元万左右。不想当老师的同学一定作的情况下，在重庆市懂前端和技术的同学很好找工作。级的学生目前还在读大三，就已经有些个的学生就有40个工作岗位在等着他们去工作。这在二个月前就有公司叫她去面试了，公司给一位普通的大三实习期月薪水元。前天周四晚上，11级计师同学孙凤翔遇见我，她说她去参加了招聘会，有公司要她去面试，她很高兴，也开始有3心了。并且她还说很感谢戴老师给她们讲了前端和时（开个玩笑），她已经闪得无影无踪了。。另外年是响应式元年。戴老师本学期已经向级计科和计师的同学全面搭建了响应的系统和制作技术，希望11级的全体过去著名的富人成功的案例上看，机会比拿更重。。。特别是下周戴老师开始讲jQuery，其代码了，以戴老师看来，比校花呀班花不知道要优美多大作业。。。4 估算了一下，每年计算机专业的毕业生可能在万人之间。。。我们在庆幸的是，高结果没有走市场细分。而我院经过这两年的努力，慢慢调整课程也慢慢开始走上了市场细分，我相信我院的计算机专业学生将会学有，将会比较好地寻未来的网络世界里更有前途。。。。要相信，大展鸿图的时候到了。。11级和11级以后的，比前三届毕业生不知幸56一、jQuery介jQuery是一个优秀的JavaScript库，由JohnRisig创建于年1月的开源项目。JavaScript开发人员遍历文档、操作、处理事改变了JavaScript程序员的设计思路和编写程序的、jQuery的理念追求代码写得少，做事做得多。独特的选择器、链式操作、处理机制和封闭完善的Ajax，都是JavaScript库望尘莫及的优势。7(1)轻量级。jQuery非常轻巧，通过压缩以后，jQuery的压缩库文件一般只有几十KB。请如果想支持IE9.0以前的版本，例如IE6.0、IE7.0和IE8.0浏览器时，要V1.11.0版本,如果只想支持IE9.0以后的浏览器时，只V2.1.0版本。 jQuery库文件时，有压缩版和非压缩版。压缩版主要用于工程项目，因为文件包的字节数小。开发出了网页以后，应该用压缩版的jQuery库文件。而非压缩版主要用于教学研究和学习，因为此文件里的代码都是通常阅读的代码，便于学习和研究。在官网上，jQuery库文件都是以网页打开，然后在网页上ctrl+A全选，然后粘贴到DW编辑窗口中（要先把DW原先窗口中的代码删除掉）,保存，分别取文件名 jquery-注：v1.11.0版文件名，未压缩。jquery-注：v1.11.0版文件名，压缩jquery-注：v2.1.0jquery-注：v2.1.0版文件名，压缩从以上文件字节数来看，jquery-1.11.0.js文件的字节数还要大一些，这是由于此文件兼容了IE低版本的浏览器，即IE9.0版以下的浏览器都能兼容。而jquery-2.1.0.js文件要小一些，这是由于向下兼容IE低版本如果你做的网页要考虑低版本的IE浏览器，那么要选用v1.11.0版的jquery库。自己打开网页，然后自己在编习讨论空间】群里的。乎所有的选择器，即jQuery可以独创高级的复杂选择器，XPath选择器。（3）出色的操作封装。jQuery封装了大量的常用操作，使开发者在编写操作相关程序时得心应手，轻松完成原本非常复杂的操作，让JS新手也能写出的程序。（4）可靠的处理机制。jQuery处理机会吸 Edwards编写的处理使得ry华，理绑定时相当可靠。（5）完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里，这样开发者在处理Ajax时能够专心（6）不污染顶级变量。jQuery只建立一个名为的对象，其所有的函数方法都在这个对象之下，其别特性使jQuery可以与其它JS库共存，在工程项目中放心（7）出色的浏览器兼容性。作为一个流行的JS库，浏览器的兼容性是必须具备的条件之一。jQuery能够兼容IE6.0+、FF3.6+、Safari5.0+、和等浏览器，jQuery还修复了一些浏览器之间的差异性，使开（8）链式操作方式。jQuery最有特色的地方莫过于链式操作方式，即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。这一特点使jQuery代码无比优雅。（9）隐式迭代。当jQuery寻找到某类的全部元素时，就免除了大量使用循环语句，大幅地减少了代码量。选择器选中元素，然后直接给元素添加。这种将行为层与结构层完全分离的思想可以使jQuery开发人员和或者其它页面开发人员各司其职，摆脱过去开发冲突或者个人单干的开发模式。同时，后期也非常方便，不需要在代码中寻找某些函数和重复修改L代码。（11）丰富的插件支持。jQuery容易扩展，吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有成百上千的插件支持，而且还不断有新插件面世。（12）完善的文档。jQuery的文档非常丰富，有英文文档，也有中文文档。专业人员长期在更新中文文档。（13）开源。jQuery是一个开源产品，任何人都可地址打开网页，ctrl+D 这是 jQuery库分两种，一种是生产版（最小化和压缩版），还有就是开发版（未压缩）。不同的版本的jQuery库文件尺寸不jquery-1.11.0.min.jsjquery-1.11.0.jsjquery-2.1.0.min.jsjquery-2.1.0.js

由于在V2.1.0版本中没有包含低版本的IE浏览器中的兼容性代码，所以反而文件尺寸还要小一些。V1.11.0版本中对低版本的IE浏览器兼容，即对IE6.0、7.0、8.0歉，也对高版本的IE9.0及以上版本的浏览器为了在实验中少写代码，我们把jquery-1.11.0.js文件修改文件名为：jquery.js版，即把jquery-1.11.0.min.js文件修改文件名为：jquery.js这样，未来的代码件件。这也是件了3、放置jquery.js文件位在下，建立一个文件夹scripts,然后把jquery.js文件放在此里。同理，在服务器里的下建立一个scripts ，把压缩的jquery.js 只要在文档根下建立一个scripts下级子并在此里存放jquery.js 4、编写第一个jQuery程序在JS中，先要让所有的标记加载完成以后才能写JS程序，否则会出错。于是在写程序时，要在里编写JS代码。而在jQuery中，所有代码要在以下方法函代})有简写方式$(function(){})window.onload与).ready()对比执行时机毕后(包括)才能执行。可能DOM元素关联的东西并加载完。编写个数结果只输出了 o o简化方法无 htmlPUBLIC content="text/html;charset=utf-8" <title>JQ 引入 <scriptsrc="scripts/jquery.js"<scriptsrc="scripts/jquery.js"<script//等待元素加载完毕. $(".level1 >a").click(function(){ $(this).addClass("current") //给当前元素添加"current"样式.next().show()//下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<除"current"样式.next().hide(); //它们的下一个元素隐藏 false;})})其实以上添加的代码也可以链式写 $(".level1 >a").click(function(){ $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide(); false;})})6、对象与JS对象对象)的区别对象只能使用JS的属性和方式函数，不能使用的var //获得对象var//使用JS中的属性或者把以上二句代码综合写成一如果用写以上功能的代码$("#foo").html(); //获取id为foo元素内的html代码。html()为中的方法函数在对象变量名前加$var$变量对象在对象变量名前不加$，格式变例如：var$cr=$("#cr");//jq对var 1）JQ对象转换为对象由于对象变量是数组，也能把的对象变量转换对象，例如var$cr=$("#cr");varcr=$cr[0];其实也可以使用get(index)函数把对象变量转换成JSvar$cr=$("#cr");//jq对//varcr=$cr[0];varcr=$cr.get(0);//转换成对象alert(cr.checked);//提示此checkbox是否被选中对象(JS对象)转换为对用$()函数把对象包装起来成为对象，格对象);例如：var var$cr=$(cr);//JQ对象提示：$()函数是对象的制造工厂，或者讲对象都是由此 htmlPUBLIC content="text/html;charset=utf-8" <title>jq7_表格引入 <script//等待元素加载完毕 /*添加注释：在一个id为table的表格的tbody中，如果每行最后一列中的checkbox没有被禁用，则把这行的背景设为红色*/ led))").css("background","red");})<table 第第第第第第第第第行<input第第第第第第第第第行<input由于第一行和第三行的checkbox不可选，则背景不是红色。而第二行和第四行的checkbox可选，则背景是红色 htmlPUBLIC content="text/html;charset=utf-8" <!- 引入 -- //等待元素加载完毕 var 象var$jQueryObj //转换为对alert("jQuery对象}) ptitle="选择你最喜欢的水果."是<li>苹果<li>橘子<li>菠萝

>你最喜欢的水alert("jQuery对象 htmlPUBLIC content="text/html;charset=utf-8" <!- 引入 -- //等待元素加载完 var$cr$("#cr"); //jQuery对varcr=$cr.get(0); 对象，获取$cr[0]$cr.click(function(){if(cr.checked){ 方式判alert("感谢你的支持!你可以继续操作!");}});})"/>< - //等待元素加载完 var$cr$("#cr"); //jQuery对$cr.click(function(){")

if($cr.is(":checked")){ //jQuery方式alert("感谢你的支持!你可以继续操作}})}); 我已经阅读了上面制度补充知识：is(expr|obj|ele|fn)概根据选择器、元素或jQuery对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'。'''注意：'''在jQuery1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如+, ~和>），始终会返回true参字符串值，包含供匹配当前元素集合的选择器表达一个用于匹配元素的元素。一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的元素。示参数expr描述由于input元素的父元素是一个表单元素，所以trueL代码jQuery代码$("input[type='checkbox']").parent().is("form")结果回调函数描述判断点击li 个strong,当前的li增加背景色为绿色，L代码 <li><strong>list</strong>item1-onestrong<li><strong>list</strong><li>list itemjQuery代码$("li").click(function() var$li =$(this),isWithTwo=$li.is(function() return$('strong', this).length =2;})i $li.css("background-color", "green"); else$li.css("background-color", "red");}}) htmlPUBLIC content="text/html;charset=utf-8" 解决 $("pp").style.disy='none';当隐藏prototype.js后，此句代码就失灵了$("pp").style.dis ='none';个标记的内容。如果把后句代码注释<scriptsrc="lib/prototype.js"//$("pp").style.dis ='none';在上例中，可以把jQuery()函数当作jQuery对象的制造工厂，凡在此函数中的代码都是jQuery代码。在下例中，用下式定义一个快捷方式，取名为$j:var$j=jQuery.no 然后用$j去替换上例中的jQuery()函数，于是也可以防止jQuery代码与其它库的JS代码当然，快捷方式变量名也可以取其它名，例如：jq、$J等。 - - pid="pp">Test-prototype(将被隐p <scriptvar$j=jQuery.no ();//自定义一个比较短$j(function(){ //使用jQuery，$j的位置就是jQuery()函数的位置$j("p").click(function(){alert( $j(this).text() )})})$("pp").style.dis ='none';prototype.js隐藏元素

//使用在实验中，以下红色代码(第二行)中添加一个$形参，就可以让function($)函数里的代码成为jQuery代码。原码：jQuery.no ();jQuery(function(){ //使用jQuery("p").click(function(){alert( jQuery(this).text() )})})修改成jQuery.no ();jQuery(function($){都是jQuery代码

//function($)函数内的代码$("p").click(function(){alert( jQuery(this).text() )})}) content="text/html;charset=utf-8"/> 解决 <!--引入 --<scriptsrc="scripts/jquery.js"pid="pp">Test-prototype(将被隐p>Test-jQuery(将被绑定单 <scriptjQuery.no ();//将变量的控制权让渡给prototype.js(function($){ //定函数并设置形参为$(function(){ 函数内部的均为$("p").click(function(){//继续使用jQuery $方alert($(this).text());})})})(jQuery);//执函数且传递实参$("pp").style.dis ='none';

//使用

前面四个实验都是其它js库先导入，库后导入，为了不让库与库之间产生需要使用以下代码：jQuery.no ();2）jQuery库在其它JS库之前导入把jq11.html文件另存为jq15.html文件，然后把"jQuery.no 与其它JS库产生了 jQuery库后于其它JS库导入的结果。如果再修改一下代码，让先导入jQuery库，然后再导入其它JS库，则效果正常，该隐藏的内容都可以隐藏了。jq15.html pid="pp">Test-prototype(将被隐p <script//jQuery.no ();//将变量的控制权移交给jQuery(function(){//使用jQuery("p").click(function(){alert( jQuery(this).text() )})})

$("pp").style.dis ='none';//使用prototype.js隐藏元把JQ13.html文件另存为jq16.html文件（1）先导入jQuery库，再导入其它JS（2）注释掉jQuery.no ();jq16.html pid="pp">Test-prototype(将被隐藏p>Test-jQuery(将被绑定单 <script//jQuery.no ();//将变量的控制权让渡给 //使用$("p").click(function(){ //继续使用$方alert( $(this).text() )})})$("pp").style.dis ='none';//使用 jq17.html最后代码 htmlPUBLIC Transitional//EN"" 解决<!--引入 --<scriptsrc="scripts/jquery.js"<!--引入 --<scriptsrc="lib/prototype.js"pid="pp">Test-prototype(将被隐藏p>Test-jQuery(将被绑定单 <script//jQuery.no prototype.js

//将变量的控制权让渡给(function($){ //定函数并设置形参为$(function(){// 函数内部的均为 $("p").click(function(){//继续使用$方alert($(this).text());})})})(jQuery); //执函数且传递实参$("pp").style.dis ='none';

//使用

解决jQuery库与其它JS库代码小结(1)当jQuery库与其它JS库混用时，系统自动把代码的控制权交给了其它JS库。(2)如果其它JS库先于jQuery库导入，则要在代码中添加以下语句：jQuery.no ();(3)如果其它JS库后于jQuery库导入，要在代码中可不加以下语句：jQuery.no ();，但加了也可以。(4)jQuery()函数是jQuery代码的制造工厂，所以在此函数中都是jQuery代码。(5) function($) 型：jQuery.noConflict(); //使用$("p").click(function(){alert( $(this).text() )});});型jQuery.noConflict();(function($){ //定义匿名函数并设置形参为$(function(){ //匿名函数内部的均为jQuery});

$("p").click(function(){alert($(this).text());});})(jQuery);//执行匿名函数且传递实参

(6)使用快捷方式可以不管jQuery库与其它JS库的导入先后次序。var$j=jQuery.no ();$j(function(){ //使用$j("p").click(function(){alert( $j(this).text() )})})9、jQuery开发工具和插在窗口中编写代码时不会提示jQuery代码。这样编写系统中添加jQuery的开发工具，才能提高工作效率此工具可以在【师生学生讨论空间】里，也可以在网上寻找。添加此插件的方法文件菜单上的“安装扩展”命令，直接安装如下图所示重新启动系统即可。

添加此插件的方法在的“命令”菜单中，执行：扩展弹出Extension窗口，以后的方法与方法1相同。这是一款功能强大的网页编辑器，支持显示JS和代码提示.方法：最好安装在盘上。有汉化包。在解包明二、jQuery选择在jQuery中选择器是根基，处理、遍历和Ajax1、选择器面我们已经学习了选择，下面复常用选择选择器1）标记选择描述：以文档元素作为示例：td{font-a{text-2)ID选择语法：#ID{CSS规则描述：以文档元素的唯一标识符ID作为选择符示例：#note{font-3)类选择器(其中包含标记类别选择器)语法：E.className{CSS规则描述：以文档元素的class作为选择符示例：div.note{font-size:14px;}（标记类别选择器.note{font-size:14px;}4)群组选择器(分组选择器语法：E1,E2,E3{CSS规则描述：多个选择符应用相同示例：td,p,div,a{font-5)后代选择器(嵌套选择器)语法 F{CSS规则描述：元素E的任意后代元素示例：#linksa{color:red;}6)通配选择器语法：*{CSS规则描述示例：*{font-size:14px;}

几乎所有主流浏览器都支持以上的这些常用选翻译：pseudo['sjuːdəʊ] adj.冒充的 n.伪子的子选择器：选择器(相邻兄弟选择器)：属性选择器E[attr]{CssRules}定义样式有三种行内样式（行间样式）、内联样式（内部样式）、外联样式（外部样式）。2、jQuery选择在jQuery中完全继承了的选择器风格，利用jQuery选择器，可以非常便捷和快速地找出特定的元素，持这一选择器。学会使用选择器是学习jQuery的基础。先比例一下JS代码与代码<script demo(){alert('JavaScript p p<script$(".demo").click(function(){alert("jQuery })在上例中，在语言中没行为代码，实现代码行为分离的目标 htmlPUBLIC content="text/html;charset=utf-8"/><scriptfunctionalert('JavaScript }p htmlPUBLIC content="text/html;charset=utf-8" <!- 引入jQuery py><script$(".demo").click(function(){ //给class为o的元素添加行})

alert("jQuery 3、jQuery选择器的1）简洁的写$()函数在很多JavaScript类库中都被作为一个选择器来代替元素，例如: 在jQuery中都很容易搞定。其实ID号、类选择器和标记在里都是选择器。因此，在jQuery中取元素时都可以用以下 $("选择器名")2）支持即使是部分支持CSS3,但选择器已经很丰富了，还有少量的选择器是独有的。只有一定的基础，都能学好jQuery选择器，即学习jQuery选择器是一件非常容易的事情。在即要考虑浏览器的兼容性。而在jQuery中不必考虑这些，因为jQuery已经帮你考虑了浏览器的兼容性的问题。3）完善的处理机在JS中取一个元素时如果此元素不存在就会报错，而在况下，JS中取一个元素时不知道这个元素是否存在，要用IF判断语句先判断元素是否存在，然后再提取元素。例如：<script }以上代码要用IF语句判断#tt存不存在，然后于提取#tt元素而jQuery在提取元素时不需要判断元素是否存在，直接提取就行了，不会报错，例如： //这里无需判断$("#tt htmlPUBLIC content="text/html;charset=utf-8"/><script htmlPUBLIC content="text/html;charset=utf-8" <script

} htmlPUBLIC XHTML1.0Transitional//EN"tstal.dtd"

content="text/html;charset=utf-8"/> 引入jQuery--> src="scripts/jquery.js" $('#tt').css("color","red"); charset=utf-8"/> window.onload=function(){//页面所有元素加载varitems= for(vari=0;i < //循 items[i].onclick =function(){ ngalert("suc!");}}}

//给每一个添测试例子2：让表格隔行变色jq24.html<!DOCTYPE htmlPUBLIC "-//W3C//DTDXHTML 1.0Transitional//EN""transitional.dtd"><html xmlns=" "><head><title>jq24.html</title><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><script type="text/javascript">window.onloadfunction(){ //页面所有元素加载完var //获取id为tb的元素(table)vartbody //获取表格的第一个tbody元vartrs //获取tbody元素下的所有tr元for(vari=0;i <trs.length;i++){//循环tr元 //取模. (取余数.比如0,1, 0, 888";//改变符合条件的tr元素的背景色.}}} <table第一行第一行第二行第二行第三行第三行第四行第四行第五行第五行注释：一定要测试一下，有<tbody<tbody>标记表格显示效果的例子3 htmlPUBLIC Transitional//EN"" function(){//页面所有元素加载完毕varbtn //获取id为btn的元素btn.onclick =function(){//给元素添加onclickvararrays=Array();//创建一个数组对象varitems //获取为check的一组元素for(i=0; <items.length; //环这组数if(items[i].checked){ //判断是否选中arrays.push(items[i].value);//把符合条件添加到数组中 push()是javascript数组中的方法}}alert("选中的个数为)}} 以上例子都是JS的例子，在JS中取元素时要用以下几种函数：而在中，取元素时一般只需要“选择器名”就可以了，$("选择器")$('选择器')1)基本选择器(1)#id选择器描述：根据给定的id匹配一个元素。返回：单个元示例：$("#test")选取id为test(2).class选择器(类选择器描述返回：集合元示例：$(".test")选取所有class为test(3)element选择器(元素选择器，标记选择器等描述：根据给定的元素名匹配元返回：集合元

示例：$("p")选取所有元素4*选择器(通配选择器描述：匹配所有元返回：集合元示例：$("*")选取所有元素。(5)selector1, selector2 selectorN选择（组合选择器描述返回：集合元拥有class为myClass>的所有元素。标记之间 htmlPUBLIC content="text/html;charset=utf-8" 引入jQuery--> <scriptsrc="scripts/jquery.js" <scriptsrc="lib/assist.js"<script //选择id为one的元素$('#btn1').click(function(){})

//选择class 为mini的所有 });

$('#btn2').click(function(){$('.mini').css("background","#bfa");});//选择元素名是div的所有元素$('#btn3').click(function(){$('div').css("background","#bfa");});//选择所有的元素$('#btn4').click(function(){$('*').css("background","#bfa");});//选择所有的span元素和id为的div$('#btn5').click(function(){});

<buttonid="reset<inputtype="checkbox"id="isreset" for="isreset">点击下列按钮时先自动重置页面</label><br/><br基本选择器控制按 --<inputtype="button"value="选择 id为one的元素."

class 为mini的所有元素." 元素名是div的所有元素." 所有的元素." <input素."

<br/><br <inputtype="checkbox"id="isreset"<inputtype="checkbox"id="isreset"钮时先自动重置页面</label><br/><br/><buttonid="reset">手动重置页面元素<inputtype="buttonvalue="span元素和id为two的元素."id="btn5"/><inputtype="button<inputtype="buttonvalue="选择所有的元素."id="btn4"/><inputtype="buttonvalue="选择元素名是div的所有元素."id="btn3"/>inputtype="button"value="选择class为mini的所有元素."<input<inputtype="buttonvalue="选择id为one的元素."<!--测试的元 --<divclass="one"id="one"id为one,class为的<divclass="mini">class为<div id="two"title="test" id为two,class为one,title为test的div. <divclass="mini" title="other">class为mini,title为other</div> <divclass="mini" title="test">class为mini,title为test</div><div<divclass="mini">class为<div<div <divclass="mini" title="tesst">class为mini,title为tesst</div><div style的 <divclass="hide">class为"hide"的 style26.css border:#0001pxsolid;float:left;font-size:17px;font-}div.minicolor: font-size:12px;}div.hide }assist.js/*辅助12给元素添加动画*/ //手动重置页面元素$("#reset").click(function(){$("*").removeAttr("style");$("div[class=none]").css({"dis y":"none"});})//判断是否自动重置$("input[type=button]").click(function(){if($("#isreset").is(":checked")){$("#reset").click();}})//给id为的元素添加动画.functionanimateIt() animateIt);})

animateIt();

2)层次选择器可能通过元例如后代元素(嵌套选择器)、子元素(子选择器)、相邻元素(相邻选择器)和同辈元素(同级选择器、兄弟选择器)。(1) descendant(后代)元素。返回示例：$("divspan")选取<div>里的所有的[词典释义n.后裔；子adj. 下降的 ancestor['ænsestə][词典释义]n.始祖，祖先；被继(2) $("parent>child")，子选择描述：选取parent父元素下的child ，descendant")选择后代所有元素。返回：集合元素示例：$("divspan")选取<div>元素下的元素名的子元素(3) $("prevnext")，相邻选择描述：选取紧接在prev元素后的next元素返回：集合元素示例：$(".one+div")选取class为的下一个<div>元(4) $("prev~siblings")，同辈选择器描述：选取prev元素后的所有siblings元素返回示例：$("#two~div")选取id为元素后面的所有在层次选择器中，后代选择器选择器比较常用，而相邻元素选择器和同辈元素选择器在jQuery里可以用更简单的方法代替，所以使用的几率相对少些。174把jq26.html另存为jq27.html，修改代码jq27.html<!DOCTYPE htmlPUBLIC "-//W3C//DTDXHTML 1.0Transitional//EN""transitional.dtd"><html xmlns=" "><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>jq27.html</title><link rel="stylesheet"type="text/css"href="css/style26.css"/>

引入jQuery--> <scriptsrc="scripts/jquery.js" <scriptsrc="lib/assist.js"<script //选择内的所有div元素$('#btn1').click(function(){$('bodydiv').css("background","#bbffaa");})//在内的选择元素名是div的子元素$('#btn2').click(function(){$('body})//选择所有class为one的下一个div元素$('#btn3').click(function(){$('.one})//选择id为的元素后面的所有div兄弟元$('#btn4').click(function(){$('#two})}); <buttonid="reset">手动重置页面元素<inputtype="checkbox"id="isreset"按钮时先自动重置页面</label><br/><br元素. 是div的。"id="btn2"/><inputtype="button"value="选择所有class为one的下一个div元素." <inputtype="button"value="选择id为的元素后面的所有div兄弟元素." <br/><br<!--测试的元 --<divclass="one"id="one"id为one,class为的<div title="test" id为two,class为one,title为test的div. <divclass="mini" title="other">class为mini,title为other</div> <divclass="mini"mini,title为test</div><div

title="test">class<div

<div <divclass="mini" title="tesst">class为mini,title为tesst</div><div style的 <divclass="hide">class为"hide"的用next()方法可以代替$("prev+next")选择$(".one+div");等价于$(".one").next("div");用nextAll()方法可代替$("prev~siblings")选择器：等价于$("#prev").nextAll("div");而siblings()方法与$("prev~siblings而$("#prev").siblings("div")选择#prev元素前后所3)过滤选择过滤选择器主要通过特定的过滤规则来筛选出所需的即选择器都以冒号(:)开头。、基本过滤选择1first选择描述：选取第一个元返回：单个元素示例：$("div:first")选取所有<div>元素中第12last选择器描述：选取最后一返回：单个元素示例：$("div:last")选取所有<div(3):not(selector)选择描述：选取所有不是给定选择器匹配返回：集合元素示例：$("input:not(.myClass")选取class不是(4):even选择器描述：选取索引是偶数的所有元素，索引从0开始返回：集合元素示例：$("input:even")选取索引为偶数的所有<input>元素(5):odd选择器描述：选取索引是奇数的所有元素，索引从0开始返回元素(6):eq(index)选择器描述：选取索引等于index的元素，index从0开始返回：单个元素示例：$("input:eq(1)")选取索引等于的<input>元素(7):qt(index)选择器描述：选取索引大于index的所有元素，index从0开始返回：集合元素示例：$("input:qt(1)")选取索引大于的所有元素(注：不包括1)(8):lt(index)选择器描述：选取索引小于index的所有元素，index从0开始返回：集合元素示例：$("input:lt(1)")选取索引小于的所有元素(注：不包括1)(9):header选择描述：选取所有的标题元素，例如、、、、返回：集合元素示例：$(":header")选取网页中所有的、(10):animated选择器描述返回：集合元素(11):focus选择描述：选取当前获取焦点的元返回：单个元素示例：$(":focus")选取当前获取焦点的元素 htmlPUBLIC content="text/html;charset=utf-8" <!- 引入jQuery

<scriptsrc="scripts/jquery.js"<scriptsrc="lib/assist.js"<script //选择第一个div元素$('#btn1').click(function(){$('div:first').css("background","#bfa");})√//选择最后一个div元素$('#btn2').click(function(){$('div:last').css("background","#bfa");})//选择class不为的所有div元素.$('#btn3').click(function(){$('div:not(.one)').css("background","#bfa");})//选择索引值为偶的div元素$('#btn4').click(function(){$('div:even').css("background","#bfa");})√√√//选择索引值为奇的div元素$('#btn5').click(function(){$('div:odd').css("background","#bfa");})//选择索引等于3的元素$('#btn6').click(function(){$('div:eq(3)').css("background","#bfa");})//选择索引大于3的元素$('#btn7').click(function(){$('div:gt(3)').css("background","#bfa");})

√√√//选择索引小于3的元$('#btn8').click(function(){$('div:lt(3)').css("background","#bfa");})//选择所有的标题元素.比如 h2,等等..$('#btn9').click(function(){})//选择当前正在执行动画的所有元素$('#btn10').click(function(){});√√√//选择当前获取焦点的所有元素$('#btn11').click(function(){$(':focus').css("background","#bfa");})})基本过滤选择<buttonid="reset">手动重置页面元素√ <inputtype="checkbox"id="isreset"按钮时先自动重置页面</label><br/><br <inputtype="button"value="选择第一个div元素." <inputtype="button"value="选择最后一个div元素." <inputtype="button"value="选择class不为的所有div元素." 数的div元素." 数的div元素." 素." 元素." 元素." 元素." <inputtype="button"value="选择当前正在执行动画的所有元素." <inputtype="button"value="选择当前获取焦点的所有元素." <br/><br<!--测试的元 --<divclass="one"id="one"id为one,class为的<div id="two"title="test" id为two,class为one,title为test的div. <divclass="mini" title="other">class为mini,title为other</div> <divclass="mini"mini,title为test</div>

title="test">class

<div<divclass="mini">class为<div<div <divclass="mini" title="tesst">class为mini,title为tesst</div><div style的 <divclass="hide">class为"hide"的、内容过滤选择素或者文本内容上。(1):contains(text)选择器描述：选取含有文本内容为"text"的元素返回示例：$("div:contains('我')")选取含有文本“我”(2):empty选择描述：选取不包素和文本的空元返回：集合元素示例：$("div:empty")选取不包素和文本元素 (3):has(selector)选择描述返回：集合元素示例：$("div:has(p)")选取含有<>元素的<div>元(4):parent描述：选取含素或者文本元素的元返回示例：$("div:parent")选取拥有素(包括文本元素) htmlPUBLIC content="text/html;charset=utf-8" <title>2- 引入jQuery--> <scriptsrc="scripts/jquery.js" <scriptsrc="lib/assist.js"<script //选取含有文本"di"的div元素$('#btn1').click(function(){$('div:contains(di)').css("background","#bbffaa")})//选取不包含子元素(或者文本元素)的div空元$('#btn2').click(function(){})//选取含有class为mini元的div元素$('#btn3').click(function(){$("div:has('.mini')").css("background","#bbffaa");})//选取含有子元素(或者文本元素)的div$('#btn4').click(function(){})});

内容过滤选<buttonid="reset">手动重置页面元素 <inputtype="checkbox"id="isreset" div元素." <inputtype="button"value="选取不包含文本元素)的div空元素." 素的div元素." <inputtype="button"value="选取含有本元素)的div元素." <brid为one,class为的<divclass="mini">class为<div id="two"title="test" id为two,class为one,title为test的div. <divclass="mini"mini,title为other</div>

title="other">class <divclass="mini"mini,title为test</div>

title="test">class

<div<divclass="mini">class为<div<div <divclass="mini" title="tesst">class为mini,title为tesst</div><div style的 <divclass="hide">class为"hide"的、可见性过滤选择器择相应的元素。(1):hidden选择描述返回示例：$(":hidden")选取所有不可见的元素。包<inputtype="hidden"/><divstyle="dis 用$("input:hidden")2visible选择描述：选取所有可见的元返回：集合元素示例：$(":visible")选取所有可见的元素。如果只想只选取<input>元素，可使用$("input:visible")。如果$("div:visible")，选取所有可见的<div>元素 htmlPUBLIC content="text/html;charset=utf-8" 引入jQuery--> src="scripts/jquery.js" $('#reset').click(function(){})//给id为functionanimateIt()animateIt);

}animateIt();

//选取所有不可见的元素.包括<$('#btn_hidden').click(function(){ alert( "+$('body:hidden').length "其中不可见的div有:"+$('div:hidden').length有:"+$('input:hidden').length+"个!");})//选取所有可见的元素.$('#btn_visible').click(function(){$('div:visible').css("background","#FF6500");})}); //]]><buttonid="reset<inputtype="button"value="选取所有可见的元素. <inputtype="button"value="选取所有不可见的元素.包括<input <divstyle='dis y:none;'>."<br<divclass="one"id="one"id为one,class为的<divclass="mini">class为<div id="two"title="test" id为two,class为one,title为test的div. <divclass="mini"mini,title为other</div>

title="other">class <divclass="mini"mini,title为test</div>

title="test">class

<div<divclass="mini">class为<divclass="mini">class为<div<div<divclass="mini">class为<divclass="mini">class为 <divclass="mini" title="tesst">class为mini,title为tesst</div>

<div style的 <divclass="hide">class为"hide"的包括样式属性disy为的元素，也包括文本隐藏域(<inputtype="hidden"/>)和visibility:hidden之类的元素。、属性过滤选择应的元素。(1)[attribute]选择器描述示例：$("div[id]")选取拥有属性id的元素(2)[attribute=value]选择器描述：选取属性的值为value的元返回：集合元素示例：$("div[title=test]")选取属性title为"test"(3)[attribute!=value]选择描述：选取属性的值不等于value的元返回示例：$("div[title!=test]")选取属性title等于(4)[attribute^=value]选择描述：选取属性的值value开始的元素返回：集合元素示例：$("div[title^=test]")选取属性title以"test"(5)[attribute$=value]选择器描述：选取属性的值value结束的元素返回示例：$("div[title$=test]")选取属性title以"test"(6)[attribute*=value]选择描述：选取属性的值含有value的元素返回：集合元素示例：$("div[title*=test]")选取属性title有"test"的<div>元素(7)[attribute|=value]选择描述：选取属性等于给定字符串或者以该字符串为前(要求该字符串后面跟“-”符)的元素返回：集合元素示例：$('div[title|="en"]')选取属性title等于或者以为前缀(该字符串后跟字符'-')的<div>元(8)[attribute~=value]选择返回：集合元素示例：$('div[title~="uk"]')选取属性title隔的值中包含字符的<div>元素(9)[attribute1][attribute2]...[attributeN]选择返回：集合元素示例：$("div[id][title$='test']")选取同时拥有属性id和属性titletest"结束的<div>元素 htmlPUBLIC content="text/html;charset=utf-8" 引入jQuery--> <scriptsrc="scripts/jquery.js" <scriptsrc="lib/assist.js"<script //选取含属性titl 的div元素$('#btn1').click(function(){$('div[title]').css("background","#bbffaa");})//选取属性title值等 test的div元素$('#btn2').click(function(){$('div[title=test]').css("background","#bbffaa");})//选取属性title值不等 test的div元素$('#btn3').click(function(){$('div[title!=test]').css("background","#bbffaa")})//选取属性title值以te开始的div$('#btn4').click(function(){$('div[title^=te]').css("background","#bbffaa");})//选取属性titleest结束的div元素$('#btn5').click(function(){$("div[title$=est]").css("background","#bbffaa");})//选取属性title值含有的div元素$('#btn6').click(function(){$("div[title*=es]").css("background","#bbffaa");}) //组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有es的元素.$('#btn7').click(function(){$("div[id][title*=es]").css("background","#bbffaa");})})<buttonid="reset">手动重置页面元 <inputtype="checkbox"id="isreset"属性选择的div元素. <inputtype="button"value="选取属性title值等于“test”的div元素." <inputtype="button"value="选取属性title等于“test”的div元素有属性title将被选中). <inputtype="button"value="选取属性title值以“te”开始的div元素." <inputtype="button"value="选取属性title值以“est”结束的div元素." <inputtype="button"value="选取属性title值含有“es”的div元素." 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的元素. <br/><br<!--测试的元 --<divclass="one"id="one"id为one,class为的<div id="two"title="test" id为two,class为one,title为test的div. <divclass="mini" title="other">class为mini,title为other</div> <divclass="mini"mini,title为test</div><div

title="test">class<div<div <divclass="mini" title="tesst">class为mini,title为tesst</div><div style的 <divclass="hide">class为"hide"的 htmlPUBLIC content="text/html;charset=utf-8" 引入jQuery--><scriptsrc="scripts/jquery.js"<scriptsrc="lib/assist.js"<script //选取属性titleen开始的div元素$('#btn1').click(function(){ $('div[title^="en"]').css("background","#bbffaa");

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

2011级计算机专业web前端和后台

文档简介

温馨提示

最新文档

评论

2011级计算机专业web前端和后台

文档简介

温馨提示

最新文档

评论

相关文档