day 39 jq 学习入门2
---恢复内容开始---
前情提要:
jq 是用来降低js 的工作的一个组件
一:利用jq 实现动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
<style>
.box,.box2{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left:;
right:;
margin: auto;
}
</style>
</head>
<body>
<!--<div class="box"></div>-->
<div class="box2"></div>
<script>
// 参数1, json对象，动画最终效果，使用css来表单，
// 参数2, 整数，毫秒单位[1s = 1000毫秒ms]
// 参数3，字符串，控制动画变化效果，默认匀速linear,可以设置为缓动效果swing
// 参数4，匿名函数,控制动画完成以后，后续操作
// $(".box").animate({"width":"100px","height":"50px"},2000);
$(".box2").animate({"right":"600px"},,"swing",function(){
$(this).animate({"top":"300px"},);
}); // 练习：设置一个50x50的div，控制在3秒内变成100*400px的div,然后div从上面往下移动100px;
</script>
</body>
</html>
二:动画效果的预设
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
<style>
.box,.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
.box2{
background-color: red;
}
</style>
</head>
<body>
<button id="hide">控制元素的隐藏</button>
<button id="show">控制元素的显示</button>
<button id="toggle">判断当前状态，进行隐藏显示</button>
<button id="up">向上滑动[等同于隐藏这个box]</button>
<button id="down">向下滑动[等同于显示这个box]</button>
<button id="in">淡入[等同于显示这个box]</button>
<button id="out">淡出[等同于隐藏这个box]</button>
<button id="fade">控制元素的透明度动画</button> <div class="box"></div>
<div class="box2"></div>
<script>
$("#hide").on("click",function(){
// 参数1，控制动画的完成时间
$(".box").hide();
});
$("#show").on("click", function(){
$(".box").show();
});
$("#toggle").on("click", function(){
// 如果原来隐藏，则会自动显示
// 如果原来显示，则会自动隐藏
$(".box").stop().toggle();
}); $("#up").on("click", function(){
$(".box").stop().slideUp();
}); $("#down").on("click", function(){
$(".box").slideDown();
}); $("#in").on("click", function(){
$(".box").fadeIn();
}); $("#out").on("click", function(){
$(".box").fadeOut();
}); $("#fade").on("click", function(){
// 控制元素的透明度
// 参数1: 整数，动画完成的时间，单位毫秒
// 参数2: 浮点数，动画完成时，元素的透明度[0为透明，1表示不透明]
$(".box").fadeTo(,0.5);
}); </script>
</body>
</html>
三:动画效果版本的层级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级菜单</title>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.color.js"></script><!-- 使用这个插件必须先引入jQuery -->
<style type="text/css">
body{
font-family:'Microsoft Yahei';
}
body,ul{
margin:0px;
padding:0px;
} ul{list-style:none;} .menu{
width:200px;
margin:20px auto ;
} .menu .level1,.menu li ul a{
display:block;
width:200px;
height:30px;
line-height:30px;
text-decoration:none;
background-color:#3366cc;
color:#fff;
font-size:16px;
text-indent:10px;
} .menu .level1{
border-bottom:1px solid #afc6f6; } .menu li ul a{
font-size:14px;
text-indent:20px;
background-color:#7aa1ef; } .menu li ul li{
border-bottom:1px solid #afc6f6;
} .menu li ul{
display:none;
} .menu li ul.current{
display:block;
} /*.menu li ul li a:hover{*/
/*background-color:#f6b544;*/
/*}*/ </style>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">手机</a>
<ul class="current">
<li><a href="#">iPhone X 256G</a></li>
<li><a href="#">红米4A 全网通</a></li>
<li><a href="#">HUAWEI Mate10</a></li>
<li><a href="#">vivo X20A 4GB</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">笔记本</a>
<ul>
<li><a href="#">MacBook Pro</a></li>
<li><a href="#">ThinkPad</a></li>
<li><a href="#">外星人(Alienware)</a></li>
<li><a href="#">惠普(HP)薄锐ENVY</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">电视</a>
<ul>
<li><a href="#">海信(hisense)</a></li>
<li><a href="#">长虹(CHANGHONG)</a></li>
<li><a href="#">TCL彩电L65E5800A</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">鞋子</a>
<ul>
<li><a href="#">新百伦</a></li>
<li><a href="#">adidas</a></li>
<li><a href="#">特步</a></li>
<li><a href="#">安踏</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">玩具</a>
<ul>
<li><a href="#">乐高</a></li>
<li><a href="#">费雪</a></li>
<li><a href="#">铭塔</a></li>
<li><a href="#">贝恩斯</a></li>
</ul>
</li>
</ul>
<script>
// 思路
// 用户点击当前一级菜单，则需要显示其二级菜单，同时隐藏其他的一级菜单的子菜单 // 实现代码
$(".menu .level1").on("click", function(){
$(".menu .level1").next().slideUp(); // 向上滑动隐藏所有其他的子菜单
$(this).next().slideDown() // 显示当前一级菜单的子菜单
}); $(".menu li ul li a").hover(function(){
console.log();
// 默认的jQuery的animate是不支持颜色渐变
$(this).animate({"background-color":"#f6b544","color":"red"},);
},function(){
$(this).animate({"background-color":"#7aa1ef","color":"white"},)
});
</script>
</body>
</html>
四:事件冒泡的定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onclick="alert('body被点击了')">
<div class="box" onclick="alert('box被点击了')">
<p classs="p1" onclick="alert('p1被点击了')">
<span>一个文本</span>
</p>
</div>
<script> </script>
</body>
</html>
五:阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onclick="alert('body被点击了')">
<div class="box" onclick="alert('box被点击了')">
<p classs="p1" onclick="alert('p1被点击了')">
<span id="span">一个文本</span>
</p>
</div>
<script>
var span = document.getElementById("span");
span.onclick = function(event){ // event 翻译成中文 就是 "事件"
console.log( event.target ); // 事件发生以后，浏览器查找到触发地点
event.stopPropagation(); // 阻止事件冒泡
// event.cancelBubble = true; // 如果是IE浏览器，则使用这句阻止事件冒泡
}
</script>
</body>
</html>
六:事件托管(事件委托)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<ul>
<li class="list"><a href="">商品1</a></li>
<li class="list"><a href="">商品2</a></li>
<li class="list"><a href="">商品3</a></li>
<li class="list"><a href="">商品4</a></li>
<li class="list"><a href="">商品5</a></li>
<li class="list"><a href="">商品6</a></li>
<li class="list"><a href="">商品7</a></li>
<li class="list"><a href="">商品8</a></li>
</ul>
<script>
// 事件委托，就是让父元素监管子元素的同名事件，从而避免了大量子元素绑定事件的情况
// 就是把事件绑定到父元素中
// $("ul li").on("mouseover",function(){
// console.log( $(this).html() );
// }); // 上面分别给大量的子元素绑定事件，效率低
// 在on方法的事件名称后，绑定当前父元素要托管事件的子元素[选择器]
$("ul").on("mouseover",".list",function(){
console.log( $(this).html() );
});
</script>
</body>
</html>
七:阻止事件的默认行为[针对form 表单]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<a href="" id="link">链接</a> <form action="">
账号：<input type="text" name="uname"><span id="uname_tis"></span>
密码：<input type="password" name="pwd">
<input type="submit" name="submit" value="提交">
</form> <script>
$("#link").on("click", function(){
console.log( $(this).html() );
// 阻止a标签的点击跳转行为
return false;
}); // 阻止表单的提交行为
$("input[name=submit]").on("click", function(){
// 希望校验数据
if( $("input[name=uname]").val().length> ){
$("#uname_tis").html("账号不合法");
// event.preventDefault(); // vue.js后面会再次出现这个prevent
return false;
}
});
</script>
</body>
</html>
八:案例遮罩层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login{
width: 400px;
height: 280px;
background: #fff;
border: 1px solid #aaa;
position: absolute;
top:;
left:;
right:;
bottom:;
margin:auto;
display: none;
}
.opacity{
display: none;
background: #;
position: absolute;
top:;
left:;
right:;
bottom:;
margin:auto;
opacity: 0.3;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
// 点击登陆显示登陆窗口
$(".btn").on("click",function(e){ // 事件的匿名函数被调用的时候，系统会在匿名函数这里传递一个参数，就是事件对象
$(".opacity").show();
$(".login").show();
return false; // 方法1，使用return false可以解决事件的冒泡
// e.stopPropagation(); // 方法2:使用事件对象的stopPropagation()来组织冒泡
}); $("body").on("click",function(){
// alert("body标签被点了");
$(".opacity").hide();
$(".login").hide();
}); $(".login").on("click",function(){
return false; // 阻止事件冒泡
})
});
</script>
</head>
<body>
<span class="btn">登陆</span>
<div class="opacity"></div><!-- 遮罩层 -->
<div class="login">
<div class="content">登陆窗口</div>
</div>
</body>
</html>
九:dom 操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<p class="p1">一个段落</p>
<script>
// 创建一个标签元素[创建的元素并不会自动显示到html页面中]
let div = $("<div>一个div</div>")
console.log( div.html() ); // 把元素添加页面中指定元素的内部
//目标元素.appendTo($(父元素)) // 表示给父元素的内部追加目标元素
// div.appendTo( $("body") ); //目标元素.prependTo($(父元素)) // 表示给父元素的内部前面追加目标元素
// div.prependTo( $("body") ); // 把元素添加到页面中指定元素的外部
// 目标元素.insertBefore(位置元素) // 表示给指定位置元素前面加上一个目标元素
// div.insertBefore($(".p1")) // 目标元素.insertAfter(位置元素) // 表示给指定位置元素后面加上一个目标元素
// div.insertAfter( $(".p1") ); // 清空指定的元素内容[还剩下标签本身]
// $(".p1").empty(); // 删除指定元素[不仅被删除，标签本身也会被删除]
$(".p1").remove();
</script>
</body>
</html>
十:todolist 效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto ;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:;
padding:;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
} .list li span{
float:left;
} .list li a{
float:right;
text-decoration:none;
margin: 10px;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
// 一,添加计划
// 步骤:
// 1. 给"增加"按钮绑定点击事件
$("#btn1").on("click", function(){
// 2. 获取文本框的内容
// console.log( $("#txt1").val() );
var content = $("#txt1").val();
// 数据的验证
if(content == ""){
alert("请输入计划的内容");
return false;
}
// 3. 添加到计划列表
// 3.1 创建新元素
var new_li = $('<li><span>'+content+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
// 3.2 把创建元素添加到计划列表的前面
$("#list").prepend(new_li);
}); // 二,移动计划的上下位置
// 1. 向下移动
// 在点击".down"按钮以后，把当前行的li元素与下一行的li元素位置互换
$("#list").on("click",".down",function(){
// 1.1 获取当前行的li元素
// $(this) 当前被点击的元素[.down]
// parent() 获取父级元素
var current_li = $(this).parent();
// 1.2 获取下一行的li元素
var next_li = current_li.next();
// 1.3 把下一行li的元素放到当前行的前面
current_li.before(next_li);
}); // 2. 向上移动
$("#list").on("click",".up",function(){
// 2.1 获取当前行的li元素
var current_li = $(this).parent();
// 2.2 获取上一行的li元素
var prev_li = current_li.prev();
// 2.3 把上一行的li元素当前当前行的后面
current_li.after(prev_li);
}); // 三,删除计划
$("#list").on("click",".del",function(){
// 删除元素使用remove()
$(this).parent().remove();
});
});
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list">
<!-- javascript:; # 阻止a标签跳转 -->
<li>
<span>学习html</span>
<a href="javascript:;" class="up"> ↑ </a>
<a href="javascript:;" class="down"> ↓ </a>
<a href="javascript:;" class="del">删除</a>
</li>
<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</body>
</html>
十一:表单验证(正则的使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<form action="">
账号：<input type="text" name="uname"><br><br>
密码：<input type="password" name="pwd"><br><br>
手机号码：<input type="text" name="mobile"><br><br>
个人网页：<input type="text" name="url"><br><br>
<input type="submit" value="提交">
</form>
<script>
// js中正则就是一个对象，默认具有正则操作的方法
$("input[type=submit]").on("click", function(){
// 验证帐号数据
// 1. 账号只能由字母、数字组成,6-10
let reg = /[a-zA-Z0-]{,}/;
// console.log( reg );
// 使用test可以进行正则匹配，返回值是布尔值，true表示验证通过
result = reg.test( $("input[name=uname]").val() );
if( !result ){ // 验证没有通过
return false;//阻止表单提交
} // 验证url地址
let reg2 = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{,})([\/\w \.-]*)*\/?$/;
result = reg2.test( $("input[name=url]").val() );
console.log( result ); return false;
});
</script>
</body>
</html>
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<title>Title</title> <style> .outer{
width: 590px;
height: 470px;
margin: 80px auto;
position: relative;
} .img li{
position: absolute;
list-style: none;
top: ;
left: ;
display: none;
} .num{
position: absolute;
bottom: 18px;
left: 170px;
list-style: none; } .num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: %;
text-align: center;
line-height: 18px;
margin-left: 14px;
} .btn{
position: absolute;
top:%;
width: 30px;
height: 60px;
background-color: lightgrey;
color: white; text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px; display: none; } .left{
left: ;
} .right{
right: ;
} .outer:hover .btn{
display: block;
} .num .active{
background-color: red; }
</style> </head>
<body> <div class="outer">
<ul class="img">
<li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
</ul> <ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul> <div class="left btn"> < </div>
<div class="right btn"> > </div> </div>
<script src="jquery-3.1.1.js"></script>
<script>
var i=;
// 通过jquery自动创建按钮标签 var img_num=$(".img li").length; for(var j=;j<img_num;j++){
$(".num").append("<li></li>")
} $(".num li").eq().addClass("active"); // 手动轮播 $(".num li").mouseover(function () {
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut() }); // 自动轮播
var c=setInterval(GO_R,); function GO_R() { if(i==img_num-){
i=-
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut() } function GO_L() {
if(i==){
i=img_num
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut(); // fadeIn,fadeOut单独另开启的线程 }
$(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GO_R,)
}); // button 加定播
$(".right").click(GO_R);
$(".left").click(GO_L) </script>
</body>
</html>
day 39 jq 学习入门2的更多相关文章
- ORMLite学习入门笔记
ORMLite学习入门笔记 使用原始的SQLiteHelper来操作维护数据库有点过于繁琐,重复工作量较大.所以会想到使用一个比较方便的ORM来维护我们本地的数据库,各位业界前辈都给我推荐了ORMLi ...
- OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（下）
1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade o ...
- 给深度学习入门者的Python快速教程
给深度学习入门者的Python快速教程 基础篇 numpy和Matplotlib篇 本篇部分代码的下载地址: https://github.com/frombeijingwithlove/dlcv_f ...
- 深度学习入门者的Python快速教程 - 基础篇
5.1 Python简介 本章将介绍Python的最基本语法,以及一些和深度学习还有计算机视觉最相关的基本使用. 5.1.1 Python简史 Python是一门解释型的高级编程语言,特点是简单明 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- C# BackgroundWorker组件学习入门介绍
C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...
- 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV
这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...
- 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇
始终无法有效把word排版好的粘贴过来,排版更佳版本请见知乎文章: https://zhuanlan.zhihu.com/p/24309547 实在搞不定博客园的排版,排版更佳的版本在: 给深度学习入 ...
- UML学习入门就这一篇文章
1.1 UML基础知识扫盲 UML这三个字母的全称是Unified Modeling Language,直接翻译就是统一建模语言,简单地说就是一种有特殊用途的语言. 你可能会问:这明明是一种图形,为什 ...
随机推荐
- 用sql 生成2016年全年的日期
select to_char(日期,'yyyy-mm-dd') from( select to_date('2016-01-01','yyyy-mm-dd') + level 日期 from dual ...
- presentation skills
下面是从一个网站摘录下来的关于presentation skill需要回答的14个问题:网站的地址为:http://www.mindtools.com/pages/article/newCS_96.h ...
- 2019.01.22 SCU4444 Travel（最短路+bfs）
传送门 题意简述:给出一张nnn个点的完全图,有mmm条边边权为aaa其余点边权为bbb,问从111到nnn的最短路. 思路:分类讨论一波即可. (1,n)(1,n)(1,n)的边权为aaa,那么只用 ...
- Spring MVC和Struts2的比较[转]
虽然说没有系统的学习过Spring MVC框架, 但是工作这么长时间, 基本上在WEB层使用的都是Spring MVC, 自己觉得Struts2也是一个不错的WEB层框架, 这两种框架至今自己还未有比 ...
- Codeforces Round #546 (Div. 2) D 贪心 + 思维
https://codeforces.com/contest/1136/problem/D 贪心 + 思维 题意 你面前有一个队列,加上你有n个人(n<=3e5),有m(m<=个交换法则, ...
- Linux 的虚拟文件系统(强烈推荐)
1 引言 Linux 中允许众多不同的文件系统共存,如 ext2, ext3, vfat 等.通过使用同一套文件 I/O 系统 调用即可对 Linux 中的任意文件进行操作而无需考虑其所在的具体文件系 ...
- python之深浅copy
深浅copy 1.赋值运算 a = [1, 2, 3] b = a a.append(666) print(b) #output:[1, 2, 3, 666] 对于赋值运算来说,a与b指向的是同一个内 ...
- C#系列之｛流和序列化｝
不论何种类型的文件都可以表示为一个字节数组.(Byte[]) 一.文件复制 (示例) 首先建立一个类似管道的东西将文件和内存中的程序连接,并将文件按字节发送.为了保存接收到的文件字节,需要创建一个字节 ...
- Django工程搭建
-----环境安装 1.创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3 2.安装django pip install django==1.11.11 ...
- 【git】git简单使用教程
git的简单使用教程: 1.安装git bash客户端 2.打开git bash,cd到需要存储代码的路径下, 执行:git clone -b deploy ssh://git@gitlab.xxxx ...