javaScript 笔记(5) --- jQuery(上)
这节整理整理 iquery.js 相关的内容...
目录
--- jQuery 语法
--- 文档就绪事件
--- jQuery 选择器
--- jQuery 事件
--- jQuery 效果
jQuery 语法:jQuery 语法是通过选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。
- jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
- 基础语法:$(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 代码...
});
// 这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
提示:简洁写法(与以上写法效果相同):
$(function(){
// 开始写 jQuery 代码...
});
以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。
jQuery 选择器:允许您对 HTML 元素组或单个元素进行操作。
- jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的CSS 选择器,除此之外,它还有一些自定义的选择器。
- jQuery 中所有选择器都以美元符号开头:$()。
<!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>实例1: 点击按钮隐藏所有 p 元素
<!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>实例2: 按钮隐藏所选#id & .class
$("*")
选取所有元素
$(this)
选取当前 HTML 元素
$("p.intro")
选取 class 为 intro 的 <p> 元素
$("p:first")
选取第一个 <p> 元素
$("ul li:first")
选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")
选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")
选取带有 href 属性的元素
$("a[target='_blank']")
选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")
选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")
选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")
选取偶数位置的 <tr> 元素
$("tr:odd")
选取奇数位置的 <tr> 元素
jQuery 事件:页面对不同访问者的响应叫做事件。
- 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
- 在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。常见 DOM 事件:
鼠标事件键盘事件表单事件文档/窗口事件 click
keypress
submit
load dblclick
keydown
change
resize mouseenter
keyup
focus
scroll mouseleave
blur
unload - 在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。实践方法语法:
$("p").click(function(){
// 动作触发后执行的代码!! eg:$(this).hide();
}); 常用的 jQuery 事件方法
- $(document).ready() 方法允许我们在文档完全加载完后执行函数。
- click() 方法:是当按钮点击事件被触发时会调用一个函数,该函数在用户点击 HTML 元素时执行:
- dblclick() 方法: 双击元素时,触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:
$("p").dbclick(function(){
$(this).hide();
}); - mouseenter() 方法:当鼠标指针穿过元素时,触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
}); - mouseleave() 方法: 当鼠标指针离开元素时,触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数;
- mousedown() 方法: 当鼠标指针移动到元素上方,并按下鼠标键是,触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数;
- mouseup() 方法:当在元素上松开鼠标按钮时,触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数;
- hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
); - focus() 方法:当元素获得焦点时,触发 focus 事件,或规定当发生 focus 事件时运行的函数。当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});<!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(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body> Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email"> </body>
</html>实例全部代码
- blur() 方法:当元素失去焦点时,触发 blur 事件,或规定当发生 blur 事件时运行的函数:
$("input").blur(function(){
$(this).css("background-color","#ffffff");
}); // 一般与 focus() 方法匹配使用
jQuery 效果:隐藏、显示、切换,滑动,淡入淡出,以及动画,...
- jQuery: hide() 和 show() 方法来隐藏和显示 HTML 元素,语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
/*可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 */<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<button>隐藏</button>
<p>这是个段落,内容比较少。</p>
<p>这是另外一个小段落</p>
</body>
</html>隐藏实例:自定义隐藏时间
jQuery:toggle()方法来切换 hide() 和 show() 方法,语法:
$(selector).toggle(speed,callback);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body> <button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>
toggle 实例全部代码
- jQuery Fading 方法:实现元素的淡入淡出效果。
- fadeIn(): 用于淡入已隐藏的元素:
- fadeOut():用于淡出可见元素;
- fadeToggle():可以在 fadeIn() 与 fadeOut() 方法之间进行切换;
前三者语法相同,类如下 fadeIn:$(selector).fadeIn(speed,callback);
/*可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。 */
用法也相同,如下使用 fadeToggle 进行示例:
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
<!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(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle();
});
});
</script>
</head>
<body> <p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body>
</html>
示例 全部代码
- fadeTo():允许渐变为给定的不透明度(值介于 0 与 1 之间),语法:
$(selector).fadeTo(speed,opacity,callback);
/*必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于0 与 1之间)
可选的 callback 参数是该函数完成后所执行的函数名称。
*/实例:
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head> <body>
<p>演示 fadeTo() 使用不同参数</p>
<button>点我让颜色变淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body>
</html>fadeTo 实例代码 全
- jQuery 滑动:您可以在元素上创建滑动效果
$(selector).slideToggle(speed,callback);
- slideDown():用于向下滑动元素
- slideUp():用于向上滑动元素
- slideToggle():可以在 slideDown() 与 slideUp() 方法之间进行切换:
$("#flip").click(function(){
$("#panel").slideToggle();
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script> <style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body> <div id="flip">点我,显示或隐藏面板。</div>
<div id="panel">Hello world!</div> </body>
</html>实例代码 全部
- jQuery 动画:animate() 方法允许您创建自定义的动画,语法:
$(selector).animate({params},speed,callback);
/* 必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast"、"normal" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。 */默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!强调:(1)生成动画的过程中可同时使用多个属性,如下:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head> <body>
<button>开始动画</button>
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div> </body>
</html>实例代码 全
(2)animate()也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head> <body>
<button>开始动画</button>
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div> </body>
</html>实例代码 全
(3)可以把属性的动画值设置为 "show"、"hide" 或 "toggle",实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head> <body>
<button>开始动画</button>
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div> </body>
</html>实例代码 全
(4)animate() 队列功能:这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head> <body>
<button>开始动画</button>
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body>
</html>实例代码 全
(5)可使用 animate() 来操作所有 CSS 属性,但 需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
- jQuery 停止动画:stop() 方法,用于在动画或效果完成前对它们进行停止,它适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。语法:
$(selector).stop(stopAll,goToEnd);
/*可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画 */实例:
$("#stop").click(function(){
$("#panel").stop();
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown();
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script> <style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body> <button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div> </body>
</html>实例代码 全
- jQuery Callback:Callback 函数在当前动画 100% 完成之后执行。许多 jQuery 函数涉及动画,这些函数也许会将 speed 或 duration 作为可选参数,speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。
//以下实例在隐藏效果完全实现后回调函数
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
}); // 以下实例没有回调函数,警告框会在隐藏效果完成前弹出
$("button").click(function(){
$("p").hide();
alert("段落现在被隐藏了");
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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();
alert("现在段落被隐藏了");
});
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是一个段落,内容很少</p>
</body>
</html>实例代码 全
- jQuery 链:Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上),可以把动作/方法链接在一起。实例:下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动:
$("#p1").css("color","red")
.slideUp()
.slideDown();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red")
.slideUp()
.slideDown();
});
});
</script>
</head>
<body> <p id="p1">教程!!</p>
<button>点我</button> </body>
</html>实例代码 全
javaScript 笔记(5) --- jQuery(上)的更多相关文章
- javaScript 笔记(6) --- jQuery(下)
目录 --- jQuery HTML --- jQuery 遍历 --- jQuery Ajax jQuery HTML: jQuery 捕获:三个简单实用的用于 DOM 操作的 jQuery 方法: ...
- Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除
前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...
- Javascript Fromdata 与jQuery 实现Ajax文件上传
<!DOCTYPE html> <html> <head> <title>ajax</title> <script type=&quo ...
- JavaScript大杂烩14 - 使用JQuery(上)
JQuery意义 - Why? 为什么要使用JQuery,从我个人来说,就是这么几点:简化代码 + 统一行为 + 功能强大 + 搭配方便. 简化代码是从写代码的角度来说的,实现同样的功能,如果用Jav ...
- JQuery上传文件插件Uploadify使用笔记
新工作的第一份任务就是给实现 限制Uploadify 上传文件格式为图片 测试出来报错,选择了非图片文件,提示错误后,再选择其他文件,上传时还是包含了之前清空的非图片文件 最后实现效果的代码是 //上 ...
- [Effective JavaScript 笔记]第3章:使用函数--个人总结
前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- JQuery上传插件Uploadify使用详解
本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...
随机推荐
- GVIM——简直美如画,有没有!
"========================================== " Author: wklken " Version: 9.1 " Em ...
- mysql切换数据库提示警告:Reading table information for completion of table and column names
登录数据库后,选择数据库时发现以下提示, mysql> use testReading table information for completion of table and column ...
- 自动化运维工具——ansible系列命令
ansible-galaxy 连接 https://galaxy.ansible.com 下载相应的roles,此网站是Ansible爱好者将日常使用较好的playbooks打包上传,其他人可以免费下 ...
- MQTT的学习之Mosquitto发布-订阅(2)
在<MQTT的学习之Mosquitto安装&使用(1)>一文末尾,我已经模拟了发布-订阅模式,只是那时在服务器直接模拟的,并不是java代码模拟的.下面贴出Java代码 1.首先引 ...
- shell脚本中的交互式输入自动化
shell中有时我们需要交互,但是呢我们又不想每次从stdin输入,想让其自动化,这时我们就要使shell交互输入自动化了. 1 利用重定向 重定向的方法应该是最简单的 例: 以下的te ...
- 51NOD 1292 1277(KMP算法,字符串中的有限状态自动机)
在前两天的CCPC网络赛中...被一发KMP题卡了住了...遂决定,哪里跌倒就在哪里爬起来...把个KMP恶补一发,连带着把AC自动机什么的也整上. 首先,介绍设定:KMP算法计划解决的基本问题是,两 ...
- Java模拟音乐播放器 暂停与重新播放——线程如何控制另外一个线程的状态
package com.example.Thread; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEve ...
- xgboost原理总结和代码展示
关于xgboost的学习推荐两篇博客,每篇看2遍,我都能看懂,你肯定没问题 两篇方法互通,知识点互补!记录下来,方便以后查看 第一篇:作者:milter链接:https://www.jianshu.c ...
- loj2073 「JSOI2016」扭动的回文串
ref 主要是要理解"撑到"最长这个概念 (为啥我的代码这么长QAQ #include <iostream> #include <cstdio> using ...
- 项目管理者必知:适用于仪表盘项目的7个优秀JavaScript库
仪表盘是用于目标或业务流程的视觉指示工具,也用于切割杂乱无章的数据,从而分割出要点的重要工具.它可以帮助评估信息并及时做出正确的决定,一款实时可视化的仪表盘通常由图标.测绘图.图形符号以及数据表格等组 ...