DOM和jQuery学习_Day17
HTML+CSS补充
主站布局
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>Titletitle> 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="width: 200px;height: 200px;border: 1px solid red;float: left">div> 20 <div style="width: 200px;height: 200px;border: 1px solid red;float: left">div> 21 <div style="width: 200px;height: 200px;border: 1px solid red;float: left">div> 22 <div style="width: 200px;height: 200px;border: 1px solid red;float: left">div> 23 <div style="width: 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>Titletitle> 7 8 <style> 9 @media (min-width: 800px){ 10 .item{ 11 width: 20%; 12 float: left; 13 } 14 } 15 @media (max-width: 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>Titletitle> 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>Titletitle> 7 head> 8 <body> 9 <form action="http://www.baidu.com"> 10 <input type="text" id="user" name="user" /> 11 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>Titletitle> 7 8 head> 9 <body> 10 11 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>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>Titletitle> 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>Titletitle> 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']")简写成$(':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>Titletitle> 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);" >菜单1div> 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);">菜单2div> 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);">菜单3div> 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);">菜单4div> 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">1td> 123 <td target="#host">c1.comtd> 124 <td target="#port">80td> 125 <td> <a onclick="editAsset(this);">编辑a>| <a>删除a>td> 126 <td>查看更多td> 127 128 tr> 129 <tr> 130 <td target="#id">2td> 131 <td target="#host">c2.comtd> 132 <td target="#port">80td> 133 <td> <a onclick="editAsset(this);">编辑a>| <a>删除a>td> 134 <td>查看更多td> 135 136 tr> 137 <tr> 138 <td target="#id">3td> 139 <td target="#host">c3.comtd> 140 <td target="#port">80td> 141 <td> <a onclick="editAsset(this);">编辑a>| <a>删除a>td> 142 <td>查看更多td> 143 144 tr> 145 <tr> 146 <td target="#id">4td> 147 <td target="#host">c4.comtd> 148 <td target="#port">80td> 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>Titletitle> 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="width: 500px;border: 1px solid #b2b2b5;min-height: 300px;"> 29 <div class="menus"> 30 <a class="active" target="i1">菜单1a> 31 <a target="i2">菜单2a> 32 <a target="i3">菜单3a> 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[nid="' + v + '"]'; // div[nid="i1"] 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(“1”) # 设置文本内容，整体传过去不解析
$(..).val() 获取值 针对input系列和selected标签
$(..).html()
$(..).html("1")
$('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>Titletitle> 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">1td> 28 <td target="#host">c1.comtd> 29 <td target="#port">80td> 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">2td> 37 <td target="#host">c2.comtd> 38 <td target="#port">80td> 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">3td> 46 <td target="#host">c3.comtd> 47 <td target="#port">80td> 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">4td> 55 <td target="#host">c4.comtd> 56 <td target="#port">80td> 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>Titletitle> 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>Titletitle> 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">+1i> 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;width: 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>浮动窗