前端——jQuery

jQuery（一个集成了DOM、BOM、JavaScript的类库）

一、查找元素

jQuery选择器and筛选器：http://jquery.cuishifeng.cn

选择器

1. id	$('#i1') //获取id="i1"的jQuery对象

2. class	//寻找class=c1的所有标签
	<div class='c1'></div>
	$(".c1")	
	
3. 标签		//在子子孙孙中寻找<a>标签
	<div id='i10' class='c1'>
		<a>f</a>
		<a>f</a>
	</div>
	<div class='c1'>
		<a>f</a>
	</div>
	<div class='c1'>
		<div class='c2'> </div>
	</div>
				
	$('a')
				
4. 组合
	<div id='i10' class='c1'>
		<a>f</a>
		<a>f</a>
	</div>
	<div class='c1'>
		<a>f</a>
	</div>
	<div class='c1'>
		<div class='c2'> </div>
	</div>
				
	$('a')
	$('.c2')
	$('a,.c2,#i10')	//在子子孙孙中寻找<a>标签和id="i10"和class=c2的标签
				
5. 层级
	$('#i10 a') //在子子孙孙中寻找id="i10"和<a>标签
	$('#i10>a') //寻找在id="i10"下的<a>标签
				
6. 基本
	:first	//将jQuery对象中的第一个元素（DOM对象）取出来
	:last　 //用法：$('id=i1:last')  找出来id=i1的最后一个（dom）值
	:eq()	//从0开始的  
7. 属性
	$('input[alex]')  input标签下具有alex属性的所有标签
	$('[alex="123"]') alex属性等于123的标签
					
	<input type='text'/>
	<input type='text'/>
	<input type='file'/>
	<input type='password'/>
				
	$("input[type='text']") 在input标签下具有type属性等于text的标签
	$(':text')	属性后面等于text的所有标签

 

 

