jquery简介
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery安装
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:
实例:
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
- 网上找一些
- jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
-
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>
上面这是百度 CDN,有很多大家自己可以网上找
-
官网地址:https://jquery.com/
-
官网文件:https://api.jquery.com/
-
jQuery语法
-
基础语法: $(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选择器
- 元素选择器
-
jQuery 元素选择器基于元素名选取元素。在页面中选取所有 <p> 元素
-
实例
-
用户点击按钮后,所有 <p> 元素都隐藏:
-
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
-
#id选择器
-
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:
-
实例
-
当用户点击按钮后,有 id="test" 属性的元素将被隐藏:
-
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
- .class选择器
-
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:
-
实例
-
用户点击按钮后所有带有 class="test" 属性的元素都隐藏:
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
jQuery事件
- 事件的定义
-
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
- 在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
常见的DOM事件 鼠标事件 键盘事件 表单事件 窗口事件 click keypress submit load mouseenter keydown change resize dblclick keyup focus csroll mouseleave blur unload hover 键盘事件keypress超链接里有对keypress,keydown,keyup三者的区别
-
jQuery效果
- jquery hide()和show()
- 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
- 实例
-
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
jquery toggle()
-
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
-
显示被隐藏的元素,并隐藏已显示的元素:
-
实例
-
$("button").click(function(){ $("p").toggle(); });
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); });