jQuery预习

最新推荐文章于 2022-04-21 20:12:05 发布

VIP文章三千鸦杀

最新推荐文章于 2022-04-21 20:12:05 发布

阅读量496

点赞数 1

文章标签： jQuery

本文链接：https://blog.csdn.net/molu122/article/details/78691326

版权

什么是 jQuery？
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。可以使用 HTML 的 <script> 标签引用它：
例：
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
将下载的文件放在网页的同一目录下，就可以使用jQuery。

jQuery库包含以下功能：
• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities
目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

网页中添加 jQuery
可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：
• 从 jquery.com 下载 jQuery 库
有两个版本的 jQuery 可供下载：
（1）Production version - 用于实际的网站中，已被精简和压缩。
（2）Development version - 用于测试和开发（未压缩，是可读的代码）

• 从 CDN 中载入 jQuery, 如从菜鸟教程中加载 jQuery
例：
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。
相应的代码可以在网上进行查阅
使用百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作
例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪事件
所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){ // 开始写 jQuery 代码... });

//上述代码的简洁写法：$(function(){ // 开始写 jQuery 代码... });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。

jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素: $("p")

例：用户点击按钮后，所有 <p> 元素都隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下： $("#test")
例：当用户点击按钮后，有 id="test" 属性的元素将被隐藏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下： $(".test")
例：用户点击按钮后所有带有 class="test" 属性的元素都隐藏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

独立文件中使用 jQuery 函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

例：

<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
jQuery 事件
1、what什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
• 在元素上移动鼠标。
• 选取单选按钮
• 点击元素
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

常见DOM事件：
鼠标事件键盘事件表单事件文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：

$("p").click();

$("p").click(function(){
// action goes here!!
});

常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

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

mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$("#p1").mouseenter(function(){
alert("You entered p1!");
});

mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){
$(this).css("background-color","#cccccc");
});

blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

jQuery 效果 – 隐藏和显示
jQuery 效果- 隐藏和显示
________________________________________
隐藏、显示、切换，滑动，淡入淡出，以及动画

jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
代码演示：
$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
})

语法：
$(selector).hide(speed,callback);

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
例：
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
例：
$("button").click(function(){
$("p").toggle();
});
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery 效果 – 淡入淡出
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
例：
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
例:
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
例：
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
$(selector).fadeTo(speed,opacity

最低0.47元/天解锁文章

三千鸦杀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery预习

什么是 jQuery？jQuery 库可以通过一行简单的标记被添加到网页中。jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。可以使用 HTML 的标签引用它：例：将下载的文件放在网页的同一目录下，就可以使用jQuery。jQuery库包含以下功能：• HTML 元素选取
复制链接

扫一扫