python自动化开发-[第十五天]-jquery

今日概要

　　1、javascript补充

　　2、jquery

1、javascript-DOM绑定事件

　　1、事件类型

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。onload         一张页面或一幅图像完成加载。onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开onselect       文本被选中。
onsubmit       确认按钮被点击。

　　2、事件绑定方式

　　　　第一种：

<div id="div" οnclick="foo(this)">点我呀</div><script>function foo(self){           // 形参不能是this;console.log("点你大爷!");console.log(self);   }
</script>

　　　第二种：

<p id="abc">试一试!</p><script>var ele=document.getElementById("abc");ele.οnclick=function(){console.log("ok");console.log(this);    // this直接用};</script>

　　2、事件介绍

　　　　onload事件

　　　　　　onload 属性开发中只给 body元素加.这个属性的触发标志着页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>
//        因为html的加载顺序是从上到下,当执行dom命令的时候,后面的标签还未定义,所以会导致功能无法使用window.οnlοad=function () {document.getElementsByTagName('h1')[0].style.color='red';document.getElementsByTagName('button')[0].onclick = function () {alert(123)}};
//            第二种方法:在body上绑定onload方法function run() {document.getElementsByTagName('h1')[0].style.color='red';document.getElementsByTagName('button')[0].onclick = function () {alert(123)}</script>
</head>
<body οnlοad="run()">
<h1> 123</h1>
<button>click</button>
</body>
</html>

onload

　　　 onsubmit事件

　　　　　　当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--form默认什么都不添加都时候，直接提交到local,刷新页面-->
<form action="">用户：<input type="text">密码：<input type="text"><input type="submit">
</form>
</body>
<script>
//    e是操作系统提供给js的接口,能够监听物理硬件的输入信息和操作信息,e代表事件的状态var ele = document.getElementsByTagName('form')[0];ele.onsubmit=function (e) {alert(123);//阻止表单提交方式1().//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.//        return false
//      // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
        e.preventDefault();}
</script>
</html>

onsubmit

　　　　事件传播

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{width: 200px;height: 200px;background-color: #7fff0c;}.c2{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div class="c1"><div class="c2"></div>
</div><script>var ele1=document.getElementsByClassName("c1")[0];var ele2=document.getElementsByClassName("c2")[0];ele1.onclick=function () {alert(123)};
//       当点击c2区域时候,触发c2的click和c1的click事件,加上stopPropagation之后,c2的click触发,c1的click被阻止事件传播ele2.οnclick=function (e) {alert(456);e.stopPropagation()};
</script></body>
</html>

事件传播

　　　　onselect

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text"><script>
//    鼠标选中内容时触发var ele=document.getElementsByTagName("input")[0];ele.onselect=function(){alert(123);}</script>
</body>
</html>

onselect

　　　　onchange

<select name="" id=""><option value="">111</option><option value="">222</option><option value="">333</option>
</select><script>
//    选择发生改变时候触发var ele=document.getElementsByTagName("select")[0];ele.onchange=function(){alert(123);}</script>

onchange

　　　　onkeydown:

　　　　　　Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="text" id="test"><script>
//    监听键盘的输入var ele=document.getElementById("test");ele.onkeydown=function (e) {e=e|| window.event;console.log(e.keyCode);console.log(String.fromCharCode(e.keyCode))}</script>
</body>
</html>

onkeydown

　　　　onmouseout与onmouseleave事件的区别：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#container{width: 300px;}#title{cursor: pointer;background: #ccc;}#list{display: none;background:#fff;}#list div{line-height: 50px;}#list  .item1{background-color: green;}#list  .item2{background-color: rebeccapurple;}#list  .item3{background-color: lemonchiffon;}</style>
</head>
<body><p>先看下使用mouseout的效果:</p><div id="container"><div id="title">使用了mouseout事件↓</div><div id="list"><div class="item1">第一行</div><div class="item2">第二行</div><div class="item3">第三行</div></div>
</div><script>// 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。var container=document.getElementById("container");var title=document.getElementById("title");var list=document.getElementById("list");title.onmouseover=function(){list.style.display="block";};container.onmouseleave=function(){  // 改为mouseout试一下list.style.display="none";};/*因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";*//*思考:if:list.οnmοuseοut=function(){list.style.display="none";};为什么移出第一行时,整个list会被隐藏?其实是同样的道理,onmouseout事件被同时绑定到list和它的三个子元素item上,所以离开任何一个子元素同样会触发list.style.display="none";*/</script>
</body>
</html>

mouseout与mouseleave

2、实例练习

　　1、搜索框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function Focus(){var input=document.getElementById("ID1");if (input.value=="请输入用户名"){input.value="";}}function Blurs(){var ele=document.getElementById("ID1");var val=ele.value;if(!val.trim()){ele.value="请输入用户名";}
}</script>
</head>
<body><input id="ID1" type="text" value="请输入用户名" οnblur="Blurs()" οnfοcus="Focus()">
</body>
</html>

搜索框

　 2、模态对话框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.back{background-color: white;height: 2000px;}.shade{position: fixed;top: 0;bottom: 0;left:0;right: 0;background-color: grey;opacity: 0.4;}.hide{display: none;}.models{position: fixed;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;height: 200px;width: 200px;background-color: wheat;}</style>
</head>
<body>
<div class="back"><input class="c" type="button" value="click">
</div><div class="shade hide handles"></div><div class="models hide handles"><input class="c" type="button" value="cancel">
</div><script>var eles=document.getElementsByClassName("c");var handles=document.getElementsByClassName("handles");for(var i=0;i<eles.length;i++){eles[i].onclick=function(){if(this.value=="click"){for(var j=0;j<handles.length;j++){handles[j].classList.remove("hide");}}else {for(var j=0;j<handles.length;j++){handles[j].classList.add("hide");}}}}</script></body>
</html>

模态对话框

　 3、表格操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><button class="select_all">全选</button>
<button class="select_reverse">反选</button>
<button class="cancel">取消</button><hr><table class="server_table" border="2px" cellspacing="2px"><tr><td><input type="checkbox" class="item"></td><td>111</td><td>111</td><td>111</td></tr><tr><td><input type="checkbox" class="item"></td><td>222</td><td>222</td><td>222</td></tr><tr><td><input type="checkbox" class="item"></td><td>333</td><td>333</td><td>333</td></tr><tr><td><input type="checkbox" class="item"></td><td>444</td><td>444</td><td>444</td></tr>
</table><script>var input_arr=document.getElementsByClassName("item");var button_arr=document.getElementsByTagName("button");for(var i=0;i<button_arr.length;i++){button_arr[i].onclick=function(){for (var j=0;j<input_arr.length;j++){var inp=input_arr[j]if(this.innerText=="全选"){console.log("ok");inp.checked=true;}else if(this.innerText=="取消"){inp.checked=false;}else {if(inp.checked){inp.checked=false;}else {inp.checked=true;}}}}}
</script>
</body>
</html>

表格操作

　 4、select移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer{margin: 0 auto;background-color: darkgray;width: 80%;height: 600px;margin-top: 30px;word-spacing: -5px;}#left{display: inline-block;width: 100px ;height: 140px;background-color: wheat;text-align: center;}#choice{display: inline-block;height: 140px;background-color: darkolivegreen;vertical-align: top;padding:0 5px;}#choice button{margin-top: 20px;}#right{display: inline-block;width: 100px ;height: 140px;background-color: wheat;text-align: center;line-height: 140px;}</style>
</head>
<body><div class="outer"><select multiple="multiple" size="5" id="left"><option>红楼梦</option><option>西游记</option><option>水浒传</option><option>JinPingMei</option><option>三国演义</option>
</select><span id="choice"><button id="choose_move"> > </button><br><button id="all_move"> >> </button>
</span><select multiple="multiple" size="10" id="right"><option>放风筝的人</option>
</select></div><script>var choose_move=document.getElementById("choose_move");var all_move=document.getElementById("all_move");var right=document.getElementById("right");var left=document.getElementById("left");var options=left.options;choose_move.onclick=function(){for (var i=0; i<options.length;i++){var option=options[i];console.log('option');if(option.selected==true){right.appendChild(option);left.removeChild(option);}}};all_move.onclick=function(){for (var i=0; i<options.length;i++){var option=options[i];right.appendChild(option);i--;}};</script></body>
</html>

select移动

　 5、运维平台模型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css"><style>body{margin: 0;}a{color: #c6e5f8;text-decoration: none;}.page-head{height: 48px;line-height: 48px;background-color: #0064a9;/*设置最小长度,缩放的时候小于1000像素宽度就出现滚动条*/min-width: 1000px;}.left{float: left;}.right{float: right;}.page-head .logo{background-color: gold;width: 200px;text-align: center;font-size: 15px;color: white;font-family: 微软雅黑,华文细黑,黑体,Arial;}.page-head .user-info a.item{display: inline-block;padding: 0 20px;}.page-head .user-info  a.item:hover{background-color: greenyellow;}.page-head .mv{/*超出的部分就隐藏*//*overflow: hidden;*/width: 40px;height: 40px;padding: 4px 10px;margin-right: 20px;}.page-body .menu{position: absolute;top:48px;left: 0;bottom: 0;width: 200px;background-color: #7cbe56;}.page-body{min-width: 1000px;}.page-body .content{/*因为自身宽度是距离左面180像素如何父div变成最小1000像素,自己也要保证是820像素,才会正常*/min-width: 800px;position: absolute;top:48px;left: 200px;bottom: 0;right: 0;/*background-color: lightgray;*//*高度固定撑开的部分就出现滚动条*/overflow: scroll;z-index: 99;}.page-head .mv .menu1{position: absolute;width: 180px;border: 1px solid #dddddd;top: 48px;right: -3px;display: none;z-index: 100;}.page-head .mv .menu1 a{display: block;}/*因为要点图片才能出发隐藏,所以hover放在mv上*/.page-head .mv:hover .menu1{display: block;}</style>
</head>
<body><div class="page-head"><div class="logo left">360运维LOGO</div><!--postion=relative确保下面的abslute能和开头保持固定位置--><div class="mv right" style="position: relative"><!--头像--><!--img为100%就确保图片能填充父框的100%,border-raius为50%的时候就是圆头像--><a style="overflow: hidden;"><img src="mv.png" alt="美女" style="width: 100%;height: 100%;border-radius:50% "></a><!--用户菜单--><div class="menu1"><a href="">个人资料</a><a href="">注销</a></div></div><div class="user-info right"><a class="item" href="#"><i class="fa fa-hand-peace-o" aria-hidden="true"></i></a><a class="item" href="#"><i  class="fa fa-envelope " aria-hidden="true"></i></a><a class="item" href="#">登录</a><a class="item" href="#">注册</a></div></div><div class="page-body"><div class="menu"></div><div class="content"><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p></div></div></body>
</html>

运维平台模型

　 6、时间显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="i1"></div><script>function func() {var da = new Date();var year = da.getFullYear();var day = da.getDate() ;var month = da.getMonth() + 1;var hour = da.getHours();var minitus = da.getMinutes();var seconds = da.getSeconds();var time = year + '-' + month + '-' + day + ' ' + hour + ':'  + minitus + ':' + secondsdocument.getElementById('i1').innerHTML = time;}setInterval(func,1000);</script>
</body>
</html>

时间显示

　 7、滚动字体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="i1">欢迎你来到我们这游览</div><script>/*
//                获取标签中文字function func() {var txt = document.getElementById('i1').innerText;var a = txt.charAt(0)var b = txt.substring(1,txt.length)var new_txt = b + a;
//                    对指定标签内容重新赋值document.getElementById('i1').innerText = new_txt;}
//                定时器setInterval(func,500);*/setInterval(function () {var txt = document.getElementById('i1').innerText;var a = txt.charAt(0)var b = txt.substring(1,txt.length)var new_txt = b + a;
//                    对指定标签内容重新赋值document.getElementById('i1').innerText = new_txt;},500)</script>
</body>
</html>

滚动字体

　 8、二级联动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body>
<select id="province"><option>请选择省:</option>
</select><select id="city"><option>请选择市:</option>
</select><script>
//    数据类型可以存储为{} 类字典data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]};var p=document.getElementById("province");var c=document.getElementById("city");for(var i in data){var option_pro=document.createElement("option");option_pro.innerHTML=i;p.appendChild(option_pro);}p.onchange=function(){pro=(this.options[this.selectedIndex]).innerHTML;citys=data[pro];c.options.length=0;for (var i in citys){var option_city=document.createElement("option");option_city.innerHTML=citys[i];c.appendChild(option_city);}}
</script></body>
</html>

二级联动

　 9、跑马灯和tab切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tab</title><style>*{margin:0; padding:0; list-style:none;}body{font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;}h3{text-align: center;color:darkcyan;margin-top: 30px;letter-spacing: 5px;}.box{width: 1000px;margin:50px auto 0px;}#title{line-height: 40px;background-color: rgb(247,247,247);font-size: 16px;font-weight: bold;color: rgb(102,102,102);}#title span{float: left;width: 166px;text-align: center;}#title span:hover{/*color: black;*/cursor: pointer;}#content{margin-top: 20px;}#content li{width: 1050px;display: none;background-color: rgb(247,247,247);}#content li div{width: 156px;margin-right: 14px;float: left;text-align: center;}#content li div a{font-size: 14px;color: black;line-height: 14px;/*  float: left;*/display: inline-block;margin-top: 10px;}#content li a:hover{color: #B70606;}#content li div span{font-size: 16px;line-height: 16px;/*float: left;*/display: block;color: rgb(102,102,102);margin-top: 10px;}#content img{float: left;width: 155px;height: 250px;}#title .select{background-color: #2459a2;color: white;border-radius: 10%;}#content .show{display: block;}.show span{color: red!important;font-size: 30px;}</style>
</head><body><h3 id="wel">京东商城欢迎您</h3><!--  direction="right up down left" -->
<!--  behavior：滚动方式(包括3个值：scroll、slide、alternate) -->
<!--  说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。 -->
<!--  scrollamount="5" 滚动速度 --><marquee behavior="scroll" direction="right">欢迎您dragon先生</marquee><script>//    京东商城滚动字幕function test(){var mywel = document.getElementById("wel");var content = mywel.innerText;//获取第一个字符var f_content = content.charAt(0);//切片从第二个字符到最后一个var l_content = content.substring(1,content.length);//进行字符串拼接var new_content = l_content + f_content;mywel.innerText = new_content;}setInterval("test();", 500);
</script><div class="box"><p id="title"><span class="select">家用电器</span><span>家具</span><span>汽车</span><span>食品</span><span>女鞋</span><span>医疗保健</span></p><ul id="content"><li class="show"><div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div><div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣机"><a href="#">海尔洗衣机</a><span>价格:5400</span></div><div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="电饭煲"><a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div><div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能电视"><a href="#">三星智能电视</a><span>价格:8999</span></div><div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="净水器"><a href="#">净水器</a><span>价格:1300</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空气净化器"><a href="#">空气净化器</a><span>价格:5300</span></div></li><li><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div></li><li><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div></li><li><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div></li><li><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div></li><li><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div></li></ul></div><script>var title=document.getElementById('title');var content=document.getElementById('content');var category=title.getElementsByTagName('span');var item=content.getElementsByTagName('li');for (var i = 0; i < category.length; i++) {category[i].index=i;category[i].onclick=function(){for (var j = 0; j < category.length; j++) {category[j].className='';item[j].className='';}this.className='select';item[this.index].className='show';}}</script>
</body>
</html>

跑马灯和tab切换

3、JS扩展

　　1、js的作用域

　　　　作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。

　　　　任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

　　全局作用域Global Scope　

　　　　在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：

　　　　(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域

var name="liang";function foo(){var age=23;function inner(){console.log(age);}inner();}console.log(name);    // yuan//console.log(age);   // Uncaught ReferenceError: age is not definedfoo();                // 23inner();              // Uncaught ReferenceError: inner is not defined

　　　　(2)所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

var name="liang";function foo(){age=23;  //不加var代表声明全局变量var sex="male"}foo();console.log(age);   //  23console.log(sex);   // sex is not defined

　　　　变量age拥有全局作用域，而sex在函数外部无法访问到。

　　　　(3)所有window对象的属性拥有全局作用域

　　　　一般情况下，window对象的内置属性都都拥有全局作用域，例如window.alert()、window.location、window.top等等。

　　局部作用域 Local Scope

　　　　和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.

　　　　如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）

　　2、作用域链Scope Chain

　　在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

　　have a try : AO?

//-----**********************例1*********************************var s=12;function f(){console.log(s);var s=12;          // if s=12
        console.log(s)}f();//-----**********************例2*********************************var s=10;
function foo(){console.log(s);var s=5;console.log(s);function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作
console.log(s);
}foo();预编译1、AO.s = undefined2、AO 已经有定义 s=5不生效3、遇到函数声明 AO.s = function () {所以预编译之后的AO.s是function在进行执行函数//-----***********************例3********************************function bar(age) {console.log(age);var age = 99;var sex= 'male';console.log(age);function age() {alert(123)};console.log(age);return 100;
}result=bar(5);//-----********************************************************

　　结果分析：

　　当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示：

　　解析到函数调用时，即bar(5)，会生成一个active object的对象，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

　　过程解析：

function bar(age) {console.log(age);var age = 99;var sex="male";console.log(age);function age(){alert(123);} ;console.log(age);return 100;
}result=bar(5);一 词法分析过程(涉及参数，局部变量声明，函数声明表达式)：1-1 、分析参数，有一个参数，形成一个 AO.age=undefine;1-2 、接收参数 AO.age=5;1-3 、分析变量声明，有一个 var age, 发现 AO 上面有一个 AO.age ，则不做任何处理1-4 、分析变量声明，有一个 var sex，形成一个 AO.sex=undefine;1-5 、分析函数声明，有一个 function age(){} 声明， 则把原有的 age 覆盖成 AO.age=function(){};
二 执行过程：2-1 、执行第一个 console.log(age) 时，当前的 AO.age 是一个函数，所以输出的一个函数2-2 、这句 var age=99; 是对不 AO.age 的属性赋值， AO.age=99 ，所以在第二个输出的age是 99;2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。注意：执行阶段：function age(){alert(123)} ;不进行任何操作，将执行语句复制给age这部操作是在词法分析时，即运行前完成的。

4、jquery

　　　1、jquery历史　

　　　　［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

　　　　［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

　　　　［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

　　　　［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

　　　　［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

　　 2、什么是jquery对象？

　　　　jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象
var variable = DOM 对象$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

　　　　jquery的基础语法：$(selector).action()

　　　　推荐网站：http://jquery.cuishifeng.cn/

　　　3、jquery选择器和筛选器

　　　　jquery的选择器和css的选择器基本一致

　　　　1、基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

　　　　2、层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

　　　　3、基本筛选器

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

　　　　4、属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

　　　　5、表单选择器

$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

　　例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.1.1.js"></script></head>
<body><!--<span>SPAN</span>--><!--<p>PPPP</p>-->
<!--<p class="p1">PPPP</p>-->
<!--<p class="p1">PPPP</p>--><!--<div id="d1">DIV</div>--><div class="outer"><p>P1</p><div class="inner"><p>P2</p></div>
</div><p>P3</p><a href="">click</a><p>P4</p><div egon="xialv">xialv</div>
<div egon="xialv2">xialv</div><input type="checkbox">
<input type="text"><script>// jquery选择器选到的是一个集合对象，后面的操作会循环加载//          $(".p1").css("color","red");//          $("#d1").css("color","green");// 后代选择器// $(".outer p").css("color","red")// 子代选择器// $(".outer>p").css("color","red")// 毗邻选择器//  $(".outer+p").css("color","red");// 兄弟选择器//     $(".outer~p").css("color","red")//  属性选择器// $("[egon='xialv2']").css("color","green");// 表单选择器// $("[type='text']").css("border","1px red solid");// $(":text").css("border","1px green solid");</script></body>
</html>

例子

　　　表单属性选择器

    :enabled:disabled:checked:selected

<body><form><input type="checkbox" value="123" checked><input type="checkbox" value="456" checked><select><option value="1">Flowers</option><option value="2" selected="selected">Gardens</option><option value="3" selected="selected">Trees</option><option value="3" selected="selected">Trees</option></select>
</form><script src="jquery.min.js"></script>
<script>// console.log($("input:checked").length);     // 2// console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1
$("input:checked").each(function(){console.log($(this).val())})</script></body>

message

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head><body><div egon="123">123</div><div egon="456">456</div><input type="text"><input type="text">
</body>
<script src="jquery-3.1.1.js"></script>
<script>
//    $("[egon]").css('color','red')
//    $("[egon='123']").css('color','red')
//      $("[type='text']").css('border','1px solid red')
//      $(":text").css('border','1px solid green') //只针对于input有效
//      :disable 是比如分页的时候,点击第一页的时候,上一页的事件就不能发生了
//      :enable  分页的时候,点击最后一页的时候,下一页的事件就不能发生了
</script>
</html>

例子　

　 筛选器

　　　1、过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul class="outer"><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li><li>666</li>
</ul>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
//    $(".outer li").eq(4).css('color','red')
//    $(".outer li:eq(4)").css('color','red')
//    $(".outer li:lt(4)").css('color','red')
//    $(".outer li:gt(4)").css('color','red')
//     奇数
//    $(".outer li:even").css('color','red')//偶数
//    $(".outer li:odd").css('color','red')</script>
</html>

例子

　　 2、查找筛选器

查找子标签：         $("div").children(".test")      $("div").find(".test")  向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()     $(".test").nextUntil() 向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()       $("div").prevUntil()   查找所有兄弟标签：    $("div").siblings()  查找父标签：         $(".test").parent()              $(".test").parents()     $(".test").parentsUntil()

　　children是只找父子关系的，find是找子孙内存在的

　　nextUntil是直到哪个标签为止,这个标签不被选中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="item1">111</div>
<div class="item2">222</div>
<div class="item3">333</div>
<div class="item4">444</div>
<div class="item5">555</div><div class="outer"><div class="inner"><p id="p1">P1</p></div><p>P2</p>
</div>
<p>p3</p><script src="jquery-3.1.1.js"></script>
<script>//    向下查找兄弟标签// $(".item1").next().css('color',"red")// $(".item1").nextAll().css('color',"red")  在当前的下面所有标签//  $(".item1").nextUntil(".item5").css('color',"red") item5不被选中// 查找所有兄弟标签// $(".item3").siblings().css('color','red')//
     // 查找子标签// $(".outer").children("p").css("color","red")// $(".outer").find("p").css("color","red")//  查找父标签// $("#p1").parent();// $("#p1").parentsUntil("body")</script></body>
</html>

例子

　　　4、事件

　　　　1、页面载入

ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})

　　例子：　　　　

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.1.1.js"></script><script>
//        类似于js的onload
//        $(document).ready(function () {
//            $('div').css('color','red')
//        })$(function () {$('div').css('color','green')})</script>
</head>
<body><div>123</div>
</body>
</html>

　　　　2、事件绑定

//语法:  标签对象.事件(函数)
eg: $("p").click(function(){})

JS 事件绑定方式：  js的标签对象.on事件=函数
juqery事件绑定方式：$().事件(函数)

　　应用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.1.1.js"></script></head>
<body><ul><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li>
</ul><button>ADD</button><script>
//      JS 事件绑定方式：  js的标签对象.on事件=函数
//      juqery事件绑定方式：$().事件(函数)
 $("ul li").click(function () {alert(123)});$("button").click(function () {$("ul").append("<li>666</li>")});//    on方法实现事件绑定,这样新绑定的节点不会有原有的事件
 $("ul li").on("click",function () {alert(456)});//事件委派,通过事件委派的方式来操作,注意on前面为要操作的标签的父标签
 $("ul").on("click","li",function () {alert(789);})</script></body>
</html>

应用

　　　　3、事件委派 ---> 前方高能,事件委派的选择器是要委派标签的父标签,父标签可以是父亲也可以是爷爷等,括号里的selector必须是能找到委派标签,这个父元素应该是所有需要触发事件的共同的一个父元素

$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

　　　　例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.1.1.js"></script></head>
<body><div><ul><li>1</li><li>2</li><li>3</li></ul>
</div>
<hr>
<button id="add_li">Add_li</button>
<button id="off">off</button><script src="jquery.min.js"></script>
<script>//没有事件委派$("ul li").click(function(){alert(123)});//事件委派
//    $('ul').on('click','li',function () {//        alert(123)
//    });
$("#add_li").click(function(){var $ele=$("<li>");$ele.text(Math.round(Math.random()*10));$("ul").append($ele)});//    $("ul").on("click","li",function(){//        alert(456)
//    })//点击off就触发ul,li的onlick事件取消$("#off").click(function(){$("ul li").off()})</script></body>
</html>

例子

　　　　4、事件切换

　　　　hover事件：

　　　　　　一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

　　　　　　over:鼠标移到元素上要触发的函数

　　　　　　out:鼠标移出元素要触发的函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.1.1.js"></script></head>
<body><div><ul><li>1</li><li>2</li><li>3</li></ul>
</div>
<hr>
<button id="add_li">Add_li</button>
<button id="off">off</button><script src="jquery.min.js"></script>
<script>//没有事件委派$("ul li").click(function(){alert(123)});//事件委派
//    $('ul').on('click','li',function () {//        alert(123)
//    });
$("#add_li").click(function(){var $ele=$("<li>");$ele.text(Math.round(Math.random()*10));$("ul").append($ele)});//    $("ul").on("click","li",function(){//        alert(456)
//    })//点击off就触发ul,li的onlick事件取消$("#off").click(function(){$("ul li").off()})</script></body>
</html>

事件切换

　　　4、属性操作

　　　　一般属性方法括号里一个参数,代表取值,2个参数代表设定值

--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();/*
一般自带属性操作用prop,自定义属性操作用attr
在操作关于input系列【radio checkbox】  我们选中或者取消，不能采用attr来进行设值 ---- 1.
3 版本修复了这个bug---
prop()专门是用来对input【radio checkbox】
$("xxx").prop()
*/
--------------------------HTML代码/文本/值
$("").html([val|fn])  --功能同javascript 会将标签都算进来
$("").text([val|fn])    -- 只看文本
$("").val([val|fn|arr])---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})

　　5、each循环

　　　　我们知道如下是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦

$("p").css("color","red")

　　　　jquery支持两种循环方式：

　　　　　　方式一：

　　　　　　　　格式：$.each(obj,fn)

li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){console.log(i,x)
});

