[jQuery入门到精通]第8章:插播jQuery实施方案

[jQuery入门到精通]第8章:插播jQuery实施方案
[jQuery入门到精通]第8章:插播jQuery实施方案

一.摘要

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.

本篇文章属于临时插播, 用于介绍我在本公司的jQuery实施方案.

二.前言

有了前几章扎实的基础知识我们已经可以在项目中投入使用jQuery了.再继续深入学习jQuery前插播一下我的jQuery实施方案.

每个公司的情况都不同.比如我们公司的页面文件都为用户控件, 物理路径和虚拟路径没有绝对的关系, 所以无法使用相对路径(否则生产环境中会找不到文件). 项目繁多, 同一个虚拟目录的不同文件夹对应不同项目工程等等.

此方案并不是通用的, 但是有些方法可以借鉴, 同时也是希望能和大家一起讨论帮忙指正.

三.类库文件管理方案

存放根路径:src\Assembly\resource.eLong.Web.Files\Resource\JSLib\jquery\

引用根路径:https://www.360docs.net/doc/ca10331555.html,/JSLib/jquery/

压缩版本引用路径:https://www.360docs.net/doc/ca10331555.html,/JSLib/jquery/jquery-min-lastest.js

根路径文件列表:

在每一个Web工程项目下面建立js文件夹, 放置jquery-vsdoc-lastest.js 文件:

说明:

首先将所有版本的jQuery类库放到静态服务器上, 并且按照文件夹存放类库文件. 但是会选出来一个最新版本作为引用并且放置在根目录.

根目录下面包含如下文件:

这样可以确保编译后的页面只引入了压缩版本的jQuery类库. 示例代码:

六.总结

在确认了没有公布任何保密信息后, 我发表了本文. 没有太多技术含量, 主要是针对所在公司推广jQue ry的具体实施方法.

