day14之jQuery
1、jQuery是什么呢？
他是对JS进行了封装，成了一个类库，就类似于python中的类，我们用的时候直接掉类库了就行了非常方便。比如paramiko模块,我们要使用paramiko就得学习里面的方法。
2、jQuery分为的几部分
------查找
----选择器
$(‘nid’)//根据id去找 $(‘.nid’)//按照class查找 $(‘.nid div #nid’)//按照class下的div下的id查找 $(‘.nid,div,#nid’)//按照在class,div和id中查找 $(‘.nid,div,#nid’) $(‘li:eq(0)’)//找到第一个li标签
----筛选器
筛选器（和选择器的区别就是做了过滤）
$(‘li’).eq(0)//先找到方法再找到其第一个
------操作
----css
----属性
attr(都适用，除了checkbox,radio)
prop(适用于checkbox,radio)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input id="c1" type="checkbox"/> 9 <input id="c2" type="checkbox" checked="checked"/> 10 <div> 11 <input type="button" value="全选" onclick="SelectAll();" /> 12 <input type="button" value="取消" onclick="ClearAll();" /> 13 <input type="button" value="反选" onclick="ReverseAll();" /> 14 </div> 15 <div> 16 <table border="1"> 17 <tr> 18 <td><input type="checkbox"/></td> 19 <td>123</td> 20 <td>123</td> 21 </tr> 22 <tr> 23 <td><input type="checkbox"/></td> 24 <td>123</td> 25 <td>123</td> 26 </tr> 27 <tr> 28 <td><input type="checkbox"/></td> 29 <td>123</td> 30 <td>123</td> 31 </tr> 32 <tr> 33 <td><input type="checkbox"/></td> 34 <td>123</td> 35 <td>123</td> 36 </tr> 37 </table> 38 </div> 39 <script src="jquery-2.2.3.js"></script> 40 <script> 41 function SelectAll(){ 42 $('table :checkbox').prop('checked', true); 43 } 44 function ClearAll(){ 45 $('table :checkbox').prop('checked',false); 46 } 47 function ReverseAll(){ 48 $('table :checkbox').each(function(){ 49 var isChecked=$(this).prop('checked'); 50 if(isChecked){ 51 $(this).prop('checked',false); 52 } 53 else{$(this).prop('checked',true);} 54 }); 55 } 56 </script> 57 </body> 58 </html>
显示的效果：
----文档
------事件
----事件
----ajax请求
----json
3、jQuery中的两种循环：
$.each(userList,function(i,item){console.log(i,item);}); $('table:checkbox').each(fuction(){});
4、一些实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .go-top{ 8 position:fixed; 9 right:0; 10 bottom:0; 11 width:100px; 12 height:100px; 13 14 15 } 16 .hide{ 17 display:none; 18 } 19 </style> 20 21 </head> 22 <body> 23 <div style="height:2000px;background-color:#ddddd;"> 24 顶部 25 <div id="id1" style="height:100px;background-color:red;overflow:auto;"> 26 <p>d</p> 27 <p>d</p> 28 <p>d</p> 29 <p>d</p> 30 <p>d</p> 31 <p>d</p> 32 <p>d</p> 33 34 35 </div> 36 </div> 37 <div class="go-top hide"> 38 <a onclick="GoTop();">返回顶部</a> 39 </div> 40 <script src="jquery-2.2.3.js"></script> 41 <script> 42 window.onscroll=function(){ 43 //获取当前scrollTop 44 var currentTop=$(window).scrollTop(); 45 if(currentTop>100){ 46 $('.go-top').removeClass('hide'); 47 }else{ 48 $('.go-top').addClass('hide'); 49 } 50 }; 51 function GoTop(){ 52 $(window).scrollTop(0); 53 } 54 </script> 55 </body> 56 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 body{ 9 margin: 0px; 10 } 11 img { 12 border: 0; 13 } 14 ul{ 15 padding: 0; 16 margin: 0; 17 list-style: none; 18 } 19 .clearfix:after { 20 content: "."; 21 display: block; 22 height: 0; 23 clear: both; 24 visibility: hidden; 25 } 26 27 .wrap{ 28 width: 980px; 29 margin: 0 auto; 30 } 31 32 .pg-header{ 33 background-color: #303a40; 34 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 35 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 36 box-shadow: 0 2px 5px rgba(0,0,0,.2); 37 } 38 .pg-header .logo{ 39 float: left; 40 padding:5px 10px 5px 0px; 41 } 42 .pg-header .logo img{ 43 vertical-align: middle; 44 width: 110px; 45 height: 40px; 46 47 } 48 .pg-header .nav{ 49 line-height: 50px; 50 } 51 .pg-header .nav ul li{ 52 float: left; 53 } 54 .pg-header .nav ul li a{ 55 display: block; 56 color: #ccc; 57 padding: 0 20px; 58 text-decoration: none; 59 font-size: 14px; 60 } 61 .pg-header .nav ul li a:hover{ 62 color: #fff; 63 background-color: #425a66; 64 } 65 .pg-body{ 66 67 } 68 .pg-body .catalog{ 69 position: absolute; 70 top:60px; 71 width: 200px; 72 background-color: #fafafa; 73 bottom: 0px; 74 } 75 .pg-body .catalog.fixed{ 76 position: fixed; 77 top:10px; 78 } 79 80 .pg-body .catalog .catalog-item.active{ 81 color: #fff; 82 background-color: #425a66; 83 } 84 85 .pg-body .content{ 86 position: absolute; 87 top:60px; 88 width: 700px; 89 margin-left: 210px; 90 background-color: #fafafa; 91 overflow: auto; 92 } 93 .pg-body .content .section{ 94 height: 500px; 95 } 96 </style> 97 </head> 98 <body> 99 100 <div class="pg-header"> 101 <div class="wrap clearfix"> 102 <div class="logo"> 103 <a href="#"> 104 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> 105 </a> 106 </div> 107 <div class="nav"> 108 <ul> 109 <li> 110 <a href="#">首页</a> 111 </li> 112 <li> 113 <a href="#">功能一</a> 114 </li> 115 <li> 116 <a href="#">功能二</a> 117 </li> 118 </ul> 119 </div> 120 121 </div> 122 </div> 123 <div class="pg-body"> 124 <div class="wrap"> 125 <div class="catalog"> 126 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 127 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 128 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 129 </div> 130 <div class="content"> 131 132 <div menu="function1" class="section"> 133 <h1>第一章</h1> 134 </div> 135 <div menu="function2" class="section"> 136 <h1>第二章</h1> 137 </div> 138 <div menu="function3" class="section"> 139 <h1>第三章</h1> 140 </div> 141 </div> 142 </div> 143 </div> 144 145 <script type="text/javascript" src="jquery-2.2.3.js"></script> 146 <script type="text/javascript"> 147 148 window.onscroll = function(){ 149 var ws = $(window).scrollTop(); 150 151 if(ws > 50){ 152 $('.catalog').addClass('fixed'); 153 }else{ 154 $('.catalog').removeClass('fixed'); 155 } 156 157 $('.content').children().each(function(){ 158 var offs = $(this).offset(); 159 var offTop = offs.top; 160 // 当前标签离顶部高度 < 滚动条高度 161 // 当前标签离顶部高度+ 当前标签的高度 > 滚动条高度 162 var total = offTop + $(this).height(); 163 if(ws>offTop && total > ws){ 164 if($(window).scrollTop()+$(window).height() == $(document).height()){ 165 $(".catalog").children(':last').css("fontSize", '48px').siblings().css('fontSize', '12px'); 166 }else{ 167 var t = $(this).attr('menu'); 168 var target = 'div[auto-to="' + t +'"]'; 169 $('.catalog').children(target).css("fontSize", '48px').siblings().css('fontSize', '12px'); 170 return; 171 } 172 173 } 174 }); 175 }; 176 </script> 177 </body> 178 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> 9 <div id="title" style="background-color: black;height: 40px;color: white;"> 10 标题 11 </div> 12 <div style="height: 300px;"> 13 内容 14 </div> 15 </div> 16 <script type="text/javascript" src="jquery-2.2.3.js"></script> 17 <script> 18 $(function(){ 19 // 页面加载完成之后自动执行 20 $('#title').mouseover(function(){ 21 $(this).css('cursor','move'); 22 }).mousedown(function(e){ 23 //console.log($(this).offset()); 24 var _event = e || window.event; 25 // 原始鼠标横纵坐标位置 26 var ord_x = _event.clientX; 27 var ord_y = _event.clientY; 28 29 var parent_left = $(this).parent().offset().left; 30 var parent_top = $(this).parent().offset().top; 31 32 $(this).bind('mousemove', function(e){ 33 var _new_event = e || window.event; 34 var new_x = _new_event.clientX; 35 var new_y = _new_event.clientY; 36 37 var x = parent_left + (new_x - ord_x); 38 var y = parent_top + (new_y - ord_y); 39 40 $(this).parent().css('left',x+'px'); 41 $(this).parent().css('top',y+'px'); 42 43 }) 44 }).mouseup(function(){ 45 $(this).unbind('mousemove'); 46 }); 47 }) 48 49 50 </script> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <link rel="stylesheet" type="text/css" href="common.css" /> 6 <script type="text/javascript" src='jquery-1.8.2.js'></script> 7 <style> 8 .hide{ 9 display: none; 10 } 11 12 .container{ 13 width:300px; 14 height: 600px; 15 background-color: #ddd; 16 border: 1px solid #999; 17 } 18 19 .container .title{ 20 height: 38px; 21 font-size: 28px; 22 line-height: 38px; 23 background-color: orange; 24 cursor: pointer; 25 } 26 27 .container .body{ 28 background-color:white; 29 } 30 31 .container .body a{ 32 display:block; 33 padding: 10px; 34 } 35 </style> 36 </head> 37 <body> 38 <div class='container'> 39 <div> 40 <div class='title'>Menu1</div> 41 <div class='body'> 42 <a href="">content1</a> 43 <a href="">content2</a> 44 <a href="">content3</a> 45 </div> 46 </div> 47 48 <div> 49 <div class='title'>Menu1</div> 50 <div class='body hide'> 51 <a href="">content1</a> 52 <a href="">content2</a> 53 <a href="">content3</a> 54 </div> 55 </div> 56 57 <div> 58 <div class='title'>Menu1</div> 59 <div class='body hide'> 60 <a href="">content1</a> 61 <a href="">content2</a> 62 <a href="">content3</a> 63 </div> 64 </div> 65 66 <div> 67 <div class='title'>Menu1</div> 68 <div class='body hide'> 69 <a href="">content1</a> 70 <a href="">content2</a> 71 <a href="">content3</a> 72 </div> 73 </div> 74 75 <div> 76 <div class='title'>Menu1</div> 77 <div class='body hide'> 78 <a href="">content1</a> 79 <a href="">content2</a> 80 <a href="">content3</a> 81 </div> 82 </div> 83 84 </div> 85 86 <script type="text/javascript"> 87 $(function(){ 88 $('.title').click(function(){ 89 $(this).parent().siblings().children('.body').addClass('hide'); 90 $(this).next().removeClass('hide'); 91 }); 92 }); 93 </script> 94 </body> 95 </html> 96 97 实例：左侧菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" onclick="AjaxRequest()" value="跨域Ajax" /> 9 10 11 <div id="container"></div> 12 13 <script src="jquery-1.8.2.min.js" type="text/javascript"></script> 14 <script type="text/javascript"> 15 function AjaxRequest() { 16 $.ajax({ 17 url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403', 18 type: 'GET', 19 dataType: 'jsonp', 20 jsonp: 'callback', 21 jsonpCallback: 'list', 22 success: function (data) { 23 $.each(data.data,function(i){ 24 var item = data.data[i]; 25 var str = "<p>"+ item.week +"</p>"; 26 $('#container').append(str); 27 $.each(item.list,function(j){ 28 var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>"; 29 $('#container').append(temp); 30 }); 31 $('#container').append("<hr/>"); 32 }) 33 34 } 35 }); 36 } 37 </script> 38 </body> 39 </html> 40 41 实例：Ajax跨域
jQuery之Ajax请求总结：
AJAX
1、 jQuery,XMLHttpRequest
2、 $.ajax({})
$.get $.ajax({‘Type’:”get”})
$.post
3、 本域：
请求 ， 直接返回
跨域：
请求，指定函数名，jsonp
返回，函数名（数据）
