day17 jQuery
1.html+css补充
- 页面布局：前台布局；后台布局
- float清除
第一种清除方法：（简单粗暴）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: green;"> <div style=" width: 200px;height: 200px;border: 1px solid red;float: left;"></div> <div style=" width: 200px;height: 200px;border: 1px solid red;float: left;"></div> <div style=" width: 200px;height: 200px;border: 1px solid red;float: left;"></div> <div style=" width: 200px;height: 200px;border: 1px solid red;float: left;"></div> <div style=" width: 200px;height: 200px;border: 1px solid red;float: left;"></div> <div style="clear: both"></div> </div> </body> </html>
第二种方法：文艺
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ content: '......'; display: block; clear: both; visibility: hidden; height:0; /*display: none;*/ } </style> </head> <body> <div class="clearfix" style="background-color: #009933"> <div style="width: 200px;height: 200px;border: 1px solid red;float: left;">test1</div> <div style="width: 200px;height: 200px;border: 1px solid red;float: left;">test1</div> <div style="width: 200px;height: 200px;border: 1px solid red;float: left;">test1</div> <div style="width: 200px;height: 200px;border: 1px solid red;float: left;">test1</div> </div> </body> </html>
第三种方法：清新引入
common.css文件：
.clearfix:after{
content: '.';
display: block;
clear: both;
visibility: hidden;
height:0;
}html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> </head> <body> <div style="background-color: #009933" class="clearfix"> <div style="height: 200px;width: 200px;border: 1px solid red;float: left;"></div> <div style="height: 200px;width: 200px;border: 1px solid red;float: left;"></div> <div style="height: 200px;width: 200px;border: 1px solid red;float: left;"></div> <div style="height: 200px;width: 200px;border: 1px solid red;float: left;"></div> </div> </body> </html>
-响应式布局的两种方法：
第一种方法：简单粗暴的直接定宽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ width:25%; float: left; } </style> </head> <body> <div style="width: 800px"> <div class="item"> <label>用户名:</label> <input type="text"/> </div> <div class="item"> <label>用户名:</label> <input type="text"/> </div> <div class="item"> <label>用户名:</label> <input type="text"/> </div> <div class="item"> <label>用户名:</label> <input type="text"/> </div> <div class="item"> <label>用户名:</label> <input type="text"/> </div> <div class="item"> <label>用户名:</label> <input type="text"/> </div> <div class="item"> <label>用户名:</label> <input type="text"/> </div> </div> </body> </html>
第二种方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @media (max-width:800px) { .item{ width: 300px; float: left; } } @media (min-width:700px) { .item{ width: 300px; float: left; } } </style> </head> <body> <div class="item"> <label>用户名：</label> <input type="text"> </div> <div class="item"> <label>用户名：</label> <input type="text"> </div> <div class="item"> <label>用户名：</label> <input type="text"> </div> <div class="item"> <label>用户名：</label> <input type="text"> </div> <div class="item"> <label>用户名：</label> <input type="text"> </div> <div class="item"> <label>用户名：</label> <input type="text"> </div> <div class="item"> <label>用户名：</label> <input type="text"> </div> <div class="item"> <label>用户名：</label> <input type="text"> </div> <div class="item"> <label>用户名：</label> <input type="text"> </div> </body> </html>
2.dom事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.caifupad.com" onclick="return func()">萌萌哒</a> <script> function func(){ alert('萌萌哒') return false } </script> </body> </html>
用户提交实例（空字符不提交后台）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://www.baidu.com"> <input type="text" id="user" name="user"> <input type="submit" id="sb" value="提交"> </form> <script> document.getElementById('sb').onclick = function(){ var v = document.getElementById('user').value if(v.length>0){ return true }else{ alert('请输入用户名') return false } } </script> </body> </html>
第二种方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://www.baidu.com"> <input type="text" id="'user" name="user"/> <input type="submit" value="提交" onclick="return func()"> </form> <script> function func(){ var v = document.getElementById('user').value; if(v.length>0){ return true }else{ alert("请输入内容！！") return false } } </script> </body> </html>
如何绑定事件，如何阻止绑定事件都有两种方法如上述所示；
this介绍：表示当前触发事件的标签
一个标签可以绑定多个不同的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--第一种方式--> <!--<div id="i1" onclick="func(this)">sss</div>--> <!--<script>--> <!--function func(ths){--> <!--var v = ths.innerHTML--> <!--alert(v)--> <!--}--> <!--</script>--> <!--第二种方式--> <div id="i1">sss</div> <script> document.getElementById('i1').onclick = function(){ // var v = document.getElementById('i1').innerHTML var v=this.innerHTML alert(v) } </script> </body> </html>
实例：获取焦点和失去焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" value="请输入关键字" onfocus="func(this);" onblur="bfunc(this);"/> <input type="button" value="提交"> <script> <!--获取焦点--> function func(ths){ var v = ths.value; if(v == "请输入关键字"){ ths.value = "" } } // 失去焦点 function bfunc(ths){ var b = ths.innerText if(b.length == 0){ ths.value = "请输入关键字" } } </script> </body> </html>
.value：表单信息的获取
innerText：只获取文本信息
innerHtml：获取到标签和文本信息
同一个标签绑定相同的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id='i1' onclick="console.log(1)">jjj</div> <script> document.getElementById('i1').addEventListener('click',function(){ console.log(2) }) </script> </body> </html>
事件冒泡：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 400px;width: 400px;background-color: red" onclick="alert(1)"> <div style="height: 300px;width: 300px;background-color: #009933" onclick="alert(2)"> <div style="height: 200px;width: 200px;background-color: #3300cc" onclick="alert(3)"></div> </div> </div> </body> </html>
事件捕获：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id='i1' style="height: 400px;width: 400px;background-color: red"> <div id="i2" style="height: 300px;width: 300px;background-color: #009933"> <div id="i3" style="height: 200px;width: 200px;background-color: #3300cc"></div> </div> </div> <script> document.getElementById('i1').addEventListener('click',function(){alert(1)},true) document.getElementById('i2').addEventListener('click',function(){alert(2)},true) document.getElementById('i3').addEventListener('click',function(){alert(3)},true) </script> </body> </html>
windows事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" onkeydown="func(this,event);"> <script> function func(ths,e) { console.log(ths,e) } window.onkeydown = function(e){ // console.log(e) alert(e) } </script> </body> </html>
任何标签通过js提交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="http://www.baidu.com"> <input type="submit" value="提交"> <a onclick="submitForm();">提交</a> </form> <script> function submitForm(){ document.getElementById('f1').submmit() } </script> </body> </html>
js补充：
刷新页面： window.location.reload
获取页面：window.location.href
页面赋值跳转：window.location.href = “http://www.baidu.com”
3.jQuery
highchart+jQuery画图：
jQuery的功能：
- 查找
-选择器
$(‘#i1’): 查找id=i1的标签
$(‘.i1’):查找class=i1的标签
$(‘div’)：查找所有的div标签
$(‘*’)：查找所搜的标签
$(‘#i1 .c1 div’)：先找id=i1的标签，然后在其子子孙孙中继续查找
- 属性选择器
$(‘input[type=”text”]’) ----> $(‘:text’)
- 筛选器：
$(‘#i1’).parent()
$(‘#i1’).children()
$(‘#i1’).next()
$(‘#i1’).prev()
$(‘#i1’).siblings()
$(‘#i1’).find(‘.c1’)
筛选器还支持链式编程：
$(‘#i1’).next().prev().find(‘c1’).parent() #实例
- 操作
addClass()
removeClass()
val():针对input或者textarea的查找和设置值
text()：针对文本获取和设置值
html():针对文本获取和设置值
attr()：对属性设置新值
prop()：设置属性值checkbox的勾选
窗口切换的小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menus{ height: 48px; background-color: lightgrey; line-height: 48px; } .menus a{ display: inline-block; border:1px solid #3A3A4F; padding: 0 10px; margin-top: -4px; } .menus a.active{ border-top:4px solid cadetblue; } </style> </head> <body> <div style="width: 500px;border: 1px solid lightgrey;min-height: 500px"> <div class="menus"> <a class="active" target="i1">菜单一</a> <a target="i2">菜单二</a> <a target="i3">菜单三</a> </div> <div class="contents"> <div nid="i1" class="content">内容一</div> <div nid="i2" class="content hide">内容二</div> <div nid="i3" class="content hide">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> //为所有的a标签绑定时间 $('.menus a').click(function(){ //this是DOM的事件 $(this).addClass('active').siblings().removeClass('active') var v = $(this).attr('target') //获取i1 i2 i3 var t = 'div[nid="' + v +'"]' //div[nid=i1] $('.contents').find(t).removeClass('hide').siblings().addClass('hide') }) </script> </body> </html>
全选，反选实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="checkAll()">全选</a> <a onclick="cancelAll()">取消</a> <a onclick="reverseAll()">反选</a> <table border="1px"> <tr> <td><input type="checkbox"></td> <td target="id">1</td> <td target="host">c1.com</td> <td target="port">80</td> <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td> <td>查看更多</td> </tr> <tr> <td><input type="checkbox"></td> <td target="id">1</td> <td target="host">c1.com</td> <td target="port">80</td> <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td> <td>查看更多</td> </tr> <tr> <td><input type="checkbox"></td> <td target="id">2</td> <td target="host">c2.com</td> <td target="port">80</td> <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td> <td>查看更多</td> </tr> <tr> <td><input type="checkbox"></td> <td target="id">3</td> <td target="host">c3.com</td> <td target="port">80</td> <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td> <td>查看更多</td> </tr> <tr> <td><input type="checkbox"></td> <td target="id">4</td> <td target="host">c4.com</td> <td target="port">80</td> <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td> <td>查看更多</td> </tr> <tr> <td><input type="checkbox"></td> <td target="id">5</td> <td target="host">c5.com</td> <td target="port">80</td> <td><a onclick="editAsset(this)">编辑</a>|<a>删除</a></td> <td>查看更多</td> </tr> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $('table :checkbox').prop('checked',true) } function cancelAll(){ $('table :checkbox').prop('checked',false) } function reverseAll(){ $('table :checkbox').each(function(){ if($(this).prop('checked')){ $(this).prop('checked',false) }else{ $(this).prop('checked',true) } }) } </script> </body> </html>
开关灯小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <a onclick="light()">开关灯</a> <div id='i2'style="width: 400px; height: 400px; background-color:black">ddsdsads</div> </body> <script src="jquery-1.12.4.js"></script> <script> function light(){ $('#i2').toggleClass('hide') } </script> </html>
css参数：
$(‘#i1’).css(‘color’,’red’)
位置参数：
$(‘.i1’).position()：获取位置信息
$(‘#i1’).offset():相对定位
$(window).scrollTop(0)：返回顶部
返回顶部小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } </style> </head> <body> <div style="height: 900px;">fff</div> <div id="i1">dadsak</div> <div onclick="goTop()" style="height:50px;width: 50px;position: fixed; right: 10px;bottom: 10px;">返回顶部</div> <script src="jquery-1.12.4.js"></script> <script> function goTop(){ $(window).scrollTop(0) } </script> </body> </html>
文档操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="inp"/><a onclick="addValue()">添加</a> <ul id="ul"> <li>内容一</li> </ul> <script src="jquery-1.12.4.js"></script> <script> function addValue(){ var v = $('#inp').val(); var tag = document.createElement('li'); tag.innerHTML = v; $('#ul').append(tag); //同级追加 // $('ul')prepend(tag); //往上添加 // $('ul').after(tag); //往后添加 $(tag).empty() //晴空标签的内容 $(tag).remove() //移除标签 } </script> </body> </html>
点赞实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ height: 80px; line-height: 80px; border:1px solid red; } .item .zan{ position: relative; } .item .zan .i{ position: absolute; } </style> </head> <body> <div class="item"> <div class="zan"> <span>赞</span> </div> </div > <div class="item"> <div class="zan"> <span>赞</span> </div> </div> <div class="item"> <div class="zan"> <span>赞</span> </div> </div> <div class="item"> <div class="zan"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item span').click(function(){ var fontSize = 12; var top = -1; var left = 20; var opacity = 1; var tag = document.createElement('i'); tag.innerHTML = "+1"; $(this).after(tag) var obj = setInterval(function(){ //创建定时器 fontSize += 10; top -= 5; left += 5; opacity -= 0.2; tag.style.fontSize = fontSize + 'px'; tag.style.top = top + 'px'; tag.style.left = left + 'px'; tag.style.opacity = opacity; if(opacity < 0){ //关闭定时器 clearInterval(obj) } },90) }) </script> </body> </html>
