jquery的中文介绍文档:http://www.php100.com/manual/jquery/
jQuery之基本选择器
jQuery中提供的用于获取标签的方法都有哪些?
jQuery提供的 "选择器" 和 "筛选器" 两大分类都是用于获取标签的方法.
选择器获得的是结果集,筛选器是从结果集里跳出来指定条件的 很好理解
筛选器: 过滤 查找 串联
最基本的选择器(3种):
$("#id").text('123'); #id 选择器,找到1个对象
$("a").text('2222'); # 标签选择器,找到对象集合,并且内部循环将这些对象的字符串值设置成222
$(".c1").text('3333') # class选择器,找到 对象集合,并且内部循环将这些对象的字符串值设置成333
上面3中选择器是jQuery中最基本的选择器,一定要会.
还有要会组合使用它们,如:
$("#n3 div .c4 span").text('4444') # 找到id为n3标签下的div标签下的class为c4下的span标签的字符串值设置成4444
一次查找多个类型的选择器时用逗号隔开,如下:
$("div，a，.c4").text('555') 查找所有div,所有a标签以及所有calssname为c4的标签,并把它们的字符串值设置成555
接下来看看一些其他选择器:不要求记住,但是你要知道,当碰到某些场景,你能想起来哪种类型的,能够查到即可.
比较重要的:
属性选择器类:
筛选器以下几种必须要会:
children() 目标标签的儿子们
find() 找到的结果集中find
next() 目标标签的下一个兄弟标签
nextAll() 目标标签的下面的所有兄弟标签
parent() 目标标签的父标签
prev() 目标标签的上一个标签
prevall() 目标标签的上面所有的兄弟标签
siblings() 目标标签的所有兄弟标签
这些筛选器里的方法只要记住,能完成99.99%的工作
属性大类:
jQuery中属性大类中,根据对html中的内容处理又分为3类: 属性操作类,css操作类,html操作类
属性操作类:
attr
对于attr,标签中的所有属性都适用,除了checkbox和radio
对于checkbox,虽然属性attr可以操作它 ,但是当你第一次操作的时候可以加上去,第二次就加不上去了.
鉴于attr操作input里的checkbox和radio中的checked属性时,第一次能操作,而第二次以后就不能操作的情况,所以jQuery中就出现了一种专门用于操作checkbox和radio标签的checked属性的方法prop()
prop
专门用来搞checkbox和radio的,当然也可以搞其他属性,同时他搞checkbox的写法也不一样,如下:
使用attr时,设置属性的值的写法:
$('#c1').attr('checked','checked')
使用prop设置属性值的写法如下:
$('#c1').prop('checked',true) //选中
$('#c1').prop('checked',false) //不选中
对于checkbox的属性运用,我们用选择常用的三个快捷键"全选 取消 反选"
实例代码如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>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="f1();"/>
12 <input type="button" value="取消" onclick="f2();"/>
13 <input type="button" value="反选" onclick="f3();"/>
14
15 </div>
16 <div>
17 <table border="1">
18 <tr>
19 <td><input type="checkbox"></td>
20 <td>123</td>
21 </tr>
22 <tr>
23 <td><input type="checkbox"></td>
24 <td>123</td>
25 </tr>
26 <tr>
27 <td><input type="checkbox"></td>
28 <td>123</td>
29 </tr>
30 <tr>
31 <td><input type="checkbox"></td>
32 <td>123</td>
33 </tr>
34 </table>
35 </div>
36 <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
37 <script>
38 function f1(){
39 //table标签中的所有input
40 //$('table input[type="checkbox"]')
41 //这是普通写法,对于查找input标签下不同类型的标签,jQuery中提供了简单的方法
42 //$('table :checkbox') 选中之后,dom中会 我们需要循环,而在使用jquery内部循环,不用我们写循环了,是不是很方便
43 $('table :checkbox').prop('checked',true)
44 }
45 function f2(){
46 //table标签中的所有input
47 //$('table input[type="checkbox"]')
48 //这是普通写法,对于查找input标签下不同类型的标签,jQuery中提供了简单的方法
49 //$('table :checkbox') 选中之后,dom中会 我们需要循环,而在使用jquery内部循环,不用我们写循环了,是不是很方便
50 $('table :checkbox').prop('checked',false)
51 }
52 /* 反选,我们这里要用到3个高级点的知识
53 1.运用到js函数的自执行函数
54 2.变量this
55 3.用each()函数来循环
56
57 */
58 // 反选函数代码如下:
59 function f3(){
60 //首先找到所有的checkbox标签,然后调用each函数,echo函数里是一个自执行函数
61 $('table :checkbox').each(function(){
62 // 获得到的checkbox循环执行函数
63 // 获取当前执行函数的标签的checked属性的值
64 var isChecked = $(this).prop('checked');
65
66 //判断当前执行标签的值,如果为true改为false,如果为false,则改为true
67 if (isChecked){
68 $(this).prop('checked',false);
69 } else{
70 $(this).prop('checked',true);
71 }
72
73 })
74 }
75 </script>
76 </body>
77 </html>
View Cod each()循环函数的使用
实例代码中,我们使用了each函数,这里要告诉的你的是,each的功能经常会用到.
并且,each的除了上面这样循环执行函数,还有一个很常用的功能.循环列表的中下标和元素
比如:
1 var userList = [11,22,33,44];
2 $.each(userList,funchtion(item){
3 });
4 //这里 each将 userList作为循环的集合,后面functhion(item)中的item是前面userList中的元素,这和之前我们的for循环不一样.
5 我们知道for循环,只是循环下标.如:
6 for (var i in userList){
7 console.log(i,userList[i]);
8 }
9 而 通过each可以直接获取元素,而且也可以获取下标
10 $.each(userList,function(i,item){
11 console.log(i,item); //i,item分别表示下标和元素
12 });
13 我们会想如果 each循环的是字典也就是userList为字典时会是什么情况,当循环字典时i为key,item为value
总结:
1.each循环可以循环下标和元素(如果是字典可以循环key和value)
2. each有两种使用方法:
一种是直接$.each(),然后把要循环的集合传入作为参数如:$.each(userList,func(i,item){});
另外一种是前面是一个选择器,直接 "选择器.each(function(){});"
3. 这两种使用方式分别在什么时候使用:
当你有一大堆数据的数组时,用$.each()
当你是通过选择器获取到数组时,直接用 选择器.each()
CSS 类
addClass()
removeClass()
toggleClass()
这里toggleClass()可以稍做说明:
$('#nid').toggleClass('hide')
//实现的功能就是 id为nid的标签如果有hide的class则清除,如果没有则添加.
HTML 操作类
html() 对应的就是html中的 innerHtml
text() 对应的就是html中的 innerText
val() 对应的value
这三个方法都有一个特点
当不加参数的时候,表示获取
当加参数的时候,表示设置值
tab标签之基本实现代码实例:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .tab-box .box-menu{
8 border:1px solid #dddddd;
9
10 }
11 .tab-box .box-body{
12 border:1px solid #dddddd;
13 }
14 .hide {
15 display: none;
16 }
17 /*我们给选中的菜单也定义一个样式*/
18 .current{
19 background-color: red;
20 color: white;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="tab-box">
26 <div class="box-menu">
27 <a mytag="c1" onclick="ChangeTab(this);" class="current">菜单1</a>
28 <a mytag="c2" onclick="ChangeTab(this);">菜单2</a>
29 <a mytag="c3" onclick="ChangeTab(this);">菜单3</a>
30 </div>
31 <div class="box-body">
32 <div id="c1">内容1</div>
33 <div id="c2" class="hide">内容2</div>
34 <div id="c3" class="hide">内容3</div>
35 </div>
36 </div>
37
38
39 <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
40 <script type="text/javascript">
41 function ChangeTab(ths){
42 var contentId = $(ths).attr('mytag');
43 // 在标签处要把点击的标签加上样式,其他标签的样式删除样式.
44 $(ths).addClass('current').siblings().removeClass('current')
45 // $("#id") ,我们要的是字符串,所以要把获得的contentId和#进行字符串拼接
46 var temp = "#" + contentId
47 // 获得关联的内容页面
48 $(temp).removeClass('hide').siblings().addClass('hide')
49 }
50 </script>
51 </body>
52 </html>
View Code
tab标签之美化样式代码示例:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .tab-box .box-menu{
8 border:1px solid #dddddd;
9 background-color: #dddddd;
10 height: 35px;
11 line-height: 35px;
12 }
13 .box-menu a{
14 border-right:1px solid black; /* 给tag标签加一个右边框 */
15 padding: 10px; /* 给a标签加一个内撑的边距 */
16 }
17 .tab-box .box-body{
18 border:1px solid #dddddd;
19 }
20 .hide {
21 display: none;
22 }
23 /*我们给选中的菜单也定义一个样式*/
24 .current{
25 background-color: white;
26 color: black;
27 border-top: 2px solid red;
28 }
29 </style>
30 </head>
31 <body>
32 <div class="tab-box">
33 <div class="box-menu">
34 <a mytag="c1" onclick="ChangeTab(this);" class="current">菜单1</a>
35 <a mytag="c2" onclick="ChangeTab(this);">菜单2</a>
36 <a mytag="c3" onclick="ChangeTab(this);">菜单3</a>
37 </div>
38 <div class="box-body">
39 <div id="c1">内容1</div>
40 <div id="c2" class="hide">内容2</div>
41 <div id="c3" class="hide">内容3</div>
42 </div>
43 </div>
44
45
46 <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
47 <script type="text/javascript">
48 function ChangeTab(ths){
49 var contentId = $(ths).attr('mytag');
50 // 在标签处要把点击的标签加上样式,其他标签的样式删除样式.
51 $(ths).addClass('current').siblings().removeClass('current')
52 // $("#id") ,我们要的是字符串,所以要把获得的contentId和#进行字符串拼接
53 var temp = "#" + contentId
54 // 获得关联的内容页面
55 $(temp).removeClass('hide').siblings().addClass('hide')
56 }
57 </script>
58 </body>
59 </html>
View Code
CSS样式大类:
CSS
css(name|pro|[,val|fn])1.9* (知道就行)
jQuery.cssHooks (看看就行)
位置
offset([coordinates]) (要会)
position() (要会)
scrollTop([val]) (要会) 上下的滚动条
scrollLeft([val]) (要会) 左右的滚动条
尺寸
height([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([soptions])
outerWidth([options])
.css()方法
前面我们学了用属性大类中的css类,可以对css样式进行更改.这个更改的是针对一个标签的样式进行删除或者添加,如:
1 //这是一个样式,样式的名称为.cla
2 .cls{
3 }
4 //那现在如果有一个标签
5 <div id = 'nid' style='color:red'></div>
6 //如果想让上面的标签应用到.cla样式,我们就可以使用属性大类中的addClass方法,如下:
7 $('#nid').addClass('cls')
8 //这样就可以让标签nid,应用上cls样式.标签代码就会变成:
9 //<div id = 'nid' style='color' class='cls'></div>
10
11 而CSS大类就提供了直接改这个标签里的style属性里的值:如
12 //现有一个标签
13 <div id = 'nid' style='color:red'></div>
14 //现在我们就可以使用CSS大类中的.css来把color改成black
15 $('#nid').css('color','black');
16 //如果执行了它之后,就可以将标签改成<div id = 'nid' style='color:black'></div>
17 //这个.css在实际编程中几乎不用,但是你要知道.
位置:
scrollTop
这个是干嘛的?scrollTop是记录滚动条上下滚动了多少.
只要滚动条滚了以下,scrollTop就显示多少值,而滚动值是相对于窗体的.所以,滚动条滚动了多少,其实就是窗体滚动了多少.
1 我们在console中可以获得滚动条滚动的值.
2 $(window).scrollTop()
3 0
4 $(window).scrollTop()
5 675
6 //如果我们想反回到顶部,设置scrollTop(0)就反回到顶部了
7 $(window).scrollTop(0)
一般网站都有反回顶部,而这个反回顶部就是利用scrollTop(0)来做的.
反回顶部之基本实现实例代码:
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; /*使用position让页面固定到右下角*/
9 right: 0;
10 bottom: 0;
11 100px;
12 height: 100px;
13 }
14 /*定义一个onclick事件,只要以点击就执行$(window).scrollTop(0)*/
15 </style>
16 </head>
17 <body>
18 <div style="height: 2000px;</div>
19 <div class="go-top">
20 <!--定义一个onclick事件,只要以点击就执行$(window).scrollTop(0)-->
21 <a onclick="GoTop();">反回顶部</a>
22 </div>
23 <script src="jquery-3.1.0.min.js"></script>
24 <script>
25 //给窗体注册一个滚动条事件
26 //下面的window就是窗体的意思,注册一个什么事件呢?注册一个onscroll事件,
27 window.onscroll = function(){
28 console.log('123')
29 };
30 //上面的语句的意思,就是当给窗口注册一个onscroll事件,当发生滚动条事件就执行等号后面的函数
31 //定义反回顶部的函数
32 function GoTop(){
33 $(window).scrollTop(0);
34 }
35 </script>
36 </body>
37 </html>
View Code
反回顶部的实现很容易就实现了,对于整个窗口它会产生滚动条,那对于一个div能产生滚动条吗?
比如一个div高度500px,如果里面有多行内容,超过500px,默认不加样式就会超出500px,就会跑出来了,正常网页都是如果超过的话会出现滚动条!怎么实现呢?
就是在div标签里的style属性里加一个overflow属性.具体代码如下:
1 <div style="height: 100px; color: red;overflow: auto;">
2 <p>11</p>
3 <p>11</p>
4 <p>11</p>
5 <p>11</p>
6 <p>11</p>
7 <p>11</p>
8 </div>
但是一般网页刚打开时,不应该有反回顶部的按钮,应该在往下滚动一段距离后才会出现.
这里我们思路上有一个难点:以前我们想触发某一个动作,都是在某一个标签中加上一个事件,比如在a标签中加上onclick事件.而我们想让窗体滑动一段距离后显示"反回上级字样",这我们知道滚动条本来就是针对窗体的.
所以问题的难点就是如何给窗口注册一个事件.不用着急,jQuery中还就提供了给窗体注册事件的方法
代码如下:
1 <script>
2 //给窗体注册一个滚动条事件
3 //下面的window就是窗体的意思,注册一个什么事件呢?注册一个onscroll事件,
4 window.onscroll = function(){
5 console.log('123')
6 };
7 //上面的语句的意思,就是当给窗口注册一个onscroll事件,当发生滚动条事件就执行等号后面的函数
8 //定义反回顶部的函数
9 function GoTop(){
10 $(window).scrollTop(0);
11 }
12 </script>
上面的例子只是演示了使用window.onscroll为窗体注册一个事件.
要实现前面所说的如何让"反回顶级"字样按要求显示,具体代码如下:
1 <body>
2 <div style="height: 2000px;</div>
3 <div class="go-top hide">
4 <!--定义一个onclick事件,只要以点击就执行$(window).scrollTop(0)-->
5 <a onclick="GoTop();">反回顶部</a>
6 </div>
7 <script src="jquery-3.1.0.min.js"></script>
8 <script>
9 //给窗体注册一个滚动条事件
10 //下面的window就是窗体的意思,注册一个什么事件呢?注册一个onscroll事件,
11 window.onscroll = function(){
12 //获取当前的scrollTop
13 var currenTop = $(window).scrollTop();
14 if (currenTop>200){
15 $('.go-top').removeClass('hide')
16 } else{
17 $('.go-top').addClass('hide')
18 }
19 };
20 //定义反回顶部的函数
21 function GoTop(){
22 $(window).scrollTop(0);
23 }
24 </script>
25 </body>
上面说了scrollTop,scrollTop和scrollLeft都是记录滚动条的位置的方法.
使用场景:最多的就是在页面上定义反回顶部的按钮.
我们看到在css大类中关于位置的还有两个更重要,更常用的方法:
offset([coordinates]) 距离窗体的x轴距离和y轴距离
position() 距离父标签的x轴距离和y轴距离
尺寸:
height 获取本标签的高度
width 获取本标签的宽度
这两个方法是做什么的呢?
offset方法是记录一个标签距离窗体左上角的x轴距离,和y轴距离.都是正数.
比如在一个窗体中有一个br标签并且带有边框border样式,那么这个边框的左上角那个点相对于整个浏览器窗体左上角那个点有多少距离就是用offset()方法计算祝来的.
position也是计算标签距离的,只是它计算的距离不是算本标签离窗体左上角的距离,而是本标签离它的父标签左上角的x轴距离和y轴距离.应用场景,还没学到
我们现在知道了offset能干什么了,那它的应用场景是什么呢?学习开发语言,难的不是要记住函数能做什么,而是要知道这个函数的在什么场景上使用.
offset的应用场景也非常常见.当我们阅读文章的时候,在窗体的左边是目录,右边是文章内容.我们看到一般的网站都会做右边的内容和左边的目录相对应,比如读到第二章时,左边的目录"第二章"这几个字总会加上样式,突出显示告诉我们现在已经滚动到第二章的内容了.
那么我们应该怎么实现呢?我们来整理下思路:
假设下载有三个div标签,都在窗体里,分别是 div1和div2 和div3
1.我们可以获得div1 和 div2 和div3 分别离窗体左上角的距离.
2.我们也可以获得div1和div2和div3的高度.
3.我们可以获得滚动条滚动了多少值.
那么通过上面的值就可以知道,当div1距离窗体的位置<滚动条的值<(div1距离窗体的位置+div1标签高度)时,我们就给左窗体"第一章"这个div标签加一个css样式,'第一章'的所有兄弟标签都去掉css样式.
当div2距离窗体的位置<滚动条的值<(div2距离窗体的位置+div2标签的高度)时,我们就给左窗体"第二章"这个div标签添加一个css样式,'第二章'的所有兄弟标签都去掉css样式.
对就是什么做,就可以实现了.
4.特殊需求:那么有一个特殊情况需要考虑,就是假设第三章很短,当滚动到第二章中间时,第三章的内容就显示出来了.所以理论上说,左窗体的"第三章"标签字样永远也不会加上样式.这样是不人性化的.
我们应该把整个逻辑写成当整个页面滚动条滑到底部时,就给左边窗体"第三章"标签应用样式.其他兄弟剔除样式.那么这个需求如何实现呢.
我们再来整理一下需求4的思路:
要是需求4最难的是如何判断滑轮到了底部,我们知道scrollTop(0),但是滑轮底部是没头的.只要有内容,就无限往下滑.
既然无法直接通过scrollTop()获得整个窗体高度.那么能通过计算获得呢?
如何计算:
假设我们可以通过某个方法获得窗口的高度.
那么整个文档的高度 是不是 就等于 窗口的高度+滑轮滑动的高度
窗口的高度+滑轮滑动的高度 = 整个文档的高度
获取滚动的高度 = $(window).scrollTop()
获取窗体的高度 = $(window).height()
获取整个文档的高度 = $(document).height()
所以我们代码中就可以使用if语句判断,当:
var temp = $(window).scrollTop() + $(window).height()
var doc_height = $(document).height()
if(temp == doc_height){
//这时候就应该显示左侧窗体的"第三章"标题了
}
最终能满足上面4个功能的代码如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .content{
8
9 }
10 .catalog-item{
11 background-color: red;
12 }
13 </style>
14 </head>
15 <body>
16
17 <div class="catalog" style="position: fixed;top: 0px;left:0px; 20%;border: 1px solid red;height: 500px;">
18 <div auto-to="function1">第一章</div>
19 <div auto-to="function2">第二章</div>
20 <div auto-to="function3">第三章</div>
21 </div>
22 <div class="content" style="float: right; 80%;border: 1px solid green;height: 1800px;">
23 <!--var t = $(this).attr('menu')-->
24 <!--var target = 'div[auto-to="' + t + '"]'-->
25 <!--$(.catalog).children('div[auto-to=""]')-->
26 <div style="height: 1000px;" menu="function1">
27 <p>第一章</p>
28 </div>
29 <div style="height: 500px;" menu="function2">
30 <p>第二章</p>
31
32 </div>
33 <div style="height: 300px;" menu="function3">
34 <p>第三章</p>
35 <p>文本3</p>
36
37 </div>
38 </div>
39 <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
40 <script type="text/javascript">
41 //首先我们给窗体换轮注册一个事件,即一旦滑轮事件发生就执行等号后面的函数内容
42 window.onscroll = function(){
43 // 获取滑轮滚动了多少
44 var ws = $(window).scrollTop(); //获取滑轮的高度
45 // 按照前面的思路,标签的距离左上角窗体的高度<滑轮的高度<离左上角窗体的高度+本标签的高度
46 // 所以我们应该循环文本标签
47 var wh =$(window).height() //获取窗体的高度
48 var dh = $(document).height() //获取整个文本的高度
49 var temp = wh + ws // 窗体+滑轮的高度
50 if (dh == temp){
51 $('.catalog').children().last().addClass('catalog-item').siblings().removeClass('catalog-item');
52 return
53 } else {
54 $('.content').children().each(function () {
55 var offs = $(this).offset(); //获取标签里窗体的距离
56 var offTop = offs.top; //只取高度
57 var total = offTop + $(this).height(); //标签高度 + 标签到窗体顶部的高度
58 if(offTop < ws && ws<total){
59 var t = $(this).attr('menu')
60 var target = 'div[auto-to="' + t + '"]'
61 $('.catalog').children(target).addClass('catalog-item').siblings().removeClass('catalog-item')
62 }
63 });
64 }
65
66 }
67 </script>
68 </body>
69 </html>
View Code
代码很烂,但是能怎样,自己写的,就是这么任性.
总结:
scrollTop 滚动条高度
height 高度
$(window).height() 窗体高度
$(document).height() 文档高度
$('#nid').height() 标签高度
$(window).scrollTop() 窗体左边的滚动条高度
$('#nid').scrollTop() 标签体内滚动条高度
上面 我们把高度相关的内容学了,CSS里面的内容也就学完了.
接下来我们简要述说文档里的东西,文档里的东西用的比较多,但是非常简单.
具体做了哪些事情呢?就是当你找到了一个标签,使用文档里的方法,
可以在这个标签前面加一个其他标签
可以在这个标签后面加一个其他标签
也可以在这个标签里面加一个标签.
在这个标签里面的第一个孩子前面加一个标签
在这个标签里面的最后一个孩子后面加一个标签
当然除了添加新标签的功能以外,还有替换删除等等
方法列表:
文档处理
内部插入
append() 在某一个标签的里面最后面添加内容如<div id = nid>xxx<div> ,$('#nid').append('<a>222</a>')结果:<div id = nid>xxx <a>222</a><div>
appendTo() 把当前标签加入到另一个标签里面的最后面 如: <a id='a1'> 222</a> <div id ='d1'>111</div> ,$('#a1').appendto($('#d1'))结果:<div id ='d1'>111 <a id='a1'> 222</a></div>
prepend() 在某一个标签的里面的最前面添加内容
prependTo() 把当前标签加入到另一个标签里面的最前面
外部插入
after() 在某一个标签的外面的后面加一些内容
before() 在某一个标签的外面的前面加一些内容
insertAfter()
insertBefore()
包裹
wrap()
unwrap()
wrapAll()
wrapinner()
替换
replaceWith()
replaceAll()
删除
empty() 把标签里面的内容清空了 常用
remove() 把这个标签给删了 常用
detach() 这个也是删除,只不过这个删除的时候可以把被删除的标签反回给某一个变量,用用添加到其他的地方.
var ret = $('#nid').detach(); 不常用
复制
clone() 常用
应用场景:当你需要在页面上让用户自主添加一个输入框时要用到clone方法.
我们会想如果不用,我们怎么做,刚开始我的想法是,用 $('#nid')找到要添加的代码,然后付给一个变量a,然后在让另一个变量b等于这个变量a,这样在用(a).beforeTo(b)将b加到a前.
想法不错,但是js不会认为是拷贝,变量a和变量b指的还是同一个标签对象.所以必须用clone方法才行.
var b = a.clone()
b.before(a)
jQuery事件
Dom中之前学过一大堆事件,onclick等等
但最终dom中绑定事件,只有两种方式:
1.标签中绑定事件,执行函数
2.在script块中,写成window.xxx
第一种是对某一个标签定义事件,第二种是全局事件.
我们看第一种,其实不好,特定条件下繁琐.比如
单行编辑,如果有一百行条目,你就要绑定100行的onclick事件.是不是不好?
当然jQuery也发现这个问题了,那么jQuery就创建了一个绑定事件的方式.
如何使用呢,直接看例子:
1 <body>
2 <div>
3 <ul>
4 <li>1</li>
5 <li>2</li>
6 <li>3</li>
7 <li>4</li>
8 <li>5</li>
9 <li>6</li>
10 <li>7</li>
11 </ul>
12 </div>
13 </body>
我们的需求是对上面的所有的li绑定事件,实现点击每一个li,就弹出里面的内容.如果用普通的Dom就必须在每一个li标签里加 onclick事件,但是用jQuery里的事件方法就简单了.
代码实现:
1 <body>
2 <div>
3 <ul>
4 <li>1</li>
5 <li>2</li>
6 <li>3</li>
7 <li>4</li>
8 <li>5</li>
9 <li>6</li>
10 <li>7</li>
11 </ul>
12 </div>
13 <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
14 <script>
15 $('li').click(function(){ //这里找到所有的li标签,然后绑定click事件,一旦click就执行里面的函数.
16 var temp = $(this).text() // 获取text文本内容
17 alert(temp) // alert()
18 });
19 </script>
20 </body>
上面的例子,实现了最基本的jQuery实现绑定,接下来我们要知道一个比基本稍微深点内容的方法.
我们知道html代码在浏览器解释是按照从上到下的顺序.一般我们都是在body体下方写js代码,上面写html代码.
假设在html中有加载大量图片和视频,需要很长时间,或者其他问题导致html代码执行时间很长.那么后面的js代码理论上就需要等待html代码执行完成后在执行.
那么问题来了.加入js中有很多对先前html文档进行改边内容才让整个页面变得美观,最基础的都是很丑的页面.当然实际应用中考虑更多的是后台数据.
是不是在没执行js之前,用户看到的是个很"不美观"的页面.这样的效果很不好.所以我们应该想一种方式避免掉.
因此jQuery中有一种方法,这种方法实现了只要整个html的文档数目录准备就绪了,咱们就执行js.(文档数目录理解成整个docment的框架结构.)
于是我们在使用jQuery书写js代码时,要求首先要加上这个方法,所有的其他js代码都包含在此方法内.
这种实现让js代码在整个文档树目录准备就绪就可以执行js代码的书写方式有两种:
方式一:
$(document).ready(function(){
//其他js代码都在这里书写
});
方式二:
$(function(){
//其他js代码都在这里书写
})
方式二是方式一的简写方式,所以实际开发中,建议使用方式二
接下来,我们在深入下上面的例子.
上面的例子实现了使用jQuery给标签绑定事件,我们设想,当我们打开这个代码的页面后,如果在console中在添加一个<li>8</li>标签,你说这个标签会绑定onclick事件吗?
答案是否定的,那么有没有方法实现绑定呢?有,jQuery中提供了实现的方式,jQuery专业名称叫做"委托",实现理论就是先找到这些li标签的父标签ul,把ul监控起来,当你点击添加的时候就在绑定一次.
具体代码:
1 <body>
2 <input type="button" value="添加一个li8" onclick="Add();">
3 <div>
4 <ul>
5 <li>1</li>
6 <li>2</li>
7 <li>3</li>
8 <li>4</li>
9 <li>5</li>
10 <li>6</li>
11 <li>7</li>
12 </ul>
13 </div>
14 <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
15 <script>
16 function Add(){
17 $('ul').append('<li>8</li>')
18 }
19 // $('li').click(function(){
20 // var temp = $(this).text()
21 // alert(temp)
22 // });
23 // 委托方式绑定事件的实现代码
24 $('ul').delegate('li','click',function(){ //找到ul标签,然后对ul标签下的所有li标签,绑定click事件,第三个参数是执行函数
25 var temp = $(this).text()
26 alert(temp)
27 });
28 </script>
29 </body>
View Code
总结:
jQuery两种绑定标签事件有3种方式,一种是普通的一种是委托.
1. $('li').click(function(){});
2. $('li').bind('click',function(){});
3. $('ul').delegate('li','click',function(){});
方式1和2都不能实现后续添加也绑定的功能,而3可以.
方式1和2用在需要绑定事件的标签是一定量的,不会增加.
方式3是量会变动时使用.
那么有绑定事件,是不是也有删除绑定事件
所以针对2 有unbind方法
针对3 有 undelegate方法,而1没有.
所以使用时建议使用2和3方法
扩展:
这3种方法都是jQuery实现的,jQuery实现的东西都要依赖底层的东西,所以这里jQuery实现的这三种绑定事件的方法都是依赖于 js的on和off,知道就行了
jQuery事件实例:拖动面板
我们经常看到有些网站里的标签可以在页面中随意拖动.
思路:
一般可以移动的标签都是有一个head头和body,
1.当鼠标移动到head头部时,corson变成move标识
2.当鼠标按下时,我们获得鼠标当前的位置.
3. 当鼠标移动时,我们获得移动后的位置
4. 计算出鼠标X轴移动的距离和Y轴移动的距离.我们想鼠标拖动head标签,head头部是不是和鼠标是相对静止的.那么鼠标移动的x轴距离,就是head标签移动的x轴距离,鼠标移动的Y轴距离,就是head标签移动的y轴距离.
5. 整个可以移动的标签窗体,有head和body,我们不能只计算head标签移动的距离,而是要计算head标签的父标签的移动距离,所以我们应该获取head头部标签的父标签的移动前的位置,然后在加上移动的x距离和y距离.
下面一段代码完成了,当鼠标移动到head时,鼠标的标示变成move样式
6. 绑定鼠标动的事件
7. 我们对这个head标签绑定了鼠标移动事件,但是当我们鼠标按键松开了,是不是就不在希望head头部标签在继续绑定鼠标移动事件了.所以这里还要绑定鼠标松开事件,里面执行去除鼠标移动事件
1 <body>
2 <div style="border: 1px solid #ddd; 600px;position: absolute;">
3 <div id="title" style="height: 40px;color: white">
4 标题
5 </div>
6 <div style="height: 300px;">
7 内容
8 </div>
9
10 </div>
11 <script src="jquery-3.1.0.min.js"></script>
12 <script type="text/javascript">
13 $(function(){ //当页面框架加载完成自动执行
14 $('#title').bind('mouseover', function () {
15 $(this).css('cursor','move')
16 });
17 });
18 </script>
19 </body>
我们知道jQuery支持链式编程的.我们看,前面我们绑定了当鼠标移动到head头部时,让鼠标标示编程move的代码.
紧接着我们还想对head头部进行其他的事件绑定,按照我们的一般方法,是不是从新在使用选择器进行选择一遍.这是因为我们选择的内容比较短,所以我们没觉得麻烦,当我们要选择的标签很复杂时,就觉得十分繁琐了.
所以jQuery为了解决这个麻烦,它支持链式编程.就是在绑定一个事件后,紧接着还可以在.bind()绑定其他事件
最终按照上面所有思路完成的代码如下:
1 <body>
2 <div style="border: 1px solid #ddd; 600px;position: absolute;">
3 <div id="title" style="height: 40px;color: white">
4 标题
5 </div>
6 <div style="height: 300px;">
7 内容
8 </div>
9
10 </div>
11 <script src="jquery-3.1.0.min.js"></script>
12 <script type="text/javascript">
13 $(function(){ //当页面框架加载完成自动执行
14 $('#title').bind('mouseover', function () {
15 $(this).css('cursor','move') //这里使用jQuery的链式编程模式
16 }).bind('mousedown',function(e){ // e这个参数是一个特殊参数,e封装了当前事件整个对象,整个事件对象包含了事件相关的所有内容,比如前面如果是一个按键事件,我们就可以获得按下去的键盘是哪一个,这里是按鼠标事件,我们就可以获得鼠标这个对象的所有内容,比如鼠标的位置,那具体还能其他的关于鼠标的内容,暂且理解成所有你能想的到的.
17 var _event = e || window.event; //这一步是重新将e参数赋值给 _event变量,原因是有些浏览器有这个特殊的参数e,又些浏览器没有,那么就用window.event方法.
18 var ord_x = _event.clientX; //获取鼠标的X轴位置
19 var ord_y = _event.clientY; // 获取鼠标的Y轴位置
20
21 var parent_left = $(this).parent().offset().left; //获取移动窗体头部标签的父标签的里整个窗体左边的距离
22 var parent_top = $(this).parent().offset().top; //获取移动窗体头部标签的父标签的里整个窗体上边的距离
23 $(this).bind('mousemove',function(e){
24 var _new_event = e || window.event; //获取移动后的事件对象
25 var new_x = _new_event.clientX; //获取移动后的鼠标的x轴距离
26 var new_y = _new_event.clientY; //获取移动后的鼠标的y轴距离
27
28 var x = parent_left + (new_x - ord_x); //获取移动后head标签的父标签离整个窗体左边的距离
29 var y = parent_top + (new_y - ord_y); //获取移动后head标签的父标签离整个窗体上边的距离
30
31 $(this).parent().css('left',x+'px'); //设置鼠标移动后head标签的父标签的x轴位置
32 $(this).parent().css('top',y+'px'); // 设置鼠标移动后head标签的父标签的 y轴位置
33 }).bind('mouseup',function(){ //绑定鼠标松开事件
34 $(this).unbind('mousemove'); // 当鼠标松开后,就移除鼠标移动事件的绑定
35 });
36 });
37 });
38 </script>
39
40 </body>
View Code
jQuery之 AJAX
AJAX是干嘛的?
之前我们学html的时候,我们在写form表单提交数据时用input的submit,在页面上点击submit按钮的时候,页面出现了刷新?
假设我们对于整个html,我们只想提交一小部分内容,按照传统的form形式,只要一点submit整个页面就重刷了一次.(刷新一次也就意味着重新发送一遍请求,服务器就会多出来30~80个请求.)
这个是没有必要的,如果我们能够实现在页面整体不刷新的状态下,把一个input信息提交到后台,提交完成后页面在更新下,那就完美了.
前面作业,修改多条记录后是否要提交后台,这时就用到了单个提交.
这时候就用到了ajax,ajax是异步的java script 和XML,就是我提交完了数据,整个页面还可以干其他的事情.当那个操作完了还可以回调一下.本质上提交数据可以是XML格式也可以提交json格式.
首先明确点:Ajax不是jQuery的东西,而是java script和Dom的东西,只不过是jQuery把它封装的更加简单更加实用了.如果你要写原生的Ajax,用到的是XmlHttpRequest 一个类,里面提供了ajax方法.
如果用jQuery中的ajax方法就特别简单了.
那么我们如何使用ajax进行提交数据呢?我们先举一个简单的例子:
现在有两个input标签,一个是text类型的,一个是button类型的.实现当我们点击页面上的button按钮时,调用ajax方法提交.所以就需要在button上绑定一个onclick事件
1 <body>
2 <input id="n1" name="pp" type="text" />
3 <input type="button" value="提交" onclick="submitData();">
4
5 <script src="jquery-3.1.0.min.js"></script>
6 <script type="text/javascript">
7 function submitDate(){
8 var inpVal = $('#n1').val()
9 var inpName = $('#n1').attr('name')
10
11 $.ajax({
12 url:"http://127.0.0.1:8000/index/", // 'url' 指定提交的URL
13 data: {inpName:inpVal}, // 要提交的具体数据
14 type:'POST', // 指定提交的方式,相当于form中的mata='POST'
15 success: function(arg){ // 执行完成后要回调,定义回调应该怎样处理,对应的一个函数,自动触发的,
16 //当请求执行完成之后,自动调用
17 // arg 服务器反回的数据
18 },
19 error: function(){ // 如果提交失败,怎样处理
20 //当请求错误之后,自动调用
21 }
22 })
23 }
24 </script>
25
26 </body>
View Code
我们先会想下,哪些页面会用到异步提交的场景,最普通的是注册页面.我们知道当我们在某网站的注册页面填写注册信息时:
1.首先要进行前端的检测 ,判断是不是空值,哪些是必填项
2. 当你前端规则都符合后,这时候最常见的就是检测的注册用户名是不是重复.这时候就用到ajax进行异步提交了,如果重复则提示报错.假如不用异步,如果刷新了一次,我们暂且理解成会把页面重新打开,这样就需要重新填写了.
3. 还会检测你密码和确认密码是否一致,同样也用到了ajax进行异步提交校验.
上面的例子,我们暂时不写代码实现了,因为要涉及到和后台的交互,后面学到Django.
不过有一个例子我们可以举,是关于Django跨域访问的问题!
一个网站很可能去调用其他网站的API,去别人那拿数据.
这时候就两种情况:
一种是本域,这种情况通过ajax 里的success:function(arg){}函数里的arg参数,直接获取服务器反回给请求的结果,如果反回的结果是'OK',那么arg就是'OK'
另外一种是跨域,这种情况,就是不是同一个网站取数据了.那这时api网站反回的就不直接是数据了,它会怎么给我们呢?如果跨域的话就涉及到另外一个东西ajax中的jsonp.
需要发送放在发送它的时候,告诉它我是以jsonp格式发送的.
Ajax跨域 jsonp
客户端:
发送格式,jsonp
函数名list:
服务端:
"OK"
函数名("OK")
也就是说客户端在发送请求的时候,告诉服务端 我发送的数据是jsonp格式的,并且,你在处理好我的请求反回给我结果的时候用 函数名为"list"的函数进行封装结果.
而服务端,收到后请求后,首先知道这个请求发送格式是jsonp也是ajax跨域访问,这个请求的处理结果,要用fun1把结果封装.所以反回的结果如果是'ok',那么我反回给他list('ok')
那么我们举例:
1 <body>
2 <input type="button" value="获取节目" onclick="submitData();">
3 <div class="container"></div>
4 <form action="" method="post">
5 <p><input type="text" name="user"/></p>
6 <p><input type="password" name="pwd"/></p>
7 <input type="submit" />
8 </form>
9 <script src="jquery-3.1.0.min.js"></script>
10 <script type="text/javascript">
11 function submitData(){
12 $.ajax({
13 // url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403", // 'url' 指定提交的URL,可以在浏览器上直接输入此URL查看
14 url:"http://www.jxntv.cn/data/jmd-jxtv2.html", // 'url' 指定提交的URL
15 data: {}, // 要提交的具体数据
16 type:'GET', // 指定提交的方式,相当于form中的mata='GET'
17 dataType:'jsonp',
18 jsonp:'callback', //这句话和下面一句代码,两句加起来的其实就是给服务端发送了一个key:value,
19 jsonpCallback:'list', // key就是callback, value就是list,(服务端获得后,就知道了,原来你是想让我把数据封装到list函数里面,然后给到客户端)
20 success: function(arg){ // 执行完成后要回调,定义回调应该怎样处理,对应的一个函数,自动触发的,
21 //当请求执行完成之后,自动调用
22 // arg 服务器反回的数据
23 console.log(arg) //将反回的结果在console中打印出来
24 //我们通过浏览器查看知道获得的是一个字典,我们想把所有的内容列出来就需要对这个字典进行循环,这就需要对每一个具体的项目具体对待了,无非就是循环.
25 //下面我们针对此例,进行循环打印
26 var jsonpArray = arg.data;
27 $.each(jsonpArray,function(k,v){
28 //k,下标
29 //v,数组值
30 var week = v.week;
31 var temp = "<h1>" +week +"</h1>";
32 $('.container').append(temp);
33 var listArray = v.list;
34 $.each(listArray,function(kk,vv){
35 var link = vv.link;
36 var time = vv.time;
37 var name = vv.name;
38
39 var tempNew = "<a href='" +link+"'>" +name + "</a><br/>" ;
40 $('.container').append(tempNew);
41 })
42
43 })
44
45 },
46 error: function(){ // 如果提交失败,怎样处理
47 //当请求错误之后,自动调用
48 }
49 })
50 }
51 </script>
52
53 </body>
View Code
我们来总结下Ajax:
AJAX:
1.不是jQuery的东西,其实是封装了XMLHttpRequest
2. $.ajax({})
$.get 此方法都是在$.ajax基础上搞的 就等于$.ajax({'type':'get'})
$.post 此方法都是在$.ajax基础上搞的 就等于$.ajax({'type':'post'})
3. 本域:
普通的请求,直接反回
跨域:
请求:指定函数名,jsonp
反回:函数名(数据)
jQuery之扩展方法
我们用each()循环的时候,是不是有两种方式
$.each
$().each()
我们能不能也定义函数,通过$.xx 和$().xx 来执行函数
能,jQuery中有一个扩展机制.
插件机制
jQuery.fn.extend() 这种扩展出来的就是$().xx()
jQuery.extend() 这种方式扩展出来的就是$.xx()
<body>
<script src="jquery-3.1.0.min.js"></script>
<script>
jQuery.extend({
myext: function() {
return "SB";
},
myext2: function() {
return "SB2";
}
});
var ret = $.myext()
alert(ret)
</script>
</body>
如果你以后去扩展jQuery的话,你是不是应该单独放到一个jQuery文件里.
比如我们写里一个js文件,叫j1
内容如下:
/**
* Created by tedzhou on 16/7/23.
*/
jQuery.extend({
myext: function() {
return "SB";
},
myext2: function() {
return "SB2";
}
});
当我们的需要在html中引用的时候,是不是要引用这个文件,那么需要注意点来了,我们应该先引入官方的jQuery文件,在引入扩展的文件,因为是从上往下执行的,没有jQuery你扩展个毛线.
还有一点,我们写扩展的时候不会直接就写扩展内容,行业内有一个守则,都会把扩展放倒自执行函数体内.并且把jQuery作为参数
于是,扩展的内容应该写成如下:
(function(arg){
arg.extend({
myext: function() {
return "SB";
},
myext2: function() {
return "SB2";
}
});
})(jQuery)
jQuery扩展总结:
1.自制行函数
2.两种方式扩展,1个#.xx()另外一个$().xx()
自制行函数都还记得吧:首先是两个括号,然后在第一个括号里写函数如:
(function(arg){})(arg)