当前位置:文档之家› jQuery经典入门教程(绝对详细)

jQuery经典入门教程(绝对详细)

jQuery经典入门教程(绝对详细)
jQuery经典入门教程(绝对详细)

$(elem)

jQuery前端开发实战教程

《jQuery前端开发实战教程》试卷 得分 单选题(每题2分,共计30分) 1.页面中存在可见元素div,代码“if( $("div").show().is(:animated) ){ $("div").hide(1000); }” 的执行效果是() A、元素以动画效果隐藏 B、元素没有任何变化 C、元素无动画效果隐藏 D、元素先以动画效果隐藏,再无动画形式显示 2.关于代码“$.fn.test = function() { };”,下列说法错误的是() A、test方法可以被jQuery对象调用 B、test方法被jQuery对象调用时,this指向调用该方法的jQuery对象 C、在test方法中可以书写代码“return this”来实现链式编程 D、$.fn是jQuery原型对象jQuery.prototype的简写3.jQuery Mobile选择菜单中,当选择菜单中含有多个类别时,可添加()元素,让jQuery Mobile根据此元素中label属性的文本创建含有分割项的选项。 A、label B、optgroup C、select D、option 4.在使用tree组件时,dnd属性和lines属性设置为true分别代表()含义。 A、显示横线条显示竖线条 B、显示竖线条显示横线条 C、表示可拖动表示可拖拽 D、表示可拖动表示显示竖线条 5.下列哪种方法不可以让元素设置为不可见() A、fadeIn B、fadeOut C、fadeTo D、hide 总分题型单选题多选题填空题简答题题分 得分

6.在jQuery Mobile列表视图中,可以将任意大小的图片自动缩放到()像素,展示到列表中。 A、60 B、70 C、80 D、90 7.跟jQuery相继诞生的JavaScript库还有很多,不包括() A、Prototype B、ExtJS C、YUI D、node.js 8.下面选项中this的使用说法正确的是() A、this指向当前元素 B、this可以用来绑定事件 C、this可以获取到所有元素 D、this是一种方法9.使用animate方法实现与代码$("div").fadeIn(600)相同效果的代码写法是() A、$("div").animate({"opacity":"1"}) B、$("div").animate({"opacity":"1"},"fast") C、$("div").animate({"opacity":"1"},600) D、$("div").animate({"opacity":"1"},"normal") 10.从EasyUI网站下载到的“jquery-easyui-1.5.4.2.zip”压缩包解压,保存到“chapter08\ easyui-1.5.4.2”目录中下面说法错误的是() A、locale目录是国际化资源文件包 B、plugins是插件包目录 C、jsrc是源码包目录 D、demo和demo-mobile目录都是样例,没有区别 11.在jQuery事件中,当调整浏览器窗口时触发的事件是()事件。 A、resize() B、change() C、scroll() D、select()

jQuery入门教程(很不错)