另外我一直想找一个成型的脚本框架用来组织管理各种js类库和js文件. 这都需要在以后的工作中探索.

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.360docs.net/doc/ca10331555.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/ca10331555.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入门 什么是jQuery jQuery是一个JavaScript库,通过封装原生的JavaScript函数得到一整套定义好的方法。它是JohnResig于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。以最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。 主旨:以更少的代码、实现更多的功能(write less ,do more!) 官网:https://www.360docs.net/doc/ca10331555.html,/ jQuery的功能和优势 jQuery作为JavaScript封装的库,它的目的就是为了简化开发者使用JavaScript。主要功能有以下几点: 像CSS那样访问和操作DOM; 修改CSS控制页面外观; 简化JavaScript代码操作; 事件处理更加容易; 各种动画效果使用方便; 让Ajax技术更加完美; 基于jQuery大量插件; 自行扩展功能插件。 jQuery最大的优势,就是特别的方便。比如模仿CSS获取DOM,比原生的JavaScript</p><p>要方便太多。并且在多个CSS设置上的集中处理非常舒服,而最常用的CSS功能又封装到单独的方法。 最重要的是jQuery的代码兼容性非常好,你不需要总是头疼着考虑不同浏览器的兼容问题。 其他JavaScript库 目前除了jQuery,还有5个JS库较为流行,他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。 YUI,是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。 Prototype,是最早成型的JavaScript库之一,对JavaScript内置对象做了大量的扩展。 Dojo,Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。 Mootools,轻量、简洁、模块化和面向对象的JavaScript框架。 ExtJS,简称Ext,原本是对YUI的一个扩展,主要创建前端用户界面。(付费的) jQuery代码的编写 配置jQuery环境 1、获取jQuery最新版本 从官网下载:https://www.360docs.net/doc/ca10331555.html,/ 3、jQuery环境配置 jQuery不需要安装,把下载的jQuery.js放到网站上的一个公共位置,想要在某个页面上使用jQuery时,只需在该HTML文档中引入该库文件即可。 4、在页面中引入jQuery 由于jQuery是JavaScript的一个库文件,也就是jQuery本质是一个.js文件,所以使用<script type=”text/javascript” src=”jQuery存放的路径”></script>引入。 简单的jQuery示例</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也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能. 二.前言 经过公司内部收集, 整理了一些经常使用javascript实现的功能. 实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQuery UI. 如果你还在为了一个小小的特效而去下载并安装插件, 发现Bug还没有人替你解决. 记住插件是我们没有办法的最后选择. 使用插件有太多的坏处: 1.不利于维护 2.增加页面大小 3.不利于成员间交流共享,具有学习成本. 4.不够健壮, 不能保证插件版本一直更新并修复所有问题. 下面就引入今天的主角:jQuery UI 三.jQuery UI jQuery UI 是jQuery 的一部分, 是在jQuery之上的一套专门用于UI交互的类库. 使用jQuery UI可以实现底层交互, 各种高级特效, 动画, 并且可定制主题. 我们可以用它轻松的构建高度交互的Web应用程序. 官方首页: https://www.360docs.net/doc/ca10331555.html,/ 下载: https://www.360docs.net/doc/ca10331555.html,/download 示例和文档: https://www.360docs.net/doc/ca10331555.html,/demos/ 皮肤: https://www.360docs.net/doc/ca10331555.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.360docs.net/doc/ca10331555.html,/JSLib/ 此路径开通了目录浏览, 可以直接查找需要的文件. 目录组织结构按照本系列: (八) 插播:jQuery实施方案中介绍的方案组织. 另外也可以从Google上引用文件, Google的CDN速度更快也更有保证, 参见: Google's CDN 本文的实例的所有引用都使用WebConfig.ResourceServer 这个属性: public class WebConfig { public static string ResourceServer = @"https://www.360docs.net/doc/ca10331555.html,/";}五.弹出层对话框 弹出框是最常用最实用的功能. 先来看一下艺龙网上的一些应用场景. 1. 艺龙网应用场景举例 (1) 静态提示类弹出层. 弹出层的内容是固定的. (2) 动态提示类弹出层. 弹出层内容是根据事件源变化的. (3)遮罩类弹出层. 弹出时背景变灰并不可点击. 2. 应用实例 使用jQuery UI 的Dialog 组件. 我以轻松实现上面三种效果.</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>一、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/ca10331555.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>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入门教程是一个对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>https://www.360docs.net/doc/ca10331555.html, web前端培训教程:jQuery的基础核心知识点汇总 本节课我们简单的介绍一下jQuery 一些核心的问题,这些问题都粗略的为大家介绍了jQuery 的大致使用模式,为后续课程展开提供了帮助。对于JavaScript 课程已经学完的同学,这些概念会非常的清晰,而对于JavaScript 薄弱的同学可能会有一些模糊,但不必太担心,后续会慢慢展开。而对于完全没有JavaScript 基础的同学,就无法学习了。 一.代码风格 在jQuery 程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起始的。而这个“$”就是jQuery 当中最重要且独有的对象:jQuery 对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’); //进行执行的ID 元素选择 $(‘#box’).css(‘color’, ‘red’); //执行功能函数 由于$本身就是jQuery 对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式: jQuery(function () {}); jQuery(‘#box’);</p><p>https://www.360docs.net/doc/ca10331555.html, jQuery(‘#box’).css(‘color’, ‘red’); 在执行功能函数的时候,我们发现.css()这个功能函数并不是直接被“$”或jQuery 对象调用执行的,而是先获取元素后,返回某个对象再调用.css()这个功能函数。那么也就是说,这个返回的对象其实也就是jQuery 对象。 $().css(?color?, ?red?); //理论上合法,但实际上缺少元素而报错值得一提的是,执行了.css()这个功能函数后,最终返回的还是jQuery 对象,那么也就是说,jQuery 的代码模式是采用的连缀方式,可以不停的连续调用功能函数。 $('#box').css('color', 'red').css('font-size', '50px'); //连缀 jQuery 中代码注释和JavaScript 是保持一致的,有两种最常用的注释:单行使用“//...”,多行使用“/* ... */”。//$('#box').css('color', 'red'); 二.加载模式 我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹,那么为什么必须要包裹这段代码呢?原因是我们jQuery 库文件是在body 元素之前加载的,我们必须等待所有的DOM 元素加载后,延迟支持DOM 操作,否则就无法获取到。在延迟等待加载,JavaScript 提供了一个事件为load,方法如下: window.onload = function () {}; //JavaScript 等待加载 $(document).ready(function () {}); //jQuery 等待加载</p><h2>jQuery使用手册完全版</h2><p>-jQuery使用手册 翻译整理:Young.J 官方网站:https://www.360docs.net/doc/ca10331555.html, jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优秀的js效果,jQuery可以帮你达到目的! 下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip) jQuery Downloads (https://www.360docs.net/doc/ca10331555.html,/src/) 下载完成后先加载到文档中,然后我们来看个简单的例子! <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("a").click(function() { alert("Hello world!"); }); }); <script> 上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document 全部下载完毕时执行函数。 在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签( )的元素,$("#p")表示取id为"p"(<span id="p"></span>)的元素. 我将从以下几个内容来讲解jQuery的使用: 1:核心部分 2:DOM操作 3:css操作 4:javascript处理 5:动态效果 6:event事件</p><h2>《JQuery编程基础(91210124)》教学大纲(理论)</h2><p>jQuery编程基础课程教学大纲 课程名称:jQuery编程基础,Learning jQuery 课程编码:91210124 学分:3 总学时:60,理论学时:30,实验(或上机)学时:30 适用专业:WEB 先修课程:Web编程基础、Web高级编程技术 执笔人: 审订人: 一、课程的性质、目的与任务: jQuery 是一个快速、简单的JavaScript library,它简化了HTML 文件的traversing,事件处理、动画、Ajax 互动,从而方便了网页制作的快速发展。jQuery受到了越来越多网页开发者的欢迎。 因此本门课程旨在引领学生进入jQuery这个神奇的世界,对网页的快速开发框架有更进一步的认识并能使用。 通过本门课程的学习: 1. 使学生认识jQuery框架结构; 2. 进一步提高学生快速开发前端网页的能力,同时学习jQuery Mobile在移动终端上的做法; 3. 通过课程项目和案例教学,提高学生在前端网页、移动终端方面的动手能力和解决问题的能力,并鼓励创新。 二、教学基本要求: 本课程的教学基本要求分为三级:掌握、理解、了解。 掌握:属较高要求。对于要求掌握的内容都应比较透彻明了,并能熟练灵活地在工程中进行应用。 理解:属一般要求。对于要求理解的内容都应明了,能够对技术术语进行解释说明,通过进一步学习或资料查询,可以在工程中进行应用。 了解:属较低要求。对于要求了解的内容,应该知道所涉及的术语及方法。 三、教学内容与学时分配: 第一章认识jQuery(2学时) 知识点:JavaScript和JavaScript库、jQuery代码的编写、jQuery对象和DOM对象、解决jQuery 和其他库的冲突、jQuery开发工具和插件。 重点:编写简单的jQuery代码、jQurey对象和DOM对象的相互转换。 难点:编写简单的jQuery代码。 第二章jQuery选择器(2学时) 知识点:jQuery选择器的优势、jQuery选择器、应用jQuery改写示例、选择器中的一些注意事项、其他选择器。 重点:基本选择器、层次选择器、过滤选择器、表单选择器、其他选择器。 难点:表单选择器、其他选择器。 第三章jQuery中的DOM操作(4学时) 知识点:DOM操作的分类、jQuery中的DOM操作、jQuery中的超链接和图片提示效果。 重点:查找节点、创建节点、插入节点、删除节点。</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元素,除了前三个</p><p>$('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'); 分解开来,就是下面这样: 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元素</p><h2>jQuery基础知识点总结(DOM操作)</h2><p>jQuery基础知识点总结(DOM操作) 下面就为大家带来一篇jQuery基础知识点总结(DOM操作)。觉得挺不错的,现在就分享给大家,也给大家做个参考。 使用jQuery的方式来操作DOM更加的简洁、方便,统一的调用方式方便学习并且可降低学习成本。 1、样式属性操作 1)设置样式属性操作 ①设置单个样式: // 个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, “red”); ②设置多个样式(也可以设置单个) // 参数为 {}(对象) $(selector).css({“color”: “red”, “font-size”: “30px”}); 2)获取样式属性操作 // 参数表示要获取的样式属性名称 $(selector).css(“font-size”); 2、类操作 1)添加类样式 ——addClass(className)为指定元素添加类</p><p>className $(selector).addClass(“liItem”); //此处类型不带点,所有类操作的方法类名都不带点 2)移除类 ——removeClass(className)为指定元素移除类className $(selector).removeClass(“liItem”); $(selector).removeClass ; //不指定参数,表示移除被选中元素的所有类 3)判断有没有类样式 ——hasClass(className)判断指定元素是否包含类className $(selector).hasClass(“liItem”); //返回值为true 或false 4)切换类样式 ——toggleClass(className)为指定元素切换类className,该元素有类则移除,没有指定类则添加$(selector).hasClass(“liItem”); 【注意】 1、操作类样式的时候,所有的类名都不带点(.) 2、操作的样式非常少,那么可以通过.css 这个方法来操作</p><h2>JQuery入门、手册及教程</h2><p>浅谈JQUREY(摘自https://www.360docs.net/doc/ca10331555.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></div> <div class="rtopicdocs"> <div class="coltitle">相关主题</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> <li id="21909856"><a href="/topic/21909856/" 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/b613273492.html" target="_blank">JQuery实用教程(含语法和特效)</a></li> <li><a href="/doc/34442233.html" target="_blank">《jquery基础教程》PPT课件</a></li> <li><a href="/doc/3513047064.html" target="_blank">JQuery插件教程</a></li> <li><a href="/doc/7712021192.html" target="_blank">jQueryUI常用功能实战</a></li> <li><a href="/doc/a814338484.html" target="_blank">jQuery入门教程实例</a></li> <li><a href="/doc/d67073926.html" target="_blank">最全Jquery UI 教程</a></li> <li><a href="/doc/352697098.html" target="_blank">jQuery教程PPT课件</a></li> <li><a href="/doc/432904203.html" target="_blank">JQuery插件教程</a></li> <li><a href="/doc/977849375.html" target="_blank">JavaScript+jQuery前端开发基础教程</a></li> <li><a href="/doc/b86721052.html" target="_blank">JQuery 基础教程-修改CSS样式</a></li> <li><a href="/doc/f810028725.html" target="_blank">JavaScript+jQuery前端开发基础教程教案</a></li> <li><a href="/doc/1a6102765.html" target="_blank">jQuery前端开发实战教程</a></li> <li><a href="/doc/3312858694.html" target="_blank">jQuery网页特效设计基础教程 第11章 jQuery在HTML5中的应用 教案</a></li> <li><a href="/doc/6217098026.html" target="_blank">jquery教程</a></li> <li><a href="/doc/aa2010104.html" target="_blank">jQuery网页特效设计基础教程-教学教案</a></li> <li><a href="/doc/d75794363.html" target="_blank">JQuery入门、手册及教程</a></li> <li><a href="/doc/3e1861421.html" target="_blank">jQuery基础教程(第四版)课后练习3</a></li> <li><a href="/doc/4b150344.html" target="_blank">响应式网页开发基础教程(jQuery+Bootstrap)第1章 响应式网页设计基础</a></li> <li><a href="/doc/973518276.html" target="_blank">jquery 基础教程</a></li> <li><a href="/doc/be2745389.html" target="_blank">JQUERY基础教程(第四版)课后练习3</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/6d19016292.html" target="_blank">学生自我管理八个方法</a></li> <li><a href="/doc/4a19212922.html" target="_blank">逼自己自律的9个方法</a></li> <li><a href="/doc/3819239857.html" target="_blank">管理好自己的八个方法</a></li> <li><a href="/doc/2419377587.html" target="_blank">8个自我管理的好习惯,让你成为更好的自己</a></li> <li><a href="/doc/2719377586.html" target="_blank">自我管理八个方面</a></li> <li><a href="/doc/1419319018.html" target="_blank">增强自我管理能力的8个方法</a></li> <li><a href="/doc/1d19319019.html" target="_blank">十个好习惯</a></li> <li><a href="/doc/0a19490539.html" target="_blank">7个自我管理的好习惯</a></li> <li><a href="/doc/e919046820.html" target="_blank">四年级班规班训</a></li> <li><a href="/doc/e919046819.html" target="_blank">优秀班规10条四年级</a></li> <li><a href="/doc/df19192896.html" target="_blank">小学四年级班规班约</a></li> <li><a href="/doc/b819140066.html" target="_blank">小学四年级班规细则</a></li> <li><a href="/doc/a019221536.html" target="_blank">小学四年级班规班约</a></li> <li><a href="/doc/ad19221537.html" target="_blank">小学四年级班规班约[精华]</a></li> <li><a href="/doc/9719165534.html" target="_blank">小学四年级班规细则</a></li> <li><a href="/doc/8d19176863.html" target="_blank">四年级新学期班训班规</a></li> <li><a href="/doc/7519317881.html" target="_blank">四年级小学生班规(细则)</a></li> <li><a href="/doc/7719317880.html" target="_blank">四年级班规班约</a></li> <li><a href="/doc/4819212920.html" target="_blank">小学四年级班规班纪</a></li> <li><a href="/doc/4a19212921.html" target="_blank">小学四年级班规细则(通用8篇)</a></li> </ul> </div> </div> <script> var sdocid = "c8ae67a30029bd64783e2c78"; </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>