第十四 jQuery及事件、ajax
一、jQuery 属性相关
1.复选框实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Check</title> </head> <body> <div> <input type="button" value="全选" onclick="selectAll()"/> <input type="button" value="取消" onclick="cleanAll()"/> <input type="button" value="反选" onclick="fancheck()"/> </div> <div> <table> <tr> <td> <input type="checkbox"/> </td> <td> 激动 </td> <td> 淡定 </td> </tr> <tr> <td> <input type="checkbox"/> </td> <td> 火车 </td> <td> 汽车 </td> </tr> <tr> <td> <input type="checkbox"/> </td> <td> 飞机 </td> <td> 游艇 </td> </tr> <tr> <td> <input type="checkbox"/> </td> <td> 摩托 </td> <td> 车子 </td> </tr> </table> </div> <script src="jquery-3.2.0.js"></script> <script> var ckl_list = [11,22,33,44]; $.each(ckl_list,function (i,item) { console.log(i,item) }) function selectAll() { $("table :checkbox").prop("checked",true); } function cleanAll() { $("table :checkbox").prop("checked",false); } function fancheck() { $("table :checkbox").each(function () { var isCheck = $(this).prop("checked"); if(isCheck){ $(this).prop("checked",false); } else { $(this).prop("checked",true); } }) } </script> </body> </html>
1.1.运行结果
2.tab 选择项示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab Menu</title> <style> .yin { display: none; } .tab-box .box-menu { height: 33px; background-color: #ccc8c8; line-height: 33px; } .tab-box box-body{ border: solid 1px crimson; } .box-menu a { border-right: solid 1px #8c8989; padding: 6px; } .zhanshi { background-color: whitesmoke; border-top: solid 2px crimson; } </style> </head> <body> <div class="tab-box"> <div class="box-menu"> <a ckl='s1' onclick="xuan(this);">上海天气</a> <a ckl='s2' onclick="xuan(this);">纽约天气</a> <a ckl='s3' onclick="xuan(this);">东京天气</a> </div> <div> <a id="s1">上海晴转多云</a> <a id="s2" class="yin">纽约大雨转小雨</a> <a id="s3" class="yin">东京大雾</a> </div> </div> <script src="jquery-3.2.0.js"></script> <script> function xuan(ths) { $(ths).addClass("zhanshi").siblings().removeClass("zhanshi"); // $(ths).addClass("bian").siblings().removeClass("bian"); var xm = $(ths).attr('ckl'); temp = "#" + xm; $(temp).removeClass('yin').siblings().addClass('yin'); } </script> </body> </html>
2.1.展示结果
3.回到顶部示例
要求，点击回到顶部，直接回到顶部。如果未使用滑轮，不显示回到顶部。小页面也有回到顶部
3.1.示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>GtT</title> <style> .gotop { position: fixed; right: 0px; bottom: 0px; background-color: #428bca; height: 100px; width: 100px; line-height: 100px; } .dabody { height: 2000px; background-color: #666666; } .cgotop { position: relative; right: 0px; top: 0px; background-color: deepskyblue; height: 60px; width: 60px; line-height: 60px; } .hide { display: none; } </style> </head> <body> <div class="dabody"> <div id='s1' style="height: 500px;background-color: #ff6f06;position:relative;overflow: auto;"> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <p>spring</p> <a class="cgotop" onclick="huiding();">回顶</a> </div> <div> <a id='m1' class="gotop" onclick="GoTop();">返回顶部</a> </div> </div> <script src="jquery-3.2.0.js"></script> <script> window.onscroll = function () { var curscroll = $(window).scrollTop(); if(curscroll<100){ $("#m1").addClass('hide'); }else{ $("#m1").removeClass('hide'); } }; function GoTop() { $(window).scrollTop(0); } function huiding() { $("#s1").scrollTop(0); } </script> </body> </html>
3.2.展示结果
下拉：
二、事件相关
1.1.jquery事件的处理选项
<body> <div> <ul> <li>いち</li> <li>に</li> <li>さん</li> <li>よ</li> <li>ろく</li> </ul> </div> <script src="jquery-3.2.0.js"></script> <script> $('li').click(function () { var Cont = $(this).text(); alert(Cont); }) </script>
点击li标签，弹出内容：
1.2.另外一种绑定方式
$('li').bind('click',function () {
var Cont = $(this).text();
alert(Cont);
});
解绑：
$('li:last').unbind('click');
2.当前文档准备就绪执行
<script src="jquery-3.2.0.js"></script> <script> //当前文档准备就绪 // $(document).ready(function () { // $('li').click(function () { // var Cont = $(this).text(); // alert(Cont); // }) // }) //当前文档准备就绪方法二 $(function () { $('li').click(function () { var Cont = $(this).text(); alert(Cont); }) }) </script>
3.增加一个li并且点击的时候，弹出内容
<input type="button" value="添加" onclick="Addli();"/> function Addli() { $('ul').append('<li>しち</li>') $('li:last').click(function () { var Cont = $(this).text(); alert(Cont); }); };
点击添加：
点击しち:
4.事件委托
function Addli() { $('ul').append('<li>しち</li>') }; $('ul').delegate('li','click',function () { var Cont = $(this).text(); alert(Cont); })
4.1.运行结果
点击添加：
点击しち:
说明：第三和第四绑定事件的区别，第三是直接将事件全部绑定，第四是在触发的时候才绑定，第四效率高。
5.事件之总结
一、文档准备完毕执行
$(document).ready(function(){
})
$(function(){
})
二、事件绑定
$(xx).click(function(){
});
$(xx).bind('click',function(){
})
$(xx).unbind(''click');
三、事件委托
$('ul').deleagte('li','click',function(){})
undelegate
三、jquery之拖动面板示例
1.示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MV</title> <style> .whole{ height: 300px;width:400px;border: solid 1px crimson;position: absolute; } .toflow{ width: 400px;height: 40px;background-color: #303a40;line-height: 40px;color: whitesmoke;text-align: center; } </style> </head> <body> <div class="whole"> <div class="toflow" id="title"> 点此处拖动 </div> <div style="background-color: #d8cdcd;height:260px;text-align: center;top:100px;"> 峨眉山月半轮秋<br/> 影入平羌江水流<br/> 夜发清溪向三峡<br/> 思君不见下渝州<br/> </div> </div> <script src="jquery-3.2.0.js"></script> <script> $(function () { //鼠标移上去 $('#title').mouseover(function () { //标题修改样式 $(this).css('cursor','move') //当鼠标点击 }).mousedown(function (e) { 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).bind('mousemove',function (e) { //获取最新的鼠标位置 var _new_evnet = e || window.event; var new_x = _new_evnet.clientX; var new_y = _new_evnet.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).unbind('mousemove'); }) }) </script> </body> </html>
四、ajax
1.本域操作示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Aone</title> </head> <body> <input id="n1" name="ckl"/> <input type="button" value="提交" onclick="SubmitData();"/> <form action="" method="post"> <p> <input type="text" name="user"/> </p> <p> <input type="password" name="pwd" /> </p> <input type="submit"/> </form> <script src="jquery-3.2.0.js"></script> <script> function SubmitData() { //获取值 var inpVal = $('#n1').val(); var inpName = $('#n1').attr('name'); $.ajax({ //发送的URL url:"http://127.0.0.1:8000/index/", //发送的数据 data:"{'kk':123,'inpName':'inpVal'}", //发送的类型 type:'POST', success:function (arg) { //当请求执行完毕后自动调用 //arg服务器返回的数据 }, error:function () { //当错误之后自动调用 } }) } </script> </body> </html>
2.跨域示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>KuaYU</title> </head> <body> <input type="button" value="获取节目" onclick="GetTv();"/> <script src="jquery-3.2.0.js"></script> <script> function GetTv() { $.ajax({ url:"http://www.jxntv.cn/data/jmd-jxtv2.html", data:"{}", type:'GET', dataType:'jsonp', jsonp:'callback', jsonCallback:'list', success:function (arg) { //当请求执行完毕后自动调用 //arg服务器返回的数据 console.log(arg); }, error:function () { //当错误之后自动调用 } }); } </script> </body> </html>
组件相关：http://v3.bootcss.com
图标相关：http://fontawesome.io
图标轮播：http://bxslider.com/
组件及效果：http://jqueryui.com/
布局及后台管理：http://www.jeasyui.com