　　　　　　方式二：

　　　　　　　　格式：$("").each(fn)

$("tr").each(function(){console.log($(this).html())
})$this代表当前标签

　　　　　　each的扩展：

/*function f(){for(var i=0;i<4;i++){if (i==2){return}console.log(i)}}f();  // 这个例子大家应该不会有问题吧!!!
//-----------------------------------------------------------------------li=[11,22,33,44];$.each(li,function(i,v){if (v==33){return ;   //  ===试一试 return false会怎样?}console.log(v)});//------------------------------------------// 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行//本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,//希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:for(var i in obj){ret=func(i,obj[i]) ;if(ret==false){return ;}}// 这样就很灵活了:// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false// ---------------------------------------------------------------------

扩展

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p class="item">P1</p>
<p class="item">P2</p>
<p class="item">P3</p>
<p class="item">P4</p><script src="jquery-3.1.1.js"></script><script>// $.each(obj,fn)// jquery遍历数组
//    var arr=[111,222,323];
//    $.each(arr,function (i,j) {//        console.log(i);
//        console.log(j);
//    });// jquery遍历object
//   var info ={"name":"egon","age":"35"};
//   $.each(info,function (i,j) {//       console.log(i,j);
//   })// 循环方式2：  $("").each(fn)//  $(".item").css("color","green");//    $(".item").each(function () {//        console.log($(this));
//        if($(this).text()=="P3"){//            $(this).css("color","red")
//        }
//
//    })</script>
</body>
</html>

循环练习

　　　5、文档节点处理

//创建一个标签对象$("<p>")//内部插入$("").append(content|fn)      ----->$("p").append("<b>Hello</b>");$("").appendTo(content)       ----->$("p").appendTo("div");$("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");$("").prependTo(content)      ----->$("p").prependTo("#foo");//外部插入$("").after(content|fn)       ----->$("p").after("<b>Hello</b>");$("").before(content|fn)      ----->$("p").before("<b>Hello</b>");$("").insertAfter(content)    ----->$("p").insertAfter("#foo");$("").insertBefore(content)   ----->$("p").insertBefore("#foo");//替换$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");//删除$("").empty()$("").remove([expr])//复制$("").clone([Even[,deepEven]])

　　remove是自己把自己删了,empty是清空内容

　　练习：添加删除input框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="item"><div class="div1"><button class="add">+</button><input type="text"></div></div></body>
<script src="jquery-3.1.1.js"></script>
<script>$(".add").click(function () {var $obj = $(this).parent().clone();$obj.children('button').text('-');$obj.children('button').attr('class','rem');$(".item").append($obj)});$('.item').on('click',".rem",function () {$(this).parent().remove()})</script>
</html>

通过clone和appand添加删除

　　　6、动画效果

　　　　　　显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script><script>$(document).ready(function() {$("#hide").click(function () {$("p").hide(1000);});$("#show").click(function () {$("p").show(1000);});//用于切换被选元素的 hide() 与 show() 方法。$("#toggle").click(function () {$("p").toggle();});
})</script><link type="text/css" rel="stylesheet" href="style.css">
</head>
<body><p>hello</p><button id="hide">隐藏</button><button id="show">显示</button><button id="toggle">切换</button></body>
</html>

显示和隐藏

　　　　　滑动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script><script>$(document).ready(function(){$("#slideDown").click(function(){$("#content").slideDown(1000);});$("#slideUp").click(function(){$("#content").slideUp(1000);});$("#slideToggle").click(function(){$("#content").slideToggle(1000);})});</script><style>#content{text-align: center;background-color: lightblue;border:solid 1px red;display: none;padding: 50px;}</style>
</head>
<body><div id="slideDown">出现</div><div id="slideUp">隐藏</div><div id="slideToggle">toggle</div><div id="content">helloworld</div></body>
</html>

滑动

　　　　　　淡入淡出

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script><script>$(document).ready(function(){$("#in").click(function(){$("#id1").fadeIn(1000);});$("#out").click(function(){$("#id1").fadeOut(1000);});$("#toggle").click(function(){$("#id1").fadeToggle(1000);});$("#fadeto").click(function(){$("#id1").fadeTo(1000,0.4);});
});</script></head>
<body><button id="in">fadein</button><button id="out">fadeout</button><button id="toggle">fadetoggle</button><button id="fadeto">fadeto</button><div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div></body>
</html>

淡入淡出

　　　　　　回调函数--类似于多线程的回调函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script></head>
<body><button>hide</button><p>helloworld helloworld helloworld</p><script>$("button").click(function(){$("p").hide(1000,function(){alert($(this).html())})})</script>
</body>
</html>

回调函数

　　　7、待续..

　　 8、Jquery实例练习

　　　　　　左侧菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer {height: 500px;}.left_menu{height: 500px;width: 20%;background-color: greenyellow;float: left;}.right_menu{height: 500px;width: 80%;background-color: red;float: left;}.title{text-align: center;background-color: blue;color: white;line-height: 30px;}.item{margin: 20px;}.hide{display: none;}</style>
</head>
<body><div  class="outer"><div class="left_menu"><div class="item"><div class="title">标题一</div><div class="content"><p>1111</p><p>1111</p><p>1111</p></div></div><div class="item"><div class="title">标题二</div><div class="content hide"><p>2222</p><p>2222</p><p>2222</p></div></div><div class="item"><div class="title">标题三</div><div class="content hide"><p>3333</p><p>3333</p><p>3333</p></div></div></div><div class="right_menu"></div></div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>$(".title").click(function () {$(this).next().removeClass('hide').parent().siblings().children(".content").addClass('hide');})</script>
</html>

左侧菜单

　　　　　 tab切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.outer{width: 60%;height: 300px;background-color: wheat;margin: 100px auto;}ul.title{background-color: gray;padding: 10px;}ul.title li{list-style: none;display: inline-block;padding: 5px;}.hide{display: none;}.outer .content{padding: 15px;}.active{background-color: red;color: white;border-top: 3px solid green;}</style>
</head>
<body><div class="outer"><ul class="title"><li class="active" egon="c1">商品介绍</li><li egon="c2">规格与包装</li><li egon="c3">售后保障</li></ul><div class="content"><div class="item" id="c1">商品介绍商品介绍商品介绍</div><div class="item hide" id="c2">规格与包装规格与包装规格与包装</div><div class="item hide" id="c3">售后保障售后保障售后保障</div></div></div><script src="jquery-3.1.1.js"></script><script>$(".title li").click(function () {$(this).addClass("active").siblings().removeClass("active");var $id_value=$(this).attr("egon");var $sel="#"+$id_value;$($sel).removeClass("hide").siblings().addClass("hide");})
</script></body>
</html>

tab切换

　　　　　 tab正反选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><button>全选</button>
<button>反选</button>
<button>取消</button><hr>
<table border="1"><tr><th>     </th><th>姓名</th><th>年龄</th><th>班级</th></tr><tr><td><input type="checkbox"></td><td>111</td><td>111</td><td>111</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>111</td><td>111</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>111</td><td>111</td></tr></table><script src="jquery-3.1.1.js"></script>
<script>$('button').click(function () {if ($(this).text() == '全选'){$('input').prop('checked',true);}else if ($(this).text() == '取消'){$('input').prop('checked',false);}else{$('input').each(function () {$(this).prop("checked",!$(this).prop("checked"))})}})</script>
</body>
</html>

table正反选

　　　　　模态对话框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;}.back{background-color: wheat;height: 2000px;}.shade{position: fixed;top: 0;bottom: 0;left:0;right: 0;background-color: darkgray;opacity: 0.4;}.hide{display: none;}.models{position: fixed;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;height: 200px;width: 200px;background-color: white;}</style>
</head>
<body>
<div class="back"><input id="ID1" type="button" value="click" οnclick="action1(this)">
</div><div class="shade hide"></div>
<div class="models hide"><input id="ID2" type="button" value="cancel" οnclick="action2(this)">
</div><script src="jquery.min.js"></script>
<script>function action1(self){$(self).parent().siblings().removeClass("hide");}function action2(self){//$(self).parent().parent().children(".models,.shade").addClass("hide")
$(self).parent().addClass("hide").prev().addClass("hide")}
</script>
</body>
</html>

模态对话框

　　　　复制样式条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="item"><div class="div1"><button class="add">+</button><input type="text"></div></div></body>
<script src="jquery-3.1.1.js"></script>
<script>$(".add").click(function () {//clone父亲的样式进行修改,注意不能根据class找父亲,这样会1变2,2变4var $obj = $(this).parent().clone();$obj.children('button').text('-');$obj.children('button').attr('class','rem');$(".item").append($obj)});//事件委托$('.item').on('click',".rem",function () {$(this).parent().remove()})</script>
</html>

复制样式条

　　　　注册验证

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form class="Form" id="form"><p><input class="v1" type="text" name="username" mark="用户名"></p><p><input class="v1" type="text" name="email" mark="邮箱"></p><p><input type="submit" value="submit"></p></form><script src="jquery.min.js"></script>
<script>$("#form :submit").click(function(){flag=true;$("#form .v1").each(function(){$(this).next("span").remove();// 防止对此点击按钮产生多个span标签var value=$(this).val();if (value.trim().length==0){var mark=$(this).attr("mark");var ele=document.createElement("span");ele.innerHTML=mark+"不能为空!";$(this).after(ele);$(ele).prop("class","error");// DOM对象转换为jquery对象flag=false;return false ; //-------->引出$.each的return false注意点
            }});return flag});</script>
</body>
</html>

注册验证

　　　　拖动面板

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><div style="border: 1px solid #ddd;width: 600px;position: absolute;"><div id="title" style="background-color: black;height: 40px;color: white;">标题</div><div style="height: 300px;">内容</div></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script>$(function(){// 页面加载完成之后自动执行$('#title').mouseover(function(){$(this).css('cursor','move');}).mousedown(function(e){//console.log($(this).offset());var _event = e || window.event;// 原始鼠标横纵坐标位置var ord_x = _event.clientX;var ord_y = _event.clientY;var parent_left = $(this).parent().offset().left;var parent_top = $(this).parent().offset().top;$(this).on('mousemove', function(e){var _new_event = e || window.event;var new_x = _new_event.clientX;var new_y = _new_event.clientY;var x = parent_left + (new_x - ord_x);var y = parent_top + (new_y - ord_y);$(this).parent().css('left',x+'px');$(this).parent().css('top',y+'px');})}).mouseup(function(){$(this).off('mousemove');});})
</script>
</body>
</html>

拖动面板

　　　　轮播图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="jquery-3.1.1.js"></script><title>Title</title><style>.outer{width: 790px;height: 340px;margin: 80px auto;position: relative;}.img li{position: absolute;list-style: none;top: 0;left: 0;display: none;}.num{position: absolute;bottom: 18px;left: 270px;list-style: none;}.num li{display: inline-block;width: 18px;height: 18px;background-color: white;border-radius: 50%;text-align: center;line-height: 18px;margin-left: 4px;}.btn{position: absolute;top:50%;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: 0;}.right{right: 0;}.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><li><a href=""><img src="img/6.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=0;
//  通过jquery自动创建按钮标签var img_num=$(".img li").length;for(var j=0;j<img_num;j++){$(".num").append("<li></li>")}$(".num li").eq(0).addClass("active");// 手动轮播
$(".num li").mouseover(function () {i=$(this).index();$(this).addClass("active").siblings().removeClass("active");$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)});// 自动轮播var c=setInterval(GO_R,1500);function GO_R() {if(i==img_num-1){i=-1}i++;$(".num li").eq(i).addClass("active").siblings().removeClass("active");$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)}function GO_L() {if(i==0){i=img_num}i--;$(".num li").eq(i).addClass("active").siblings().removeClass("active");$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);  // fadeIn,fadeOut单独另开启的线程
}$(".outer").hover(function () {clearInterval(c)},function () {c=setInterval(GO_R,1500)});// button 加定播 $(".right").click(GO_R);$(".left").click(GO_L)</script>
</body>
</html>

轮播图

　　　点赞功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.container{padding: 50px;border: 1px solid #dddddd;}.item{position: relative;width: 30px;}</style>
</head>
<body><div class="container"><div class="item"><span>赞</span></div></div><div class="container"><div class="item"><span>赞</span></div></div><div class="container"><div class="item"><span>赞</span></div></div><div class="container"><div class="item"><span>赞</span></div></div><script src="jquery-1.12.4.js"></script><script>$('.item').click(function () {AddFavor(this);});function AddFavor(self) {// DOM对象var fontSize = 15;var top = 0;var right = 0;var opacity = 1;var tag = document.createElement('span');$(tag).text('+1');$(tag).css('color','green');$(tag).css('position','absolute');$(tag).css('fontSize',fontSize + "px");$(tag).css('right',right + "px");$(tag).css('top',top + 'px');$(tag).css('opacity',opacity);$(self).append(tag);/*定义一个匿名函数*/var obj = setInterval(function () {  fontSize = fontSize + 10;top = top - 10;right = right - 10;opacity = opacity - 0.1;$(tag).css('fontSize',fontSize + "px");$(tag).css('right',right + "px");$(tag).css('top',top + 'px');$(tag).css('opacity',opacity);if(opacity < 0){clearInterval(obj);// $(tag).remove();
                }}, 40);}</script></body>
