jquery 第四章
1.回顾
节点.append(内容)
节点.prepend(内容)
节点.remove()
节点.attr("属性","值")
节点.css("样式","值")
节点.html() .text .val()
2.本章目标
掌握jquery 的事件与动画
3.事件
在某个特定的条件下会被执行的一段代码,事件通常用来与用户进行交互
常用的事件:load,click,focus(获取焦点),blur(失去焦点),mousrmove()
4.加载事件
js:window.onload=function(){
//逻辑代码
}
//在jquery1.8+杯废弃
jquery:
$(window).load(function(){
//逻辑代码
})
$(document).ready(function(){
//逻辑代码
})
$().ready(function(){
//逻辑代码
})
$(function(){
//逻辑代码
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
window.onload=function(){
alert(1)
}
$(document).ready(function(){
alert(2) }) $().ready(function(){ alert(3)
}) $(function(){ alert(4)
})
</script>
</head>
<body> </body>
</html>
加载事件
5.绑定事件
绑定单个事件:
对象.bind("事件名",function(){
//逻辑代码
})
绑定多个事件
//第一种写法
对象.bind("事件1",function(){
//逻辑代码
})
.bind("事件2",function(){
//逻辑代码
})
//第二种写法
对象.bind({
"事件1":function(){},
"事件1":function(){}
...........
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
//当鼠标光标在input 框内时 获取焦点事件
$("input").bind("focus",function(){
$(this).css("border","1px red solid")
})
//当鼠标光标在div区域时,设置背景颜色
$("div").bind("mousemove",function(){
$(this).css("background-color","midnightblue")
})
.bind("mouseout",function(){
$(this).css("background-color","white")
})
//不使用bind 直接通过事件函数
// $("div").mousemove(function(){
// $(this).css("background-color","midnightblue")
// }).mouseout(function(){
// $(this).css("background-color","white")
// })
}) //卸载事件
// $("div").unbind("mousemove")
</script>
</head>
<body>
<input />
<div style="width:200px; height: 100px; border: 1px solid cadetblue;"> </div>
</body>
</html>
绑定事件
完成:可编辑的表格 (鼠标移动离开变色) 代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
width: 480px;
height: 200px;
border-collapse: collapse;
}
table tr th,td{
border-collapse: collapse;
border: 1px solid darkgoldenrod;
text-align: center;
}
table td{
width:160px;
height: 50px;
} </style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
//当焦点在某个td单元格中时有背景颜色
$(function(){
$("table tr td").bind("mousemove",function(){
$(this).css("background-color","darkseagreen")
})
.bind("mouseout",function(){
$(this).css("background-color","white")
})
//单元格的单击事件
.bind("click",function(){
//如果当时td中的内容是input时,不执行后面代码
if($(this).children().is("input")){
return
}
//获取单元格的原始数据
var txt=$(this).text()
//创建输入框对象
var input=$("<input />")
//给输入框添加原始数据
input.val(txt)
//设置输入框,高和单元格一样
input.width($(this).width())
input.height($(this).height())
//清除单元格数据
$(this).text("")
input.appendTo($(this))
//为输入框绑定失去焦点事件
input.bind("blur",function(){
var inputValue=input.val()
input.parent().text(inputValue)
input.remove()
})
}) }) </script>
</head>
<body>
<table border="" >
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
<tr><td>张三</td><td>男</td><td>20</td></tr>
<tr><td>李四</td><td>男</td><td>21</td></tr>
<tr><td>王五</td><td>男</td><td>22</td></tr>
</table>
</body>
</html>
可编辑的表格
6.事件的冒泡
页面元素有嵌套时,若同时绑定了同一事件,触发事件时,会由里到外依次执行
解决方案:
方案一:只需要在事件代码中添加:return false;
方案二:需要在事件函数中添加参数(event),代码末尾中添加:event.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("div").click(function(){
alert("div")
})
$("span").click(function(event){
alert("span")
event.stopPropagation()
})
$("p").click(function(){
alert("p")
return false
}) }) </script>
</head>
<body>
<div id="">
div内容
<span id="">
span内容
<p>p内容</p>
</span>
</div>
</body>
</html>
事件的冒泡 以及停止事件冒泡
7.模拟触发事件
不需要用户主动触发,就可以执行的事件
比如:按钮通常都需要用户点击时才会执行一段代码,使用模拟触发事件,用户不需要点击按钮,也能执行单击事件代码
语句:
对象.trigger("事件/自定义事件")
8.合成事件
把多个事件合到一起执行
鼠标的移入移出
对象.hover(function(){},function(){})
模拟鼠标的悬停事件,鼠标悬停时触发第一个函数执行,鼠标离开触发第二个函数执行
鼠标的单击合成
对象.toggle(function(){},function(){},...............)
模拟鼠标的单击合成事件,鼠标单击一次执行第一个函数,鼠标点击两次执行第二个函数............
在jquery1.8之后被弃用了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("span").hover(function(){
$(this).next("ul").show(3000) },function(){
$(this).next("ul").hide(3000)
})
}) </script>
</head>
<body>
<div id="div1">
<span>操作1</span>
<ul>
<li>添加</li>
<li>修改</li>
<li>删除</li>
</ul>
</div>
<div id="div2">
<span>操作2</span>
<ul>
<li>添加</li>
<li>修改</li>
<li>删除</li>
</ul> </div>
</body>
</html>
合成事件
9.动画
hide([毫秒数]),show([毫秒数]) 显示隐藏动画
slideUp([毫秒数]),slideDown([毫秒数])向上,向下滑动
fadeIn([毫秒数]),fideOut([毫秒数]) 淡入淡出动画
自定义动画
对象.animate({"属性1":"值1","属性2","值2".......},毫秒数,[回调函数])
注意:如果想要使用left,right,top,bottom属性,需要把元素设置为position,absolute或者relative
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #B8860B;
position: relative;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("div").fadeIn(1000)
.animate({left:"500px",top:"200px"},3000)
.animate({left:"1000px",top:"0px"},3000)
.fadeOut(1000)
}) </script>
</head>
<body>
<div> </div>
</body>
</html>
完成div的v字型移动
10.停止动画
对象.stop()
判断动画是否处于活动中
if(对象.is(":animated")){
}
案例 实现 正方形放大缩小效果(随时都能停止)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #B8860B;
position: relative; }
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("button:first").click(function(){
if(!$("div").is(":animated")){
$("div").animate({width:"200px",height:"200px"},5000)
}
})
$("button:last").click(function(){
if($("div").is(":animated")){
$("div").stop()
}
}) })
</script>
</head>
<body>
<button>开始</button>
<button>停止</button>
<div> </div>
</body>
</html>
正方形放大缩小效果
作业1
使用jquery实现光棒效果
hover()事件
addClass()和removeClass()方法
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>光棒效果</title>
<style type="text/css">
table{
width: 640px;
border-collapse: collapse;
}
table th{
border: solid 1px black;
background-color: gray;
}
table td{
border: solid 1px black;
}
.highlight{
background-color: Highlight;
}
.selected{
background-color: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
//实现光影效果
$("#tbStudent tr:gt(0)").hover(function(){
$(this).addClass("selected"); },function(){
$(this).removeClass("selected") })
//实现全选反选代码如下
$("#chkAll").click(function(){
var checkedVal = $(this).attr("checked",true);
$(".chk").each(function(){
var subchecked = $(this).attr("checked",false)
if(subchecked != checkedVal)
$(this).click(); }) })
})
</script>
</head>
<body>
<table id="tbStudent">
<tr>
<th><input type="checkbox" name="chkAll" id="chkAll" value="" />全选</th>
<th>学号</th><th>姓名</th><th>年龄</th><th>性别</th>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="chk" value="" /></td>
<td>s001</td><td>张三</td><td>22</td><td>男</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="Checkbox1" value="" /></td>
<td>s002</td><td>李四</td><td>22</td><td>女</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="Checkbox2" value="" /></td>
<td>s003</td><td>王五</td><td>22</td><td>女</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="Checkbox3" value="" /></td>
<td>s004</td><td>马六</td><td>22</td><td>男</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="Checkbox4" value="" /></td>
<td>s005</td><td>李七</td><td>22</td><td>女</td>
</tr>
</table>
</body>
</html>
光棒效果
总结 全选反选 出了一点问题 改进了!!!!加了true 和false
作业2
使用jquery实现流式导航菜单
主要知识点
.slideDown()方法 和slideUp()方法
代码如下()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#menuBar li").click(function(){
var url=$(this).find("a").attr("href");
document.location.href=url;
})
$("#menuBar li").hover(function(){
$(this).find(".menuInfo").slideDown();
},function(){
$(this).find(".menuInfo").slideUp();
})
})
</script> <style>
#menuBar{
width: 730px;
height: 45px;
background: #000;
color: #fff;
font-family: arial;
font-size: 14px;
margin-top: 20px;
}
#menuBarHolder{
list-style-type: none;
display: block;
}
.firstchild{
border-left: 1px solid #ccc;
}
#container{
margin-top: 10px;
}
#menuBar li{
float: left;
padding: 15px;
height: 16px;
width: 75px;
border-right: 1px solid #ccc;
}
#menuBar li a{
color: #fff;
text-decoration: none;
letter-spacing: -1px;
font-weight: bold;
}
.menuHover{
background-color: #999;
}
.menuInfo{
cursor: hand;
background-color: #000;
color: #fff;
width: 74px;
font-size: 11px;
height: 100px;
padding: 3px;
display: none;
position: absolute;
margin-left: -15px;
margin-top: -10px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright:5px;
-khtml-border-radius-bottomleft:5px; }
h1{
font: 50px normal georgia,"times new roman",times,serif;
color: #111;
margin: 0;
text-align: 5px 0;
}
h1 small{
font: 0.2em normal verdana,arial,helvetica,sans-serif;
text-transform: uppercase;
letter-spacing: 1.4em;
display: block;
color: #ccc;
}
</style>
</head> <body>
<center>
<div id="container">
<h1>流式导航菜单<br></h1>
<div id="menuBarHolder">
<ul id="menuBar">
<li class="firstchild">
<a href="JavaScript:#">首页</a>
<div class="menuInfo">这是首页的链接</div>
</li>
<li>
<a href="JavaScript:#">公司简介</a>
<div class="menuInfo">公司成立于2005年...</div>
</li>
<li>
<a href="JavaScript:#">公司产品</a>
<div class="menuInfo">为有志进入IT行业的人提供优质服务</div>
</li>
<li>
<a href="JavaScript:#">个性化服务</a>
<div class="menuInfo">提供个性化的，对学习与帮助</div>
</li>
<li>
<a href="JavaScript:#">关于</a>
<div class="menuInfo">版权所有</div>
</li>
<li>
<a href="JavaScript:#">联系我们</a>
<div class="menuInfo">来吧，加入我们吧</div>
</li>
</ul>
</div>
</div>
</center>
</body> </html>
流式导航菜单
全选反选 简洁代码
作业3
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>广告图片的幻灯片播放效果</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var slideShow = $(".slideShow"), //获取div
ul = slideShow.find("ul"),
nav = slideShow.find(".nav span"), //获取按钮
oneWidth = ul.find("li").eq(0).width(),
timer = null,
iNow = 0;
slideShow.hover(function() {
clearInterval(timer); }, autoPlay); nav.on("click", function() { //添加点击按钮 var me = $(this),
index = me.index();
iNow = index;
ul.animate({
"left": -oneWidth * iNow, });
nav.removeClass("active");
me.addClass("active"); }); autoPlay(); function autoPlay() {
timer = setInterval(function() {
iNow++; if(iNow > nav.length - 1) {
iNow = 0; }
nav.eq(iNow).trigger("click"); }, 2000); } });
</script>
<style>
* {
margin: 0;
padding: 0
} ul,
ol {
list-style: none;
} .slideShow {
position: relative;
margin: 100px auto;
height: 400px;
width: 500px;
overflow: hidden;
} .slideShow ul {
position: relative;
width: 2000px;
} .slideShow ul li {
float: left;
width: 340px
} .slideShow .nav {
text-align: center;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
line-height: 18px;
} .slideShow .nav span {
-webkit-user-select: none;
user-select: none;
float: left;
cursor: pointer;
border-radius: 9px;
display: inline-block;
width: 18px;
height: 18px;
background: rgba(0, 0, 0, 0.7);
margin-left: 2px;
color: #fff;
opacity: 0.5;
} .slideShow .nav span.active {
opacity: 1;
}
</style>
</head> <body>
<div class="slideShow">
<ul>
<li>
<a href="#"><img src="./img/01.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/02.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/03.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/04.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/05.jpg" alt=""></a>
</li>
</ul>
<div class="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
</body> </html>
实现广告图片的幻灯片播放效果
(百度的,)
jquery 第四章的更多相关文章
- jQuery第四章
jQuery中的事件和动画 一.jQuery中的事件 1.加载DOM (1)执行时机 $(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别 ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法
.next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...
- 第四章 Ajax与jQuery
第四章 Ajax与jQuery 一.Ajax简介 在传统的Web应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应.如果前一个请求没有响应,则后一个请求就不能发送,在 ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- KnockoutJS 3.X API 第四章(13) template绑定
目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素. 模板是一种简单方便的方式来构建复杂的UI结构 . 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach,if, ...
- 第四章SignalR自托管主机
第四章SignalR自托管主机 SignalR服务器通常在IIS的Asp.Net应用程序上承载,但它也可以使用自托管库来作为自托管的主机来运行(就像控制台应用程序或Windows服务那样)与Signa ...
随机推荐
- 为什么开源外围包安装指导都是按照到/usr/local/目录下，/usr/local与/usr的区别
很多应用都安装在/usr/local下面,那么,这些应用为什么选择这个目录呢?Automake工具定义了下面的一组变量: Directory variable Default value prefix ...
- ubuntu only enable left click
xmodmap -e "pointer = 1 0 0 0 0 0 0 0 0 0"
- 前端基础之BOM和DOM(响应式布局、计时器、搜索框、select联动)
一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...
- Spring Boot程序获取tomcat启动端口
package com.geostar.geostack.git_branch_manager.config; import org.springframework.beans.factory.ann ...
- jvm学习笔记二（减少GC开销的建议）
一:触发主GC(Garbage Collector)的条件 JVM进行次GC的频率很高,但因为这种GC占用时间极短,所以对系统产生的影响不大.更值得关注的是主GC的触发条件,因为它对系统影响很明显.总 ...
- 从浅入深详解独立ip网站域名恶意解析的解决方案
立IP空间的好处想必大家都能耳熟闻详,稳定性强,利于seo等让大家选择了鼎峰网络香港独立IP空间.那么, 网站独享服务器IP地址,独立IP空间利于百度收录和权重的积累.不受牵连.稳定性强等诸多优势为一 ...
- python 发送post和get请求
摘自:http://blog.163.com/xychenbaihu@yeah/blog/static/132229655201231085444250/ 测试用CGI,名字为test.py,放在ap ...
- Ansible安装部署以及常用模块详解
一. Ansible 介绍Ansible是一个配置管理系统configuration management system, python 语言是运维人员必须会的语言, ansible 是一个基于py ...
- 驱动调试(三)oops确定函数PC
目录 驱动调试(三)oops确定函数PC 什么是oops 流程简述 代码仓库 模块例子分析 找到PC值 判断是否属于模块 查看符号表 找到模块 反汇编模块 内核例子分析 找到PC值 判断是否属于模块 ...
- centos7项目部署
1. 安装nginx 添加CentOS 7 Nginx yum资源库 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/ng ...