Jquery--基础小结

1、基础语法是：$(selector).action()

    美元符号定义 jQuery
    选择符（selector）“查询”和“查找” HTML 元素
  

  jQuery 的 action() 执行对元素的操作

    $(this).hide() - 隐藏当前元素           $("p").hide() - 隐藏所有段落   $("p.test").hide() - 隐藏所有 class="test" 的段落

    $("#test").hide() - 隐藏所有 id="test" 的元素            $(".test").hide()  隐藏所有 class="test" 的元素。

2、文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

 

3、jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

4、jQuery 事件

文档的就绪事件  （当 HTML 文档就绪可用）

$(selector).click(function)  被选元素的点击事件
$(selector).dblclick(function)  被选元素的双击事件
$(selector).focus(function)  被选元素的获得焦点事件
$(selector).mouseover(function)  被选元素的鼠标悬停事件

一个元素上同时绑定单击和双击事件后，双击触发单击事件。
请问如何才能实现双击时只触发双击事件呢？

代码如下：

$(function(){  $(".testdiv").click(function(){    alert("click");  }).dblclick(function(){    alert("dblclick");  });});

 

5、jQuery 效果     函数  描述

$(selector).hide()  隐藏被选元素
$(selector).show()  显示被选元素
$(selector).toggle()  切换（在隐藏与显示之间）被选元素
$(selector).slideDown()  向下滑动（显示）被选元素
$(selector).slideUp()  向上滑动（隐藏）被选元素
$(selector).slideToggle()  对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()  淡入被选元素
$(selector).fadeOut()  淡出被选元素
$(selector).fadeTo()  把被选元素淡出为给定的不透明度
$(selector).animate()  对被选元素执行自定义动画

6、jQuery HTML 操作     函数  描述

$(selector).html(content)  改变被选元素的（内部）HTML
$(selector).append(content)  向被选元素的（内部）HTML 追加内容
$(selector).prepend(content)  向被选元素的（内部）HTML “预置”（Prepend）内容
$(selector).after(content)  在被选元素之后添加 HTML
$(selector).before(content)  在被选元素之前添加 HTML

7、jQuery CSS 函数
CSS 属性  描述

$(selector).css(name,value)  为匹配元素设置样式属性的值
$(selector).css({properties})  为匹配元素设置多个样式属性
$(selector).css(name)  获得第一个匹配元素的样式属性值
$(selector).height(value)  设置匹配元素的高度
$(selector).width(value)  设置匹配元素的宽度

8、jQuery AJAX 请求

请求  描述
$(selector).load(url,data,callback)  把远程数据加载到被选的元素中
$.ajax(options)  把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)  使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)  使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback)  使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)  加载并执行远程的 JavaScript 文件

(selector) jQuery 元素选择器语法

(url) 被加载的数据的 URL（地址）

(data) 发送到服务器的数据的键/值对象

(callback) 当数据被加载时，所执行的函数

(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 请求的所有键/值对选项

 

9、jQuery 事件方法

ready()  文档就绪事件（当 HTML 文档就绪可用时）
blur()          触发、或将函数绑定到指定元素的 blur 事件
change()  触发、或将函数绑定到指定元素的 change 事件
click()  触发、或将函数绑定到指定元素的 click 事件
dblclick()  触发、或将函数绑定到指定元素的 double click 事件
error()  触发、或将函数绑定到指定元素的 error 事件
focus()  触发、或将函数绑定到指定元素的 focus 事件
keydown()  触发、或将函数绑定到指定元素的 key down 事件
keypress()  触发、或将函数绑定到指定元素的 key press 事件
keyup()  触发、或将函数绑定到指定元素的 key up 事件
load()          触发、或将函数绑定到指定元素的 load 事件
mousedown()  触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()  触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()  触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()  触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()  触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()  触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()  触发、或将函数绑定到指定元素的 mouse up 事件
resize()  触发、或将函数绑定到指定元素的 resize 事件
scroll()  触发、或将函数绑定到指定元素的 scroll 事件
select()  触发、或将函数绑定到指定元素的 select 事件
submit()  触发、或将函数绑定到指定元素的 submit 事件
unload()  触发、或将函数绑定到指定元素的 unload 事件

 

10、jQuery 事件处理方法
$(selector).bind(event)          向匹配元素添加一个或更多事件处理器
$(selector).delegate(selector, event)  向匹配元素添加一个事件处理器，现在或将来
$(selector).die()    移除所有通过 live() 函数添加的事件处理器
$(selector).live(event)   向匹配元素添加一个事件处理器，现在或将来
$(selector).one(event)    向匹配元素添加一个事件处理器。该处理器只能触发一次。
$(selector).unbind(event)   从匹配元素移除一个被添加的事件处理器
$(selector).undelegate(event)   从匹配元素移除一个被添加的事件处理器，现在或将来
$(selector).trigger(event)   所有匹配元素的指定事件
$(selector).triggerHandler(event)  第一个被匹配元素的指定事件