前端须要用到的部分示例
<a href="网址">内容</a> 跳转到该地址 <a href="http://www.oldboyedu.com">老男孩</a>
<p>内容</p> 使用 p 段落标签,表示段落,能够添加 br 标签,进行换行
<p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
<p>123</p>
hn 系列标签 <h1> 内容 </h1> <h1>Alex</h1> <h2>Alex</h2> <h3>Alex</h3> <h4>Alex</h4> <h5>Alex</h5> <h6>eric</h6>
<span>内容</span> span 标签,白板,行内标签
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<div> 内容,代码块 </div> div 最经常使用的白板标签,块级标签 <div>1</div> <div>2</div> <div>3</div>
<input type="text" name="须要使用的姓名" /> input 标签,用于用户输入姓名,密码,按钮,文件上传等 <input type="text" name="user" /> type 能够具备 text password button submit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://192.168.16.35:8888/index" method="POST"> <input type="text" name="user" /> <input type="text" name="email"/> <input type="password" name="pwd"/> <!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }--> <input type="button" value="登陆1"/> <input type="submit" value="登陆2"/> </form> <br/> <form> <input type="text" /> <input type="password" /> <input type="button" value="登陆1"/> <input type="submit" value="登陆2"/> </form> </body> </html>
多选框 使用 select 和 option 进行建立,selected 为默认选择 multiple 属性为 multiple 表示,进行多选 <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select>
<textarea> 内容 </textarea> 多行文本框,能够输入多行文本 <textarea name="meno" >asdfasdf</textarea>
input 使用 radio 属性,实现单选框(name 值要相同)
checked="checked" 表示进行勾选
男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/>
input 使用 checkbox 属性,实现多选框(name 值要相同) checked="checked" 表示进行勾选
篮球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 台球：<input type="checkbox" name="favor" value="4" checked="checked"/> 网球：<input type="checkbox" name="favor" value="5" />
上传文件使用 input 标签的 file 属性 注:在 form 中 添加 enctype="multipart/form-data" <input type="file" name="fname"/> <form enctype="multipart/form-data">
重置 使用 input 标签的 type="reset" 属性 <input type="reset" value="重置" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <textarea name="meno" >asdfasdf</textarea> <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select> <input type="text" name="user" /> <p>请选择性别：</p> 男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/> <p>爱好</p> 篮球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 台球：<input type="checkbox" name="favor" value="4" checked="checked"/> 网球：<input type="checkbox" name="favor" value="5" /> <p>技能</p> 撩妹：<input type="checkbox" name="skill" checked="checked" /> 写代码：<input type="checkbox" name="skill"/> <p>上传文件</p> <input type="file" name="fname"/> </div> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> </body> </html>
a 标签根据 id 进行跳转 # id 名称 <a href="#i1">第一章</a> <div id="i1" style="height:600px;">第一章的内容</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height:600px;">第一章的内容</div> <div id="i2" style="height:600px;">第二章的内容</div> <div id="i3" style="height:600px;">第三章的内容</div> <div id="i4" style="height:600px;">第四章的内容</div> </body> </html>
在 a 标签使用 img 图片进行跳转 img 标签中 src 指定文件位置,title 为鼠标停留在上面显示的字段,style 表示应用了样式,alt 为不能正常显示时,会出现的内容 <a href="http://www.oldboyedu.com"> <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女"> </a>
<ul><li>内容</li></ul> ul 建立无序列表 <ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul>
ol 建立有序列表 此处的 ul 和 ol 均可以进行变换样式 <ol> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ol>
使用 dl dt dd 实现相似于菜单界面(分级) <dl> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> </dl>
table 标签,内部具备 th头 和 td 单元格,tr 换行 在 td 中能够使用 a 标签,进行跳转
a 内的 # 表示当前页面
<table border="1"> <tr> <td>主机名</td> <td>端口</td> <td>操做</td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td> <a href="s2.html">查看详细</a> <a href="#">修改</a> </td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td>第二行，第3列</td> </tr> </table>
在 table 中使用 thead 和 tbody 并利用 colspan 和 rowspan 进行单元格合并
<table border="1"> <thead> <tr> <th>表头1</th> <th>表头1</th> <th>表头1</th> <th>表头1</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>
fieldset 登陆外的包裹的线 使用 for 保证点击内容跳转到对应的 id 名称处
<fieldset> <legend>登陆</legend> <label for="username">用户名：</label> <input id="username" type="text" name="user" /> <br /> <label for="pwd">密码：</label> <input id="pwd" type="text" name="user" /> </fieldset>
head 内的 styly 标签 设置样式 .名称 对应 class 为对应名称的属性 #名称 对应 id 为对应名称的属性 能够多个 class 一块儿设置,使用 .c1[属性='名称']{ 样式 } 也能够进行设置
.c1 div 表示为 class为 c1 的下一个 div 标签设置样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* #i1{ background-color: #2459a2; height: 48px; } #i2{ background-color: #2459a2; height: 48px; } #i3{ background-color: #2459a2; height: 48px; } .c1{ background-color: #2459a2; height: 10px; } */ /*#c2{*/ /*background-color: black;*/ /*color: white;*/ /*}*/ /*.c1 div{*/ /*background-color: black;*/ /*color: white;*/ /*}*/ .i1,.i2,.i3{ background-color: black; color: white; } .c1[n='alex']{ width:100px; height:200px; } </style> </head> <body> <div class="i1">ff</div> <div class="i2">ff</div> <div class="i3">2</div> <input class="c1" type="text" n="alex"> <input class="c1" type="password"> </body> </html>
使用 link 标签链接外部 css 样式 <link rel="stylesheet" href="路径/文件名.css" /> <link rel="stylesheet" href="css/commons.css" />
commons.css 内容 .c2{ font-size: 58px; color: black; } .c1{ background-color: red; color: white; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/commons.css" /> </head> <body> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> </body> </html>
div 标签在 style 属性中 设置边框 border style="border: 1px solid red;"
style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold; " 属性 注: height 设置高度 width 宽度 border 边框 font-size 字体大小 text-align 文本位置 line-height 高度 font-weight 粗体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="border: 1px solid red;"> asdfasdf </div> <div style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold; ">asdf</div> </body> </html>
style 使用 float 属性 width 宽度,width:20%
float 悬浮,float:left <body> <div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 20%;background-color: black;float: left">2</div> </body>
设置 class 为 pg-header 的标签样式 <style> .pg-header{ 样式 } </style>
styly 属性 width 宽度,margin 设置外边距 margin: 0 auto; float 的两种方式,能够设置在 div 中 float: left; float: right; style="clear: both" 在 float 下部编写内容
设置宽度 width ,border 设置边框 , float 页面布局 style="width: 300px;border: 1px solid red;" style="width: 96px;height:30px;border: 1px solid green;float: left;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 38px; background-color: #dddddd; line-height: 38px; } </style> </head> <body style="margin: 0"> <div class="pg-header"> <div style="width: 980px;margin: 0 auto;"> <div style="float: left;">收藏本站</div> <div style="float: right;"> <a>登陆</a> <a>注册</a> </div> <div style="clear: both"></div> </div> </div> <div> <div style="width: 980px;margin: 0 auto;"> <div style="float: left"> Logo </div> <div style="float: right"> <div style="height: 50px;width: 100px;background-color: #dddddd"></div> </div> <div style="clear: both"></div> </div> </div> <div style="background-color: red;"> <div style="width: 980px;margin: 0 auto;"> asdfsdf </div> </div> <div style="width: 300px;border: 1px solid red;"> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="clear: both;"></div> </div> </body> </html>
style 样式设置 display display 能够设置 inline , block , inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: red;display: inline;">asdf</div> <span style="background-color: red;display: block;">asdf</span> <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span> <a style="background-color: red;">Eric</a> </body> </html>
知识点总结 HTML 1、一套规则，浏览器认识的规则。 2、开发者： 学习Html规则 开发后台程序： - 写Html文件（充当模板的做用） ****** - 数据库获取数据，而后替换到html文件的指定位置（Web框架） 3、本地测试 - 找到文件路径，直接浏览器打开 - pycharm打开测试 4、编写Html文件 - doctype对应关系 - html标签，标签内部能够写属性 ====> 只能有一个 - 注释： <!-- 注释的内容 --> 5、标签分类 - 自闭合标签 <meta charset="UTF-8"> - 主动闭合标签 title>老男孩</title> 6、 head标签中 - <meta -> 编码，跳转，刷新，关键字，描述，IE兼容 <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> - title标签 7、body标签 - 图标， > < - p标签，段落 - br，换行 ======== 小总结 ===== 全部标签分为： 块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距） 行内标签： span（白板） 标签之间能够嵌套 标签存在的意义，css操做，js操做 ps:chorme审查元素的使用 - 定位 - 查看样式 - h系列 - div - span - input系列 + form标签 input type='text' - name属性，value="值" input type='password' - name属性，value="值" input type='submit' - value='提交' 提交按钮，表单 input type='button' - value='登陆' 按钮 input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥） input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据） input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" input type='rest' - 重置 <textarea >默认值</textarea> - name属性 select标签 - name,内部option value, 提交到后台，size，multiple - a标签 - 跳转 - 锚 href='#某个标签的ID' 标签的ID不容许重复 - img src alt title - 列表 ul li ol li dl dt dd - 表格 table thead tr th tbody tr td colspan = '' rowspan = '' - label 用于点击文件，使得关联的标签获取光标 <label for="username">用户名：</label> <input id="username" type="text" name="user" /> - fieldset legend - 20个标签 CSS 在标签上设置style属性： background-color: #2459a2; height: 48px; ... 编写css样式： 1. 标签的style属性 2. 写在head里面 style标签中写样式 - id选择区 #i1{ background-color: #2459a2; height: 48px; } - class选择器 ****** .名称{ ... } <标签 class='名称'> </标签> - 标签选择器 div{ ... } 全部div设置上此样式 - 层级选择器（空格） ****** .c1 .c2 div{ } - 组合选择器（逗号） ****** #c1,.c2,div{ } - 属性选择器 ****** 对选择到的标签再经过属性再进行一次筛选 .c1[n='alex']{ width:100px; height:200px; } PS: - 优先级，标签上style优先，编写顺序，就近原则 2.5 css样式也能够写在单独文件中 <link rel="stylesheet" href="commons.css" /> 3、注释 /* */ 4、边框 - 宽度，样式，颜色 (border: 4px dotted red;) - border-left 5、 height， 高度 百分比 width， 宽度 像素，百分比 text-align:ceter, 水平方向居中 line-height，垂直方向根据标签高度 color、 字体颜色 font-size、 字体大小 font-weight 字体加粗 6、float 让标签浪起来，块级标签也能够堆叠 老子管不住： <div style="clear: both;"></div> 7、display display: none; -- 让标签消失 display: inline; display: block; display: inline-block; 具备inline,默认本身有多少占多少 具备block，能够设置没法设置高度，宽度，padding margin ****** 行内标签：没法设置高度，宽度，padding margin 块级标签：设置高度，宽度，padding margin 8、padding margin(0,auto)
a 标签内部使用图片,设置样式 <a href="网址"> <img src="图片路径/图片名.jpg" style="width:200px;height:300px;"> </a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ border: 0; } </style> </head> <body> <a href="http://www.oldboyedu.com" >asdf</a> <a href="http://www.oldboyedu.com"> <img src="1.jpg" style="width: 200px;height: 300px;"> </a> </body> </html>
返回顶部
function GoTop(){ document.documentElement.scrollTop = 0; } 使用 document.documentElement.scrollTop = 0;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white; position: fixed; bottom:20px; right: 20px; ">返回顶部</div> <div style="height: 5000px;background-color: #dddddd;"> asdfasdf </div> <script> function GoTop(){ document.documentElement.scrollTop = 0; } </script> </body> </html>
style 标签内部使用 position: fixed; 固定位置 margin-top: 48px;与上部模块之间的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; } .pg-body{ background-color: #dddddd; height: 5000px; margin-top: 48px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
position 使用绝对定位 position: absolute;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 50px;height: 50px;background-color: black;position: absolute;right: 0;bottom: 0;">asdf</div> <div style="height: 5000px;background-color: #dddddd;"> asdfasdf </div> </body> </html>
使用 div 嵌套使用 position 外层使用 relative,内部使用 absolute <div style="position: relative;......."> <div style="position: absolute;......."></div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div> </div> </body> </html>
style 能够设置属性 style="display:none;z-index:10; position: fixed;top: 50%;left:50%; margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; style="display:none;z-index:9; position: fixed;background-color: black; top:0; bottom: 0; right: 0; left: 0; opacity: 0.5; "
overflow 的两种属性的区别 auto 会加入滚动条 overflow: auto overflow: hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;width: 300px;overflow: auto"> <img src="1.jpg"> </div> <div style="height: 200px;width: 300px;overflow: hidden"> <img src="1.jpg"> </div> </body> </html>
使用 position: fixed 固定头部 设置高度 line-height: 48px; 设置距离上部距离 margin-top: 50px; 设置块级元素在同一行显示 display: inline-block; 设置鼠标碰到时,发生的变化 :hover .pg-header .menu:hover{ background-color: blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right: 0; left: 0; top: 0; height: 48px; background-color: #2459a2; line-height: 48px; } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; } .pg-header .menu{ display: inline-block; padding: 0 10px 0 10px; color: white; } /*当鼠标移动到当前标签上时，如下css属性才生效*/ .pg-header .menu:hover{ background-color: blue; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">所有</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg-body"> <div class="w">a</div> </div> </body> </html>
style 样式 background-image: url(icon_18_118.png); 设置图片的 url , 能够为本地图片 background-repeat 设置是否重复背景图像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 100px;"></div> <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div> </body> </html>
能够为不一样的标签设置相同的 class 属性,可是 id 必须不一样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input class="c1" type="radio" name="gender" value="1" /> <input type="radio" name="gender" value="2" /> </div> </body> </html>
输入框嵌入图片(注:图片目前和输入的内容会重叠)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" style="height: 35px;width: 400px; margin-right: 20px;" /> <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block; "></span> </div> </body> </html>
在标签中使用 onclick=函数名(); 能够进行调用该函数 onclick="GetData(); 使用 document.getElementById('id名称') 能够获取该数据 document.getElementById('user') function GetData(){ var i = document.getElementById('user'); alert(i.value); } 使用 .value 获取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="user" > <input type="button" onclick="GetData();" value="点我" /> <script> function GetData(){ var i = document.getElementById('user'); alert(i.value); } </script> </body> </html>
使用外部 js 文件 <script src="文件名.js"></script> <script src="commons.js"></script>
能够添加 type="text/javascript" 进行声明 script 语句 <script type="text/javascript"> //javascript代码 </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="commons.js"></script> <script type="text/javascript"> //javascript代码 alert(123); </script> </head> <body> </body> </html>
声明全局变量 age = "18"; 转换为 int 类型使用 parseInt(变量); i = parseInt(age); 定义局部变量 var name = 'eric'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>sadf</h1> <script> /* name = 'alex'; function func(){ var name = 'eric' }*/ age = "18"; i = parseInt(age); </script> </body> </html>
setInterval 设置定时器 setInterval("函数名();",毫秒); 函数定义 function 函数名(参数){ 代码块; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function f1(){ console.log(1); } // 建立一个定时器 //setInterval("alert(123);", 5000); setInterval("f1();", 1000); </script> </body> </html>
使用 function 定义函数 func 函数名称 var 定义局部变量,须要注意变量的做用域 document.getElementById 经过指定的 id 名称进行获取 .innerText 获取文本内容 .charAt(0) 获取第一个字符 content.substring(1,content.length) 获取第二个字符到最后 使用 + 号进行字符串的拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">欢迎老男孩莅临指导</div> <script> function func(){ // 根据ID获取指定标签的内容,定于局部变量接受 var tag = document.getElementById('i1'); // 获取标签内部的内容 var content = tag.innerText; var f = content.charAt(0); var l = content.substring(1,content.length); var new_content = l + f; tag.innerText = new_content; } setInterval('func()', 500); </script> </body> </html>
div 内部嵌套 div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div></div> <div> c1 </div> </div> <div> <div></div> <div id="i1"> c2 </div> </div> <div> <div></div> <div> c3 </div> </div> </body> </html>
position: fixed; 固定位置 opacity: 0.6; 透明度 z-index: 9; 显示的优先级 margin-left: -250px;距离左面距离 margin-top: -200px;距离顶部距离
添加按钮绑定 js 函数 <input type="button" value="功能" onclick="函数名();" /> <input type="button" value="添加" onclick="ShowModel();" />
获取到指定的 id 以后,使用 classList 获取 class 列表, 删除 class 属性使用 remove 添加 class 属性使用 add document.getElementById('i1').classList.remove('hide'); document.getElementById('i1').classList.add('hide');
多选框选中 使用 checked 属性 true 表示选中,false 表示没有选中 checkbox.checked = true; checkbox.checked = false;
for 循环 for(var i=0;i<数组对象.length;i++){ // 循环 代码块 }
实现多选反选,主要是依靠 checked 属性(选中为true) if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全选" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="肯定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll(){ var tbody = document.getElementById('tb'); // 获取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll(){ var tbody = document.getElementById('tb'); // 获取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbody = document.getElementById('tb'); // 获取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script> </body> </html>
在标签中绑定事件能够添加参数 <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> function ChangeMenu(nid){ 代码块 }
此处,使用nid接收传递过来的 i1 值
实现菜单栏
.parentElement 父节点 .children 孩子节点 .nextElementSibling 下一个元素节点的兄弟节点 var item_list = current_header.parentElement.parentElement.children; 添加样式能够使用索引,指定第几个孩子进行添加 class 样式 current_item.children[1].classList.add('hide');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
for 循环的另外一种写法 a 为数组 a = [11,22,33,44] for(var item in a){ console.log(item); }
.getElementsByTagName('div') 经过标签名进行查找 .getElementsByClassName 经过class属性进行查找 .getElementsByName 根据 name 属性进行查找 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementtSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素
知识点总结 1、css重用 <style> 若是整个页面的宽度 > 900px时： { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </style> <div class='c c1'></div> <div class='c c2'></div> 2、自适应 和 改变大小变形 左右滚动条的出现 宽度，百分比 页面最外层：像素的宽度 => 最外层设置绝对宽度 自适应：media 3、默认img标签，有一个1px的边框 img{ border: 0; } 1、块级和行内 2、form标签 <form action='http://sssss' methed='GET' enctype='multi'> <div>asdfasdf</div> <input type='text' name='q' /> <input type='text' name='b' /> # 上传文件 <input type='file' name='f' /> <input type='submit' /> </form> GET: http://sssss?q=用户输入的值 http://sssss?q=用户输入的值&b=用户输入的内容 POST： 请求头 请求内容 3、display: block;inline;inline-block 4、float： <div> <div style='float:left;'>f</div> <div style='clear:both;'></div> </div> 5、margin: 0 auto; 6、padding, ---> 自身发生变化 CSS补充 position: a. fiexd => 固定在页面的某个位置 b. relative + absolute <div style='position:relative;'> <div style='position:absolute;top:0;left:0;'></div> </div> opcity: 0.5 透明度 z-index: 层级顺序 overflow: hidden,auto hover background-image:url('image/4.gif'); # 默认，div大，图片重复访 background-repeat: repeat-y; background-position-x: background-position-y: 示例：输入框 JavaScript 独立的语言，浏览器具备js解释器 JavaScript代码存在形式： - Head中 <script> //javascript代码 alert(123); </script> <script type="text/javascript"> //javascript代码 alert(123); </script> - 文件 <script src='js文件路径'> </script> PS: JS代码须要放置在 <body>标签内部的最下方 注释 当行注释 // 多行注释 /* */ 变量： python： name = 'alex' JavaScript: name = 'alex' # 全局变量 var name = 'eric' # 局部变量 写Js代码： - html文件中编写 - 临时，浏览器的终端 console 基本数据类型 数字 a = 18; 字符串 a = "alex" a.chartAt(索引位置) a.substring(起始位置，结束位置) a.lenght 获取当前字符串长度 ... 列表(数组) a = [11,22,33] 字典 a = {'k1':'v1','k2':'v2'} 布尔类型 小写 for循环 1. 循环时，循环的元素是索引 a = [11,22,33,44] for(var item in a){ console.log(item); } a = {'k1':'v1','k2':'v2'} for(var item in a){ console.log(item); } 2. for(var i=0;i<10;i=i+1){ } a = [11,22,33,44] for(var i=0;i<a.length;i=i+1){ } 不支持字典的循环 条件语句 if(条件){ }else if(条件){ }else if(条件){ }else{ } == 值相等 === 值和类型都相等 && and || or 函数： function 函数名(a,b,c){ } 函数名(1,2,3) Dom 1、找到标签 获取单个元素 document.getElementById('i1') 获取多个元素（列表）document.getElementsByTagName('div') 获取多个元素（列表）document.getElementsByClassName('c1') a. 直接找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 b. 间接 tag = document.getElementById('i1') parentElement // 父节点标签元素 children // 全部子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 2、操做标签 a. innerText 获取标签中的文本内容 标签.innerText 对标签内部文本进行从新赋值 标签.innerText = "" b. className tag.className => 直接总体作操做 tag.classList.add('样式名') 添加指定样式 tag.classList.remove('样式名') 删除指定样式 PS： <div onclick='func();'>点我</div> <script> function func(){ } </script> c. checkbox 获取值 checkbox对象.checked 设置值 checkbox对象.checked = true
Dom 找标签 - 直接找 $('#id') $('.c1').siblings() 操做： innerText checkbox: checked className classList 事件： <div onclick='函数(123)'></div> <script> 代码块 </script> 定时器 setInterval('函数()', 4000) 其余： alert() console.log()
onblur="Blur(); 当鼠标不在输入框时,会进行的操做
获取指定 id 以后标签的值,使用.value 进行获取 var val=tag.value; 当什么都没有输入时,值为 ""
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框请输入关键字</title> <style> .c_keys{ width: 200px; height: 30px; } </style> </head> <body> <div> <input id="id1" type="text" class="c_keys" onfocus="Focus();" onblur="Blur();" value="请输入关键字"/> </div> <script> function Focus(){ var tag=document.getElementById('id1'); var val=tag.value; if(val == "请输入关键字"){ tag.value=""; } } function Blur(){ var tag=document.getElementById('id1'); var val=tag.value; if(val==""){ tag.value="请输入关键字"; } } </script> </body> </html>
使用 .submit() 进行提交 function submitForm(){ document.getElementById('form1').submit(); }
使用 .addEventListener 对事件进行监听 ('click',匿名函数) 表示点击以后要进行的操做 var mydiv=document.getElementById('form1'); mydiv.addEventListener('click',function(){ console.log('aa'); },false)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非submit标签提交表单实例</title> </head> <body> <form id="form1" action="http://www.baidu.com"> <input type="text" /> </form> <a onclick="submitForm();">A标签提交</a> <script> function submitForm(){ document.getElementById('form1').submit(); } var mydiv=document.getElementById('form1'); mydiv.addEventListener('click',function(){ console.log('aa'); },false) </script> </body> </html>
使用 disabled 表示标签不可用 <input type="text" disabled />
在标签中能够自定义属性 此处定义的是 alex <a alex='123'>f2</a>
引入 jquery 文件 <script src="jquery-1.12.4.js"></script>
使用 $(dom对象) 后即为 jquery 对象 $("#i1")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <input type="text" /> <input type="text" disabled /> <input type="text" /> <div id='i10' class='c1'> <div> <a>asd</a> </div> <a alex='123'>f2</a> <a alex='456'>f2</a> <a>f3</a> <a>f4</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $("#i1") </script> </body> </html>
td 标签内部能够使用 input 标签 <td><input type="checkbox" /></td> 获取 id 为 tb的标签,属性为 checkbox 的, 使用 prop 设置属性为 true prop 返回值为 true 或 false,能够用于判断 $('#tb :checkbox').prop('checked',true);
循环时使用 .each( function(参数){ 代码块 } )
在使用 script 代码时,使用的 this 对象是 dom 对象, 使用 $(this) 转换为 jquery 对象
三元运算 var v = 条件? 真值：假值; var v = $(this).prop('checked')?false:true;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();" /> <input type="button" value="反选" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true); } function cancleAll() { $('#tb :checkbox').prop('checked',false); } function reverseAll() { $(':checkbox').each(function(k){ // this,代指当前循环的每个元素 // Dom /* if(this.checked){ this.checked = false; }else{ this.checked = true; } */ /* if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } */ // 三元运算var v = 条件? 真值：假值 var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html>
在 script 中 一行代码实现菜单栏 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
min-height: 50px; 设置最小高度
script 中 .header 表示 class 为 header 的标签 .click 表示点击时,会进行调用的函数 $('.header').click(function(){ 代码块 }
.addClass('hide') 在 class 属性中添加 hide 样式 .removeClass('hide') 在 class 属性中删除 hide 样式 $(this).next() 下一个 $(this).prev() 上一个 $(this).parent() 父 $(this).children() 孩子 $('#i1').siblings() 兄弟 $('#i1').find('#i1') 查找 #表示寻找 id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">标题一</div> <div id="i1" class="content hide">内容</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function(){ // 当前点击的标签 $(this) // 获取某个标签的下一个标签 // 获取某个标签的父标签 // 获取全部的兄弟标签 // 添加样式和移除样式 // $('.i1').addClass('hide') // $('#i1').removeClass('hide') // var v = $("this + div"); // $("label + input") // console.log(v); // $("afsldkfja;skjdf;aksdjf") // 筛选器 /* $(this).next() 下一个 $(this).prev() 上一个 $(this).parent() 父 $(this).children() 孩子 $('#i1').siblings() 兄弟 $('#i1').find('#i1') 子子孙孙中查找 $('#i1').addClass(..) $('#i1').removeClass(..) */ // 链式编程 // $(...).click(function(){ // this.. // }) // $(this).next().removeClass('hide'); // $(this).parent().siblings().find('.content').addClass('hide') $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') }) </script> </body> </html>
能够进行添加和显示编辑界面,编辑后界面无变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="肯定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $('.del').click(function () { $(this).parent().parent().remove(); }); function confirmModal() { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = "11.11.11.11"; var td2 = document.createElement('td'); td2.innerHTML = "8001"; $(tr).append(td1); $(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide'); // $('.modal input[type="text"]').each(function () { // // var temp = "<td>..." // // // // }) } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td的target属性值 var n = $(this).attr('target'); // 获取td中的内容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); // var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // $('.modal input[name="hostname"]').val(host); // $('.modal input[name="port"]').val(port); // 循环获取tds中内容 // 获取 <td>内容</td> 获取中间的内容 // 赋值给input标签中的value }); </script> </body> </html>
在 div 中使用 span 标签 <div class="c1"> <p> <span id="i1">Hello</span> </p> <span>Hello Again</span> </div>
.toggleClass(class 内部的样式名称) 实现翻转 使用 #i1 绑定 click 点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input type='checkbox' id='i2' /> <input id="i1" type="button" value="开关" /> <div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function(){ // if($('.c1').hasClass('hide')){ // $('.c1').removeClass('hide'); // }else{ // $('.c1').addClass('hide'); // } $('.c1').toggleClass('hide'); }) </script> </body> </html>
在 style 内设置样式 cursor: pointer; 表示当鼠标移动到该区域时,变换为小手 script 中添加 .attr('a'); 进行设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); var target = $(this).attr('a'); $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
script 使用 .eq(值) 进行判断是否相等 .index() 获取索引值 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" >菜单一</div> <div class="menu-item" >菜单二</div> <div class="menu-item" >菜单三</div> </div> <div class="content"> <div >内容一</div> <div class="hide" >内容二</div> <div class="hide">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
script 获取值 .val()
$('#u1') 为 jquery 对象, jquery 对象能够使用 append 在后面添加元素
prepend 在前面添加元素 after 在后面另起一行添加元素
before 在最开始另起一行添加元素
remove 删除元素
clone 复制元素
empty 移除全部元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <input id="a2" type="button" value="删除" /> <input id="a3" type="button" value="复制" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); // $('#u1').prepend(temp); // $('#u1').after(temp) //$('#u1').before(temp) }); $('#a2').click(function () { var index = $('#t1').val(); $('#u1 li').eq(index).remove(); //$('#u1 li').eq(index).empty(); }); $('#a3').click(function () { var index = $('#t1').val(); var v = $('#u1 li').eq(index).clone(); $('#u1').append(v); // $('#u1 li').eq(index).remove(); // $('#u1 li').eq(index).empty(); }) </script> </body> </html>
设置 css 样式 $(tag).css('属性名','值'); $(tag).css('fontSize',fontSize + "px"); 中止执行 clearInterval(obj);
点赞 示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { AddFavor(this); }); function AddFavor(self) { // DOM对象 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>
overflow 设置页面内部滚动条 overflow: auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1"></div> <div style="height: 100px;width:100px;overflow: auto"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> <div id="i2"></div> <div style="height: 1000px;"></div> <script src="jquery-1.12.4.js"></script> </body> </html>
实现页面可移动框 示例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }); $("#title").mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }); $("#title").mouseup(function(){ $("#title").off('mousemove'); }); }) </script> </body> </html>
.mouseover(function(){}) 当鼠标指针在上面时,要进行的操做 .mousedown(function(e){}) 当鼠标放下时,要进行的操做 .clientX 返回水平 x 坐标 .clientY 返回水平 y 坐标 .parent().offset().left 对于当前位置所进行的偏移,左偏 .parent().offset().top; 顶部
获取 id 为 t1 的标签的值 <input id="t1" type="text" /> var v = $('#t1').val();
.delegate 进行事件委托 $('标签名').delegate('标签','click',function () { 代码块 })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); }); // $('ul li').click(function () { // var v = $(this).text(); // alert(v); // }) // $('ul li').bind('click',function () { // var v = $(this).text(); // alert(v); // }) // $('ul li').on('click', function () { // var v = $(this).text(); // alert(v); // }) $('ul').delegate('li','click',function () { var v = $(this).text(); alert(v); }) </script> </body> </html>
在 script 代码函数中使用 return false 会终止,不进行接下来的操做 return true 会继续进行跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你2</a> <script src="jquery-1.12.4.js"></script> <script> function ClickOn() { alert(123); return true; } $('#i1').click(function () { alert(456); return false; }) </script> </body> </html>
点击走你2 , 不会进行跳转网页javascript
知识点总结 switch (){ case:ddddd: console.log(ddd); break; case:ddddd: console.log(ddd); break; default: 语句; } JavaScript 函数 普通函数 function func(arg){ } 匿名函数 没有名字的函数叫匿名函数 setIntervar(function(){ 函数体; }) 自执行函数:args形参，1为实参 (function(args){ console.log(args); )(1) 序列化： JSON.stringify(li) 将对象转化成为字符床 JSON.parse(s) 将字符串转成对象类型 转义 Python eval(表达式) exec(执行代码) 没有返回值 javaScript: eval 是Python的集合，即：支持表达式和执行代码两块 时间模块 var d = new Date() d.setMinutes()+4 /* 设置时间*/ d.getetMinutes() /* 获取时间*/ 做用域 1、其余语言以{代码块}做为做用域 2、Python里边的做用域以{函数}为单位 3、JavaScript的做用域跟Python同样，以函数为单位 变量向上查找 xo=1;/*标记1*/ function func(){ var xo=2;/*标记2*/ function inner(){ var xo = 3;/*标记3*/ console.log(xo) } } 若是标记3的xo有定义，则输出3，若是标记3没定义，标记2有定义，则输出2，同理，若是都没有定义则报错。 JavaScript面向对象 function foo(name){ this.name = name } var obj=new foo('Guo'); a、this关键字代指对象 b、new建立一个对象 DOM学习： innerText： document.getElementById('i1).innerText 获取文本 innerHTML： document.getElementById('i1).innerHTML 获取所有内容 value input 获取input的值 select 获取select选中的值 textarea 搜索框的示例： function Focus(){ var tag=document.getElementById('id1'); var val=tag.value; if(val == "请输入关键字"){ tag.value=""; } } function Blur(){ var tag=document.getElementById('id1'); var val=tag.value; if(val==""){ tag.value="请输入关键字"; } } 函数方法命名都是驼峰命名，如className,第一个单词首字母小写，以后其余单词首字母大写 var obj=document.getElementById('id1').classList CSS样式操做 var obj_style=obj.style. 属性操做： getAttribute 获取属性值 setAttribute 设置属性值 obj.setAttribute('属性名','属性值') obj.setAttribute('属性名','属性值') 建立标签 tag.createElement('标签名称') a.字符串形式 b.对象的方式 tag.createElement('dvi') #建立div标签 提交表单： <script> function submitForm(){ document.getElementById('form1').submit() } </script> 其余操做 confirm:确认框，返回True或者False location.href获取当前页面的url location.href=""#设置当前url location.href=reload #刷新页面 si=setInterval(function(){},5000) clearInterval(si) si=setTimeout(function(){},5000) clearTimeout(si) 事件 onclick 点击 onblur 光标移开 onfocus 光标插进去 绑定事件两种方式 a.直接标签绑定 b.先获取Dom对象，而后进行绑定 document.getElementById('xx').onclick document.getElementById('xx').onfocus this 当前触发事件的标签 a.事件的第一种绑定方式 <input type="button" onclick="clickOn(this)"> function clickOn(self){ //self 当前点击的标签 } b.事件的第二种绑定方式 <input id="i1" type=button> document.getElementById('i1').onclick=function(){ //this代指当前点击的标签 } c.事件的第三种绑定方式 var mydiv=document.getElementById('form1') mydiv.addEventListener('click',function(){ console.log('aa') },false) #false:冒泡模型 #true:捕捉模型，默认不写就是冒泡模型 //做用域的示例 var myTrs =document.getElementByTagName('tr'); var len=myTrs.length; for(var i=0;i<len;i++){ myTrs[i].onmouseover=function(){ #错误写法 myTrs[i].style.backgoundColor='red' this.style.backgoundColor='red' } } 做用域-词法分析 分析完以后，再赋值。
jQuery http://jquery.cuishifeng.cn/ 转换： jquery对象[0] => Dom对象 Dom对象 => $(Dom对象) 查找元素 jQuery： 选择器，直接找到某个或者某类标签 1. id $('#id') 2. class <div class='c1'></div> $(".c1") 3. 标签 <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. 组合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') $('.c2') $('a,.c2,#i10') 5. 层级 $('#i10 a') 子子孙孙 $('#i10>a') 儿子 6. 基本 :first :last :eq() 7. 属性 $('[alex]') 具备alex属性的全部标签 $('[alex="123"]') alex属性等于123的标签 <input type='text'/> <input type='text'/> <input type='file'/> <input type='password'/> $("input[type='text']") $(':text') 实例： 多选，反选，全选 - 选择权 - $('#tb:checkbox').prop('checked'); 获取值 $('#tb:checkbox').prop('checked', true); 设置值 - jQuery方法内置循环： $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){ // k当前索引 // this，DOM，当前循环的元素 $(this) }) - var v = 条件 ? 真值 : 假值 筛选 $('#i1').next() $('#i1').nextAll() $('#i1').nextUntil('#ii1') <div> <a>asdf</a> <a>asdf</a> <a id='i1'>asdf</a> <a>asdf</a> <a id='ii1'>asdf</a> <a>asdf</a> </div> $('#i1').prev() $('#i1').prevAll() $('#i1').prevUntil('#ii1') $('#i1').parent() $('#i1').parents() $('#i1').parentsUntil() $('#i1').children() $('#i1').siblings() $('#i1').find() $('li:eq(1)') $('li').eq(1) first() last() hasClass(class) 文本操做： $(..).text() # 获取文本内容 $(..).text(“<a>1</a>”) # 设置文本内容 $(..).html() $(..).html("<a>1</a>") $(..).val() $(..).val(..) 样式操做： addClass removeClass toggleClass 属性操做： # 专门用于作自定义属性 $(..).attr('n') $(..).attr('n','v') $(..).removeAttr('n') <input type='checkbox' id='i1' /> # 专门用于chekbox,radio $(..).prop('checked') $(..).prop('checked', true) PS: index 获取索引位置 文档处理： append prepend after before remove empty clone css处理 $('t1').css('样式名称', '样式值') 点赞： - $('t1').append() - $('t1').remove() - setInterval - 透明度 1 》 0 - position - 字体大小，位置 位置： $(window).scrollTop() 获取 $(window).scrollTop(0) 设置 scrollLeft([val]) offset().left 指定标签在html中的坐标 offset().top 指定标签在html中的坐标 position() 指定标签相对父标签(relative)标签的坐标 <div style='relative'> <div> <div id='i1' style='position:absolute;height:80px;border:1px'></div> </div> </div> $('i1').height() # 获取标签的高度 纯高度 $('i1').innerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight(true) # 获取边框 + 纯高度 + ？ # 纯高度，边框，外边距，内边距 事件 DOM： 三种绑定方式 jQuery： $('.c1').click() $('.c1')..... $('.c1').bind('click',function(){ }) $('.c1').unbind('click',function(){ }) ******************* $('.c').delegate('a', 'click', function(){ }) $('.c').undelegate('a', 'click', function(){ }) $('.c1').on('click', function(){ }) $('.c1').off('click', function(){ }) 阻止事件发生 return false # 当页面框架加载完成以后，自动执行 $(function(){ $(...) }) jQuery扩展： - $.extend $.方法 - $.fn.extend $(..).方法 (function(){ var status = 1; // 封装变量 })(jQuery)
更多实例: HTML 实例 https://www.runoob.com/html/html-examples.html CSS实例 https://www.runoob.com/css/css-examples.html JavaScript 实例 https://www.runoob.com/js/js-examples.html jQuery 实例 https://www.runoob.com/jquery/jquery-examples.html
2020-08-08css
<a href="网址">内容</a> 跳转到该地址 <a href="http://www.oldboyedu.com">老男孩</a>
<p>内容</p> 使用 p 段落标签,表示段落,能够添加 br 标签,进行换行
<p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
<p>123</p>
hn 系列标签 <h1> 内容 </h1> <h1>Alex</h1> <h2>Alex</h2> <h3>Alex</h3> <h4>Alex</h4> <h5>Alex</h5> <h6>eric</h6>
<span>内容</span> span 标签,白板,行内标签
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<div> 内容,代码块 </div> div 最经常使用的白板标签,块级标签 <div>1</div> <div>2</div> <div>3</div>
<input type="text" name="须要使用的姓名" /> input 标签,用于用户输入姓名,密码,按钮,文件上传等 <input type="text" name="user" /> type 能够具备 text password button submit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://192.168.16.35:8888/index" method="POST"> <input type="text" name="user" /> <input type="text" name="email"/> <input type="password" name="pwd"/> <!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }--> <input type="button" value="登陆1"/> <input type="submit" value="登陆2"/> </form> <br/> <form> <input type="text" /> <input type="password" /> <input type="button" value="登陆1"/> <input type="submit" value="登陆2"/> </form> </body> </html>
多选框 使用 select 和 option 进行建立,selected 为默认选择 multiple 属性为 multiple 表示,进行多选 <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select>
<textarea> 内容 </textarea> 多行文本框,能够输入多行文本 <textarea name="meno" >asdfasdf</textarea>
input 使用 radio 属性,实现单选框(name 值要相同)
checked="checked" 表示进行勾选
男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/>
input 使用 checkbox 属性,实现多选框(name 值要相同) checked="checked" 表示进行勾选
篮球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 台球：<input type="checkbox" name="favor" value="4" checked="checked"/> 网球：<input type="checkbox" name="favor" value="5" />
上传文件使用 input 标签的 file 属性 注:在 form 中 添加 enctype="multipart/form-data" <input type="file" name="fname"/> <form enctype="multipart/form-data">
重置 使用 input 标签的 type="reset" 属性 <input type="reset" value="重置" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <textarea name="meno" >asdfasdf</textarea> <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select> <input type="text" name="user" /> <p>请选择性别：</p> 男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/> <p>爱好</p> 篮球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 台球：<input type="checkbox" name="favor" value="4" checked="checked"/> 网球：<input type="checkbox" name="favor" value="5" /> <p>技能</p> 撩妹：<input type="checkbox" name="skill" checked="checked" /> 写代码：<input type="checkbox" name="skill"/> <p>上传文件</p> <input type="file" name="fname"/> </div> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> </body> </html>
a 标签根据 id 进行跳转 # id 名称 <a href="#i1">第一章</a> <div id="i1" style="height:600px;">第一章的内容</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height:600px;">第一章的内容</div> <div id="i2" style="height:600px;">第二章的内容</div> <div id="i3" style="height:600px;">第三章的内容</div> <div id="i4" style="height:600px;">第四章的内容</div> </body> </html>
在 a 标签使用 img 图片进行跳转 img 标签中 src 指定文件位置,title 为鼠标停留在上面显示的字段,style 表示应用了样式,alt 为不能正常显示时,会出现的内容 <a href="http://www.oldboyedu.com"> <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女"> </a>
<ul><li>内容</li></ul> ul 建立无序列表 <ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul>
ol 建立有序列表 此处的 ul 和 ol 均可以进行变换样式 <ol> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ol>
使用 dl dt dd 实现相似于菜单界面(分级) <dl> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> </dl>
table 标签,内部具备 th头 和 td 单元格,tr 换行 在 td 中能够使用 a 标签,进行跳转
a 内的 # 表示当前页面
<table border="1"> <tr> <td>主机名</td> <td>端口</td> <td>操做</td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td> <a href="s2.html">查看详细</a> <a href="#">修改</a> </td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td>第二行，第3列</td> </tr> </table>
在 table 中使用 thead 和 tbody 并利用 colspan 和 rowspan 进行单元格合并
<table border="1"> <thead> <tr> <th>表头1</th> <th>表头1</th> <th>表头1</th> <th>表头1</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>
fieldset 登陆外的包裹的线 使用 for 保证点击内容跳转到对应的 id 名称处
<fieldset> <legend>登陆</legend> <label for="username">用户名：</label> <input id="username" type="text" name="user" /> <br /> <label for="pwd">密码：</label> <input id="pwd" type="text" name="user" /> </fieldset>
head 内的 styly 标签 设置样式 .名称 对应 class 为对应名称的属性 #名称 对应 id 为对应名称的属性 能够多个 class 一块儿设置,使用 .c1[属性='名称']{ 样式 } 也能够进行设置
.c1 div 表示为 class为 c1 的下一个 div 标签设置样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* #i1{ background-color: #2459a2; height: 48px; } #i2{ background-color: #2459a2; height: 48px; } #i3{ background-color: #2459a2; height: 48px; } .c1{ background-color: #2459a2; height: 10px; } */ /*#c2{*/ /*background-color: black;*/ /*color: white;*/ /*}*/ /*.c1 div{*/ /*background-color: black;*/ /*color: white;*/ /*}*/ .i1,.i2,.i3{ background-color: black; color: white; } .c1[n='alex']{ width:100px; height:200px; } </style> </head> <body> <div class="i1">ff</div> <div class="i2">ff</div> <div class="i3">2</div> <input class="c1" type="text" n="alex"> <input class="c1" type="password"> </body> </html>
使用 link 标签链接外部 css 样式 <link rel="stylesheet" href="路径/文件名.css" /> <link rel="stylesheet" href="css/commons.css" />
commons.css 内容 .c2{ font-size: 58px; color: black; } .c1{ background-color: red; color: white; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/commons.css" /> </head> <body> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> </body> </html>
div 标签在 style 属性中 设置边框 border style="border: 1px solid red;"
style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold; " 属性 注: height 设置高度 width 宽度 border 边框 font-size 字体大小 text-align 文本位置 line-height 高度 font-weight 粗体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="border: 1px solid red;"> asdfasdf </div> <div style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold; ">asdf</div> </body> </html>
style 使用 float 属性 width 宽度,width:20%
float 悬浮,float:left <body> <div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 20%;background-color: black;float: left">2</div> </body>
设置 class 为 pg-header 的标签样式 <style> .pg-header{ 样式 } </style>
styly 属性 width 宽度,margin 设置外边距 margin: 0 auto; float 的两种方式,能够设置在 div 中 float: left; float: right; style="clear: both" 在 float 下部编写内容
设置宽度 width ,border 设置边框 , float 页面布局 style="width: 300px;border: 1px solid red;" style="width: 96px;height:30px;border: 1px solid green;float: left;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 38px; background-color: #dddddd; line-height: 38px; } </style> </head> <body style="margin: 0"> <div class="pg-header"> <div style="width: 980px;margin: 0 auto;"> <div style="float: left;">收藏本站</div> <div style="float: right;"> <a>登陆</a> <a>注册</a> </div> <div style="clear: both"></div> </div> </div> <div> <div style="width: 980px;margin: 0 auto;"> <div style="float: left"> Logo </div> <div style="float: right"> <div style="height: 50px;width: 100px;background-color: #dddddd"></div> </div> <div style="clear: both"></div> </div> </div> <div style="background-color: red;"> <div style="width: 980px;margin: 0 auto;"> asdfsdf </div> </div> <div style="width: 300px;border: 1px solid red;"> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="clear: both;"></div> </div> </body> </html>
style 样式设置 display display 能够设置 inline , block , inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: red;display: inline;">asdf</div> <span style="background-color: red;display: block;">asdf</span> <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span> <a style="background-color: red;">Eric</a> </body> </html>
知识点总结 HTML 1、一套规则，浏览器认识的规则。 2、开发者： 学习Html规则 开发后台程序： - 写Html文件（充当模板的做用） ****** - 数据库获取数据，而后替换到html文件的指定位置（Web框架） 3、本地测试 - 找到文件路径，直接浏览器打开 - pycharm打开测试 4、编写Html文件 - doctype对应关系 - html标签，标签内部能够写属性 ====> 只能有一个 - 注释： <!-- 注释的内容 --> 5、标签分类 - 自闭合标签 <meta charset="UTF-8"> - 主动闭合标签 title>老男孩</title> 6、 head标签中 - <meta -> 编码，跳转，刷新，关键字，描述，IE兼容 <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> - title标签 7、body标签 - 图标， > < - p标签，段落 - br，换行 ======== 小总结 ===== 全部标签分为： 块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距） 行内标签： span（白板） 标签之间能够嵌套 标签存在的意义，css操做，js操做 ps:chorme审查元素的使用 - 定位 - 查看样式 - h系列 - div - span - input系列 + form标签 input type='text' - name属性，value="值" input type='password' - name属性，value="值" input type='submit' - value='提交' 提交按钮，表单 input type='button' - value='登陆' 按钮 input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥） input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据） input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" input type='rest' - 重置 <textarea >默认值</textarea> - name属性 select标签 - name,内部option value, 提交到后台，size，multiple - a标签 - 跳转 - 锚 href='#某个标签的ID' 标签的ID不容许重复 - img src alt title - 列表 ul li ol li dl dt dd - 表格 table thead tr th tbody tr td colspan = '' rowspan = '' - label 用于点击文件，使得关联的标签获取光标 <label for="username">用户名：</label> <input id="username" type="text" name="user" /> - fieldset legend - 20个标签 CSS 在标签上设置style属性： background-color: #2459a2; height: 48px; ... 编写css样式： 1. 标签的style属性 2. 写在head里面 style标签中写样式 - id选择区 #i1{ background-color: #2459a2; height: 48px; } - class选择器 ****** .名称{ ... } <标签 class='名称'> </标签> - 标签选择器 div{ ... } 全部div设置上此样式 - 层级选择器（空格） ****** .c1 .c2 div{ } - 组合选择器（逗号） ****** #c1,.c2,div{ } - 属性选择器 ****** 对选择到的标签再经过属性再进行一次筛选 .c1[n='alex']{ width:100px; height:200px; } PS: - 优先级，标签上style优先，编写顺序，就近原则 2.5 css样式也能够写在单独文件中 <link rel="stylesheet" href="commons.css" /> 3、注释 /* */ 4、边框 - 宽度，样式，颜色 (border: 4px dotted red;) - border-left 5、 height， 高度 百分比 width， 宽度 像素，百分比 text-align:ceter, 水平方向居中 line-height，垂直方向根据标签高度 color、 字体颜色 font-size、 字体大小 font-weight 字体加粗 6、float 让标签浪起来，块级标签也能够堆叠 老子管不住： <div style="clear: both;"></div> 7、display display: none; -- 让标签消失 display: inline; display: block; display: inline-block; 具备inline,默认本身有多少占多少 具备block，能够设置没法设置高度，宽度，padding margin ****** 行内标签：没法设置高度，宽度，padding margin 块级标签：设置高度，宽度，padding margin 8、padding margin(0,auto)
a 标签内部使用图片,设置样式 <a href="网址"> <img src="图片路径/图片名.jpg" style="width:200px;height:300px;"> </a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ border: 0; } </style> </head> <body> <a href="http://www.oldboyedu.com" >asdf</a> <a href="http://www.oldboyedu.com"> <img src="1.jpg" style="width: 200px;height: 300px;"> </a> </body> </html>
返回顶部
function GoTop(){ document.documentElement.scrollTop = 0; } 使用 document.documentElement.scrollTop = 0;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white; position: fixed; bottom:20px; right: 20px; ">返回顶部</div> <div style="height: 5000px;background-color: #dddddd;"> asdfasdf </div> <script> function GoTop(){ document.documentElement.scrollTop = 0; } </script> </body> </html>
style 标签内部使用 position: fixed; 固定位置 margin-top: 48px;与上部模块之间的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; } .pg-body{ background-color: #dddddd; height: 5000px; margin-top: 48px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
position 使用绝对定位 position: absolute;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 50px;height: 50px;background-color: black;position: absolute;right: 0;bottom: 0;">asdf</div> <div style="height: 5000px;background-color: #dddddd;"> asdfasdf </div> </body> </html>
使用 div 嵌套使用 position 外层使用 relative,内部使用 absolute <div style="position: relative;......."> <div style="position: absolute;......."></div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div> </div> </body> </html>
style 能够设置属性 style="display:none;z-index:10; position: fixed;top: 50%;left:50%; margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; style="display:none;z-index:9; position: fixed;background-color: black; top:0; bottom: 0; right: 0; left: 0; opacity: 0.5; "
overflow 的两种属性的区别 auto 会加入滚动条 overflow: auto overflow: hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;width: 300px;overflow: auto"> <img src="1.jpg"> </div> <div style="height: 200px;width: 300px;overflow: hidden"> <img src="1.jpg"> </div> </body> </html>
使用 position: fixed 固定头部 设置高度 line-height: 48px; 设置距离上部距离 margin-top: 50px; 设置块级元素在同一行显示 display: inline-block; 设置鼠标碰到时,发生的变化 :hover .pg-header .menu:hover{ background-color: blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right: 0; left: 0; top: 0; height: 48px; background-color: #2459a2; line-height: 48px; } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; } .pg-header .menu{ display: inline-block; padding: 0 10px 0 10px; color: white; } /*当鼠标移动到当前标签上时，如下css属性才生效*/ .pg-header .menu:hover{ background-color: blue; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">所有</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg-body"> <div class="w">a</div> </div> </body> </html>
style 样式 background-image: url(icon_18_118.png); 设置图片的 url , 能够为本地图片 background-repeat 设置是否重复背景图像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 100px;"></div> <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div> </body> </html>
能够为不一样的标签设置相同的 class 属性,可是 id 必须不一样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input class="c1" type="radio" name="gender" value="1" /> <input type="radio" name="gender" value="2" /> </div> </body> </html>
输入框嵌入图片(注:图片目前和输入的内容会重叠)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" style="height: 35px;width: 400px; margin-right: 20px;" /> <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block; "></span> </div> </body> </html>
在标签中使用 onclick=函数名(); 能够进行调用该函数 onclick="GetData(); 使用 document.getElementById('id名称') 能够获取该数据 document.getElementById('user') function GetData(){ var i = document.getElementById('user'); alert(i.value); } 使用 .value 获取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="user" > <input type="button" onclick="GetData();" value="点我" /> <script> function GetData(){ var i = document.getElementById('user'); alert(i.value); } </script> </body> </html>
使用外部 js 文件 <script src="文件名.js"></script> <script src="commons.js"></script>
能够添加 type="text/javascript" 进行声明 script 语句 <script type="text/javascript"> //javascript代码 </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="commons.js"></script> <script type="text/javascript"> //javascript代码 alert(123); </script> </head> <body> </body> </html>
声明全局变量 age = "18"; 转换为 int 类型使用 parseInt(变量); i = parseInt(age); 定义局部变量 var name = 'eric'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>sadf</h1> <script> /* name = 'alex'; function func(){ var name = 'eric' }*/ age = "18"; i = parseInt(age); </script> </body> </html>
setInterval 设置定时器 setInterval("函数名();",毫秒); 函数定义 function 函数名(参数){ 代码块; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function f1(){ console.log(1); } // 建立一个定时器 //setInterval("alert(123);", 5000); setInterval("f1();", 1000); </script> </body> </html>
使用 function 定义函数 func 函数名称 var 定义局部变量,须要注意变量的做用域 document.getElementById 经过指定的 id 名称进行获取 .innerText 获取文本内容 .charAt(0) 获取第一个字符 content.substring(1,content.length) 获取第二个字符到最后 使用 + 号进行字符串的拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">欢迎老男孩莅临指导</div> <script> function func(){ // 根据ID获取指定标签的内容,定于局部变量接受 var tag = document.getElementById('i1'); // 获取标签内部的内容 var content = tag.innerText; var f = content.charAt(0); var l = content.substring(1,content.length); var new_content = l + f; tag.innerText = new_content; } setInterval('func()', 500); </script> </body> </html>
div 内部嵌套 div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div></div> <div> c1 </div> </div> <div> <div></div> <div id="i1"> c2 </div> </div> <div> <div></div> <div> c3 </div> </div> </body> </html>
position: fixed; 固定位置 opacity: 0.6; 透明度 z-index: 9; 显示的优先级 margin-left: -250px;距离左面距离 margin-top: -200px;距离顶部距离
添加按钮绑定 js 函数 <input type="button" value="功能" onclick="函数名();" /> <input type="button" value="添加" onclick="ShowModel();" />
获取到指定的 id 以后,使用 classList 获取 class 列表, 删除 class 属性使用 remove 添加 class 属性使用 add document.getElementById('i1').classList.remove('hide'); document.getElementById('i1').classList.add('hide');
多选框选中 使用 checked 属性 true 表示选中,false 表示没有选中 checkbox.checked = true; checkbox.checked = false;
for 循环 for(var i=0;i<数组对象.length;i++){ // 循环 代码块 }
实现多选反选,主要是依靠 checked 属性(选中为true) if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全选" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="肯定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll(){ var tbody = document.getElementById('tb'); // 获取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll(){ var tbody = document.getElementById('tb'); // 获取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbody = document.getElementById('tb'); // 获取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script> </body> </html>
在标签中绑定事件能够添加参数 <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> function ChangeMenu(nid){ 代码块 }
此处,使用nid接收传递过来的 i1 值
实现菜单栏
.parentElement 父节点 .children 孩子节点 .nextElementSibling 下一个元素节点的兄弟节点 var item_list = current_header.parentElement.parentElement.children; 添加样式能够使用索引,指定第几个孩子进行添加 class 样式 current_item.children[1].classList.add('hide');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
for 循环的另外一种写法 a 为数组 a = [11,22,33,44] for(var item in a){ console.log(item); }
.getElementsByTagName('div') 经过标签名进行查找 .getElementsByClassName 经过class属性进行查找 .getElementsByName 根据 name 属性进行查找 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementtSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素
知识点总结 1、css重用 <style> 若是整个页面的宽度 > 900px时： { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </style> <div class='c c1'></div> <div class='c c2'></div> 2、自适应 和 改变大小变形 左右滚动条的出现 宽度，百分比 页面最外层：像素的宽度 => 最外层设置绝对宽度 自适应：media 3、默认img标签，有一个1px的边框 img{ border: 0; } 1、块级和行内 2、form标签 <form action='http://sssss' methed='GET' enctype='multi'> <div>asdfasdf</div> <input type='text' name='q' /> <input type='text' name='b' /> # 上传文件 <input type='file' name='f' /> <input type='submit' /> </form> GET: http://sssss?q=用户输入的值 http://sssss?q=用户输入的值&b=用户输入的内容 POST： 请求头 请求内容 3、display: block;inline;inline-block 4、float： <div> <div style='float:left;'>f</div> <div style='clear:both;'></div> </div> 5、margin: 0 auto; 6、padding, ---> 自身发生变化 CSS补充 position: a. fiexd => 固定在页面的某个位置 b. relative + absolute <div style='position:relative;'> <div style='position:absolute;top:0;left:0;'></div> </div> opcity: 0.5 透明度 z-index: 层级顺序 overflow: hidden,auto hover background-image:url('image/4.gif'); # 默认，div大，图片重复访 background-repeat: repeat-y; background-position-x: background-position-y: 示例：输入框 JavaScript 独立的语言，浏览器具备js解释器 JavaScript代码存在形式： - Head中 <script> //javascript代码 alert(123); </script> <script type="text/javascript"> //javascript代码 alert(123); </script> - 文件 <script src='js文件路径'> </script> PS: JS代码须要放置在 <body>标签内部的最下方 注释 当行注释 // 多行注释 /* */ 变量： python： name = 'alex' JavaScript: name = 'alex' # 全局变量 var name = 'eric' # 局部变量 写Js代码： - html文件中编写 - 临时，浏览器的终端 console 基本数据类型 数字 a = 18; 字符串 a = "alex" a.chartAt(索引位置) a.substring(起始位置，结束位置) a.lenght 获取当前字符串长度 ... 列表(数组) a = [11,22,33] 字典 a = {'k1':'v1','k2':'v2'} 布尔类型 小写 for循环 1. 循环时，循环的元素是索引 a = [11,22,33,44] for(var item in a){ console.log(item); } a = {'k1':'v1','k2':'v2'} for(var item in a){ console.log(item); } 2. for(var i=0;i<10;i=i+1){ } a = [11,22,33,44] for(var i=0;i<a.length;i=i+1){ } 不支持字典的循环 条件语句 if(条件){ }else if(条件){ }else if(条件){ }else{ } == 值相等 === 值和类型都相等 && and || or 函数： function 函数名(a,b,c){ } 函数名(1,2,3) Dom 1、找到标签 获取单个元素 document.getElementById('i1') 获取多个元素（列表）document.getElementsByTagName('div') 获取多个元素（列表）document.getElementsByClassName('c1') a. 直接找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 b. 间接 tag = document.getElementById('i1') parentElement // 父节点标签元素 children // 全部子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 2、操做标签 a. innerText 获取标签中的文本内容 标签.innerText 对标签内部文本进行从新赋值 标签.innerText = "" b. className tag.className => 直接总体作操做 tag.classList.add('样式名') 添加指定样式 tag.classList.remove('样式名') 删除指定样式 PS： <div onclick='func();'>点我</div> <script> function func(){ } </script> c. checkbox 获取值 checkbox对象.checked 设置值 checkbox对象.checked = true
Dom 找标签 - 直接找 $('#id') $('.c1').siblings() 操做： innerText checkbox: checked className classList 事件： <div onclick='函数(123)'></div> <script> 代码块 </script> 定时器 setInterval('函数()', 4000) 其余： alert() console.log()
onblur="Blur(); 当鼠标不在输入框时,会进行的操做
获取指定 id 以后标签的值,使用.value 进行获取 var val=tag.value; 当什么都没有输入时,值为 ""
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框请输入关键字</title> <style> .c_keys{ width: 200px; height: 30px; } </style> </head> <body> <div> <input id="id1" type="text" class="c_keys" onfocus="Focus();" onblur="Blur();" value="请输入关键字"/> </div> <script> function Focus(){ var tag=document.getElementById('id1'); var val=tag.value; if(val == "请输入关键字"){ tag.value=""; } } function Blur(){ var tag=document.getElementById('id1'); var val=tag.value; if(val==""){ tag.value="请输入关键字"; } } </script> </body> </html>
使用 .submit() 进行提交 function submitForm(){ document.getElementById('form1').submit(); }
使用 .addEventListener 对事件进行监听 ('click',匿名函数) 表示点击以后要进行的操做 var mydiv=document.getElementById('form1'); mydiv.addEventListener('click',function(){ console.log('aa'); },false)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非submit标签提交表单实例</title> </head> <body> <form id="form1" action="http://www.baidu.com"> <input type="text" /> </form> <a onclick="submitForm();">A标签提交</a> <script> function submitForm(){ document.getElementById('form1').submit(); } var mydiv=document.getElementById('form1'); mydiv.addEventListener('click',function(){ console.log('aa'); },false) </script> </body> </html>
使用 disabled 表示标签不可用 <input type="text" disabled />
在标签中能够自定义属性 此处定义的是 alex <a alex='123'>f2</a>
引入 jquery 文件 <script src="jquery-1.12.4.js"></script>
使用 $(dom对象) 后即为 jquery 对象 $("#i1")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <input type="text" /> <input type="text" disabled /> <input type="text" /> <div id='i10' class='c1'> <div> <a>asd</a> </div> <a alex='123'>f2</a> <a alex='456'>f2</a> <a>f3</a> <a>f4</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $("#i1") </script> </body> </html>
td 标签内部能够使用 input 标签 <td><input type="checkbox" /></td> 获取 id 为 tb的标签,属性为 checkbox 的, 使用 prop 设置属性为 true prop 返回值为 true 或 false,能够用于判断 $('#tb :checkbox').prop('checked',true);
循环时使用 .each( function(参数){ 代码块 } )
在使用 script 代码时,使用的 this 对象是 dom 对象, 使用 $(this) 转换为 jquery 对象
三元运算 var v = 条件? 真值：假值; var v = $(this).prop('checked')?false:true;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();" /> <input type="button" value="反选" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true); } function cancleAll() { $('#tb :checkbox').prop('checked',false); } function reverseAll() { $(':checkbox').each(function(k){ // this,代指当前循环的每个元素 // Dom /* if(this.checked){ this.checked = false; }else{ this.checked = true; } */ /* if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } */ // 三元运算var v = 条件? 真值：假值 var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html>
在 script 中 一行代码实现菜单栏 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
min-height: 50px; 设置最小高度
script 中 .header 表示 class 为 header 的标签 .click 表示点击时,会进行调用的函数 $('.header').click(function(){ 代码块 }
.addClass('hide') 在 class 属性中添加 hide 样式 .removeClass('hide') 在 class 属性中删除 hide 样式 $(this).next() 下一个 $(this).prev() 上一个 $(this).parent() 父 $(this).children() 孩子 $('#i1').siblings() 兄弟 $('#i1').find('#i1') 查找 #表示寻找 id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">标题一</div> <div id="i1" class="content hide">内容</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function(){ // 当前点击的标签 $(this) // 获取某个标签的下一个标签 // 获取某个标签的父标签 // 获取全部的兄弟标签 // 添加样式和移除样式 // $('.i1').addClass('hide') // $('#i1').removeClass('hide') // var v = $("this + div"); // $("label + input") // console.log(v); // $("afsldkfja;skjdf;aksdjf") // 筛选器 /* $(this).next() 下一个 $(this).prev() 上一个 $(this).parent() 父 $(this).children() 孩子 $('#i1').siblings() 兄弟 $('#i1').find('#i1') 子子孙孙中查找 $('#i1').addClass(..) $('#i1').removeClass(..) */ // 链式编程 // $(...).click(function(){ // this.. // }) // $(this).next().removeClass('hide'); // $(this).parent().siblings().find('.content').addClass('hide') $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') }) </script> </body> </html>
能够进行添加和显示编辑界面,编辑后界面无变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="肯定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $('.del').click(function () { $(this).parent().parent().remove(); }); function confirmModal() { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = "11.11.11.11"; var td2 = document.createElement('td'); td2.innerHTML = "8001"; $(tr).append(td1); $(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide'); // $('.modal input[type="text"]').each(function () { // // var temp = "<td>..." // // // // }) } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td的target属性值 var n = $(this).attr('target'); // 获取td中的内容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); // var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // $('.modal input[name="hostname"]').val(host); // $('.modal input[name="port"]').val(port); // 循环获取tds中内容 // 获取 <td>内容</td> 获取中间的内容 // 赋值给input标签中的value }); </script> </body> </html>
在 div 中使用 span 标签 <div class="c1"> <p> <span id="i1">Hello</span> </p> <span>Hello Again</span> </div>
.toggleClass(class 内部的样式名称) 实现翻转 使用 #i1 绑定 click 点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input type='checkbox' id='i2' /> <input id="i1" type="button" value="开关" /> <div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function(){ // if($('.c1').hasClass('hide')){ // $('.c1').removeClass('hide'); // }else{ // $('.c1').addClass('hide'); // } $('.c1').toggleClass('hide'); }) </script> </body> </html>
在 style 内设置样式 cursor: pointer; 表示当鼠标移动到该区域时,变换为小手 script 中添加 .attr('a'); 进行设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); var target = $(this).attr('a'); $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
script 使用 .eq(值) 进行判断是否相等 .index() 获取索引值 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" >菜单一</div> <div class="menu-item" >菜单二</div> <div class="menu-item" >菜单三</div> </div> <div class="content"> <div >内容一</div> <div class="hide" >内容二</div> <div class="hide">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
script 获取值 .val()
$('#u1') 为 jquery 对象, jquery 对象能够使用 append 在后面添加元素
prepend 在前面添加元素 after 在后面另起一行添加元素
before 在最开始另起一行添加元素
remove 删除元素
clone 复制元素
empty 移除全部元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <input id="a2" type="button" value="删除" /> <input id="a3" type="button" value="复制" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); // $('#u1').prepend(temp); // $('#u1').after(temp) //$('#u1').before(temp) }); $('#a2').click(function () { var index = $('#t1').val(); $('#u1 li').eq(index).remove(); //$('#u1 li').eq(index).empty(); }); $('#a3').click(function () { var index = $('#t1').val(); var v = $('#u1 li').eq(index).clone(); $('#u1').append(v); // $('#u1 li').eq(index).remove(); // $('#u1 li').eq(index).empty(); }) </script> </body> </html>
设置 css 样式 $(tag).css('属性名','值'); $(tag).css('fontSize',fontSize + "px"); 中止执行 clearInterval(obj);
点赞 示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { AddFavor(this); }); function AddFavor(self) { // DOM对象 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>
overflow 设置页面内部滚动条 overflow: auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1"></div> <div style="height: 100px;width:100px;overflow: auto"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> <div id="i2"></div> <div style="height: 1000px;"></div> <script src="jquery-1.12.4.js"></script> </body> </html>
实现页面可移动框 示例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }); $("#title").mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }); $("#title").mouseup(function(){ $("#title").off('mousemove'); }); }) </script> </body> </html>
.mouseover(function(){}) 当鼠标指针在上面时,要进行的操做 .mousedown(function(e){}) 当鼠标放下时,要进行的操做 .clientX 返回水平 x 坐标 .clientY 返回水平 y 坐标 .parent().offset().left 对于当前位置所进行的偏移,左偏 .parent().offset().top; 顶部
获取 id 为 t1 的标签的值 <input id="t1" type="text" /> var v = $('#t1').val();
.delegate 进行事件委托 $('标签名').delegate('标签','click',function () { 代码块 })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); }); // $('ul li').click(function () { // var v = $(this).text(); // alert(v); // }) // $('ul li').bind('click',function () { // var v = $(this).text(); // alert(v); // }) // $('ul li').on('click', function () { // var v = $(this).text(); // alert(v); // }) $('ul').delegate('li','click',function () { var v = $(this).text(); alert(v); }) </script> </body> </html>
在 script 代码函数中使用 return false 会终止,不进行接下来的操做 return true 会继续进行跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你2</a> <script src="jquery-1.12.4.js"></script> <script> function ClickOn() { alert(123); return true; } $('#i1').click(function () { alert(456); return false; }) </script> </body> </html>
点击走你2 , 不会进行跳转网页html