jQuery的基础使用方法

jQuery 语法

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

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

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

实例:

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

文档就绪事件

jQuery中：

$(document).ready(function(){
    // 执行代码
});

或者

$(function(){
    // 执行代码
});

JavaScript中：

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

也就是说，可以这样理解，如果一个图片需要下载很久，那么window.onload事件需要等到图片加载完成了之后才会执行。

jQuery 选择器

在Chrome的Web开发者工具的console中，是可以使用jQuery选择器的，可以完成一些比较骚气的操作。记得以前《英雄联盟》出了一个活动，说是点击一个页面中的某个东西100次，然后就可以领一个皮肤。在这里，打开console，写个定时执行的函数，在函数中通过jQuery选择器选中所需要点击的控件，然后进行点击，一下子就点好了，贼舒服！

基于id

$("p")：选取在页面中选取所有 <p>元素
$("#test") ：选取id为test的元素
$(".test")：选取所有class为test的元素
$("p.intro")：选取 class 为 intro 的 <p> 元素
$("p#intro")：选取 id 为 intro 的 <p> 元素
$("[href]")：选取带有 href 属性的元素
$("a[target='_blank']")：选取所有 target 属性值等于 “_blank” 的<a>元素，同理还有不等于
$(":button")：选取所有 type=”button” 的 <input> 元素和 <button> 元素
$("div p.intro")：选取所有的div元素中，class为intro的<p>元素，同理可换成#
$("div , p")：选取所有的div和p元素
$("div > p")：选取所有的父集是div的p元素
$("div + p")：选取所有的跟在div后面的p元素

还可参考css选择器中更多的用法：http://www.runoob.com/cssref/css-selectors.html

jQuery 事件

常见 DOM 事件：
这里写图片描述

// click()点击事件
$("p").click(function(){
  $(this).hide();
});
// dblclick()双击元素
$("p").dblclick(function(){
  $(this).hide();
});
// 鼠标指针穿过元素
$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});
// 当鼠标指针离开元素
$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});
// 当鼠标指针移动到元素上方，并按下鼠标按键时
$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});
// 当在元素上松开鼠标按钮时
$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});
// 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
$$((""#p1#p ").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);
// 当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
// 当元素失去焦点时，发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

jQuery 效果

显示与隐藏

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

$("button").click(function(){
  $("p").hide(1000);
});

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素。

$("button").click(function(){
  $("p").toggle();
});

$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

淡入淡出

语法：

$(selector).fadeIn(speed,callback);// 用于淡入已隐藏的元素。
$(selector).fadeOut(speed,callback);// 用于淡出可见元素。
$(selector).fadeToggle(speed,callback);// 在 fadeIn() 与 fadeOut() 方法之间进行切换。
$(selector).fadeTo(speed,opacity,callback);// 渐变为给定的不透明度（值介于 0 与 1 之间）。

示例：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

滑动

语法：

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);