本文介绍jQuery的基本用法，包括如何在HTML文档中引入jQuery库、使用文档就绪函数进行元素操作及事件绑定。通过实例展示了如何隐藏页面上的元素及为图片元素添加鼠标悬停效果。
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
向页面添加 jQuery 库
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
可以通过src把 jQuery 添加到网页中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
注意，<script> 标签应该位于页面的 <head> 部分,并且标签中不准包含其他内容
文档就绪函数与hide() 函数，隐藏了 HTML 文档中所有的 <p> 元素。
实例：
<!DOCTYPE html>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>Title</
title
>
<!--
导入
Jquery
文件
-->
<
script
src=
"jquery-3.1.1.min.js"
></
script
>
</
head
>
<
body
>
<
p
>11111111111</
p
>
<
p
>12221</
p
>
</
body
>
<
script
>
// /*
文档就绪函数
*/
// $(document).ready(function () {
// /*
隐藏元素
*/
// $("p").hide();
// });
/*
文档就绪函数
*/
$
(
function
() {
$
(
"p"
).
hide
();
})
</
script
>
</
html
>
选择元素，添加事件:案例：
$
(
function
(){
//
选择元素，添加事件（选择img元素）
$
(
"img"
).mouseover(
function
(){
// $(this).css('border','3px solid orange');
$
(
this
).
addClass
(
'a'
);
// 删除事件
}).mouseout(
function
(){
// $(this).css('border','1px solid gray');
$
(
this
).
removeClass
(
'a'
);
});
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
