1、1jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景颜色更改为红色：$(“p“).css(“background-color“,“red“);jQuery 名称冲突jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。2jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。jQuery 事件Even
2、t 函数 绑定函数至$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）$(selector).click(function) 触发或将函数绑定到被选元素的点击事件$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件方法 描述bind() 向匹配元素附加一个或更多事件处理器blur() 触发、或将函数绑
3、定到指定元素的 blur 事件change() 触发、或将函数绑定到指定元素的 change 事件click() 触发、或将函数绑定到指定元素的 click 事件dblclick() 触发、或将函数绑定到指定元素的 double click 事件delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器die() 移除所有通过 live() 函数添加的事件处理程序。error() 触发、或将函数绑定到指定元素的 error 事件event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。event.p
4、ageX 相对于文档左边缘的鼠标位置。event.pageY 相对于文档上边缘的鼠标位置。event.preventDefault() 阻止事件的默认动作。3event.result 包含由被指定事件触发的事件处理器返回的最后一个值。event.target 触发事件的 DOM 元素。event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。event.type 描述事件的类型。event.which 指示按了哪个键或按钮。focus() 触发、或将函数绑定到指定元素的 focus 事件keydown() 触发、或将函数绑定到指定元素的 key down
5、事件keypress() 触发、或将函数绑定到指定元素的 key press 事件keyup() 触发、或将函数绑定到指定元素的 key up 事件live() 触发、或将函数绑定到指定元素的 load 事件load() 触发、或将函数绑定到指定元素的 load 事件mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件mousemove() 触发、或将函数绑定到指定元素的 mouse move
6、事件mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。ready() 文档就绪事件（当 HTML 文档就绪可用时）resize() 触发、或将函数绑定到指定元素的 resize 事件scroll() 触发、或将函数绑定到指定元素的 scroll 事件4select() 触发、或将函数绑定到指定元素的 select 事件submit() 触发、或将
7、函数绑定到指定元素的 submit 事件toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。trigger() 所有匹配元素的指定事件triggerHandler() 第一个被匹配元素的指定事件unbind() 从匹配元素移除一个被添加的事件处理器undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来unload() 触发、或将函数绑定到指定元素的 unload 事件triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。triggerHandler() 方法与 trigger() 方
8、法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。triggerHandler（）与 trigger() 方法相比的不同之处 它不会引起事件（比如表单提交）的默认行为 .trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。 该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
9、触发实例：$(“button#demo“).click()上面的例子将触发 id=“demo“ 的 button 元素的 click 事件。jQuery 效果函数 描述$(selector).hide() 隐藏被选元素5$(selector).show() 显示被选元素$(selector).toggle() 切换（在隐藏与显示之间）被选元素$(selector).slideDown() 向下滑动（显示）被选元素$(selector).slideUp() 向上滑动（隐藏）被选元素$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动$(selector).fade
10、In() 淡入被选元素$(selector).fadeOut() 淡出被选元素$(selector).fadeTo() 把被选元素淡出为给定的不透明度$(selector).animate() 对被选元素执行自定义动画jQuery 隐藏和显示hide() 和 show() 都可以设置两个可选参数：speed 和 callback。$(selector).hide(speed,callback)$(selector).show(speed,callback)speed 参数规定显示或隐藏的速度。可以设置这些值：“slow“, “fast“, “normal“ 或毫秒。callback 参数是在
11、hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。jQuery 切换 ：$(selector).toggle(speed,callback)jQuery 滑动函数 - slideDown, slideUp, slideTogglejQuery 拥有以下滑动函数：$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)speed 参数可以设置这些值：“slow“,
12、 “fast“, “normal“ 或毫秒。6callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。slideDown() 实例$(“.flip“).click(function()$(“.panel“).slideDown(););slideUp() 实例$(“.flip“).click(function()$(“.panel“).slideUp()slideToggle() 实例$(“.flip“).click(function()$(“.panel“).slideToggle(););jQuery Fade 函数 -
13、fadeIn(), fadeOut(), fadeTo()jQuery 拥有以下 fade 函数：$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback)speed 参数可以设置这些值：“slow“, “fast“, “normal“ 或 毫秒。fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参
14、数的知识。jQuery 自定义动画jQuery 函数创建自定义动画的语法：7$(selector).animate(params,duration,easing,callback)关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性：animate(width:“70%“,opacity:0.4,marginLeft:“0.6in“,fontSize:“3em“);第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是：“slow“, “fast“, “normal“ 或毫秒。注：Callback 函数在当前动画 100% 完成之后执行。jQu
15、ery HTML 操作html() 函数改变所匹配的 HTML 元素的内容（innerHTML）：$(selector).html(content)append() 函数向所匹配的 HTML 元素内部追加内容：$(selector).append(content)after() 函数在所有匹配的元素之后插入 HTML 内容：$(selector).after(content)prepend() 函数向所匹配的 HTML 元素内部预置（Prepend）内容：$(selector).prepend(content)jQuery CSS 函数jQuery 拥有三种用于 CSS 操作的重要函数： $(
16、selector).css(name,value) $(selector).css(properties) $(selector).css(name)函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值$(selector).css(name,value)$(“p“).css(“background-color“,“red“);函数 css(properties) 同时为所有匹配元素的一系列 CSS 属性设置值：8$(selector).css(properties)$(“p“).css(“background-color“:“red“,“font-size“:“20
17、0%“);函数 css(name) 返回指定的 CSS 属性的值：$(selector).css(name)$(this).css(“background-color“);函数 height(value) 设置所有匹配元素的高度：函数 width(value) 设置所有匹配元素的宽度：jQuery CSS 函数 - 来自本页CSS 属性 描述$(selector).css(name,value) 为匹配元素设置样式属性的值$(selector).css(properties) 为匹配元素设置多个样式属性$(selector).css(name) 获得第一个匹配元素的样式属性值$(selecto
18、r).height(value) 设置匹配元素的高度$(selector).width(value) 设置匹配元素的宽度jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。它的语法如下：$(selector).load(url,data(参数),callback)jQuery AJAX 请求请求 描述$(selector).load(url,data,callback) 把远程数据加载到被选的元素中$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中$.get(url,data,callback,type) 使用 HTTP GET 来加载
19、远程数据$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据$.getScript(url,callback) 加载并执行远程的 JavaScript 文件9(url) 被加载的数据的 URL（地址） (data) 发送到服务器的数据的键/值对象(callback) 当数据被加载时，所执行的函数 (options) 完整 AJAX 请求的所有键/值对选项(type) 被返回的数据的类型 (html,xml,json,jasonp,scri
20、pt,text)jQuery 语法实例$(this).hide() jQuery 的 hide() 函数，隐藏当前的 HTML 元素。$(“p“).hide() jQuery 的 hide() 函数，隐藏所有 元素。$(“.test“).hide() jQuery 的 hide() 函数，隐藏所有 class=“test“ 的元素。$(“#test“).hide() jQuery 的 hide() 函数，隐藏 id=“test“ 的元素。$(“#test“).hide(slow) jQuery 的 hide(slow) 函数，慢慢隐藏jQuery fadeOut() jQuery fadeou
21、t() 函数。淡出隐藏效果$(“.panel“).slideToggle(“slow“); 方法，第一次点击收缩第二次点击展开 渐变效果jQuery animate() 函数：创建自定义动画10jQuery 选择器选择器 实例 选取* $(“*“) 所有元素#id $(“#lastname“) id=“lastname“ 的元素.class $(“.intro“) 所有 class=“intro“ 的元素element $(“p“) 所有 元素.class.class $(“.intro.demo“) 所有 class=“intro“ 且 class=“demo“ 的元素:first $(“p
22、:first“) 第一个 元素:last $(“p:last“) 最后一个 元素:even $(“tr:even“) 所有偶数 元素:odd $(“tr:odd“) 所有奇数 元素:eq(index) $(“ul li:eq(3)“) 列表中的第四个元素（index 从 0 开始）:gt(no) $(“ul li:gt(3)“) 列出 index 大于 3 的元素:lt(no) $(“ul li:lt(3)“) 列出 index 小于 3 的元素:not(selector) $(“input:not(:empty)“) 所有不为空的 input 元素:header $(“:header“) 所有标题元素 - :animated 所有动画元素:contains(text) $(“:contains(W3School)“) 包含指定字符串的所有元素:empty $(“:empty“) 无子（元素）节点的所有元素:hidden $(“p:hidden“) 所有隐藏的 元素:visible $(“table:visible“) 所有可见的表格s1,s2,s3 $(“th,td,.intro“) 所有带有匹配选择的元素
