jQuery基础学习一简介、选择器、事件

来源：互联网发布：淘宝正品代购编辑：程序博客网时间：2024/05/24 01:28

一、概念：

jQuery是一个JavaScript库，可以极大的简化前端的JavaScript编程，并且很容易学习。

jQuery可以通过很一行很简单的代码，标记到网页中使用。

二、jQuery的库包：

1、HTML元素选取

2、HTML元素操作

3、CSS操作

4、HTML事件函数

5、JavaScript特效和动画

6、HTML DOM 的遍历和修改

7、AJAX

8、Utilities

9、除以上外，jQuery还有大量的插件

三、安装（使用）

jQuery是一个库包，也就是一个JavaScript的文本文件。将其引入即可使用。

1、下载后引入

使用本机的目录地址引用：

<head><scripttype="text/javascript"  src="/jquery-1.10.2.min.js"></script></head>

2、通过网络CDN地址引用：这种方法会好一点，因为不会占用服务器资源，并且能保存缓存。

百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery，按这些地址引用即可。

Baidu CDN:

http://libs.baidu.com/jquery/1.10.2/jquery.min.js

又拍云 CDN:

http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js

新浪 CDN:

http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js

Google CDN:

Microsoft CDN:

谷歌和微软的会被墙，最好是用国内的前三个。

四、jQuery语法

通过jQuery，可以自由选取、查询HTML中的元素（标签），并对“它们”执行操作。

1、基础语法：

$(selector).action()-------$符号为定义jQuery，selector为选择符，action为要做的动作.。

实例：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有p段落

$("p .test").hide() - 隐藏所有 class="test" 的p段落

$("#test").hide() - 隐藏所有 id="test" 的元素

2、文档就绪事件

jQuery的所有函数都要处在一个就绪函数里：

$(document).ready(function(){

// jQuery methods go here...

});

意思是，优先将jQuery文件加载完成，在进行jQuery的其他方法。

还可以使用简洁的写法：

$(function(){

// jQuery methods go here...

});

五、jQuery选择器。

使用jQuery的选择器，可以很方便的选择到HTML的单个元素或元素组（tag、class、id、name...），它基于已存在的CSS选择器，另外还有一些自定义的选择器。

1、标签选择器： $("tag")

2、id选择器： $("#id")

3、class选择器：$(".class")

六、jQuery事件

jQuery的重点在事件处理。

1、常见的DOM事件：

鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave blurunload

2、jQuery事件的方法语法

在jQuery中，大多数DOM事件都有一个等效的方法

1）单击事件：$("#id").click(function(){});

2）双击事件：$("#id").dblclick(function(){});

3）鼠标移入事件：$("#id").mouseenter(function(){});

4）鼠标移出事件：$("#id").mouseleave(function(){});

5）鼠标按键按下事件：$("#id").mousedown(function(){});

6）鼠标按键弹起事件：$("#id").mouseup(function(){});

7）鼠标悬停事件：$("#id").hover(function(){}，function(){}); 第一个为鼠标移入事件，第二个为鼠标移出事件 ---常用于移入显示，移出时隐藏某个元素

8）元素获得焦点事件：$("#id").focus(function(){});

9）元素失去焦点事件：$("#id").blur(function(){}); 常用于表格或者表单的选择变色（显眼）

3、显示和隐藏元素

1、语法：

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

两个可选参数：

speed：此参数可以规定显示和隐藏的速度，取值可以是：”slow“、”fast“、”毫秒“

callback：动作完成后要执行的函数

例：

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

2、切换显示和隐藏 toggle

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

点击显示、再点击为隐藏.

$(selector).toggle(speed,callback);

0 0