1、JQuery入门基础,JQuery简介 JQuery语法 JQuery选择器 JQuery事件 JQuery效果,JQuery简介,jQuery 库可以通过一行简单的标记被添加到网页中（写更少的代码干更多的事）。 jQuery库-特性 向页面添加 jQuery 库 基础 jQuery 实例 下载 jQuery 库的替代,jQuery库-特性,HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX,向页面添加 jQuery 库,jQuery 库位于单个的 JavaScript 文件中，其中包含所有 jQu
2、ery 函数。 可以通过下面的标记把 jQuery 添加到网页中：请注意， 标签应该位于页面的 部分。,基础 jQuery 实例,下面的例子演示了 jQuery 的 hide() 函数，隐藏了 HTML 文档中所有的 元素。, $(document).ready(function() $(“button“).click(function() $(“p“).hide(); ); ); This is a heading This is a paragraph. This is another paragraph. Click me,下载 jQuery,存在两份 jQuery 拷贝可供下载，一是缩
3、小版（由 Google Closure Compiler），另一个是未压缩版（供 debugging 或 reading）。 jquery-1.4.4.min.js jquery-1.4.4.js,库的替代,使用 Google 的 CDN使用 Microsoft 的 CDN ,JQuery语法,通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。 jQuery 语法是为 HTML 元素的选取编制，可以对元素执行某些操作。 基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和
4、“查找” HTML 元素 jQuery action() 执行对元素的操作 提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。,jQuery 选择器,选择器允许对元素组或单个元素进行操作。 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。,jQuery 选择器,jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器,jQuery 元素选择器,jQuery 使用 CSS 选
5、择器来选取 HTML 元素。 $(“p“) 选取 元素。 $(“p.intro“) 选取所有 class=“intro“ 的 元素。 $(“p#demo“) 选取 id=“demo“ 的第一个 元素。,jQuery 属性选择器,jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $(“href“) 选取所有带有 href 属性的元素。 $(“href=#“) 选取所有带有 href 值等于 “#“ 的元素。 $(“href!=#“) 选取所有带有 href 值不等于 “#“ 的元素。 $(“href$=.jpg“) 选取所有 href 值以 “.jpg“ 结尾的元素。,jQuer
6、y CSS 选择器,jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素的背景颜色更改为红色： 实例 $(“p“).css(“background-color“,“red“);,jQuery 事件,jQuery 是为事件处理特别设计的。 jQuery 事件函数 在 中或单独文件中的函数 jQuery 名称冲突 结论 常见jQuery 事件,jQuery 事件函数,jQuery 事件处理函数是 jQuery 中的核心函数。 事件处理函数是当 HTML 中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的
7、术语。,在 中-1,在中 由于 jQuery 是为事件处理特别设计的，通常是把 jQuery 代码置于网页 部分的“事件处理”函数中。 所有事件函数都在文档自身的“事件处理器”内部进行定义： $(document).ready(function() some code. ),在 中-2,定义了一个处理 HTML 按钮的点击事件的 click 函数： $(“button“).click(function() some code. ) click 函数内部的代码改变所有 元素样式： $(“p“).css(“background-color“,“red“);,单独文件中的函数,如果网站包含许多页面，
8、并且您希望您的 jQuery 函数易于维护，那么请把 jQuery 函数放到独立的 .js 文件中。,jQuery 名称冲突,jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。,结论,由于 jQuery 是为处理 HTML 事件而特别设计的，那么当遵循以下原则时，代码会更恰当且更易维护： 把所有 jQuery 代码置
9、于事件处理函数中 把所有事件处理函数置于文档就绪事件处理器中 把 jQuery 代码置于单独的 .js 文件中 如果存在名称冲突，则重命名 jQuery 库,常见jQuery 事件,$(document).ready(function)文档的就绪事件（当 HTML 文档就绪可用） $(selector).click(function)被选元素的点击事件 $(selector).dblclick(function)被选元素的双击事件 $(selector).focus(function)被选元素的获得焦点事件 $(selector).mouseover(function)被选元素的鼠标悬停事件,
10、jQuery 效果,隐藏、显示、切换、滑动 以及动画 哇。噻。 效果演示与代码讲解,jQuery 隐藏和显示,通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示。 语法： $(selector).hide(speed,callback) $(selector).show(speed,callback) callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。下面的章节学习更多有关 callback 参数的知识。 speed 参数可以设置这些值：“slow“, “fast“, “normal“ 或 milliseconds,
11、jQuery 滑动函数,slideDown, slideUp, slideToggle $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback),jQuery Fade 函数 淡入淡出,fadeIn(), fadeOut(), fadeTo() $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(sp
12、eed,opacity,callback),jQuery 自定义动画,jQuery 函数创建自定义动画的语法： $(selector).animate(params,duration,easing,callback) 关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性： animate(width:“70%“,opacity:0.4,marginLeft:“0.6in“,fontSize:“3em“); 第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是：“slow“, “fast“, “normal“ 或 毫秒。,jQuery 切换,jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。 隐藏显示的元素，显示隐藏的元素。 语法： $(selector).toggle(speed,callback) speed 参数可以设置这些值：“slow“, “fast“, “normal“ 或 毫秒。,
