前端——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>
浙公网安备 33010602011771号