$(':checkbox').each(function(k){
　　each是jQuery自带的循环 在里面用this来代指当前循环的元素，是DOM对象
　　k为当前索引  　　　　this==>$(this)
}

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <input type="button" value="全选" onclick="checkAll();" />
10     <input type="button" value="反选" onclick="reverseAll();" />
11     <input type="button" value="取消"  onclick="cancleAll();"/>
12 
13     <table border="1">
14         <thead>
15             <tr>
16                 <th>选项</th>
17                 <th>IP</th>
18                 <th>PORT</th>
19             </tr>
20         </thead>
21         <tbody>
22 
23             <tr>
24                 <td><input type="checkbox" /></td>
25                 <td>1.1.1.1</td>
26                 <td>80</td>
27             </tr>
28             <tr>
29                 <td><input type="checkbox" /></td>
30                 <td>1.1.1.1</td>
31                 <td>80</td>
32             </tr>
33             <tr>
34                 <td><input type="checkbox" /></td>
35                 <td>1.1.1.1</td>
36                 <td>80</td>
37             </tr>
38         </tbody>
39     </table>
40 
41     <script src="jquery-1.12.4.js"></script>
42     <script>
43         function checkAll() {
44             $(':checkbox').prop('checked',true);
45         }
46         function cancleAll() {
47             $(':checkbox').prop('checked',false);
48         }
49         function reverseAll() {
50             $(':checkbox').each(function(k){
51                 // this,代指当前循环的每一个元素
52                 // Dom
53                 /*
54                 if(this.checked){
55                     this.checked = false;
56                 }else{
57                     this.checked = true;
58                 }
59                 */
60                 /*
61                 if($(this).prop('checked')){
62                     $(this).prop('checked', false);
63                 }else{
64                     $(this).prop('checked', true);
65                 }
66                 */
67               // 三元运算var v = 条件? 真值：假值
68                 var v = $(this).prop('checked')?false:true;
69                 $(this).prop('checked',v);
70             })
71         }
72     </script>
73 </body>
74 </html>
示例：多选，反选，全选

筛选器

<div>
	<a>asdf</a>
	<a>asdf</a>
	<a id='i1'>asdf</a>
	<a>asdf</a>
	<a id='i11'>asdf</a>
	<a>asdf</a>
</div>

$('#i1').next()		具有i1标签的下一个标签
$('#i1').nextAll()	具有i1标签的后面的所有标签
$('#i1').nextUntil('#ii1')	从i1标签到i11标签中的所有标签

$('#i1').prev()		具有i1标签的前一个标签
$('#i1').prevAll()	具有i1标签的前面的所有标签
$('#i11').prevUntil('#i1')	从i11标签到i1标签中的所有标签

$('#i1').parent()	具有i1标签的前一个父亲
$('#i1').parents()	具有i1标签的所有父亲（爷爷、太爷爷、太太爷爷）
$('#i1').parentsUntil()	到那个父亲为止

$('#i1').children()	所有孩子
$('#i1').siblings()	所有兄弟
$('#i1').find('a')	在i1标签里找a标签	
$('li:eq(1)')	获取匹配（li标签）的第二个标签（从0开始的）
$('li').eq(1)
.first()
.last()
.hasClass('class')	判断获取的是否有该class标签

二、操作元素

文本操作

$(this).text()	获取文本
$(this).text("abc")	设置文本内容

$(this).html()
$(this).html(<a>abc</a>)

$(this).val()	获取当前标签的value值
$(this).val('abc')	设置当前标签的value值

样式操作

$('.class').addClass("hide")	为标签添加一个样式
$('.class').removeClass("hide")	为标签移除一个样式
$('.class').toggleClass("hide")	如果存在就删除，不存在就添加

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .shadow{
 8             background-color: black;
 9             opacity: 0.5;
10             position: fixed;
11             left: 0;
12             right: 0;
13             top: 0;
14             bottom: 0;
15             z-index: 9;
16         }
17         .hide{
18             display: none;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="shadow"></div>
24     <input type="button" value="开关" id="i1" style="position: fixed; z-index: 10" />
25     <script src="jquery-1.12.4.js"></script>
26     <script>
27         $('#i1').click(function () {
28             $('.shadow').toggleClass('hide')
29         })
30     </script>
31 </body>
32 </html>
示例：开关灯

属性操作

# 专门用于做自定义属性
$(..).attr('type')	获取type属性的值
$(..).attr('type','text')	设置该属性的值
$(..).removeAttr('type')	删除这个属性

# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked',true)

$(..).index()　　获取该标签在父标签的第几个位置
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .menu{
 8             height: 38px;
 9             background-color: #eeeeee;
10             line-height: 38px;
11         }
12         .menu .menu-item{
13             float: left;
14             border-right: 1px solid red;
15             padding: 0 5px;
16             cursor: pointer;
17         }
18         .hide{
19             display: none;
20         }
21         .active{
22             background-color: #1AC567;
23         }
24     </style>
25 </head>
26 <body>
27     <div style="margin:0 auto;width: 500px;height: 400px;border: 1px solid red">
28         <div class="menu">
29             <div class="menu-item active " a='1'>菜单1</div>
30             <div class="menu-item "a='2'>菜单2</div>
31             <div class="menu-item "a='3'>菜单3</div>
32         </div>
33         <div class="content">
34             <div b="1">内容一</div>
35             <div class="hide"  b="2">内容二</div>
36             <div class="hide" b="3">内容三</div>
37         </div>
38     </div>
39 
40     <script src="jquery-1.12.4.js"></script>
41     <script>
42         $('.menu-item').click(function () {
43             $(this).addClass("active").siblings().removeClass('active');
44             var target=$(this).attr('a');
45             $(".content div[b='"+target+"']").removeClass('hide').siblings().addClass('hide')
46         })
47 
48     </script>
49 </body>
50 </html>
示例：菜单操作

文档处理

$(this).append('<a>123</a>')	在该标签的子标签最后添加样式
$(this).prepend('<a>123</a>')	在该标签的子标签最前添加样式
$(this).after('<a>123</a>')	在该标签的最后添加样式
$(this).before('<a>123</a>')	在该标签的最前添加样式

$(this).remove('<a>123</a>')	删除该标签，渣都不剩
$(this).empty('<a>123</a>')	删除该标签，还剩点渣

var v = $(this).clone('<a>123</a>')　　克隆该标签
$(this).parent.append(v)	　　　　放在他爹下面

 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=t1 type="text"  />
 9     <input id=a1 type="button" value="添加" />
10     <input id=a2 type="button" value="删除" />
11     <input id=a3 type="button" value="复制" />
12 
13     <ul id="u1">
14         <li>1</li>
15         <li>2</li>
16     </ul>
17 
18     <script src="jquery-1.12.4.js"></script>
19 
20     <script>
21         $("#a1").click(function () {
22             var v=$('#t1').val();
23             var text="<li>"+ v + "</li>";
24             $('#u1').append(text)
25         });
26         $("#a2").click(function () {
27             var index=$("#t1").val();
28             $('#u1 li').eq(index).em()
29         })
30         $("#a3").click(function () {
31             var index=$("#t1").val()
32             var v=$('#u1 li').eq(index).clone()
33             $("#u1").append(v)
34         })
35 
36     </script>
37 </body>
38 </html>
示例：添加，删除，复制

CSS操作

$('#t1').css('样式名称', '样式值')

点赞示例：
	 - $('t1').append()
	 - $('t1').remove()
	 - setInterval
	 - 透明度 1 > 0
	 - position:absolute
	 - 字体大小，位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .container{
 8             padding: 50px;
 9             border: 1px solid #dddddd;
10         }
11         .item{
12             position: relative;
13             width: 30px;
14         }
15     </style>
16 </head>
17 <body>
18     <div class="container">
19         <div class="item">
20             <span>赞</span>
21         </div>
22     </div>
23     <div class="container">
24         <div class="item">
25             <span>赞</span>
26         </div>
27     </div>
28     <div class="container">
29         <div class="item">
30             <span>赞</span>
31         </div>
32     </div>
33     <div class="container">
34         <div class="item">
35             <span>赞</span>
36         </div>
37     </div>
38 
39     <script src="jquery-1.12.4.js"></script>
40     <script>
41         $('.item').click(function () {
42             AddFavor(this);
43         });
44         function AddFavor(self) {
45             var fontSize = 15;
46             var right = 0;
47             var top= 0;
48             var opacity=1;
49             var tag = document.createElement('span');
50             $(tag).css('color','green');
51             $(tag).text('+1');
52             $(tag).css('position','absolute');
53             self.append(tag);
54             //console.log(self)
55             var obj=setInterval(function () {
56                 fontSize = fontSize + 10;
57                 top = top - 10;
58                 right = right - 10;
59                 opacity = opacity - 0.1;
60 
61                 $(tag).css('fontSize',fontSize+'px');
62                 $(tag).css('right',right+'px');
63                 $(tag).css('top',top+'px');
64                 $(tag).css('opacity',opacity);
65 
66                 if(opacity<0){
67                     clearInterval(obj);
68                     $(tag).remove()
69                 }
70 
71             },40)
72 
73 
74         }
75     </script>
76 </body>
77 </html>
点赞示例

位置

位置：
	$(window).scrollTop()  获取滚轮所在位置
	$(window).scrollTop(0) 设置滚轮所在位置
	$(window).scrollLeft([val])	左右的
	
	offset().left                 指定标签在html（整个文档就是浏览器）中的坐标
	offset().top                  指定标签在html中的坐标   用于拖动窗口
	
	position() 	                  指定标签相对父标签(relative)标签的坐标（离他爹的div在浏览器中的位置坐标）
	
	<div style='relative'>
		<div>
			<div id='i1' style='position:absolute;height:80px;border:1px'></div>
		</div>
	</div>
	
	
	$('i1').height()           # 获取标签的高度 纯高度
	$('i1').innerHeight()      # 纯高度 + 内边距（padding）
	$('i1').outerHeight()      # 获取边框 + 纯高度 + 内边距
	$('i1').outerHeight(true)  # 获取边框 + 纯高度 + 内边距 + 外边距
	
	# 纯高度，边框，外边距，内边距

绑定事件

#从上到下逐行执行如果有地方卡住就卡在那
$('.c1').click()

$('.c1').bind('click',function(){	两两一套
	
})

$('.c1').unbind('click',function(){
	
})

***
$('.c').delegate('a', 'click', function(){	委托（在一开始没绑定，直到点击时绑定事件然后执行）

})
$('.c').undelegate('a', 'click', function(){	用于添加时也要绑定事件

})

$('.c1').on('click', function(){	所有的绑定事件都是基于on来实现的

})
$('.c1').off('click', function(){

})

阻止事件发生
	return false
	
# 当页面框架加载完成之后，自动执行
$(function(){
	
	$(...)
	
})

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .error{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13 
14     <form id="f1" action="s5.html" method="POST">
15         <div><input name="n1" tex = "用户名" type="text" /></div>
16         <div><input name="n2" tex = "密码" type="password" /></div>
17         <div><input name="n3" tex = "邮箱" type="text" /></div>
18         <div><input name="n4" tex = "端口" type="text" /></div>
19         <div><input name="n5" tex = "IP" type="text" /></div>
20 
21         <input type="submit" value="提交" />
22 
23     </form>
24     <script src="jquery-1.12.4.js"></script>
25     <script>
26         // 当页面框架加载完毕后，自动执行
27 //        $(function(){
28 //            $.Login('#f1')
29 //        });
30 
31 
32 
33         $(function(){
34             // 当页面所有元素完全加载完毕后，执行
35             $(':submit').click(function () {
36                 $('.error').remove();
37                 var flag = true;
38                 $('#f1').find('input[type="text"],input[type="password"]').each(function () {
39                     var v = $(this).val();
40                     var n = $(this).attr('tex');
41                     if(v.length <= 0){
42                         flag = false;
43                         var tag = document.createElement('span');
44                         tag.className = "error";
45                         tag.innerHTML = n + "必填";
46                         $(this).after(tag);
47                         // return false;
48                     }
49                 });
50                 return flag;
51 
52         });
53 
54 
55         });
56 
57 
58 
59 //        $(':submit').click(function () {
60 //            var v = $(this).prev().val();
61 //            if(v.length > 0){
62 //                return true;
63 //            }else{
64 //                alert('请输入内容');
65 //                return false
66 //            }
67 //        })
68 
69     </script>
70 </body>
71 </html>
登录页面判断是否输入
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>
 9 
10     <a id="i1" href="http://www.oldboyedu.com">走你2</a>
11     <script src="jquery-1.12.4.js"></script>
12     <script>
13         function ClickOn() {
14             alert(123);
15             return true;
16         }
17         $('#i1').click(function () {
18             alert(456);
19             return false;
20         })
21     </script>
22 </body>
23 </html>
示例：阻止事件发生

jQuery扩展

方法一、直接在JavaScript文件里写

$.extend({
	'abc':function(){
		return 'sb';
	}
})

调用 var v = $.abc();
	 alert(v);
	 
当导入多个JavaScript模块时，如果有相同名称的调用方法或者相同名称的全局变量就会很尴尬
所以要按照方法二这样写，直接写一个自执行函数

方法二、
(function(arg){
	var status = 1;
	arg.extend({
		'abc':function(){
			return 'sb';
		}
	})
})($);

调用 var v = $.abc();
	 alert(v);
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .shadow{
  8             position: fixed;
  9             left: 0;
 10             right: 0;
 11             top: 0;
 12             bottom: 0;
 13             background-color: black;
 14             opacity: 0.5;
 15             z-index: 10;
 16         }
 17         .modal{
 18             width: 500px;
 19             height: 400px;
 20             text-align: center;
 21             line-height: 0;
 22             position: fixed;
 23             left: 50%;
 24             top: 50%;
 25             background-color: gold;
 26             margin-top: -200px;
 27             margin-left: -250px;
 28             z-index: 11;
 29         }
 30         .modal2{
 31             width: 500px;
 32             height: 400px;
 33             text-align: center;
 34             line-height: 0;
 35             position: fixed;
 36             left: 50%;
 37             top: 50%;
 38             background-color: gold;
 39             margin-top: -200px;
 40             margin-left: -250px;
 41             z-index: 11;
 42         }
 43         .hide{
 44             display: none;
 45         }
 46     </style>
 47 </head>
 48 <body>
 49     <a id="i1">添加</a>
 50     <table border="1" id="i4">
 51         <tr><td taget="ip" a="1">1.1.1.1</td><td taget="port">80</td><td><a class="edit">编辑</a>|<a class="del">删除</a></td></tr>
 52         <tr><td taget="ip" a="2">1.1.1.2</td><td taget="port">80</td><td><a class="edit">编辑</a>|<a class="del">删除</a></td></tr>
 53         <tr><td taget="ip" a="3">1.1.1.3</td><td taget="port">80</td><td><a class="edit">编辑</a>|<a class="del">删除</a></td></tr>
 54         <tr><td taget="ip" a="4">1.1.1.4</td><td taget="port">80</td><td><a class="edit">编辑</a>|<a class="del">删除</a></td></tr>
 55     </table>
 56     <div class="shadow hide">123</div>
 57     <div class="modal hide">
 58         <p><input type="text" name="ip" /></p>
 59         <p><input type="text" name="port" /></p>
 60 
 61 
 62         <input id="i2" type="button" value="确定" />
 63         <input calss="i3" type="button" value="取消" />
 64     </div>
 65     
 66     <div class="modal2 hide">
 67         <p><input type="text" name="ip" /></p>
 68         <p><input type="text" name="port" /></p>
 69 
 70         <input id="i5" type="button" value="确定" />
 71         <input class="i3" type="button" value="取消" />
 72     </div>
 73 
 74     <script src="jquery-1.12.4.js"></script>
 75     <script>
 76         $('#i1').click(function () {
 77             $('.modal,.shadow').removeClass('hide')
 78         });
 79         $('#i2').click(function () {
 80             var tr = document.createElement('tr');
 81             var flag=true;
 82             $(this).prevAll().children().each(function () {
 83                 var td = document.createElement('td');
 84                 var name = $(this).attr("name");
 85                 var text = $(this).val();
 86                 if(text.length<=0){
 87                     alert(name+"不能为空");
 88                     flag=false;
 89 
 90                 }else{
 91                     td.innerHTML = $("[name="+name+"]").val();
 92                     tr.prepend(td);
 93                 }
 94             });
 95 
 96             if(flag){
 97                 var td3 = document.createElement('td');
 98                 td3.innerHTML = '<a>编辑</a>|<a class="del">删除</a>';
 99                 tr.append(td3);
100                 $("#i4").append(tr);
101                 }
102             $('.modal,.shadow').addClass('hide');
103         });
104         $(".i3").click(function () {
105             $('.modal,.shadow,.modal2').addClass('hide')
106         });
107         $(".del").click(function () {
108             $(this).parent().parent().remove()
109         });
110 
111         $(".edit").click(function () {
112             $('.modal2,.shadow').removeClass('hide');
113             $(this).parent().prevAll().each(function () {
114                 var text = $(this).text();
115                 var n = $(this).attr('taget');
116                 $('[name='+n+']').val(text)
117             });
118         })
119 
120     </script>
121 </body>
122 </html>
添加，删除
posted @ 2017-10-30 22:05  想54256  阅读(196)  评论(0)  编辑  收藏  举报