Jquery 简介
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
利用jquer来操作的目的有两个：
1、获取标签
2、来对标签的内容做修改
基本：
1 <body>
2 <div id="n1"> python</div>
3
4 <script src='xxxx.js'></script>
5 <script>
6 //$ 等于jQuery,是封装的一个对象，可以直接 . 来调用
7 $('#n1').text('hello,python')
8 </script>
9 </body>
并列选择
1 $('.c1 , a , #n2').text('ok') #将会遍历到这三个对应的标签，然后text输出
层级选择器
1 <script>
2
3 $('#n3 div .c3 span a').text('kkkk') #层级选择，中间以空格分开
4
5 #('#n3 a').text('kkkk') #如果下面只有一个按标签，这样这么简写，因为n3是包含下面所有内容的，这样写不高效，不如直接定义一个 id，或class
6 </script>
层级：
1 $("form input") //找form下面所有的input后代
2
3 $("form > input") //只找儿子辈的input标签
4
5 $("label + input") //只找label标签后面紧跟着input的标签
6
7 $("form ~ input") //找与form同辈的input标签
this
分别点击1，2，3，4 会显示其作用的行
下面对this封装一下
这里还有一个$(this).attr('user') ,两者的区别是data有缓存，访问的次数多了之后能快一些
再点击就会显示其值
菜单目录小练习：
结果：
实现点击其中之一其他隐藏，
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .menu{
8 float:left;
9 width:20%;
10 background: pink;
11 height: 500px;
12
13 }
14 .zhuti{
15 float:left;
16 width:80%;
17 background: blue;
18 height: 500px;
19 }
20 .hide{
21 display:none
22 }
23 </style>
24 </head>
25 <body>
26
27 <div>
28 <div class="menu">
29 <div class="item">
30 <div class="title" onclick="diandian(this)">菜单一</div> //this,代表当前行。$(this).text() 显示"菜单一"
31 <div class="body hide">
32 <div>1.1</div>
33 <div>1.2</div>
34 <div>1.3</div>
35 </div>
36
37 </div>
38 <div class="item">
39 <div class="title" onclick="diandian(this)">菜单二</div>
40 <div class="body hide">
41 <div>2.1</div>
42 <div>2.2</div>
43 <div>2.3</div>
44 </div>
45
46 </div>
47 <div class="item">
48 <div class="title" onclick="diandian(this)">菜单三</div>
49 <div class="body hide">
50 <div>3.1</div>
51 <div>3.2</div>
52 <div>3.3</div>
53 </div>
54
55 </div>
56 </div>
57
58
59 <div class="zhuti">猪蹄</div>
60 </div>
61
62 <script src="jquery.min.js"></script>
63 <script>
64 function diandian(ths){
65 $(ths).next().removeClass('hide')
66 $(ths).parent().siblings().find('.body').addClass('hide')
67 }
68 </script>
69 </body>
70 </html>
标题栏小练习:
结果：
点击标题栏，下面的内容随之变化
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .tab-box .caidan{
8 background: #dddddd;
9 border:1px solid #dddddd;
10 }
11 .tab-box .neirong{
12 border:1px solid #dddddd;
13 }
14 .hide{
15 display: none;
16 }
17 .current{
18 background-color: red;
19 color: white;
20 }
21
22 </style>
23 </head>
24 <body>
25
26 <div class="tab-box">
27 <div class="caidan">
28 <a python="c1" onclick="changetab(this)">菜单一</a>
29 <a python="c2" onclick="changetab(this)">菜单二</a>
30 <a python="c3" onclick="changetab(this)">菜单三</a>
31 </div>
32
33 <div class="neirong">
34 <div id="c1" class="hide">内容一</div>
35 <div id="c2" class="hide">内容二</div>
36 <div id="c3" class="hide">内容三</div>
37 </div>
38
39 </div>
40
41 <script src="jquery.min.js"></script>
42 <script>
43
44 function changetab(ths) {
45 $(ths).addClass('current').siblings().removeClass('current')
46
47 var contentID = $(ths).attr('python')
48 temp = '#' + contentID
49 $(temp).removeClass('hide').siblings().addClass('hide')
50 }
51 </script>
52 </body>
53 </html>
多选框小练习：
结果：
点击全选或者取消，实现全选或者不全选
实现的逻辑：主要用到了prop属性，这个是专门针对checkbox、rediobox来使用的，其他的用attr即可实现。
prop可填入两个参数，如果填入一个，则是获取这个元素的属性值，填入两个就是给这个元素赋值
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <div>
10 <input type="button" value="全选" onclick="SelectAll()"/>
11 <input type="button" value="取消" onclick="ClearAll()" />
12
13 </div>
14
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 </table>
33
34 </div>
35 <script src="jquery.min.js"></script>
36 <script>
37 function SelectAll(){
38 //$('table input[type="checkbox"]').prop('checked',true)
39 $('table :checkbox').prop('checked',true)
40 }
41 function ClearAll() {
42 $('table :checkbox').prop('checked',false)
43 }
44 </script>
45 </body>
46 </html>
多选框取反小练习
结果：
技术点：这里面用到了jquery中的each,他是封装的js中的 for( var i in XXX) 和for(i=1,i<100,i++)这两种循环的方式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <div>
10 <input type="button" value="全选" onclick="SelectAll()"/>
11 <input type="button" value="取消" onclick="ClearAll()" />
12 <input type="button" value="取反" onclick="reverseAll()" />
13
14 </div>
15
16 <div>
17 <table border="1">
18 <tr>
19 <td><input type="checkbox"/></td>
20 <td>123</td>
21 <td>123</td>
22 </tr>
23 <tr>
24 <td><input type="checkbox"/></td>
25 <td>123</td>
26 <td>123</td>
27 </tr>
28 <tr>
29 <td><input type="checkbox"/></td>
30 <td>123</td>
31 <td>123</td>
32 </tr>
33 </table>
34
35 </div>
36 <script src="jquery.min.js"></script>
37 <script>
38 function SelectAll(){
39 //$('table input[type="checkbox"]').prop('checked',true)
40 $('table :checkbox').prop('checked',true)
41 }
42 function ClearAll() {
43 $('table :checkbox').prop('checked',false)
44 }
45 function reverseAll() {
46 $('table :checkbox').each(function () {
47 var ischecked = $(this).prop('checked')
48 if(ischecked){
49 $(this).prop('checked',false)
50 }else{
51 $(this).prop('checked',true)
52 }
53 })
54
55 }
56 </script>
57 </body>
58 </html>
Jquery 之for循环
for循环的两种方式：
1 var numlist = [11,22,33,44]
2 $.each(numlist,function (i,item) {
3 console.log(i,item) //i,下标 item，值
4 })
5
6
7
8 $('table :checkbox').each(function () { //现获取到元素列表，再循环
9 var ischecked = $(this).prop('checked')
10 if(ischecked){
11 $(this).prop('checked',false)
12 }else{
13 $(this).prop('checked',true)
14 }
15 })
返回顶部实例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .go-top{
8 position:fixed;
9 right:0;
10 bottom:0;
11 }
12 .hide{
13 display:none;
14 }
15 </style>
16 </head>
17 <body>
18 <div style="height: 2000px;background-color: #dddddd">
19 XXXX
20
21 <div id="id1" style="height: 100px;background-color:blue;overflow:auto"> //overflow:auto 显示在一个框内，通过下拉框来控制
22 <p>xxx</p>
23 <p>xxx</p>
24 <p>xxx</p>
25 <p>xxx</p>
26 <p>xxx</p>
27 <p>xxx</p>
28 <p>xxx</p>
29 <p>xxx</p>
30 <p>xxx</p>
31 <p>xxx</p>
32 <p>xxx</p>
33 </div>
34 </div>
35
36 <div class="go-top hide">
37 <a onclick="GoTop()">返回顶部</a>
38 </div>
39 <script src="jquery.min.js"></script>
40 <script>
41
42 window.onscroll = function(){ //控制鼠标的滑动事件，滑动超过100后才显示返回顶部按钮
43 var currentTop = $(window).scrollTop();
44 if(currentTop >100){
45 $('.go-top').removeClass('hide')
46 }else{
47 $('.go-top').addClass('hide')
48 }
49 }
50
51 function GoTop(){ //返回顶部事件
52 $(window).scrollTop(0)
53 }
54 </script>
55
56 </body>
57 </html>
滚动菜单
实现效果：
每出现对应的章节，菜单栏就会变大
原理：页面向下拉的过程就如同拉窗帘一样，我们可以通过，下拉了多少(a)与每块的div到顶部的高度(b)和每块div底部到顶部的高度(c)来判断，如 c>a>b 就要找到这个div对应的章节，使其做显示。
代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .caidan{
8 float:left;
9 width:15%;
10 height: 800px;
11 }
12 .neirong{
13 float: left;
14 width:80%;
15 }
16 .nrgao{
17 height:800px;
18 background-color:#dddddd;
19 }
20 .zicaidan{
21 width:90px;
22 height:130px;
23 background: #b4dbed;
24 }
25 .fixed{
26 position:fixed;
27 }
28 </style>
29 </head>
30 <body>
31
32 <div>
33 <div class="caidan ">
34 <div class="zicaidan fixed">
35 <div auto-to="function1">第一章</div>
36 <div auto-to="function2">第二章</div>
37 <div auto-to="function3">第三章</div>
38 </div>
39 </div>
40 <div class="neirong">
41 <div class="nrgao" menu="function1">第一章内容</div>
42 <div class="nrgao" menu="function2">第二章内容</div>
43 <div class="nrgao" menu="function3">第三章内容</div>
44 </div>
45 </div>
46
47 <script src="jquery.min.js"></script>
48 <script>
49 window.onscroll = function(){
50 var ws = $(window).scrollTop()
51 $('.neirong').children().each(function () {
52 var offs = $(this).offset();
53 var offtop = offs.top;
54
55 var tatal = offtop + $(this).height();
56
57 if(ws > offtop && ws < tatal) {
58 //div小的时候，最后一块显示不出来，需要判断试下是否到底部了，如果是，直接就显示最后一个
59 // 滑动的长度 窗口的大小 整个文档的大小
60 if ($(window).scrollTop() + $(window).height() == $(document).height()) {
61 $('.zicaidan').children(':last').css("fontSize", '28px').siblings().css("fontSize", '12px');
62 } else {
63 var t = $(this).attr('menu')
64 var target = 'div[auto-to="' + t + '"]'
65 $('.zicaidan').children(target).css("fontSize", '28px').siblings().css("fontSize", '12px');
66
67 }
68 }
69 })
70
71 }
72 </script>
73
74 </body>
75 </html>
Jquery之事件
一、
$(document).ready(function(){
})
$(function(){
})
这两种写法都是一样的，都是页面加载完成做的事件
二、
$(XXX).click(function(){})
$(XXX).bind('click',function(){})
这两种是一样的，只不过下面的这一种再click可以变成不同的时间。
有绑定事件，当然也有解绑事件，unbind
三、
$('ul').deleagte('li','click',function(){})
这种是当需要到的时候才会去绑定事件，用法就是，当通过bind绑定事件，如果再添加的新的标签，其新的标签不会生效，而使用这种方法可以使新添加的标签也能够生效。
Jquery实例：拖动面板
效果：
鼠标点击标题栏，然后就可以拖动到任意位置。
原理：记录一下当前这个大的div到左和上的距离，然后计算鼠标滑动前的距离，然后再计算鼠标滑动后的距离，然后有滑动后的距离，减去滑动前的距离，再给div加上就是他的新位置。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <div style="border:1px solid #ddd; width:600px; position:absolute;">
10 <div id="title" style="background-color:cadetblue;height:40px;color:white;">标题</div>
11 <div style="height:300px;">内容</div>
12 </div>
13
14
15 <script src="jquery.min.js"></script>
16 <script>
17 $(function(){
18 $('#title').mouseover(function(){
19 $(this).css('cursor','move')
20
21
22 }).mousedown(function (e) {
23 var _event = e || window.event;
24
25 var ord_x = _event.clientX
26 var ord_y = _event.clientY
27
28 var parent_left = $(this).parent().offset().left;
29 var parent_top = $(this).parent().offset().top;
30
31 $(this).bind('mousemove',function (e) {
32 var _new_event = e || window.event
33 var new_x = _new_event.clientX
34 var new_y = _new_event.clientY
35
36 var x = parent_left + (new_x - ord_x)
37 var y = parent_top + (new_y - ord_y)
38
39 $(this).parent().css('left',x+'px')
40 $(this).parent().css('top',y+'px')
41 })
42 }).mouseup(function(){
43 $(this).unbind('mousemove')
44 })
45 })
46 </script>
47 </body>
48 </html>
Jquery 之 ajax
页面获取数据的结构
原始ajax请求代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <div>
10 <input type="button" value="获取节目" onclick="submitData();" />
11 <div id="container"></div>
12 </div>
13
14
15 <script src="jquery.min.js"></script>
16 <script>
17 function submitData (){
18 $.ajax({
19 url:'http://www.jxntv.cn/data/jmd-jxtv2.html',
20 data:{},
21 type:'GET',
22 dataType:'jsonp', //解决跨域的问题
23 jsonp:'callback',
24 jsonpCallback:'list',
25 success:function(arg){
26 console.log(arg)
27 var jsonpArray = arg.data;
28 $.each(jsonpArray,function(k,v){
29 var wwk = v.week;
30 var temp = "<h1>" + wwk + "</h1>"
31 $('#container').append(temp);
32 var listArray = v.list
33 $.each(listArray,function (kk,yy) {
34 var link = yy.link
35 var name = yy.name
36 var tempNew = "<a href='" + link +"'>" + name+ "</a></br>"
37 $('#container').append(tempNew)
38 })
39
40 })
41 }
42
43 })
44 }
45 </script>
46 </body>
47 </html>
来源：https://www.cnblogs.com/nopnog/p/7232653.html