jQuery

1.jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

1)美元符号定义 jQuery
2)选择符（selector）“查询"和"查找” HTML 元素
3)jQuery 的 action() 执行对元素的操作
例子

1)$(this).hide() - 隐藏当前元素
2)$("p").hide() - 隐藏所有 <p> 元素
3)$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
4)$("#test").hide() - 隐藏所有 id="test" 的元素

2.jQuery 选择器

元素选择器

$("p")

#id 选择器

$("#test")

.class 选择器

$(".test")

3.jQuery 事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave	 	blur	unload
hover	 	 

4.jQuery 效果

隐藏和显示

$("p").hide();
$("p").show();

淡入淡出

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

滑动

slideDown()
slideUp()
slideToggle()

动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
停止动画

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
链(Chaining) Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

5.iQuery Html

获得内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

设置内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$("p").append("追加文本");

删除元素/内容

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("#div1").remove();

jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("h1,h2,p").addClass("blue");

jQuery 尺寸方法

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

6.jQuery - AJAX get() 和 post() 方法

$("button").click(function(){
    $.post("url",
    {
        name:"xm",
        url:"http://www.baidu.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

$("button").click(function(){
  $.get("url",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});