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>

实例1

显示的效果：

----文档

------事件

　　 ----事件

　　　----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跨域

实例：Ajax跨域

jQuery之Ajax请求总结：

AJAX

1、 jQuery,XMLHttpRequest

2、 $.ajax({})

$.get      $.ajax({‘Type’:”get”})
$.post

3、 本域：

请求， 直接返回

跨域：

请求，指定函数名，jsonp

返回，函数名（数据）

posted @ 2016-05-07 21:31 Peony_Y 阅读(165) 评论(0) 编辑收藏举报

刷新页面返回顶部

Peony_Y

day14之jQuery

公告