jQuery入门[1]-构造函数 https://www.doczj.com/doc/0a4876859.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.doczj.com/doc/0a4876859.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>《前端开发实战教程》试卷 得分 单选题(每题2分,共计30分) 1.页面中存在可见元素,代码“( $("")()() ){ $("")(1000); }”的执行效果是() A、元素以动画效果隐藏 B、元素没有任何变化 C、元素无动画效果隐藏 D、元素先以动画效果隐藏,再无动画形式显示 2.关于代码“$ = () { };”,下列说法错误的是() A、方法可以被对象调用 B、方法被对象调用时,指向调用该方法的对象 C、在方法中可以书写代码“”来实现链式编程 D、$是原型对象的简写3.选择菜单中,当选择菜单中含有多个类别时,可添加()元素,让根据此元素中属性的文本创建含有分割项的选项。 A、 B、 C、 D、 4.在使用组件时,属性和属性设置为分别代表()含义。 A、显示横线条显示竖线条 B、显示竖线条显示横线条 C、表示可拖动表示可拖拽 D、表示可拖动表示显示竖线条 5.下列哪种方法不可以让元素设置为不可见() A、 B、 C、 D、 总分题型单选题多选题填空题简答题题分 得分</p><p>6.在列表视图中,可以将任意大小的图片自动缩放到()像素,展示到列表中。 A、60 B、70 C、80 D、90 7.跟相继诞生的库还有很多,不包括() A、 B、 C、 D、 8.下面选项中的使用说法正确的是() A、指向当前元素 B、可以用来绑定事件 C、可以获取到所有元素 D、是一种方法9.使用方法实现与代码$("")(600)相同效果的代码写法是() A、$("")({"":"1"}) B、$("")({"":"1"},"") C、$("")({"":"1"},600) D、$("")({"":"1"},"") 10.从网站下载到的“1.5.4.2”压缩包解压,保存到“08\ 1.5.4.2”目录中下面说法错误的是() A、目录是国际化资源文件包 B、是插件包目录 C、是源码包目录 D、和目录都是样例,没有区别 11.在事件中,当调整浏览器窗口时触发的事件是()事件。 A、() B、() C、() D、()</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课程设计</h2><p>课程设计报告 课程名称: jQuery基础教程 课程设计名称: jQuery个人空间 系部名称:中印计算机软件学院 姓名学号:周在峰201301070001 张敏20101070032 陈慧君201301070031班级:13应用一班 成绩: 指导教师:刘效伟 开课时间:2014-2015学年第二学期</p><p>摘要 近年来,随着网上个人空间的兴起,越来越多的人开始关注这项新的网络交流方式,越来越多的人开始拥有自己的个人空间就定义而言,Blog的全文名字是Web log,中文意思是“网络日志”,是一种通常由个人管理、不定期张贴新的文章的网站。一个典型的个人空间结合了文字、图像、其他个人空间或网站的链接、及其它与主题相关的媒体。利用个人空间,人们可以简便迅速的将自己的生活经历、感想、个人图片、所见所闻的事件等等向外界展示,并及时的与评论者进行交流互动。个人空间作为一种新的生活、学习、工作方式,已经被越来越多的人所接受,成为时下最流行的网络交流工具。 个人空间“网络日志”的本质决定了其固有的几种表现形式,如日志、相册、分享、留言互动区等等。同时,作为一种典型的个人网站,个人空间的各种表现方式也展现了博主个人的风格,更体现了个人空间个性化与多样化的特征。设计一个个人空间网站能充分运用到我们动态网页设计课程所学习的知识,在实现网站几个基本功能的前提下,学以致用,展现出自己独特的风格。 关键词: jQuery;个人空间;动态网站</p><p>目录 一、网站设计的流程 (1) 二、项目背景及发展趋势 (1) 2.1背景 (1) 2.2 发展趋势 (1) 三、项目需求 (2) 四、总体设计 (3) 4.1 设计目标 (3) 4.2设计风格、色彩搭配 (3) 4.3设计原则 (4) 五、网站概述 (5) 5.1网站主题结构 (5) 5.1.1 网站主要栏目说明 (5) 5.2 主要页面截图 (5) 六、总结 (10) 6、1 学习总结 (10) 6、2心得体会 (10) 七、参考文献 (10)</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的起点教程(PDF版)</h2><p>以下部分为原文翻译: jQuery入门指南教程 这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX、FX的用法,以及如何制作jQuery的插件。这个指南包括了很多代码,你可以copy它们,并试着修改它们,看看产生的效果。 内容提要</p><p>Hello jQuery 在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:</p><p>$(document).ready(function(){ //do stuff when DOM is ready }); 放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert. $(document).ready(function(){ $("a").click(function(){ alert("Hello world!"); }); }); 这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。 (译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。) 让我们看一下这些修改是什么含义。$("a")是一个jQuery选择器(selector),在这里,它选择所有的a标签(译者Keel注:即<a></a>),$号是jQuery“类”(jQuery"class")的一个别称,因此$()构造了一个新的jQuery对象(jQuery object)。函数click()是这个jQuery对象的一个方法,它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法. 这里有一个拟行相似功能的代码: <a href="#"onclick="alert('Hello world')">Link</a> 不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样. 下面我们会更多地了解到选择器与事件. 本章的相关链接:</p><h2>jquery教程</h2><p>一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能. 二.前言 经过公司内部收集, 整理了一些经常使用javascript实现的功能. 实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQuery UI. 如果你还在为了一个小小的特效而去下载并安装插件, 发现Bug还没有人替你解决. 记住插件是我们没有办法的最后选择. 使用插件有太多的坏处: 1.不利于维护 2.增加页面大小 3.不利于成员间交流共享,具有学习成本. 4.不够健壮, 不能保证插件版本一直更新并修复所有问题. 下面就引入今天的主角:jQuery UI 三.jQuery UI jQuery UI 是jQuery 的一部分, 是在jQuery之上的一套专门用于UI交互的类库. 使用jQuery UI可以实现底层交互, 各种高级特效, 动画, 并且可定制主题. 我们可以用它轻松的构建高度交互的Web应用程序. 官方首页: https://www.doczj.com/doc/0a4876859.html,/ 下载: https://www.doczj.com/doc/0a4876859.html,/download 示例和文档: https://www.doczj.com/doc/0a4876859.html,/demos/ 皮肤: https://www.doczj.com/doc/0a4876859.html,/themeroller/ jQuery UI 的在线网站十分强大. 首先就是在下载时可以组装自己想要的功能定制下载:</p><p>并且针对各种控件不仅提供了详细的参数说明和实例, 还可以随时更换实例的皮肤: 本文主要讲解实例, 大家可以通过实例代码快速上手jQuery UI. 使用jQuery UI我们可以再不借助其他插件的情况下完成大部分页面应用, 说其是一个官方的超级UI插件也不为过. 包含所有功能的jQuery UI类库文件为188K, 启用Gzip压缩后是45K. 虽然较大但是一次加载全网站获益.而且45K大小在当今的互谅网时代还算可以接受. 目前还没有jQuery UI的中文教程. 因为本文是实战篇, 所以不会仔细讲解基础内容. 在后面的章节中我会加入jQuery UI的基础教程.争取成为中文jQuery UI第一教程. 四. 准备工作 我将所有相关的文件, 包括各种类库文件, Theme模板放置在如下路径: https://www.doczj.com/doc/0a4876859.html,/JSLib/ 此路径开通了目录浏览, 可以直接查找需要的文件. 目录组织结构按照本系列: (八) 插播:jQuery实施方案中介绍的方案组织. 另外也可以从Google上引用文件, Google的CDN速度更快也更有保证, 参见: Google's CDN 本文的实例的所有引用都使用WebConfig.ResourceServer 这个属性: public class WebConfig { public static string ResourceServer = @"https://www.doczj.com/doc/0a4876859.html,/";}五.弹出层对话框 弹出框是最常用最实用的功能. 先来看一下艺龙网上的一些应用场景. 1. 艺龙网应用场景举例 (1) 静态提示类弹出层. 弹出层的内容是固定的. (2) 动态提示类弹出层. 弹出层内容是根据事件源变化的. (3)遮罩类弹出层. 弹出时背景变灰并不可点击. 2. 应用实例 使用jQuery UI 的Dialog 组件. 我以轻松实现上面三种效果.</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.doczj.com/doc/0a4876859.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库的说明,要求读者了解HTML(DOM)和CSS 的一些常识。它包括了一个简 单的Hello World的例子,选择器和事件基础,AJAX、FX的用法,以及如何制作jQuery的插件。这个指南包括了很多代码,你可以复制它们,并试着修改它们,看看产生的效果。、 下面是目录 说明 1. 安装 2. Hello jQuery 3. Find me:使用选择器和事件 4. Rate me:使用AJAX 5. Animate me(让我生动起来):使用FX 6. Sort me(将我有序化):使用tablesorter插件(表格 排序) 7. Plug me:制作您自己的插件 8. Next steps(下一步) Hello jQuery</p><p>在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事 件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了: $(document).ready(function() { // do stuff when DOM is ready }); 放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert. $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); 这样在你点击页面的一个链接时都会触发这个”Hello world”的提示。 (译者</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><h2>JQuery入门、手册及教程</h2><p>浅谈JQUREY(摘自https://www.doczj.com/doc/0a4876859.html,/softwave/article/details/2070815) JQUERY手册(第七页,附教程) Jquery是继prototype之后又一个优秀的Javascript框架。对prototype我使用不多,简单了解过。但使用上jquery 之后,马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery:prototype就像Java,而jquery 就像ruby.实际上我比较喜欢java(少接触Ruby罢了)但是jquery的简单的实用的确有相当大的吸引力啊!在项目里我把jquery作为自已唯一的框架类包。使用其间也有一点点心得,其实这些心得,在jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。 一,找到你了! 还记得$()这个东西吧?prototype还是DWR都使用了这个函数代替document.getElementById()。没错,jquery也跟风了。为达到document.getElementById()的目的,jquery是这样写的: Java代码 1.var someElement = $("#myId"); [java]view plaincopyprint? 1.var someElement = $("#myId"); 看起来比其他两个框架的要多了一个#,好,看看下面的用法: Java代码 1.$("div p");(1) 2.$("div.container")(2) 3.$("div #msg");(3)</p><p>[java]view plaincopyprint? 1.$("div p");(1) $("div.container")(2) $("div #msg");(3) $("table a",context);(4) 在prototype里看过这样的写法吗?第一行代码得到所有<div>标签下的元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。 如果你熟悉CSS,Xpath,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。 二,Jquery对象? jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分): Java代码 1.var a = $("#cid");(1) 2.var b = $("hello ");(2) 3.var c = document.createElement("table"); var tb = $(c); [java]view plaincopyprint? 1.var a = $("#cid");(1) var b = $("hello ");(2) var c = document.createElement("table"); var tb = $( c); 三,代替body标签的onload 这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码: Java代码</p><h2>最全Jquery UI 教程</h2><p>最全Jquery UI 教程 jQuery Tools 是一套非常优秀的Web UI 库,包括Tab 容器,可折叠容器,工具提示,浮动层以及可滚动容器等等,可以为你的站点带来非同寻常的桌面般体验,这套工具的主要作用是显示内容,这是绝多多数站点最需要的东西。这套令人惊异的UI 库只有5.59K 大小,基于MIT 和GPL 两种许可模式。 和别的Web UI 库不同,别的UI 库很多是面向行为的,如拖放,滚动,表格排序,可拖放窗口等等,它们更适合于富Web 应用,如Email 客户端,任务管理,图片组织整理等。而jQuery Tools 主要面向内容展示,因此更适用于单纯的内容型网站。 jQuery Tools 使用也很简便,只需几行调用代码即可,其官方站点包含大量演示和调用代码可以参考。以下是该UI 库中包含的主要UI 工具介绍。 jQuery Tools / Tabs Web 上最受欢迎的UI 部件当属Tab 容器,如果没有Tab,我们的很多网页不知要多么混乱,所有用户都熟悉Tab 这种用户友好的部件,jQuery Tools / Tab 非常好用,甚至可以使用浏览器的前进后退导航按钮在Tab 间前进或后退。 jQuery Tools / Flashembed 如今JavaScript真是越来越快了,所有浏览器都在JavaScript 引擎上较量,我们会看到越来越多的基于JavaScript 的Web 部件面世,然而至少在当下,Flash 仍有其用武之地,比如播放视频。 jQuery Tools / Flashembed 可以用来在网页中加载Flash 对象,虽然类似的工具比比皆是,但Flashembed 绝对是其中最好用的一个。 jQuery Tools / Overlay Overlay (浮动层)可以用来浮动在任何HTML对象的上方,在现代Web 设计中,浮动层是一种非常有效的UI 概念,可以用来 1.着重显示你的产品。 2.显示警示信息。 3.提示用户输入。 4.以灯箱风格浏览图片库。 jQuery Tools / Overlay 可以很轻松地处理上述各种情形和各种效果。 jQuery Tools / Tooltip</p><h2>jquery</h2><p>1 你在公司是怎么用jquery的? 答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,复选框啊,表单啊,ajax啊,事件等 配置Jquery环境下载jquery类库在jsp页面引用jquery类库即可 <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"/> 接下来通过在 <script> $(function(){ }); </script> 2 你为什么要使用jquery? 答:因为jQuery是轻量级的框架,大小不到30kb,它有强大的选择器,出色的DOM操作的封装,有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠),完善的ajax(它的ajax封装的非常的好,不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。而且支持链式操作,隐式迭代。行为层和结构层的分离,还支持丰富的插件,jquery的文档也非常的丰富。 3 你使用jquery遇到过哪些问题,你是怎么解决的? 答:jquery库与其他库冲突: 1>如果其他库在jquery库之前导入的话 1.我们可以通过jquery.noconflict()将变量的$的控制权过度给其他库 2.自定义快捷键,用一个变量接住jquery.noconflict() 3.通过函数传参 2>如果jquery库在其他库之前导入就直接使用jquery 在处理一个数据问题时,发现jQuery.ajax()方法返回的值一直有问题,清除缓存后数据无误,多次测试后发现返回的值都是之前的值,并且一直未执行url(后台为JAVA,设置断点一直未进入)。在网上查找下,发现是未设置type的原因。如果没设置jQuery.ajax的type="Post",那么ajax就会默认type="Get",这就会导致之前数据被缓存起来。加上type="Post",问题解决! 4 你知道jquery中的选择器吗,请讲一下有哪些选择器? 答:jQuery中的选择器大致分为:基本选择器,层次选择器,过滤选择器,表单选择器 5 jquery中的选择器和css中的选择器有区别吗? 答:jQuery选择器支持CSS里的选择器, jQuery选择器可用来添加样式和添加相应的行为 CSS 中的选择器是只能添加相应的样式 6 你觉得jquery中的选择器有什么优势? 答:简单的写法$(“#ID”) 来代替document.getElementById()函数 支持CSS1 到CSS3 选择器 完善的处理机制(就算写错了id也不会报错)</p> <div> <div>相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="15989693"><a href="/topic/15989693/" target="_blank">jquery基础教程</a></li> </ul> </div> </div> </div> </div> <div class="category"> <span class="navname">相关文档</span> <ul class="lista"> <li><a href="/doc/381364423.html" target="_blank">JQuery</a></li> <li><a href="/doc/3116336953.html" target="_blank">jQuery课程设计</a></li> <li><a href="/doc/8610063378.html" target="_blank">Jquery基本语法</a></li> <li><a href="/doc/a816087886.html" target="_blank">JQUERY学习总结</a></li> <li><a href="/doc/0411834309.html" target="_blank">jQuery前端开发实战教程</a></li> <li><a href="/doc/e82339397.html" target="_blank">jQuery网页特效设计基础教程 第12章 Ajax在jQuery中的应用 教案</a></li> <li><a href="/doc/342904875.html" target="_blank">jQuery基础教程(第四版)课后练习4</a></li> <li><a href="/doc/423134803.html" target="_blank">jQuery非常之经典实战教程(可拷贝源码)</a></li> <li><a href="/doc/9213972142.html" target="_blank">jQuery网页特效设计基础教程 第2章 初识jQuery 教案</a></li> <li><a href="/doc/be13273492.html" target="_blank">JQuery实用教程(含语法和特效)</a></li> <li><a href="/doc/31442233.html" target="_blank">《jquery基础教程》PPT课件</a></li> <li><a href="/doc/3913047064.html" target="_blank">JQuery插件教程</a></li> <li><a href="/doc/7612021192.html" target="_blank">jQueryUI常用功能实战</a></li> <li><a href="/doc/ad14338484.html" target="_blank">jQuery入门教程实例</a></li> <li><a href="/doc/d87073926.html" target="_blank">最全Jquery UI 教程</a></li> <li><a href="/doc/392697098.html" target="_blank">jQuery教程PPT课件</a></li> <li><a href="/doc/4d2904203.html" target="_blank">JQuery插件教程</a></li> <li><a href="/doc/997849375.html" target="_blank">JavaScript+jQuery前端开发基础教程</a></li> <li><a href="/doc/ba6721052.html" target="_blank">JQuery 基础教程-修改CSS样式</a></li> <li><a href="/doc/1f6102765.html" target="_blank">jQuery前端开发实战教程</a></li> </ul> <span class="navname">最新文档</span> <ul class="lista"> <li><a href="/doc/ec19046185.html" target="_blank">英语期中考试试卷分析</a></li> <li><a href="/doc/ee19046186.html" target="_blank">英语试卷分析(必备25篇) </a></li> <li><a href="/doc/3d19239282.html" target="_blank">考研英语真题及答案解析</a></li> <li><a href="/doc/d719192292.html" target="_blank">大学英语试卷分析范文</a></li> <li><a href="/doc/c619078467.html" target="_blank">大学英语B级考试复习重点分析及做题技巧</a></li> <li><a href="/doc/6e19015698.html" target="_blank">英语四级考试真题试卷附答案第套</a></li> <li><a href="/doc/3219239281.html" target="_blank">英语试卷分析与反思4篇(共8页)</a></li> <li><a href="/doc/f119253417.html" target="_blank">大学英语考试试卷分析</a></li> <li><a href="/doc/a219220936.html" target="_blank">大学英语试卷分析</a></li> <li><a href="/doc/9319164894.html" target="_blank">大学英语试卷分析【范本模板】</a></li> <li><a href="/doc/7e19317281.html" target="_blank">大学英语试卷分析 教学目标(共3篇)</a></li> <li><a href="/doc/5519338230.html" target="_blank">北京体育大学博士考试试卷分析(英语篇)</a></li> <li><a href="/doc/4419212310.html" target="_blank">英语四级试卷分析</a></li> <li><a href="/doc/9f19164893.html" target="_blank">6S精细化管理知识</a></li> <li><a href="/doc/a719220935.html" target="_blank">日常管理精细化讲解</a></li> <li><a href="/doc/7919317280.html" target="_blank">设备精细化管理讲义</a></li> <li><a href="/doc/1219318395.html" target="_blank">精细化设备管理推进方案精品</a></li> <li><a href="/doc/d719192291.html" target="_blank">煤矿机电精细化管理</a></li> <li><a href="/doc/ce19078466.html" target="_blank">设备精细化管理</a></li> <li><a href="/doc/9c19164892.html" target="_blank">设备点检精细化管理:流程、细则、方案、规定、办法</a></li> </ul> </div> </div> <script> var sdocid = "03f90a6ef5335a8102d220db"; </script> <script type="text/javascript">bdtj();</script> <footer class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a> © 2022 www.doczj.com <a href="/sitemap.html">网站地图</a></p> <p> <a href="https://beian.miit.gov.cn" target="_blank">闽ICP备18022250号-1</a>  本站资源均为网友上传分享,本站仅负责分类整理,如有任何问题可通过上方投诉通道反馈 <script type="text/javascript">foot();</script> </p> </footer> </body> </html>