DOM和jQuery学习_Day17 HTML+CSS补充 DOM事件 jQuery
主站布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 <style> 8 .clearfix:after{ 9 content: '........'; 10 display: block; 11 clear: both; 12 visibility: hidden; 13 height: 0; 14 } 15 </style> 16 </head> 17 <body> 18 <div style="background-color: green" class="clearfix"> 19 <div style=" 200px;height: 200px;border: 1px solid red;float: left"></div> 20 <div style=" 200px;height: 200px;border: 1px solid red;float: left"></div> 21 <div style=" 200px;height: 200px;border: 1px solid red;float: left"></div> 22 <div style=" 200px;height: 200px;border: 1px solid red;float: left"></div> 23 <div style=" 200px;height: 200px;border: 1px solid red;float: left"></div> 24 </div> 25 26 </body> 27 </html>
响应式布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 8 <style> 9 @media (min- 800px){ 10 .item{ 11 width: 20%; 12 float: left; 13 } 14 } 15 @media (max- 800px){ 16 .item{ 17 width: 33.3%; 18 float: left; 19 } 20 } 21 </style> 22 </head> 23 <body> 24 <div> 25 <div class="item"> 26 <label>用户名：</label> 27 <input type="text" /> 28 </div> 29 <div class="item"> 30 <label>用户名：</label> 31 <input type="text" /> 32 </div> 33 <div class="item"> 34 <label>用户名：</label> 35 <input type="text" /> 36 </div> 37 <div class="item"> 38 <label>用户名：</label> 39 <input type="text" /> 40 </div> 41 <div class="item"> 42 <label>用户名：</label> 43 <input type="text" /> 44 </div> 45 <div class="item"> 46 <label>用户名：</label> 47 <input type="text" /> 48 </div> 49 <div class="item"> 50 <label>用户名：</label> 51 <input type="text" /> 52 </div> 53 </div> 54 </body> 55 </html>
DOM事件
绑定事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 </head> 8 <body> 9 10 <a href="http://www.baidu.com" id="i1">揍你</a> 11 <script> 12 document.getElementById('i1').onclick = function () { 13 alert(123); 14 } 15 </script> 16 </body> 17 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 </head> 8 <body> 9 <form action="http://www.baidu.com"> 10 <input type="text" id="user" name="user" /> 11 <!--<input type="submit" value="提交" onclick="return func();" />--> 12 <input type="submit" id="sb" value="提交" /> 13 </form> 14 <script> 15 document.getElementById('sb').onclick = function(){ 16 var v = document.getElementById('user').value; 17 if(v.length>0){ 18 return true; 19 }else{ 20 alert('请输入内容222'); 21 return false; 22 } 23 }; 24 function func() { 25 var v = document.getElementById('user').value; 26 if(v.length>0){ 27 return true; 28 }else{ 29 alert('请输入内容'); 30 return false; 31 } 32 } 33 </script> 34 </body> 35 </html>
THIS事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 8 </head> 9 <body> 10 11 <!--<div onclick="fuck1(this);">战争</div>--> 12 <div id="i1">战争</div> 13 <script> 14 // function fuck1(self) { 15 // var v = self.innerHTML; 16 // alert(v); 17 // } 18 document.getElementById('i1').onclick = function () { 19 var v = this.innerHTML; 20 alert(v); 21 } 22 </script> 23 24 </body> 25 </html>
获取焦点
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 8 </head> 9 <body> 10 <input type="text" value="请输入关键字" onfocus="fuckFocus(this);" onblur="fuckBlur(this);"/> 11 <input type="button" value="提交" /> 12 <script> 13 /* 14 当标签获取焦点时，执行该函数 15 */ 16 function fuckFocus(ths) { 17 // value innerText innerHtml 18 var v = ths.value; 19 if(v == '请输入关键字'){ 20 ths.value = ""; 21 } 22 } 23 /* 24 当标签失去焦点时 25 */ 26 function fuckBlur(ths) { 27 var v = ths.value; 28 if(v.length == 0){ 29 ths.value = "请输入关键字"; 30 } 31 } 32 </script> 33 </body> 34 </html>
一个标签绑定多个相同事件
1 <body> 2 3 <div id="i1" onclick="console.log(1);" >鸡建明</div> 4 <script> 5 // document.getElementById('i1').onclick = function () { 6 // console.log(2); 7 // } 8 document.getElementById('i1').addEventListener('click',function () { 9 console.log(2); 10 }) 11 </script> 12 </body>
事件冒泡
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 8 </head> 9 <body> 10 11 <div id="i1" onclick="console.log(1);" >鸡建明</div> 12 <script> 13 // document.getElementById('i1').onclick = function () { 14 // console.log(2); 15 // } 16 document.getElementById('i1').addEventListener('click',function () { 17 console.log(2); 18 }) 19 </script> 20 </body> 21 </html>
全局事件
1 <body> 2 <input type="text" onkeydown="func(this,event);" /> 3 4 <script> 5 function func(ths,e) { 6 console.log(ths,e); 7 } 8 window.onkeydown = function(e){ 9 console.log(e); 10 } 11 12 </script> 13 </body>
jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
选择器
找到某个或者某类标签
根据ID查找 # ‘’ 都是必须的
$('#i1') -> 找id=i1的标签
$('.i1') -> 找class=i1的标签
$('div') -> 找所有div标签
$('a') 找所有a标签
$('#i1 .c1 div') -> 先找到id=i1标签，在其子子孙孙中找class=c1标签，在上述基础上再进行找div标签
$('#i1>a')
$('a,.c2,#i10') -->拿到所有a c2 #10的标签， and组合
层级
$('#i10 a') 在id=10的标签的子子孙孙里面找a标签
$('#i10>a') 儿子
:first $('#i10 a:first') 第一个
:last
:eq()
属性：
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
表单：
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")简写成$(':text')
$(':disabled') 在表单里面找 disabled属性的标签
$('#tb:checkbox').prop('checked');获取值
$('#tb:checkbox').prop('checked'，true); 设置值
prop方法专门对checked和selected做操作
jQuery方法内置循环： $('#tb:checkbox').xxxx
$('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
添加样式 移除样式
$('#i1').addClass('hide')
$('#i1').removeClass('hide')
筛选器
$(this) 当前标签
$('#i1').parent() 父标签
$('#i1').children(':text') 获取所有孩子标签
$('#i1').next() 当前标签的下一个标签
$('#i1').nextAll() 当前标签的下面所有标签
$('#i1').prev() 当前标签的上一个标签
$('#i1').prevAll()
$('#i1').siblings() 获取所有兄弟标签
$('#i1').find('.c1') 子子孙孙找查找
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 <style> 8 .pg-header{ 9 height: 48px; 10 background-color: black; 11 } 12 .pg-body .menu{ 13 width: 20%; 14 float: left; 15 background-color: #d3d3d3; 16 height: 800px; 17 } 18 .pg-body .test{ 19 width: 80%; 20 float: left; 21 } 22 .menu .item .title{ 23 background-color: #297EA8; 24 color: white; 25 height: 40px; 26 } 27 .menu .item{ 28 display: block; 29 } 30 .menu .item .content{ 31 background-color: white; 32 } 33 .menu .item .content a{ 34 display: block; 35 padding: 10px; 36 } 37 .hide{ 38 display: none; 39 } 40 .shade{ 41 position: fixed; 42 top:0; 43 left: 0; 44 right: 0; 45 bottom: 0; 46 background-color: black; 47 opacity: 0.6; 48 z-index: 100; 49 } 50 .loading{ 51 position: fixed; 52 top:30%; 53 left: 50%; 54 width: 32px; 55 height: 32px; 56 background: url(loader.gif); 57 z-index: 101; 58 } 59 .model{ 60 position: fixed; 61 top:50%; 62 left: 50%; 63 width: 400px; 64 height: 400px; 65 z-index: 101; 66 background-color: white; 67 margin-left: -200px; 68 margin-top: -200px; 69 } 70 </style> 71 </head> 72 <body> 73 <div id="i1" class="pg-header"></div> 74 <div class="pg-body"> 75 <div class="menu"> 76 <div class="item"> 77 <div class="title" onclick="changeMenu(this);" >菜单1</div> 78 <div class="content"> 79 <a>小彩蛋</a> 80 <a>小彩蛋</a> 81 <a>小彩蛋</a> 82 <a>小彩蛋</a> 83 <a>小彩蛋</a> 84 </div> 85 </div> 86 <div class="item"> 87 <div class="title" onclick="changeMenu(this);">菜单2</div> 88 <div class="content hide"> 89 <a>小彩蛋</a> 90 <a>小彩蛋</a> 91 <a>小彩蛋</a> 92 <a>小彩蛋</a> 93 <a>小彩蛋</a> 94 </div> 95 </div> 96 <div class="item"> 97 <div class="title" onclick="changeMenu(this);">菜单3</div> 98 <div class="content hide"> 99 <a>小彩蛋</a> 100 <a>小彩蛋</a> 101 <a>小彩蛋</a> 102 <a>小彩蛋</a> 103 <a>小彩蛋</a> 104 </div> 105 </div> 106 <div class="item"> 107 <div class="title" onclick="changeMenu(this);">菜单4</div> 108 <div class="content hide"> 109 <a>小彩蛋</a> 110 <a>小彩蛋</a> 111 <a>小彩蛋</a> 112 <a>小彩蛋</a> 113 <a>小彩蛋</a> 114 </div> 115 </div> 116 117 </div> 118 <div class="test"> 119 <input type="button" value="添加" onclick="addAsset();"> 120 <table border="1"> 121 <tr> 122 <td target="#id">1</td> 123 <td target="#host">c1.com</td> 124 <td target="#port">80</td> 125 <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td> 126 <td>查看更多</td> 127 128 </tr> 129 <tr> 130 <td target="#id">2</td> 131 <td target="#host">c2.com</td> 132 <td target="#port">80</td> 133 <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td> 134 <td>查看更多</td> 135 136 </tr> 137 <tr> 138 <td target="#id">3</td> 139 <td target="#host">c3.com</td> 140 <td target="#port">80</td> 141 <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td> 142 <td>查看更多</td> 143 144 </tr> 145 <tr> 146 <td target="#id">4</td> 147 <td target="#host">c4.com</td> 148 <td target="#port">80</td> 149 <td> <a class='edit'>编辑</a>| <a>删除</a></td> 150 <td>查看更多</td> 151 152 </tr> 153 </table> 154 155 156 </div> 157 </div> 158 $('.edit').click(function(){ 159 160 }) 161 $('td').delegate('.edit','click',function(){ 162 163 }) 164 165 <div class="shade hide"></div> 166 <div class="model hide"> 167 <p>序号：<input id="id" type="text" /></p> 168 <p>主机名：<input id="host" type="text" /></p> 169 <p>端口：<input id="port" type="text" /></p> 170 <p> 171 <a onclick="confirmAsset();">确定</a> <a onclick="cancleAsset();">取消</a> 172 </p> 173 174 </div> 175 <div class="loading hide"></div> 176 177 <script src="jquery-1.12.4.js"></script> 178 <script> 179 function changeMenu(ths) { 180 // console.log(ths); 181 // ths--> DOM的对象 代指当前点击的菜单标签(内部封装仅仅只有DOM的方法) 182 // DOM对象转换成jquery对象： $(ths) 183 // jQuery对象转换成DOM对象： $('#i1')[0] 184 // 找到当前ths的下一个标签，去掉hide样式 185 // 找到当前ths的父标签，再找所有的兄弟标签，内存再找class=content，加上hide 186 $(ths).next().removeClass('hide'); 187 $(ths).parent().siblings().find('.content').addClass('hide'); 188 189 } 190 191 function addAsset() { 192 $('.shade,.model').removeClass('hide'); 193 } 194 function cancleAsset() { 195 $('.shade,.model').addClass('hide'); 196 } 197 function confirmAsset() { 198 $('.shade,.model').addClass('hide'); 199 $('.shade,.loading').removeClass('hide'); 200 } 201 202 function editAsset(ths) { 203 // 弹出对话框 204 // 获取当前行数据 205 // 将数据填充到指定对话框的位置 206 207 // 显示对话框 208 $('.shade,.model').removeClass('hide'); 209 210 // 获取上面所有的td 211 var $td_list = $(ths).parent().prevAll(); 212 // 循环所有的td 213 $td_list.each(function () { 214 // this，当前循环的td（DOM） $(this) 215 var $td = $(this); 216 // 获取标签内部的文本信息，相当于innerText 217 var text = $td.text(); 218 // 获取标签自定义属性的值 219 var v = $td.attr('target'); // #port, #id, #host 220 // $(v)获取对应的input标签， 221 // $(v).val('df') 对input系列进行赋值 222 $(v).val(text); 223 }) 224 } 225 </script> 226 </body> 227 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 <style> 8 .menus{ 9 height: 48px; 10 background-color: #d3d3d3; 11 line-height: 48px; 12 } 13 .menus a{ 14 display: inline-block; 15 border-right: 1px solid #b2b2b5; 16 padding: 0 10px; 17 margin-top: -3px; 18 } 19 .menus a.active{ 20 border-top: 3px solid cadetblue; 21 } 22 .hide{ 23 display: none; 24 } 25 </style> 26 </head> 27 <body> 28 <div style=" 500px;border: 1px solid #b2b2b5;min-height: 300px;"> 29 <div class="menus"> 30 <a class="active" target="i1">菜单1</a> 31 <a target="i2">菜单2</a> 32 <a target="i3">菜单3</a> 33 </div> 34 <div class="contents"> 35 <div nid="i1" class="content">内容一</div> 36 <div nid="i2" class="content hide">内容二</div> 37 <div nid="i3" class="content hide">内容上</div> 38 </div> 39 </div> 40 <script src="jquery-1.12.4.js"></script> 41 <script> 42 $('.menus a').click(function(){ 43 // this代指当前触发事件的标签,DOM对象 44 $(this).addClass('active').siblings().removeClass('active'); 45 var v = $(this).attr('target'); // i1,i2 i3 46 var t = 'div[n] 47 $('.contents').find(t).removeClass('hide').siblings().addClass('hide'); 48 49 }) 50 </script> 51 52 </body> 53 </html>
链式编程
$('#i1').next().prev().find('.c1').parent()
$('#i1').prevAll().each(function(){
// this，当前循环的每一个标签 DOM对象
// $(this)
})
操作
- addClass('x')
- removeClass('x')
- val()
- $('#i1').val() # 获取值 针对表单类，input可以获取 select、textarea也可以
- $('#i1').val('ff') # 设置
PS:textarea,select
- text()
- $('#i1').text() # 获取值
- $('#i1').text('ff') # 设置
- html()
- $('#i1').html() # 获取值
- $('#i1').html('ff') # 设置
- attr()
- $('#i1').attr('属性名') # 获取值
- $('#i1').attr('属性名','new') # 对属性设置值
- prop()
专门对于checkbox和radio提供的内容
$(':checkbox').attr('checked','checked');
$(':checkbox').prop('checked',true)
$(':checkbox').prop('checked',false)
- css
- scrollTop
// $('#u1').append(tag);
// $('#u1').after(tag);
// $('#u1').prepend(tag);
// $(tag).appendTo($('#u1'));
// $(tag).empty() #清空标签里面内容 不删除标签
// $(tag).remove() #删掉标签
toggleClass('hide') #有了去掉 没有加上
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容，整体传过去不解析
$(..).val() 获取值 针对input系列和selected标签
$(..).html()
$(..).html("<a>1</a>")
$('t1').css('样式名称'，‘样式值’)
var fontsize = 15;
$(tag).css('fontSize',fontSize + "px");
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
offset().left 获取指定标签在html中的坐标
jquery转DOM对象：
var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM转jquery：
var v=document.getElementById("v"); //DOM对象
28 var $v=$(v); //jQuery对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 <style> 8 .hide{ 9 display: none; 10 } 11 </style> 12 13 </head> 14 <body> 15 <a onclick="deng();">开关灯</a> 16 <div id="i2"> 17 asdfasdfasdfasdf 18 </div> 19 20 21 <a onclick="checkAll()">全选</a> 22 <a onclick="checkCancle()">取消</a> 23 <a onclick="checkReverse()">取消</a> 24 <table border="1"> 25 <tr> 26 <td><input type="checkbox" /></td> 27 <td target="#id">1</td> 28 <td target="#host">c1.com</td> 29 <td target="#port">80</td> 30 <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td> 31 <td>查看更多</td> 32 33 </tr> 34 <tr> 35 <td><input type="checkbox" /></td> 36 <td target="#id">2</td> 37 <td target="#host">c2.com</td> 38 <td target="#port">80</td> 39 <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td> 40 <td>查看更多</td> 41 42 </tr> 43 <tr> 44 <td><input type="checkbox" /></td> 45 <td target="#id">3</td> 46 <td target="#host">c3.com</td> 47 <td target="#port">80</td> 48 <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td> 49 <td>查看更多</td> 50 51 </tr> 52 <tr> 53 <td><input type="checkbox" /></td> 54 <td target="#id">4</td> 55 <td target="#host">c4.com</td> 56 <td target="#port">80</td> 57 <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td> 58 <td>查看更多</td> 59 60 </tr> 61 </table> 62 <script src="jquery-1.12.4.js"></script> 63 <script> 64 function deng() { 65 $('#i2').toggleClass('hide'); 66 } 67 function checkAll() { 68 $('table :checkbox').prop('checked',true); 69 } 70 function checkCancle() { 71 $('table :checkbox').prop('checked',false); 72 } 73 function checkReverse() { 74 $('table :checkbox').each(function () { 75 if($(this).prop('checked')){ 76 $(this).prop('checked',false); 77 }else{ 78 $(this).prop('checked',true); 79 } 80 }) 81 } 82 </script> 83 </body> 84 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 8 </head> 9 <body> 10 <textarea id="i1"></textarea> 11 <select id="i2"> 12 <option value="1">三倍</option> 13 <option value="11">失败</option> 14 <option value="2">阿斯蒂芬</option> 15 </select> 16 <select id="i3" multiple> 17 <option value="1">三倍</option> 18 <option value="11">失败</option> 19 <option value="2">阿斯蒂芬</option> 20 </select> 21 <script src="jquery-1.12.4.js"></script> 22 </body> 23 </html>
综合练习
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .item{ 9 height: 80px; 10 line-height: 80px; 11 border: 1px solid red; 12 } 13 .item .zan{ 14 position: relative; 15 } 16 .item .zan i{ 17 position: absolute; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="item"> 23 <div class="zan"> 24 <span>赞</span> 25 </div> 26 </div> 27 <div class="item"> 28 <div class="zan"> 29 <span>赞</span> 30 <i style="position: absolute">+1</i> 31 </div> 32 </div><div class="item"> 33 <div class="zan"> 34 <span>赞</span> 35 </div> 36 </div><div class="item"> 37 <div class="zan"> 38 <span>赞</span> 39 </div> 40 </div> 41 42 <script src="jquery-1.12.4.js"></script> 43 <script> 44 $('.item span').click(function () { 45 var fontSize = 12; 46 var top = -1; 47 var left = 20; 48 var opacity = 1; 49 var tag = document.createElement('i'); 50 tag.innerHTML = '+1'; 51 $(this).after(tag); 52 var obj = setInterval(function () { 53 fontSize += 10; 54 top -= 5; 55 left += 5; 56 opacity -= 0.2; 57 tag.style.fontSize = fontSize + 'px'; 58 tag.style.top = top + 'px'; 59 tag.style.left = left + 'px'; 60 tag.style.opacity = opacity; 61 if(opacity < 0){ 62 // 关闭定时器 63 clearInterval(obj); 64 } 65 },90); 66 }) 67 68 69 70 </script> 71 </body> 72 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div style="border: 1px solid #ddd; 600px;position: absolute;"> 9 <div id="title" style="background-color: black;height: 40px;"></div> 10 <div style="height: 300px;"></div> 11 </div> 12 <script type="text/javascript" src="jquery-1.12.4.js"></script> 13 <script> 14 $(function(){ 15 $('#title').mouseover(function(){ 16 $(this).css('cursor','move'); 17 }); 18 $("#title").mousedown(function(e){ 19 //console.log($(this).offset()); 20 var _event = e || window.event; 21 var ord_x = _event.clientX; 22 var ord_y = _event.clientY; 23 24 var parent_left = $(this).parent().offset().left; 25 var parent_top = $(this).parent().offset().top; 26 27 $('#title').on('mousemove', function(e){ 28 var _new_event = e || window.event; 29 var new_x = _new_event.clientX; 30 var new_y = _new_event.clientY; 31 32 var x = parent_left + (new_x - ord_x); 33 var y = parent_top + (new_y - ord_y); 34 35 $(this).parent().css('left',x+'px'); 36 $(this).parent().css('top',y+'px'); 37 38 }) 39 }); 40 $("#title").mouseup(function(){ 41 $("#title").off('mousemove'); 42 }); 43 }) 44 </script> 45 </body> 46 </html>