jQuery学习

什么是jQuery?

　　jQuery是一个JavaScript函数库。

　　jQuery有以下功能：

　　1、html元素的选取

　　2、html元素操作

　　3、css操作

　　4、html事件函数

　　5、JavaScript特效和动画

　　jQuery的简单使用：

　　　　首先，我知道jQuery是一个JavaScript的函数库，那我们就先要在html中引入这个库。引入的时候我们可以直接把这个库下载的本地，也可以远程用链接引入。下面引入的方法是远程链接引入：

<head>
　　<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

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

　　　　　　美元符号定义jQuery；选择符(selector)查询或查找html; jQuery的action()执行元素的操作。

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

　　　下面是一种简洁写法，与上面的写法相同：

$(function(){
 
   // 开始写 jQuery 代码...
 
});

　　jQuery选择器是基于元素id、类、类型、属性、属性值等查找或选择HTML元素，基于已经存在的cs选择器，之外还有一些自定义的选择器。jQuery中所有的选择器都以美元符号开头：￥()

　　1、元素选择器

　　　　基于元素名选取元素。

　　　　例如：在页面选取所有<p>元素：

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

　　2、#id选择器

　　　　#id选择器通过HTML中id的属性选取指定的元素。注意：html中的id的属性是唯一的。

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

　　3、.class选择器

　　　　jQuery类选择器可以通过指定的class查找元素

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

　　1、click（）事件

　　　　click()方法时当按钮点击事件被触发思考hi调用一个函数

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

　　　　下面不会再列出代码实例，因为代码实例大都相同，只需要把事件方法名换一下就好了。　　

　　2、dblclick()事件

　　　　dblclick()方法是当双击元素时，触发事件

　　3、mouseenter()事件

　　　　当鼠标穿过元素时，会触发

　　4、mouseleave()事件

　　　　当鼠标指针离开元素时，会触发

　　5、mousedown()事件

　　　　当鼠标指针移动到元素上方，并按下鼠标按键时，会触发

　　6、mouseup()事件

　　　　当在元素上方松开鼠标按钮，会触发

　　7、hover()事件

　　　当鼠标移动到元素上方时，会触发

　　animate() 方法用于创建自定义的动画。

　　语法：

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

　　params参数顶一个形成动画的css属性，必须的；

　　speed参数规定效果时长。它可以取以下值：“slow”，"fast"或者毫秒，可选的；

　　callback参数是动画完成后所执行的函数名称，可选的。

$("button").click(function(){
  $("div").animate({left:'250px'});//向右边移动250个像素
});

　　注：animate() 方法可以使用相对值。需要在值的前面加上+=或-=，也可以使用预定义的值。