jQuery入门

一、jQuery 简介

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。

二、jQuery 使用

从官网下载或从cdn引用
引用方法：在head标签内填写 <script src=" "></script>，双引号中填写路径

三、jQuery 语法

1.基础语法：

$(selector).action()

selector -> 选择器
action -> 动作

2.文档就绪事件:

$(document).ready(function(){
 //代码开始
});

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

3.定义变量

var a=1;

4.输出形式

console.log()：浏览器控制台选择console 输出
alert()：弹框输出
推荐使用：console.log
原因：因为在输出js对象的时候，alert只显示[Object Object]而看不到详细信息

5.运算符

、-、*、/、%、&、|、!、= 均能使用

6.字符串拼接

用加号进行两个字符串的拼接

var str = "1";
var reason = "2";
alert(str+reason);
//输出12

注：js里面没有字符 只有字符串

var num  ="hello world";
var str = "<div>"+num+"</div>";
var $demo = $(str);
var $body = $("body");
$body.append($demo);

三、jQuery 选择器

1.元素选择器

$("p")
//选择页面中所有的p元素

2.id选择器

$("#demo1")
//选择页面中id为demo1的元素

3.class选择器

$(".demo1")
//选择页面中class为demo2的元素

其他选择器与css类似，不再一一列举

四、jQuery 事件

页面对不同访问者的响应叫做事件，如点击某个元素，鼠标的移动等等

常见 DOM 事件：
页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

五、jQuery 函数

关键字：function

函数的定义：

function tanchu(){
	alert("aaaa");
}

函数的执行：

tanchu();

另一种方式

var demo = function (a,b){
	alert(a+b);
}
demo(1,2);

六、jQuery 效果

1.隐藏和显示

$(selector).hide(speed,callback);
//将选择的元素进行隐藏
$(selector).show(speed,callback);
//将选择的元素进行显示
$(selector).toggle(speed,callback);
//将选择的元素显示/隐藏

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

2.淡入和淡出

$(selector).fadeIn(speed,callback);
//用于淡入已隐藏的元素
$(selector).fadeOut(speed,callback);
//用于淡出可见元素
$(selector).fadeToggle(speed,callback);
//用来淡入/淡出

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

$(selector).fadeTo(speed,opacity,callback);
//用于渐变为给定的不透明度

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

3.滑动

$(selector).slideDown(speed,callback);
//用于向下滑动元素
$(selector).slideUp(speed,callback);
//用于向上滑动元素
$(selector).slideToggle(speed,callback);
//用于向上/向下滑动元素

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

4.动画

$(selector).animate({params},speed,callback);
//用于创建自定义动画

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

5.停止

$(selector).stop(stopAll,goToEnd);
//用于在完成之前停止动画或效果

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

6.回调函数

Callback 函数在当前动画 100% 完成之后执行，即被立即停止的动画不会触发回调，被立即完成的动画会触发回调。

7.链

在一条语句中在相同的元素上运行多个 jQuery 方法

$(selector).function1().function2().function3();
//连续运行三个方法