If you click on me, I will disappear.

This is a heading

This is a paragraph.

元素。id="test" 的元素。 jQuery 语法 jQuery 语法是为HTML 元素的选取编制，可以对元素执行某些操作。基础语法是：$(selector).action() 美元符号定义jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery action() 执行对元素的操作 实例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有class="test" 的段落 $("#test").hide() - 隐藏所有id="test" 的元素 提示：jQuery 使用的语法是XPath 与CSS 选择器语法的组合。文档就绪函数： 行jQuery 代码。 $(document).ready(function(){ --- jQuery functions go here ---- }); 为了防止文档在完全加载（就绪）之前运 在文档完全加载之前运行函数操作失败的情况： 试图隐藏一个不存在的元素。 获得未完全加载的图像的大小。 ================================================================== jQuery 选择器 1、jQuery 元素选择器 jQuery 使用CSS 选择器来选取HTML 元素。 $("p") 选取

元素。 $("p.intro") 选取所有class="intro" 的

元素。 $("p#demo") 选取id="demo" 的第一个

元素。 2、jQuery 属性选择器 jQuery 使用XPath

This is a heading

This is a paragraph.

This is another paragraph.

元素 所有class="intro" 的

元素所有class="intro" 的元素id="intro" 的第一个元素 每个

的第一个
• 元素 所有带有以".jpg" 结尾的href 属性的属性 class="head" 的元素 描述 $("div#intro .head") id="intro" 的
  元素中的所有 jQuery 选择器 选择器*#id.classelement.class.class $("*") $("#lastname") $(".intro") $("p") $(".intro.demo") 实例 所有元素 id=lastname 的第一个元素所有class="intro" 的元素所有

  元素 所有class=intro 且class=demo 的元素 第一个

  元素最后一个

  元素所有偶数 元素所有奇数 元素 列表中的第四个元素（index 从0 开始） 列出index 大于3 的元素列出index 小于3 的元素所有不为空的所有标题元素所有动画元素 input 元素

  ... 选取 :first:last:even:odd $("p:first") $("p:last") $("tr:even") $("tr:odd") :eq(index):gt(no):lt(no):not(selector) :header:animated $("ul li:eq(3)") $("ul li:gt(3)") $("ul li:lt(3)") $("input:not(:empty)") $(":header") :contains(text):empty:hidden :visibles1,s2,s3 [attribute] $(":contains('W3School')") 包含文本的所有元素$(":empty") $("p:hidden") $("table:visible") $("th,td,.intro") $("[href]") 无子（元素）节点的所有元素所有隐藏的

  元素所有可见的

  表格

  关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载

  所有带有匹配选择的元素所有带有href 属性的元素所有href 属性的值等于所有href 属性的值不等于素 所有href 属性的值包含素 所有 元素 所有type="text" 的 元素所有type="password" 的 元素 所有type="radio" 的 元素所有type="checkbox" 的 元素 所有type="submit" 的 元素所有type="reset" 的 元素所有type="button" 的 元素所有type="image" 的 元素所有type="file" 的 元素所有激活的input 元素所有禁用的input 元素所有被选取的所有被选中的 input 元素input 元素 "#" 的元素"#" 的元".jpg" 的元 [attribute=value]$("[href='#']") [attribute!=value]$("[href!='#']") [attribute$=value]$("[href$='.jpg']") :input:text:password:radio:checkbox:submit:reset:button:image:file:enabled:disabled:selected:checked $(":input") $(":text") $(":password") $(":radio") $(":checkbox") $(":submit") $(":reset") $(":button") $(":image") $(":file") $(":enabled") $(":disabled") $(":selected") $(":checked") ============================================================ jQuery 事件 jquery事件处理函数是当HTML 中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。 单独文件中的函数（把jQuery 函数放到独立的.js 文件中,易于jQuery 函数维护） 实例 jQuery 名称冲突（了解） jQuery 使用$ 符号作为jQuery 的简介方式。 某些其他JavaScript 库中的函数（比如Prototype）同样使用jQuery 使用名为noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自己的名称（比如jq）来代替$ 符号。 实例： $ 符号。

  This is a heading

  This is a paragraph.

  This is another paragraph.

  Click me 结论 由于jQuery 是为处理HTML 事件而特别

  设计

  领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计

  的，那么当您遵循以下原则时，您的代码会更恰当且更易维护： 把所有jQuery 代码置于事件处理函数中 把所有事件处理函数置于文档就绪事件处理器中把jQuery 代码置于单独的 如果存在名称冲突，则重命名.js 文件中jQuery 库 jQuery 事件 下面是jQuery 中事件函数的一些例子： Event 函数 $(document).ready(function) （当 HTML 文档就绪可用） $(selector).click(function) $(selector).dblclick(function) $(selector).focus(function) $(selector).mouseover(function) 被选元素的点击事件被选元素的双击事件被选元素的获得焦点事件被选元素的鼠标悬停事件绑定函数至文档的就绪事件jQuery 事件方法 事件方法会触发匹配元素的事件， 事件。或将函数绑定到所有匹配元素的某个 jQuery 事件处理方法 事件处理方法把事件处理器绑定至匹配元素。 方法 $(selector).bind(event) $(selector).delegate(selector, event) $(selector).die() $(selector).live(event) 触发向匹配元素添加一个或更多事件处理器向匹配元素添加一个事件处理器，现在或将来移除所有通过live() 函数添加的事件处理器向匹配元素添加一个事件处理器，现在 或将来 $(selector).one(event) $(selector).unbind(event) $(selector).undelegate(event) $(selector).trigger(event) $(selector).triggerHandler(event) 向匹配元素添加一个事件处理器。该处理器只能触发一次。从匹配元素移除一个被添加的事件处理器从匹配元素移除一个被添加的事件处理器，现在或将来所有匹配元素的指定事件第一个被匹配元素的指定事件 =========================================================================================== jQuery 效果（隐藏、显示、切换，滑动，淡入淡出，以及动画） jQuery 效果—隐藏和显示：通过hide() 和show() 两个函数，jQuery 支持对HTML 元素的隐藏和显示 hide() 和show() 都可以设置两个可选参数：speed 和callback。语法： $(selector).hide(speed,callback) $(selector).show(speed,callback) callback 参数是在hide 或show 函数完成之后被执行的函数名称。 speed 参数可以设置这些值："slow", "fast", "normal" 或milliseconds。实例（隐藏）：

  If you click on the "Hide" button, I will disappear.

  Hide Show ----------------------------------------------------------------------------------------------------- Hide

  This is a paragraph with little content.

  This is another small paragraph.

  jQuery 切换 jQuery toggle() 函数使用show() 或hide() 函数来切换HTML 元素的可见状态。 隐藏显示的元素，显示隐藏的元素。 语法： $(selector).toggle(speed,callback) speed 参数可以设置这些值："slow", "fast", "normal" 实例 $("button").click(function(){ $("p").toggle(); }); -------------------------------------------------------------------- 切换

  这是一个段落。

  这是另一个段落。

  页面显示为：毫秒。或 点击“切换”之后，页面的段落隐藏起来，变为： 注：点击“切换”，隐藏和显示段落字体循环. jQuery 滑动函数- slideDown, slideUp, slideToggle jQuery 拥有以下滑动函数： $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback) speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。callback 参数是在hide 或show 函数完成之后被执行的函数名称。slideDown() 实例

  W3School - 领先的 Web 技术教程站点

  在 W3School，你可以找到你所需要的所有网站建设教程。

  请点击这里

  页面为：

  点击“请点击这里”之后，页面慢慢向下展开、直到停止，页面为： --------------------------------------------------------------------------------------------------------------- slideUp() 实例

  W3School - 领先的 Web 技术教程站点

  在 W3School，你可以找到你所需要的所有网站建设教程。

  请点击这里

  页面为：

  点击“请点击这里”之后，页面慢慢向上收起、直到停止，页面为： ------------------------------------------------------------------------------------------------------slideToggle() 实例

  W3School - 领先的 Web 技术教程站点

  在 W3School，你可以找到你所需要的所有网站建设教程。

  请点击这里

  jQuery 效果- 淡入淡出--fadeIn(), fadeOut(), fadeTo() jQuery 拥有以下fade 函数： $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback) Query 拥有下面四种 fadeIn() fadeOut() fadeToggle() fadeTo() fade 方法： speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。fadeTo() 函数中的opacity 参数规定减弱到给定的不透明度。 callback 参数是在hide 或show 函数完成之后被执行的函数名称。fadeIn实例：

  演示带有不同参数的fadeIn() 方法。

  点击这里，使三个矩形淡入
  
  

  
  

  
  

  页面为： 点击“点击这里，使三个矩形淡入”三个矩形逐渐淡入，页面为： ----------------------------------------------------------------------------------------------- fadeOut() 实例

  演示带有不同参数的fadeOut() 方法。

  点击这里，使三个矩形淡出
  
  

  
  

  
  

  页面为： 点击“点击这里，使三个矩形淡入”三个矩形逐渐淡出，页面为： --------------------------------------------------------------------- ---------------- fadeToggle() 实例

  演示带有不同参数的 fadeToggle() 方法。

  点击这里，使三个矩形淡入淡出
  
  

  
  

  
  

  ------------------------------------------------------------------------------------------------------------------ fadeTo() 实例

  演示带有不同参数的fadeTo() 方法。

  点击这里，使三个矩形淡出
  
  

  
  

  
  

  页面为： 点击“点击这里，使三个矩形淡出”三个矩形逐渐淡出，jQuery 自定义动画页面为： jQuery 函数创建自定义动画的语法： $(selector).animate({params},[duration],[easing],[callback]) 关键的参数是 此类属性： animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"}); 第二个参数是duration。它定义用来应用于动画的时间。它设置的值是：params。它定义了产生动画的属性。可以同时设置多个"slow", "fast", "normal" 或毫秒。 实例1： 开始动画

  默认情况下，所有HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的CSS position 属性设置为relative、fixed 或absolute。

  ---------------------------------------------------------------------------------------------------- 实例2 开始动画

  默认情况下，所有HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的CSS position 属性设置为relative、fixed 或absolute。

  ---------------------------------------------------------------------------------------------------------------------- 实例3： 开始动画

  默认情况下，所有HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的CSS position 属性设置为relative、fixed 或absolute。

  --------------------------------------------------------------------- ------------------------- 实例4： 开始动画

  默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed absolute。

  --------------------------------------------------------------------- --------------------------- 实例5： 开始动画

  默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed absolute。

  --------------------------------------------------------------------- ------------------------- 实例6： 开始动画 或

  默认情况下，所有 HTML 元素的位置都是静态的， 记得首先把元素的

  属性设置为 relative style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO

  注：HTML 元素默认是静态定位，且无法移动。 CSS 的position 设置为relative 或如需使元素可以移动，请把 absolute。 jQuery 停止动画stop（） jQuery stop() jQuery stop() stop() 方法方法用于停止动画或效果，在它们完成之前。jQuery 效果函数，包括滑动、淡入淡出和自定义动画。方法适用于所有 实例1： 停止滑动

  点击这里，向下滑动面板

  Hello world!

  --------------------------------------------------------实例2：

  "

  "开始" 停止" 开始

  停止 停止所有 停止但要完成 按钮会启动动画。

  按钮会停止当前活动的动画，但允

  按钮停止当前活动的动画，并

  许已排队的动画向前执行。

  "停止所有" 清空动画队列；因此元素上的所有动画都会停止。

  "停止但要完成" 会立即完成当前活动的动画，然后停下来。

  HELLO

  --------------------------------------------------------- --------------- 实例3：

  停止滑动

  点击这里，向下滑动面板
  Hello world!
  jQuery Callback 函数 - jQuery 动画的问题：由于JavaScript 语句（指令）是逐一执行的 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。 为了避免这个情况，您可以以参数的形式添加 100% 完成后，即调用Callback 函数。Callback 函数。当动画 实例： Hide

  This is a paragraph with little content.

  jQuery - Chaining 通过jQuery，您可以把动作/方法链接起来。 Chaining 允许我们在一条语句中允许多个jQuery 方法（在相同的元素上）。实例1：

  jQuery 乐趣十足！

  点击这里 效果："p1" 元素首先会变为红色，然后向上滑动，然后向下滑动。 --------------------------------------------------------------------------------------------------------------- 实例2：

  jQuery 效果：同实例1.乐趣十足！

  点击这里 jQuery 效果函数 Hide / Show show() hide() toggle() Slide slideDown() slideUp() slideToggle() Fade in / out fadeIn() fadeOut() fadeTo() Animation animate() stop() Queue clearQueue() delay() dequeue() queue() 对被选元素移除所有排队的函数（仍未运行的）对被选元素的所有排队函数（仍未运行）设置延迟运行被选元素的下一个排队函数显示被选元素的排队函数对被选元素应用“自定义”的动画停止在被选元素上运行动画淡入被选元素至完全不透明淡出被选元素至完全不透明把被选元素减弱至给定的不透明度通过调整高度来滑动显示被选元素通过调整高度来滑动隐藏被选元素对被选元素进行滑动隐藏和滑动显示的切换显示被选的元素隐藏被选的元素对被选元素进行隐藏和显示的切换描述 =================================================================== jQuery HTML jQuery DOM jQuery jQuery 操作DOM 的能力。中非常重要的部分，就是操作提供一系列与DOM 相关的方法，这使访问和操作元素和属性变得很容易。 提示：DOM = Document Object Model DOM 定义访问（文档对象模型）HTML 和XML 文档的标准： “W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。” 获得内容- text()、html() 以及val() DOM 操作的jQuery 方法：三个简单实用的用于 text() - html() - val() - 设置或返回所选元素的文本内容设置或返回所选元素的内容（包括设置或返回表单字段的值HTML 标记）

  这是段落中的粗体 显示文本 显示HTML文本。

  ----------------------------------------------------------------------------------------

  姓名：

  --------------------------------------------------------------------------

  W3School.com.cn

  显示href 值 ----------------------------------------------------------------------------------------------- jQuery - 设置内容 text() - html() - val() - 设置内容和属性、html() 以及val()- text()我们将使用前一章中的三个相同的方法来设置内容：设置或返回所选元素的文本内容设置或返回所选元素的内容（包括设置或返回表单字段的值HTML 标记）

  这是段落。

  这是另一个段落。

  Input field:

  --------------------------------------------------------------------------
  这是粗体文本。
  文本。
  这是另一段粗体显示旧/新文本 显示旧/新HTML ----------------------------------------------------------------------------------- 设置属性 jQuery attr() - attr()方法也用于设置/改变属性值。

  W3School.com.cn

  改变href 值 http://www.w3school.com.cn/jquery");

  请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 --------------------------------------------------------------------------------------------------------------------href 值。

  W3School.com.cn

  改变href 和title 值 href 值和已经设置的

  请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 title 值。

  教程"}); }); -----------------------------------------------------------------------------------------------

  w3school.com.cn

  改变href 值 href 值。

  请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 ---------------------------------------------------------------------------------------- jQuery - 添加新内容的四个 append() - prepend() - after() - before() - 添加元素方法：jQuery 在被选元素的结尾插入内容在被选元素的开头插入内容在被选元素之后插入内容在被选元素之前插入内容

  This is a paragraph.

  This is another paragraph.

  1. List item 1
  2. List item 2
  3. List item 3
  追加文本 追加列表项 ----------------------------------------------------------------------

  This is a paragraph.

  This is another paragraph.

  1. List item 1
  2. List item 2
  3. List item 3
  添加文本 添加列表项 -------------------------------------------------------------------------

  This is a paragraph.

  追加文本 -------------------------------------------------------------------- 创建新元素
  
  ---------------------------------------------------------------------
  
  ---------------------------------------------------------------------------在图片后面添加文本 在img 之后插入新元素以HTML 创建元素通过jQuery 创建元素在图片前面添加文本在图片后面添加文本通过DOM 创建元素jQuery - 删除元素 删除元素/内容一般可使用以下两个 remove() - empty() - jQuery 方法：删除被选元素（及其子元素）从被选元素中删除子元素
  This is some text in the div.

  This is a paragraph in the div.

  This is another paragraph in the div.

  
  删除 div 元素 --------------------------------------------------------------------- --------------
  This is some text in the div.

  This is a paragraph in the div.

  This is another paragraph in the div.

  
  清空 div 元素 --------------------------------------------------------------------- ---------------

  This is a paragraph in the div.

  This is another paragraph in the div.

  This is another paragraph in the div.

  删除 class="italic" 的所有 p 元素 --------------------------------------------------------------------- -------------- jQuery - jQuery 拥有若干进行 addClass() - removeClass() - toggleClass() - css() - 获取并设置CSS 类CSS 操作的方法。我们将学习下面这些：向被选元素添加一个或多个类从被选元素删除一个或多个类对被选元素进行添加/删除类的切换操作设置或返回样式属性

  标题1

  标题2