jquery.uploadify插件实现图片上传和预览效果
需要引进的JS和css:
rel="stylesheet" type="text/css" />
1、js代码：
$(document).ready(
function() {
$("#uploadify").uploadify( {//初始化函数
'uploader' : '<%=basePath %>images/uploadify.swf',//flash文件位置，注意路径
'script' : '<%=basePath %>TemplateFileUploadServlet',//后台处理的请求(sevlet)
'buttonImg':'<%=basePath%>images/addImage.jpg',//上传按钮的背景图片
'auto' : true, //选定文件后是否自动上传，默认false
'cancelImg' : '<%=basePath %>jquery/cancel.png',//取消按钮图片
'folder' : '<%=basePath %>jquery/uploadsFolder',//您想将文件保存到的路径，将auto设置为true里才有用，不然跳到类里去处理，那就那里说了算
'queueID' : 'fileQueue',//与下面的上传文件列表id对应
'queueSizeLimit' : 8,//上传文件的数量
'scriptData' : {
'userID' : '<%=token.getUserID()%>'
},//向后台传的数据
'fileDesc' : 'rar文件或zip文件',//上传文件类型说明
'fileExt' :'jpg,png,gif,jpeg', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
'method' : 'get',//如果向后台传输数据，必须是get
// 'sizeLimit':1000000,//文件上传的大小限制，单位是字节
'multi' : true,
'simUploadLimit' : 8,//同时上传文件的数量，设置了这个参数后，那么你会因设置multi:true和queueSizeLimit：8而可以多选8个文件，但如果一旦你将simUploadLimit也设置了，那么只会上传这个参数指定的文件个数，其它就上传不了
'buttonText' : 'BROWSE',//浏览按钮上的文字
'onComplete' : function(event, queueID, fileObj,serverData, data) {//当上传完成后的回调函数，ajax方式哦~~
$('#bgImage').attr("src","<%=basePath%>"+serverDa
ta);//serverData是sevlet中out.print图片的路径 $('#bgImage').show();
},
'onError' : function(event, queueID, fileObj){
alert("文件:" + https://www.360docs.net/doc/a817354713.html, + " 上传失败");
}
});
});
Jsp页面上内容:
href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传
href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有
上传
2、注意事项
(1)、如果页面没有显示“BROWSE”按钮，则说明你的'uploader' : '<%=basePath%>images/uploadify.swf'配置不对，检查下路径是否正确。
(2)、如果需要修改按钮的图片：可以使用'buttonImg'配置进行替换
(3)、上传完成后，'onComplete'事件没有触发：在后台servlet处理完后，要向页面输出图片路径
1，否则页面的onComplete回调函数不会执行。response.getWriter().write(1);
(4)、如果在后台servlet处理上传将图片的名称改变的话，就不能通过fileObj获得它的值，而是要在后台servlet输出新文件名：out.print(filename);在jsp页面要相应使用response 来获得新值。
(5)、图片预览实现：
在jsp页面中添加一个![]()
,当上传完成后在onComplete事件中修改img 的src值。
3、下载地址
https://www.360docs.net/doc/a817354713.html,/download/
jQuery选择题
1.以下关于jQuery的描述错误的是（）。（选一项） A、jQuery 是一个 JavaScript 函数库 B、jQuery 极大地简化了 JavaScript 编程 C、jQuery 的宗旨是“write less，do more” D、jQuery的核心功能不是根据选择器查找HTML元素，然后对这些元素执行相应的操作 2.在jQuery中，下列关于文档就绪函数的写法错误的是（）。（选一项） A、$(document).ready(function() { }); B、$(function() { }); C、$(document)(function() { }); D、$().ready(function() { }); 3.以下（）选项不能够正确地得到这个标签：（选一项） A、$("#btnGo") B、$(".btnGo") C、$(".btn") D、$("input[type='button']") 4.在HTML页面中有如下结构的代码：
请问下列选项（）所示jQuery代码，不能够让汉字“四”的颜色变成红色。（选一项） A、$("#header ul li:eq(3)").css("color","red"); B、$("#header li:eq(3)").css("color","red"); C、$("#header li:last").css("color","red"); D、$("#header li:gt(3)").css("color","red"); 5.在HTML页面中有如下结构的代码：
jQuery常用方法中文解析
jQuery常用方法中文解析 jQuery设计思想 【目录】 一、选择网页元素 二、改变结果集 三、链式操作 四、元素的操作：取值和赋值 五、元素的操作：移动 六、元素的操作：复制、删除和创建 七、工具方法 八、事件操作 九、特殊效果 一、选择网页元素 jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。选择表达式可以是CSS选择器： $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 也可以是jQuery特有的表达式： $('a:first') //选择网页中第一个a元素 $('tr:odd') //选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)') // 选择所有的div元素，除了前三个 $('div:animated') // 选择当前处于动画状态的div元素
二、改变结果集 如果选中多个元素，jQuery提供过滤器，可以缩小结果集： $('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').first(); //选择第1个div元素 $('div').eq(5); //选择第6个div元素 有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法： $('div').next('p'); //选择div元素后面的第一个p元素 $('div').parent(); //选择div元素的父元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 三、链式操作 选中网页元素以后，就可以对它进行某种操作。jQuery允许将所有操作连接在一起，以链条的形式写出来，比如： $('div').find('h3').eq(2).html('Hello'); 分解开来，就是下面这样： $('div') //找到div元素 .find('h3') //选择其中的h3元素 .eq(2) //选择第3个h3元素 .html('Hello'); //将它的内容改为Hello 这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。jQuery还提供了.end()方法，使得结果集可以后退一步： $('div').find('h3').eq(2).html('Hello').end() //退回到选中所有的h3元素的那一步.eq(0) //选中第一个h3元素.html('World'); //将它的内容改为World
jQuery入门教程(很不错)
jQuery入门[1]－构造函数 https://www.360docs.net/doc/a817354713.html,/archive/2008/03/05/1091816.html jQuery优点 ?体积小（v1.2.3 15kb） ?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器（IE6,FF,Safari,Opera） ?链式代码 ?强大的事件、样式支持 ?强大的AJAX功能 ?易于扩展，插件丰富 jQuery的构造函数接收四种类型的参数： jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。 DEMO: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/a817354713.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jQuery basic title> <style type="text/css"> .selected { background-color:Yellow; } style> <script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript">script> head> <body> <h3>jQuery构造函数h3> <ul> <li>jQuery(expression,context)li> <li>jQuery(html)li> <li>jQuery(elements)li> <li>jQuery(fn)li> ul> <script type="text/javascript"></p><h2>jQuery常用功能大全</h2><p>jQuery常用功能大全 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery 对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementByIdx_x("msg"))则为jquery对象，可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。 如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。 以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery 对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法： $("div").eq(2).html(); //调用jquery对象的方法$("div").get(2).innerHTML; //调用dom的方法属性</p><h2>jquery学习总结(超级详细)</h2><p>window.onload $(document).ready() 执 行时机必须等待网页中所有的内容加载完毕后（包括 图片）才能执行 网页中所有DOM结构绘制完毕后就 执行，可能DOM元素关联的东西并 没有加载完 编写个数不能同时编写多个，以下代码无法正确执行： window.onload =function({alert("test1");}window.onload = function(){alert("test2");}结果只会输出 "test2" 能同时编写多个 简 化写法无 $(document).ready(function(){}); 可以简写成$(function(){}); 一、选择网页元素 jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $('#myId')//选择ID为myId的网页元素 $('div.myClass')//选择class为myClass的div元素 $('input[name=first]')//选择name属性等于first的input元素 也可以是jQuery特有的表达式： $('a:first')//选择网页中第一个a元素 $('tr:odd')//选择表格的奇数行 $('#myForm :input')//选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)')//选择所有的div元素，除了前三个 $('div:animated')//选择当前处于动画状态的div元素</p><h2>JQuery插件教程</h2><p>JQuery插件教程.txt我很想知道，多少人分开了，还是深爱着。ゝ自己哭自己笑自己看着自己闹。你用隐身来躲避我丶我用隐身来成全你！待到一日权在手，杀尽天下负我狗。jQuery 插件开发全解析 jQuery插件的开发包括两种： 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展： 1.1 添加一个新的全局函数 添加一个全局函数，我们只需如下定义： jQuery.foo = function() { alert('This is a test. This is only a test.'); }; 调用的时候可以这样写：jQuery.foo(); 或$.foo(); 1.2 增加多个全局函数 添加多个全局函数，可采用如下定义： jQuery.foo = function() { alert('This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); }; 调用时和一个函数的一样的:jQuery.foo(); jQuery.bar(); 或者$.foo(); $.bar('bar'); 1.3 使用jQuery.extend(object); jQuery.extend({ foo: function() { alert('This is a test. This is only a test.'); }, bar: function(param) { alert('This function takes a parameter, which is "' + param +'".'); } }); 调用时和一个函数的一样的:jQuery.foo(); jQuery.bar(); 或者$.foo(); $.bar('bar'); 1.4 使用命名空间 虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名，通过</p><h2>jQuery 核心函数以及jQuery对象</h2><p>一、jQuery 核心函数 首先介绍jQuery 的几个核心函数，在jQuery 中它们起着至关重要的作用，在实际的前端开发过程中用到最多的也是它们。 1、jQuery(elements) 将一个或多个DOM元素转化为jQuery对象。 这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。 返回值：jQuery 对象 参数 elements:用于封装成jQuery 对象的DOM 元素 复制代码代码如下: // 将当前页面的背景色设为黑色 jQuery(document.body).css( "background-color", "black" ); 再看以下代码 // 将当前页面的背景色设为黑色 $(document.body).css( "background-color", "black" ); 代码也可以正常运行，并且执行的效果跟前面的代码一致；那么这儿的$ 和前面的jQuery 标识符到底有什么关系呢？ 打开jQuery 的源文件jquery-1.3.2.js 发现以下代码 jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); } 原来$ 与jQuery 代表的是jQuery 框架中同一个function，使用jQuery 和$ 的效果是一样的；实际上jQuery 框架中采用$ 来作为jQuery 方法的一个别名（更易于使用），由于担心$ 与其它javascript 框架（比如https://www.360docs.net/doc/a817354713.html, ajax）甚至个人代码中的$ 标识符产生冲突，也可以通过jQuery.noConflict() 函数来移除$ 与jQuery 函数的关联，这样$ 就不代表jQuery 方法了，而是代表那个原始的$ 对象了。 2、jQuery(expression,[context]) 这个函数接收一个包含CSS 选择器的字符串，然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。 返回值：jQuery 对象 参数</p><h2>jQuery非常之经典实战教程(可拷贝源码)</h2><p>j Q u e r y非常经典实战教 程 第1章基础之篇 第1讲jQuery简介 【1】适合JQuery课程学习的人员：①准备做Ajax 前台开发；②熟悉Java、.Net、PHP、Python、Ruby 等；③熟悉JavaScript，了解Ajax，想要提高； ④网页设计师，熟悉CSS；⑤想熟练掌握JQuery 的使用方式。 【2】JQuery的特点： ①写尽可能少的代码，做尽可能多的事情（Write less,Do more）； ②用很简洁的代码完成很丰富的工作，会改变我们写JavaScript代码的一些方式； ③支持各种主流浏览器，包括IE6以上，FireFox2以上，Safari2以上和Opera9以上的版本； ④以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作； ⑤屏蔽浏览器差异，对DOM的操作提供了方便 的扩展，易用的事件处理API和动画API； ⑥强大的插件机制； ⑦社区活跃，文档非常齐全，全部配有示例。学习容易，易用性很高。 【3】学习环境准备： ①任何你喜欢的编辑器或IDE； ②各种主流浏览器； ③一个自己熟悉的应用服务器。 【4】jQuery是一个轻量级的 JavaScript库，它极大地简化了JavaScript编程。 【5】【点击后隐藏的效果】 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("p").click(function () { $(this).hide(); }); }); </script> </head> <body> If you click on me, I will disappear. </body> </html> 【6】jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数，可以通过下面的标记把jQuery添加到网页中： <head> <script type="text/javascript"src="jquery.js"> </script> </head> 第2讲jQuery语法 【1】jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action() ·美元符号定义jQuery ·选择符selector“查询”和“查找”HTML元素·jQuery 的action()执行对元素的操作 【2】【$(this).hide()：隐藏当前Html元素】 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $(this).hide(); }); }); </script> </head> <body> <button type="button">Click me</button> </body> </html> 【3】【$("#test").hide()：隐藏所有 id="test" 的元素】 <html> <head></p><h2>JQuery(JAVA)</h2><p>一．选择题 1.$(“#a”)可以选择到下面哪项(D.<p id=”a”> )。 2.<form> <input name="name" /> <fieldset> <input name="newsletter" /> </fieldset> </form> 要想使选择后的结果只有<input name=”name”/>,使用下面哪个选择器（B.$(“form >input”)）。 3.下面哪项可以选择到标记<p id=”p1”> ：(A.$(“p[id]”))。 4.使用jquery的选择符，必须以什么符号开始(C.$)。 5.有一个表格，要想选择表格的第二行，使用下面哪项:(B.$(“tr:eq(1)”))。 6.<p a="a">a1 ，下面不能选择到该标记的选项是:(C.$(“p:has(a1)”))。 7.下列选项不能选择到表格第一行的是：(C.$(“tr:lt(0)”))。 8.<form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form> 如何选择到<input type="hidden" name="id" />：(A.$(“input:hidden”))。 9.<form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> </form> 如何选择到选中的复选框：(A.$(“input:checked”))。 10.取得元素的内容用什么方法：(A.text())。 11.设置元素的HTML用什么方法：(D.html(html))。 12.下面哪一个是用来追加到指定元素的末尾的？(C.appendTo())。 13.下面哪项可以为标记p添加类名为p1的css样式：(C.addClass(“p1”))。 14.下面哪项是用来移除元素的css样式的: (A.removeClass)。 15.<input type=”text” value=”text” />要取得该文本框的值，用下面哪个方法: (C.val())。 16.下面哪种不属于jquery的筛选？（B.自动）。 17.17.在jquey中，如果想要从DOM中删除所有匹配的元素，下面哪一个是正确的？（C.remove()）。 18.$(document).ready(fn)是在什么时候执行(C.页面加载后)。 19.$.click(fn)可以用什么代替：(D、bind(“click”,fn)) 20.对象获得焦点事件是什么：(B.blur)。 21.鼠标悬停处理函数hover(over,out)，参数over是什么事件触发的函数：(A.鼠标移入)。 22.下列返回值与size()方法一致的是:(A.length属性)。 23.设置元素p的css字体颜色样式，下列css函数正确的是:(D.css({color: "red"}))。 24.jquery的效果方法 show(speed, [callback])，第一个参数代表什么：(A.显示速度)。 25.jquery的效果方法hide(speed, [callback])的第一个参数值不能是:(D.quick)。 26.jquery效果方法 toggle()的作用是:(A.切换元素的可见状态)。 27.下列哪项是jquery的淡入效果方法:(A.fadeIn)。 28.自定义动画animate(params,1)，第二个参数的单位是:(B.毫秒)。 29.<p id=”p1”>value ,$(“p”).attr(“id”)返回值是:(B.p1)。 30.HTML代码:I would like to say: , Jquery代码: $("p")._C、prepend_("<b>Hello</b>"),结果: <b>Hello</b>I would like to say: ,在空白处填入什么? 31.在jquery中，如果想要获取当前窗口的宽度值，下面哪个是实现该功能的？（A.width()）。 32.为每一个指定元素的指定事件（像click）绑定一个事件处理器函数，下面哪个是用来实现该功能的？（B.bind(type)）。 33.当一个文本框中的内容被选中时，想要执行指定的方法时，可以使用下面哪个事件来实现？（单选）(C.select(fn))。 34.在一个表单中，如果想要给输入框添加一个输入验证，可以用下面的哪个事件实现？(D.change(fn))。 35.在jquery中想要实现通过远程http get请求载入信息功能的是下面的哪一下事件？(C.$.get(url)) 36.下面不属于ajax事件的是？(C.$.post(url))。 37.下面哪个不是jquery中表单的对象属性？（C.:hidden）。 38.在jquery中想要找到所有元素的同辈元素，下面哪一个是可以实现的？（C.siblings([expr])） 二．填空题 1.使用javascript定义数组，var a =____ new Array()________。 2.HTML代码：I would like to say: ,Jquery代码:$("p").__append______("<b>Hello</b>"),结果: I would like to say: <b>Hello</b> 。 3.Ajax使用________XMLHttpRequest_______对象进行操作。 4.使用ajax载入远程html文件，使用____load___方法。 5.Ajax请求方式主要有____ get_____和____ post______。</p><h2>精选jQuery试题及答案</h2><p>jQuery试题及答案 一．选择题 1. 下面哪种不是jquery的选择器?( ) C。 A、基本选择器 B、层次选择器 C、css选择 器 D、表单选择器 2. 当DOM加载完成后要执行的函数，下面哪个是正确的?( ) C A、jQuery(expression, [context]) B、jQuery(html,[ownerDocument]) C、jQuery(callback) D、 jQuery(elements) 3. 下面哪一个是用来追加到指定元素的末尾的?( ) C A、insertAfter() B、append() C、appendTo() D、after() 4. 下面哪一个不是jquery对象访问的方法? ( ) D A、each() B、 size() C、.length D、onclick() 5. 在jquery中想要找到所有元素的同辈元素，下面哪一个是可以实现的？（） C A、eq(index) B、find(expr) C、 siblings([expr]) D、next() 6. 如果需要匹配包含文本的元素，用下面哪种来实现? ( ) B A、text() B、contains() C、 input() D、attr(name) 7. 如果想要找到一个表格的指定行数的元素，用下面哪个方法可以快速找到指定元素? ( C) A、text() B、 get() C、</p><p>eq() D、contents( ) 8. 下面哪种不属于jquery的筛选? ( ) B A、过滤 B、自动 C、查 找 D、串联 9. 下面哪几种是属于jquery文档处理的? (多选) ABCD A、包裹 B、替换 C、删 除 D、内部和外部插入 10. 如果想被选元素之后插入 HTML 标记或已有的元素，下面哪个是实现该功能的? ( ) D A、append(content) B、appendTo(content) C、insertAfter(content) D、 after(content) 11. 在jquey中，如果想要从DOM中删除所有匹配的元素，下面哪一个是正确的?( ) C A、delete() B、empty() C 、 remove() D、removeAll() 12. 在jquery中，想要给第一个指定的元素添加样式，下面哪一个是正确的? ( ) D A、first B、 eq(1) C、css(name) D、css(name,value) 13. 在jquery中，如果想要获取当前窗口的宽度值，下面哪个是实现该功能的? ( ) A A、width() B、width(val) C、 width D、innerWidth() 14. 为每一个指定元素的指定事件(像click) 绑定一个事件处理器函数，下面哪个是用来 实现该功能的? ( ) B A、trgger (type) B、bind(type) C、 one(type) D、bind 15. 在jquery中想要实现通过远程http get请求载入信息功能的是下面的哪一下事( C )</p><h2>Jquery基本语法</h2><p>一、jQuery的基本用法: 随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名 的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等， jQuery是继prototype之后的又一个优秀的Javascript框架。它是由John Resig 于2006 年初创建 的，它有助于简化JavaScript 以及Ajax 编程。 它具有如下一些特点： 1. 代码简练、语义易懂、学习快速、文档丰富。 2. jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。 3. jQuery支持CSS1-CSS3,以及基本的xPath。 4. jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。 5. 可以很容易的为jQuery扩展其他功能。 6. 能将JS代码和HTML代码完全分离，便于代码和维护和修改。 7. 插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、 tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。 使用方法(同prototype) 在需要使用JQuery的页面中引入JQuery的js文件即可。 例如：<script type="text/javascript" src="js/jquery.js"></script> 引入之后便可在页面的任意地方使用jQuery提供的语法。 二、学习教程及参考资料 请参照《jQuery中文API手册》和https://www.360docs.net/doc/a817354713.html,/visual/cn/index.xml 推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用jQuery 简化Ajax 开发》(说明：以 上文档都放在了【附件】中) 三、语法总结和注意事项 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath 条件等 方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 如: 01.$("#msg").html();-->通过ID 02.$("div").html(); $("input").val(); -->通过元素名(jQuery获取的是一个集合) 03.$("div p"); -->第一行代码得到所有<div>标签下的元素。 04.$("div.container") -->第二行代码得到class为container的<div>元素 05.$("div #msg"); -->第三行代码得到<div>标签下面id为msg的元素。 06.$("table a",context); -->第四行代码得到context为上下文的table里面所有的连接元素。</p><h2>jquery学习总结(超级详细)</h2><p>一、选择网页元素 jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $('#myId')//选择ID为myId的网页元素 $('div.myClass')//选择class为myClass的div元素 $('input[name=first]')//选择name属性等于first的input元素 也可以是jQuery特有的表达式： $('a:first')//选择网页中第一个a元素 $('tr:odd')//选择表格的奇数行 $('#myForm:input')//选择表单中的input元素 $('div:visible')//选择可见的div元素 $('div:gt(2)')//选择所有的div元素，除了前三个 $('div:animated')//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩小结果集： *$('div').has('p');//选择包含p元素的div元素 *$('div').not('.myClass');//选择class不等于myClass的div元素</p><p>*$('div').filter('.myClass');//选择class等于myClass的div元素 *$('div').first();//选择第1个div元素 *$('div').eq(5);//选择第6个div元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法： $('div').next('p');//选择div元素后面的第一个p元素 $('div').parent();//选择div元素的父元素 $('div').closest('form');//选择离div最近的那个form父元素 $('div').children();//选择div的所有子元素 $('div').siblings();//选择div的同级元素 三、链式操作选中网页元素以后，就可以对它进行某种操作。jQuery允许将所有操作连接在一起，以链条的形式写出来，比如： $('div').find('h3').eq(2).html('Hello'); 分解开来，就是下面这样： 1.$('div') //找到div元素 2..find('h3') //选择其中的h3元素 3..eq(2) //选择第3个h3元素 4..html('Hello'); //将它的内容改为Hello 这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。jQuery还提供了.end()方法，使得结果集可以后退一步： 1.$('div') 2..find('h3') 3..eq(2) 4..html('Hello') 5..end()//退回到选中所有的h3元素的那一步 6..eq(0)//选中第一个h3元素 7..html('World');//将它的内容改为World .end()：回到最近的一个"破坏性"操作之前。如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。 示例描述：选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素 HTML代码: <span>Hello</span>,howareyou? jQuery代码: $("p").find("span").end() 结果: <span>Hello</span>howareyou?</p><h2>jquery试题与答案</h2><p>一、Jquery测试题 1下面哪种不是jquery的选择器？(单选) A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器 考点:jquery的选择器(C) 2当DOM加载完成后要执行的函数，下面哪个是正确的？(单选) jQuery(expression, [context]) B、jQuery(html, [ownerDocument]) C、jQuery(callback) D、jQuery(elements) 考点：jquery的核心函数(C) 3下面哪一个是用来追加到指定元素的末尾的？(单选) A、insertAfter() B、append() C、appendTo() D、after() 考点：jquery的核心函数(C) 4下面哪一个不是jquery对象访问的方法？(单选) A、each(callback) B、size() C、index(subject) D、index() 考点：jquery的核心函数之对象访问（D） 5．jquery访问对象中的size()方法的返回值和jQuery对象的_______属性一样. 考点：jquery的核心函数之对象访问（length） 6.jquery中$(this).get(0)的写法和__________是等价的。 考点：jquery的核心函数之对象访问（$(this)[0]） 7. 有这样一个表单元素 ，想要找到这个hidden元素，下面哪个是正确的？(单选) A、visible B、hidden C、visible() D、hidden() 考点：jquery的选择器（B） 8.如果需要匹配包含文本的元素，用下面哪种来实现？(单选) A、text() B、contains() C、input() D、attr(name) 考点：jquery的选择器（B） 9.现有一个表格，如果想要匹配所有行数为偶数的，用________实现，奇数的用_______实现。 考点：jquery的选择器（even,odd） 10.如果想要找到一个表格的指定行数的元素，用下面哪个方法可以快速找到指定元素？(单选) A、text() B、get() C、eq() D、contents（） 考点：jquery的选择器（C）</p><h2>jquery事件方法操作大全</h2><p>dom: attribute: $(" p" ).addclass(css中定义的样式类型) 给某个元素添加样式 $(" img" ).attr({src:" test.jpg" alt:" test image" }) 给某个元素添加属性/值参数是map $(" img" ).attr(" src" " test.jpg" ) 给某个元素添加属性/值 $(" img" ).attr(" title" function() { return this.src }) 给某个元素添加属性/值 $(" 元素名称" ).html() 获得该元素内的内容(元素文本等) $(" 元素名称" ).html(" < b> new stuff< /b> " ) 给某元素设置内容 $(" 元素名称" ).removeattr(" 属性名称" ) 给某元素删除指定的属性以及该属性的值 $(" 元素名称" ).removeclass(" class" ) 给某元素删除指定的样式 $(" 元素名称" ).text() 获得该元素的文本 $(" 元素名称" ).text(value) 设置该元素的文本值为value $(" 元素名称" ).toggleclass(class) 当元素存在参数中的样式的时候取 消如果不存在就设置此样式 $(" input元素名称" ).val() 获取input元素的值 $(" input元素名称" ).val(value) 设置input元素的值为value manipulation: $(" 元素名称" ).after(content) 在匹配元素后面添加内容 $(" 元素名称" ).append(content) 将content作为元素的内容插入到该元素的后面 $(" 元素名称" ).appendto(content) 在content后接元素 $(" 元素名称" ).before(content) 与after方法相反 $(" 元素名称" ).clone(布尔表达式) 当布尔表达式为真时克隆元素(无参时当作true处理) $(" 元素名称" ).empty() 将该元素的内容设置为空 $(" 元素名称" ).insertafter(content) 将该元素插入到content之后 $(" 元素名称" ).insertbefore(content) 将该元素插入到content之前 $(" 元素" ).prepend(content) 将content作为该元素的一部分放到该元素的最前面 $(" 元素" ).prependto(content) 将该元素作为content的一部分放content的最前面 $(" 元素" ).remove() 删除所有的指定元素 $(" 元素" ).remove(" exp" ) 删除所有含有exp的元素 $(" 元素" ).wrap(" html" ) 用html来包围该元素 $(" 元素" ).wrap(element) 用element来包围该元素 traversing: add(expr) add(html) add(elements) children(expr)</p><h2>JQuery实用教程(含语法和特效)</h2><p>基本语法： $("HTML元素").action() 实例: $(this).hide(); 隐藏当前元素 $("p").hide(); 隐藏所有段落 $("p.test").hide(); 隐藏所有class="test"的段落 $("#test").hide(); 隐藏所有id="test"的元素 文档就绪函数 $(document).ready(function(){ -------- }); 这是为了防止文档在完全加载（就绪）之前运行jQuery 代码。 下面是两种假如文档完全加载之前运行函数的话，操作失败的情况： ?试图隐藏一个不存在的元素。 ?获得未完全加载的图像的大小。 .divcss{ background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } jQuery 元素选择器 jQuery 使用CSS 选择器来选取HTML 元素。 $("p") 选取 元素。</p><p>$("p.intro") 选取所有class="intro" 的 元素。 $("p#demo") 选取id="demo" 的第一个 元素。 jQuery 属性选择器 jQuery 使用XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有href 属性的元素。 $("[href='#']") 选取所有带有href 值等于"#" 的元素。 $("[href!='#']") 选取所有带有href 值不等于"#" 的元素。 $("[href$='.jpg']") 选取所有href 值以".jpg" 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变HTML 元素的CSS 属性。 下面的例子把所有p 元素的背景颜色更改为红色： $("p").css("background-color","red"); 更多实例 $(this) 当前HTML 元素 $("p") 所有 元素 $("p.intro") 所有class="intro" 的 元素 $(".intro") 所有class="intro" 的元素 $("#intro") id="intro" 的第一个元素 $("ul li:first") 每个<ul> 的第一个<li> 元素 $("[href$='.jpg']") 所有带有以".jpg" 结尾的href 属性的属性 ("div#intro .head") id="intro" 的<div> 元素中的所有class="head" 的元素jQuery 事件函数 jQuery 事件处理函数是jQuery 中的核心函数。 事件处理函数是当HTML 中发生事件时自动被调用的函数。 由“事件”（event）“触发”（triggered）是经常被用到的术语。</p></div>
<div class="rtopicdocs">
<div class="coltitle">相关主题</div>
<div class="relatedtopic">
<div id="tabs-section" class="tabs">
<ul class="tab-head">
<li id="9635068"><a href="/topic/9635068/" target="_blank">jquery函数大全</a></li>
<li id="11003443"><a href="/topic/11003443/" target="_blank">jquery函数</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="rightcol" class="viewcol">
<div class="coltitle">相关文档</div>
<ul class="lista">
<li><a href="/doc/3f1268253.html" target="_blank">JQUERY完整版学习资料</a></li>
<li><a href="/doc/605471173.html" target="_blank">JQuery(JAVA)</a></li>
<li><a href="/doc/ab3752065.html" target="_blank">Jquery(很好的PPT教程,技术较为全面,分享给大家)解析</a></li>
<li><a href="/doc/cf11231204.html" target="_blank">jquery学习总结(超级详细)</a></li>
<li><a href="/doc/f69614291.html" target="_blank">jquery试题</a></li>
<li><a href="/doc/011495184.html" target="_blank">jQuery选择题</a></li>
<li><a href="/doc/3910581149.html" target="_blank">jQuery笔记整理</a></li>
<li><a href="/doc/839818318.html" target="_blank">精选jQuery试题及答案</a></li>
<li><a href="/doc/b613273492.html" target="_blank">JQuery实用教程(含语法和特效)</a></li>
<li><a href="/doc/d27723741.html" target="_blank">jquery</a></li>
<li><a href="/doc/2417955647.html" target="_blank">jquery学习总结(超级详细)</a></li>
<li><a href="/doc/6c3971151.html" target="_blank">Jquery(很好的PPT教程,技术较为全面,分享给大家)</a></li>
<li><a href="/doc/917945378.html" target="_blank">jquery学习总结(超级详细)</a></li>
<li><a href="/doc/c49288991.html" target="_blank">jQuery使用手册完全版</a></li>
<li><a href="/doc/f02622748.html" target="_blank">jquery测试题以及答案</a></li>
<li><a href="/doc/3c4043783.html" target="_blank">Jquery方法大全</a></li>
<li><a href="/doc/6211373480.html" target="_blank">JQuery学习与归纳</a></li>
<li><a href="/doc/b7996456.html" target="_blank">jquery试题与答案</a></li>
<li><a href="/doc/d51236469.html" target="_blank">JQuery中常用的函数方法总结</a></li>
<li><a href="/doc/1b12303687.html" target="_blank">jQuery常用功能大全</a></li>
</ul>
<div class="coltitle">最新文档</div>
<ul class="lista">
<li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li>
<li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li>
<li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li>
<li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li>
<li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li>
<li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li>
<li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li>
<li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li>
<li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li>
<li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li>
<li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li>
<li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li>
<li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li>
<li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li>
<li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li>
<li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li>
</ul>
</div>
</div>
<script>
var sdocid = "ae7e3b886529647d2728527d";
</script>
<div class="clearfloat"></div>
<div id="footer">
<div class="ft_info">
<a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br />
本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈
</div>
<script type="text/javascript">foot()</script>
</div>
</body>
</html>