</html>

　　　　左右元素选择

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>select{width:150px;height:300px;}</style>
</head>
<body>
<select name="fruit" id="fruit" multiple></select>
<input type="button" value="<---" οnclick="toleft();">
<input type="button" value="<===" οnclick="totalleft();">
<input type="button" value="--->" οnclick="toright();">
<input type="button" value="===>" οnclick="totalright();">
<select name="fish" id="fish" multiple><option value="">大鱼</option><option value="">小鱼</option><option value="">虾米</option><option value="">甲鱼</option><option value="">咸鱼</option><option value="">苹果</option><option value="">香蕉</option><option value="">菠萝</option><option value="">西瓜</option>
</select>
</body>
<script src="jquery.js"></script>
<script>function toleft(){
//        append()
//        selected就是选中的元素$("#fish option:selected").appendTo("#fruit");}function totalleft(){$("#fish option").appendTo("#fruit");}function toright(){$("#fruit option:selected").appendTo("#fish");}function totalright(){$("#fruit option").appendTo("#fish");}
</script>
</html>

左右元素选择

　　　模态对话框的另外一种方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<style>.hide{display: none;}.show{display: block;}.shadow{position: fixed;top:0;right:0;left:0;bottom:0;opacity:0.6;background-color: #000;z-index: 10;}.modal{position: fixed;top:10%;left:20%;right:20%;bottom:30%;background-color: wheat;z-index: 11;}</style>
<body>
<input type="button" οnclick="addEle();" value="添加"/>
<table border="1" width="400px" id="info"><tr><td target="ip">192.168.1.1</td><td target="port">80</td><td><input type="button" value="编辑" class="edit"/></td><td><input type="button" value="删除"/></td></tr><tr><td target="ip">192.168.1.2</td><td target="port">81</td><td><input type="button" value="编辑" class="edit"/></td><td><input type="button" value="删除"/></td></tr><tr><td target="ip">192.168.1.3</td><td target="port">82</td><td><input type="button" value="编辑" class="edit"/></td><td><input type="button" value="删除"/></td></tr>
</table>
<div class="modal hide">主机IP：<input type="text" value="" name="ip"/><p>端口号：<input type="text" value="" name="port"/><p><input type="button" value="确认"><input type="button" value="取消" οnclick="cancelModel()">
</div>
<div class="shadow hide"></div>
</body>
<script src="jquery.js"></script>
<script>function addEle(){$(".hide").css("display","block");}function cancelModel(){$(".hide").css("display","none");}$(".edit").click(function(){$(".hide").css("display","block");var tds = $(this).parent().siblings('td');
//        console.log(tds);tds.each(function(){
//            属性的内容attrvar k = $(this).attr('target');
//            文本内容 td标签里的内容var v = $(this).text();console.log(k + '---' + v);
//            字符串拼接，k当时是变量，所以需要字符串拼接成字符串var v1 = "input[name = '";var v2 = "']";var tmp = v1 + k + v2;
//            console.log(tmp);
            $(tmp).val(v);});//获取ip和port值
//        var ip = $(tds[0]).text();
//        var port = $(tds[1]).text();
////        console.log(ip + '----' + port);
//        // 设置ip和port到模态框内
//        $("input[name='ip']").val(ip);
//        $("input[name='port']").val(port);
    })
</script>
</html>

模态对话框另外一种方法

　　　　隔行换色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<table border="1" width="400px"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</body>
<script src="jquery.js"></script>
<script>$("tr").mouseover(function(){$(this).css("background-color","red");});$("tr").mouseout(function(){$(this).css("background-color","white");})
</script>
</html>

隔行换色

转载于:https://www.cnblogs.com/liujiliang/p/7295359.html