标签:一个 开头 类型 anim llb ready jquery head 思考
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() 方法可以使用相对值。需要在值的前面加上+=或-=,也可以使用预定义的值。
标签:一个 开头 类型 anim llb ready jquery head 思考
原文地址:https://www.cnblogs.com/leilei0327/p/8866317.html