HTML、CSS和JS
一、html
1、web流程中的HTML
HTML---->赤裸裸的人
CSS ---->穿华丽的衣服
JS ---->让人动起来
浏览器和server端之间的通信本质上是字符串;浏览器将字符串处理为可视化的东西;
web框架的祖宗是socket；
#!/usr/bin/env python
# _*_ coding:utf- _*_
import socket
def handle_request(client):
buf = client.recv()
client.send("HTTP /1.1 200 OK \r\n\r\n")
client.send("<h1 style='color=red;'>123456</h1>") def main():
sock = socket.socket()
sock.bind(('localhost',))
sock.listen()
while True:
connection,address = sock.accept()
handle_request(connection)
connection.close() if __name__ == '__main__':
main()
#!/usr/bin/env python
# _*_ coding:utf- _*_
import socket
def handle_request(client):
buf = client.recv()
client.send("HTTP /1.1 200 OK \r\n\r\n")
f = open('s.html')
data = f.read()
f.close()
client.send(data) def main():
sock = socket.socket()
sock.bind(('localhost',))
sock.listen()
while True:
connection,address = sock.accept()
handle_request(connection)
connection.close() if __name__ == '__main__':
main()
使用html文件
2、html文档树之head信息
a、head头
b、body
内行标签:自己有多少占多少
块级标签:占整行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--页面编码-->
<!--<meta http-equiv="REFRESH" content=""> --> <!--刷新5s-->
<!-- <meta http-equiv="refresh" content="5; url=http://www.baidu.com"> --> <!--5秒之后跳转到后面的URL-->
<title>My test</title>
<!--<link rel="short icon" href="favicon.icon">--> <!--CSS在其他文件中渲染渲染-->
</head>
<!--内嵌标签和块级标签-->
<body>
<h1 style="background-color: red">abdsdfdfdfdfdf</h1> <!-- 一个属性可以不加;号-->
<a style="background-color: green;color: antiquewhite;">汽车之家</a> <!--多个属性需要加;号，只对文字部分涂色-->
<p></p> <!--段落，分一段，另起一段-->
<p>ABC<br/>abc</p> <!--<br/>换行-->
<a href="http://www.taobao.com">Charles </a> <!--超链接-->
<a target="_blank" href="http://www.qq.com">哇哈哈</a> <!--在新的tab中打开链接-->
<a href="#a2">书签</a> <!--跳转到ID为2的位置-->
<div id="a1" style="height: 700px;"></div>
<div id="a2" style="height: 500px;"></div>
</body>
</html>
c、标签
<select name="group"> <!--提交的时候，让value的值等于group，在from表单的时候使用-->
<option value="">上海</option>
<option value="">北京</option>
<option value="" selected="selected">广州</option> <!--默认-->
select 标签
<select>
<optgroup label="河北省"> 不可选
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
</select>
select标签
<input type="checkbox" /> 内嵌的，做复选框
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" checked="checked"/> 默认
input标签
<input type="radio" name="gender"/> #name相同的复选框之间互斥
<input type="radio" name="gender"/>
<input type="radio" />
<input type="radio" />
input
<input type="text" />
<input type="text" value=""/> <!--默认值-->
<input type="password" />
<input type="email" /> <!--必须为email格式-->
input输入框
<input type="button" value="提交" \>
<input type="submit" value="提交" \>
input button
<input type="file" />
input file上传文件
<textarea style="height: 50px;width: 20px;">xxxxx</textarea>
textarea
form表单
<form action="http://127.0.0.1:8000/login">
<p>用户名:<input type="text" name="user" /> </p> 提交到后台的部分为字典
<p>密码:<input type="password" name="pwd" /> </p>
<p>
<input type="radio" name="gender" value= />男<br>
<input type="radio" name="gender" value= />女<br>
</p>
<p>
部门:<select name="depart" >
<option value="">CEO</option>
<option value="">DBA</option>
</select>
</p>
<input type="submit" value="提交" /> <!--只有为submit才可以提交-->
</form> </body>
</html>
form表单
<textarea name="multi" ></textarea>
<input type="checkbox" name="favor" value="v1" />
<input type="checkbox" name="favor" value="v2" />
<input type="checkbox" name="favor" value="v3" />
<input type="checkbox" name="favor" value="v4" /> <!--提交的时候{'favor':v1,v2,v3}-->
lable
<div id="t312">
<h2>
lable
</h2>
姓名:
<input id="name1" type="text">
婚否:
<input id="marry" type="checkbox">
<br>
</div> <label for="name2" >
姓名:
<input id="name2" type="text">
</label>
<label for="marry2" >
婚否:
<input id="marry2" type="checkbox">
</label>
divhe lable实现
列表:
<ul>
<li>zbc</li>
<li>ccc</li>
<li>ggg</li>
</ul>
<ol>
<li>zbc</li>
<li>ccc</li>
<li>ggg</li>
</ol>
<dl>
<dt>河北省</dt>
<dd>邯郸</dd>
<dd>石家庄</dd>
</dl>
自动加黑点、加数字以及内容和标题
table
<table border=""> <!--border表示边框-->
<tr>
<td></td> <!--tr表示行，td表示列-->
<td></td>
<td></td>
</tr>
<tr>
<td></td> <!--多行可以多加几个tr-->
<td colspan=""></td>
<td rowspan=""></td>
</tr> </table>
<table border=""> <!--border表示边框-->
<tr>
<td></td> <!--tr表示行，td表示列-->
<td></td>
<td></td>
</tr>
<tr>
<td></td> <!--多行可以多加几个tr-->
<td colspan=""></td> <!--横向占两个格-->
<td rowspan=""></td> <!--纵向占两个格-->
</tr>
table合并单元格
给table添加表头
<table border=""> <!--border表示边框-->
<thead>
<tr>
<th>标题1</th> <!--th表示列-->
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody> <!--table的内容-->
<tr>
<td></td> <!--tr表示行，td表示列-->
<td></td>
<td></td>
</tr>
<tr>
<td></td> <!--多行可以多加几个tr-->
<td colspan=""></td> <!--横向占两个格-->
<td rowspan=""></td> <!--纵向占两个格-->
</tr>
</tbody> </table>
fieldset增加画框
<fieldset>
<legend>登录</legend>
<p>用户名:</p>
<p>密码:</p>
</fieldset>
二、CSS的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--页面编码-->
<!--<meta http-equiv="REFRESH" content=""> --> <!--刷新5s-->
<!-- <meta http-equiv="refresh" content="5; url=http://www.baidu.com"> --> <!--5秒之后跳转到后面的URL-->
<title>My test</title>
<!--<link rel="short icon" href="favicon.icon">--> <!--CSS在其他文件中渲染渲染-->
<style>
.re{
color: red;
}
span{
font-size: 100px;
}
#name2{
background-color: antiquewhite;
} </style>
</head>
head
<div style="color: red">
abcd
</div> <span class="re">wahaha</span>
<span id="name2" class="re">wwwww</span>
<div style="background-color: aquamarine;">asjhdgsjhgdhjash</div>
<div style="background-image: url('11111.jpg');height: 1000px;background-repeat: no-repeat">sasaasdasddasdas</div> 也可以将css代码放到.css文件中
body
div属性介绍
background属性
1、backgrand-color:设置背景颜色;
2、background-image: url("图片地址"): 将此属性包含在class选择器中，需要设定height和width(相当于在墙上扣了一个洞)，如果所设的高度或者宽度大于图片的像素，就会向下和向右复制;
如果不希望重复复制，使用background-repeat: no-repeat/x-repeat/y-repeat;
3、background-repeat:设置背景图片不重复;
4、background-position:设置图片的位置;
border属性
1、border给一个div标签设置边框，可以设置上右下左的边框，可以指定边框的高度和宽度等;
display属性
1、display:none; 将整个标签隐层起来;
2、display: block;将标签变为块级标签;
3、display: inline;将标签变为内联标签;
cursor属性
1、cursor: pointer;指定不同的样式鼠标放置上去之后显示的样式;
2、cursor: url("自定义图片"),auto;将样式设置为自定义的图片;
position属性
1、fixed:固定位置，相对于窗口而言的;
<div style="height: 5000px;background-color: red">
<div style="position: fixed;bottom: 40px;right: 30px">返回顶部</div>
</div>
2、absolute和relative:两者配合使用,默认absolute显示的位置是相对窗口而言的，如果需要相对于父标签 的窗口大小来设定位置的话，就需要在父标签冲添加relative属性;
<div style="background-color: green;height: 100px;width: 200px;position: relative">
<div style="position: absolute;right: 20%;bottom: 20%">
定位
</div>
</div>
opacity透明度:范围0~1
1、z-index的值越大，表示越外层；
<div style="z-index: 10;background-color: black;position: fixed;top: 0;bottom: 0;left: 0;right: 0"> #占满全屏需要fixed属性
<span style="background-color: white">我是黑色</span>
</div>
<div style="z-index: 20;background-color: red;opacity:0.8;position: fixed;top: 0;bottom: 0;left: 0;right: 0"></div>
内外边距属性:布局的使用使用
1、margin:外边距;
2、padding:内边距;
<div style="height: 70px;border: 1px solid red;">
<div style="height: 50px; background-color: green;margin-top: 10px "></div> 外边距与边框的距离；内边距表示自身增加或者减少的大小;
</div
border设置边
<div style="border: 3px solid green;">
hhhhhhhhhh
</div>
设置上下左右边框
<div style="border: 3px solid green;">
hhhhhhhhhh
</div>
<span style="display: none" id="name2" class="re">ahahaha</span> <!--display为none，用于对当前弹出的窗口时，点击关闭时消失-->
cursor改变鼠标放在对应位置的图标
<div style="border-left: 10px solid green;cursor: pointer">
bbbbbsbsbsbsbsbxzxxxcccccccc
</div>
颜色：
<style>
.w_left{
width: %;
background-color: red;
height: 500px;
float: left;
}
.w_right{
width: %;
background-color: green;
height:500px;
float: left;
}
</style> <div>
<div class="w_left"></div>
<div class="w_right"></div>
</div>
默认div标签是块级标签
三、前端开发的必要性
先推荐两个前端开发的网站:http://echarts.baidu.com/ http://www.hcharts.cn/,这两个可视化网站都是用过JS实现的;
四、CSS选择器
1、div选择器、id选择器、class类选择器以及关联选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{ /*标签选择器*/
font-size: 50px;
}
#i1{ /*id选择器，id和div一般不要使用，用class*/
background-color: red;
}
.c1{ /*class类选择器*/
color: cornflowerblue;
}
.p{
background-color: pink;
}
.container li a{ /*关联选择器，找到container下的li,li下的a应用这个选择器*/
background-color: red;
} .container .l .a{
background-color: red;
}
</style>
</head>
<body>
<title>Title</title>
<div>This is a test</div>
<a id="i1">选择器</a> <!--html中的ID是不能重复的-->
<a class="c1">aaa</a>
<span class="c1">This two test</span> <!--class可以重复--> <div class="container">
<ul>
<li>
<a>hhhhh</a>
</li>
<li class="p">1111啊啊啊1</li>
<li></li>
<li></li>
<li></li>
<li>
<a class="l">
<span class="a">shshshhshshs</span>
</a>
</li> </ul>
</div>
</body>
</html>
2、组合选择器和属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 #il a .cc1,.c1 #il a .cc2{
color: red;
}
.c1 #il a .cc1,.cc2{ /*组合选择器，逗号表示或的意思，上面的选择器意义相同；*/
color: cornflowerblue;
}
.con input[type="text"][name="username"]{ /*#首先从input标签中找到type为text的标签，然后再找到name为username的标签*/
border: 3px solid red; /*属性选择器：在写表单验证的时候*/
} /*通过自定义属性直接找到对应的标签，所有的标签都可以使用自定义属性*/
.con input[alex="xxx"]{ }
</style>
</head>
<body>
<div class="c1">
<ul id="il">
<a>
<span class="cc1">
你好！！！！！
</span>
<span class="cc2">
新的一天真好！！！
</span>
</a>
</ul>
</div>
<div class="con">
<input alex="xxx" type="text" name="username" />
<input type="text" />
<input type="file" />
<input type="password"/>
<input type="button"/>
<input type="checkbox"/>
<input />
</div>
</body>
</html>
五、JS之Dom
博客地址：http://www.cnblogs.com/wupeiqi/articles/5369773.html
1、js序列化和反序列化：
var m={'k1':11}
Object {k1: 11}
s = JSON.stringify(m) #序列化
"{"k1":11}"
JSON.parse(s) #反序列化
Object {k1: 11}
2、js的for循环
对于数组存在两种for循环:
a、
var li=[,,];
undefined
li
[, , ]
for(var index in li){
console.log(index,li[index]);
}
VM138:
VM138:
VM138:
b、
for(var i=;i<li.length;i++)
{
console.log(i,li[i]);
}
VM152:
VM152:
VM152:
对于字典的循环:
dic = {'k1':123,'k2':567}
Object {k1: 123, k2: 567}
for(var item in dic){
console.log(item,dic[item])
}
VM219: k1
VM219: k2
3、dom之选择器(获取标签)
getElementsByTagName
document.getElementsByTagName('h1')
[<h1></h1>, <h1></h1>]
tags=document.getElementsByTagName('h1')
[<h1></h1>, <h1></h1>]
tags
[<h1></h1>, <h1></h1>]
tags[].innerText='index';
"index"
tags[].innerText='index1';
"index1"
<body>
<h1></h1>
<h1></h1>
<div>
<div id="n1"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</div>
<form>
<p>用户名:<input name="username" value=""/></p>
<p>密码:<input name="pwd" value=""/></p>
</form>
</div>
<script type="text/javascript">
var nid = document.getElementById('n1'); #
console.log(nid.innerText);
nid.innerText='alex';
var lis = document.getElementsByTagName('li');
for (var i in lis){
var item =lis[i];
item.innerText=i;
} var li2 = document.getElementsByClassName('c1');
console.log(li2); var username = document.getElementsByName('username')[];
var pwd = document.getElementsByName('pwd')[];
console.log(username,pwd);
console.log(username.value,pwd.value) #获取form input标签中的输入的值;
</script>
</body>
</html>
4、dom之自增数字实例(实现点击+1按钮，上方的数字就会+1)
<div id="num"></div>
<input type="button" value="+1" onclick="Add();" /> #给button注册一个事件 function Add(){
// alert(123);
var nid = document.getElementById('num');
var text=nid.innerText;
text=parseInt(text); #转化为整型
text +=;
nid.innerText=text;
}
5、dom之操作文本内容
innertext和innerHTML的区别
<div id="n2">
alex
<h1>SB</h1>
</div> tag = document.getElementById('n2')
console.log(tag.innerText)
console.log(tag.innerHTML) =====结果如下======
alex
SB alex
<h1>SB</h1>
特殊值
<h3><input type="button" onclick="GetValue()" value="xxx"/></h3>
<input id = "n3" type="text"/>
<select id="n4">
<option value="">上海</option> #value为数字
<option value="">北京</option>
<option value="">深圳</option>
</select>
<textarea id="n5"> abcd</textarea> #value为文本内容abcd ===注册事件,对上述标签的文本内容设置为固定值或者清空=== function GetValue(){ var obj = document.getElementById('n5');
alert(obj.value);
// obj.value="";
obj.value="";
}
6、dom编程之事件和搜索框实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="search" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>
<!--onfocus在点击的时候执行，onblur在移除的时候执行-->
<script>
function Focus() {
var nid = document.getElementById('search');
var value = nid.value;
if (value == "请输入关键字"){
nid.value ="";
}
} function Blur() {
var nid = document.getElementById('search');
var value = nid.value;
if (!value.trim()) {
nid.value = "请输入关键字"
}
}
</script>
</body>
</html>
7、dom编程之创建标签
有两种方式:
方式1：通过id或class创建
<div id="container"></div>
<a href="http://www.baidu.com" onclick="return AddElement();">添加</a> #return 的结果只有是true，才会执行href部分的内容
<script>
function AddElement(){
// alert('123');
var nid = document.getElementById('container');
var tag = "<input type='text'>";
// nid.innerHTML=tag; #只会添加tag的内容
container.insertAdjacentHTML('beforeBegin',tag); #在开头增加tag的标签 return false;
方式2:通过对象创建
<div id="container"></div>
<a href="http://www.baidu.com" onclick="return AddElement();">添加</a> <script>
function AddElement(){
var creareObj = document.createElement('a');
creareObj.href = "http://www.baidu.com"
creareObj.innerHTML = "老男孩"
console.log(creareObj);
var nid = document.getElementById("container");
// nid.innerHTML=creareObj;
nid.appendChild(creareObj);
return false;
}
8、dom之操作标签属性
<div id="container" sb="xx" class="c1" style="font-size: 48px; color: red">cbdbd</div>
var nid = document.getElementById('container')
nid
<div id="container" sb="xx" class="c1" style="font-size: 48px; color: red">cbdbd</div>
nid.style.fontSize = "120px" #设置文字大小
"120px"
nid.setAttribute('class','ooo') #添加属性,其他 get为获取，del为删除
nid.className = "xxx" --->class
nid.style.backgrandcolor = "red" #设置背景颜色
9、dom之提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text" />
<!--<input type="submit" value="提交" />--> #form提交
<div onclick="Submit();">
提交
</div>
</form>
<script>
function Submit(){
document.getElementById('form1').submit(); #js提交
}
</script>
</body>
</html>
10、dom之组织表单默认行为
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text" />
<input type="submit" onclick=" return MySubmit();" value="提交" />
</form>
function MySubmit() {
var q = document.getElementsByName('query')[];
if (q.value.trim()){
return true;
}else{
alert('请输入内容');
return false;
}
11、dom之补充知识以及定时器和跑马灯实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="上来啊" onmouseover="MyConfirm();"> #onmouseover表示鼠标移动到input上面就会触发事件
<script>
function MyConfirm(){
var ret = confirm('SB'); #在模态对话框出现的时候，如果点击确定，那么confirm的值就为true，取消就为false
console.log(ret)
}
</script>
</body>
</html>
window.location.href #显示当前html文件的路径
window.location.href="http://www.baidu.com" #跳转到指定的网站
window.location.reload() #刷新页面
跑马灯实例如下:
setInterval("Func()",) #每隔1秒就会启动一个线程，触发Func函数执行
function Func(){
var text = document.title
var firstChar = text.charAt();
var subText = text.substring(,text.length);
var new_title = subText+firstChar;
document.title = new_title;
停止定时器
<input type="button" onclick="StopInterval();" value="停下来" /> #绑定事件，停止定时器
<script>
// setInterval("alert('123')",2000)
obj1 = setInterval("Func()",) #默认每个定时器都会创建一个句柄
setTimeout()
function StopInterval() {
//清除定时器
clearInterval(obj1); #停止定时器句柄
}
setTimeout("Func()",1000) #和setInterval用法一样，不同点是只会运行一次;
六、JS之jQuery
1、jQuery之基本选择器
<div id="n1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div></div>
<div id="n3">
<div>
<div class="c3">
<span>
<a>dddd</a>
</span>
</div>
</div>
</div>
<a></a>
<span id="n2"></span>
<script src="jquery-1.8.2.min.js"></script>
<script >
//$=jQuery
// $("#n1").text('123'); #id选择器
// $('div').text('xxx'); #标签选择器
// $('.c1').text('000'); #class选择器
// $('.c1,a,#n2').text("OK"); #select选择器
$('#n3 div .c3 span a').text('ddddd'); #层级选择器
2、选择器和筛选器
3、左侧菜单实例
实现:点击菜单的title的时候，显示菜单的内容，而将其他菜单的内容隐藏 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.menu{
float: left;width: %;height: 500px; background-color: aqua;
}
.contect{
float: left;width: %;height: 500px; background-color: blue
}
.title{
background-color: black;
color: white;
height: 50px;
line-height: 50px;
/*line-height: 表示文字跟随div的高度变化而变化;*/
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div class="menu">
<div class="item">
<div class="title" onclick="Func(this);">菜单一</div> #this表示点击当前标签
<div class="body hide">
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
</div>
<div class="item">
<div class="title" onclick="Func(this);">菜单二</div>
<div class="body hide">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
</div>
<div class="item">
<div class="title" onclick="Func(this);">菜单三</div>
<div class="body hide">
<div>3.1</div>
<div></div>
<div>3.3</div>
</div>
</div>
</div>
<div class="contect"></div> </div> <script src="jquery-1.8.2.min.js"></script>
<script>
function Func(ths) {
console.log($(ths).text());
$(ths).next().removeClass('hide'); #移除当前标签兄弟标签的hide属性
$(ths).parent().siblings().find('.body').addClass('hide'); #将父标签的兄弟标签含有body属性的标签增加hide属性
}
</script>
</body>
</html>
4、Tab菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tab-box .box-menu{
background-color: #dddddd;
border: 1px solid #dddddd;
}
.tab-box .box-body{
border: 1px solid #dddddd;
}
.hide{
display: none;
}
.current{
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="box-menu">
<a charles="c1" onclick="ChangeTab(this);">菜单一</a> #class为自定义属性
<a charles="c2" onclick="ChangeTab(this);">菜单二</a>
<a charles="c3" onclick="ChangeTab(this);">菜单三</a>
</div>
<div class="box-body">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script src="jquery-1.8.2.min.js"></script>
<script>
function ChangeTab(ths) {
$(ths).addClass('current').siblings().removeClass('current');
var contentId = $(ths).attr('charles') #获取当前标签的class属性的值;
var temp = "#" + contentId; #拼接处id属性
$(temp).removeClass('hide').siblings().addClass('hide'); #将包含有对应id属性的标签移除hide属性，起兄弟标签增加hide属性;
}
</script>
</body>
</html>
对Tab修饰结果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tab-box .box-menu{
background-color: #dddddd;
border: 1px solid #dddddd;
height: 33px;
line-height: 33px; #字体与height一样大小，并居中于div中间；
}
.box-menu a{
border-right: 1px solid #; #增加右侧边框
padding: 10px; #增加内边距；
}
.tab-box .box-body{
border: 1px solid #dddddd;
}
.hide{
display: none;
}
.current{
background-color: white;
color: black;
border-top: 2px solid red;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="box-menu">
<a charles="c1" onclick="ChangeTab(this);">菜单一</a>
<a charles="c2" onclick="ChangeTab(this);">菜单二</a>
<a charles="c3" onclick="ChangeTab(this);">菜单三</a>
</div>
<div class="box-body">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script src="jquery-1.8.2.min.js"></script>
<script>
function ChangeTab(ths) {
$(ths).addClass('current').siblings().removeClass('current');
var contentId = $(ths).attr('charles')
var temp = "#" + contentId;
$(temp).removeClass('hide').siblings().addClass('hide');
}
</script>
</body>
</html>
5、jQuery之属性操作
<input id="c1" type="checkbox" />
<input id = "c2" type="checkbox" />
<input id="c3" type="checkbox" checked="checked" />
a、attr
$('#c1').attr('checked','checked')
[<input id="c1" type="checkbox" checked="checked">]
$('#c1').attr('checked')
"checked"
$('#c1').removeAttr('checked')
[<input id="c1" type="checkbox">]
$('#c1').attr('checked')
标签中属性都适用，除了checkbox和redio(只有第一次生效)
$('#c1').attr('hh','sb')
[<div id="c1" hh="sb">内容一</div>]
var i=$('#c1').attr('hh')
undefined
i
"sb"
b、prop
$('#c1').prop('checked',true) //选中
[<input id="c1" type="checkbox">]
$('#c1').prop('checked',false) //取消
[<input id="c1" type="checkbox">]
6、全选、取消和反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="c1" type="checkbox" />
<input id = "c2" type="checkbox" />
<input id="c3" type="checkbox" checked="checked" />
<div>
<input type="button" value="全选" onclick="SelectAll();"/>
<input type="button" value="取消" onclick="ClearAll();"/>
</div>
<div>
<table border="">
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<script src="jquery-1.8.2.min.js"></script>
<script>
function SelectAll() {
// $('table input[type="checkbox"]')
$('table :checkbox').prop('checked',true); //全选
}
function ClearAll(){
$('table :checkbox').prop('checked',false); //取消
}
</script>
</body>
</html>
反选(jQuery的for循环)
function ReverseAll() {
// var checkboxlist = $('table :checkbox');
// for (var i in checkboxlist) {
// var ele = checkboxlist[i];
//
// var isChecked = $(ele).prop('checked');
// console.log(isChecked);
// if(isChecked){
// $(ele).prop('checked',false);
// }else{
// $(ele).prop('checked',true);
// }
// }
$('table :checkbox').each(function () { //jQuery循环每一个元素
var isChecked = $(this).prop('checked'); //$(this)表示当前的元素
if(isChecked){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
}
7、jQuery的for循环
除了上述的for循环之外，还有如下的循环方式；两种都是jQuery的扩展方式;
function ReverseAll() {
userlist = [,,];
$.each(userlist,function(i,item){
console.log(i,item);
});
8、JQuery之内容操作
//括号中没有参数是获取，有参数是设置; html()
text()
val() //专门针对input、select、textarea标签；
9、返回顶部
预备知识:
.css('backgrand-color','red');只针对css，是针对style中的部分；
.$(window).scrollTop();整个窗体下拉的大小;可以针对div;
overflow: auto;当div中的内容高度超过div的高度的时候，对div设置该属性就会差生下拉框效果;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.go-top{
position: fixed;
bottom: ;
right: ;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 2000px;background-color: #dddddd">
顶部
<div id="c1" style="height: 500px;background-color: red;overflow: auto">
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
</div>
</div>
<div class="go-top hide">
<a onclick="GoTop();">返回顶部</a>
</div>
<script src="jquery-1.8.2.min.js"></script>
<script>
function GoTop(){
$(window).scrollTop(); //返回整个窗体顶部;
} window.onscroll=function(){ /只要下拉框的位置发生变化，就会执行后面的函数;
console.log();
var currentTop = $(window).scrollTop();
if(currentTop>){
$(".go-top").removeClass('hide'); //下拉超过100时，机会显示返回顶部标签;
}else{
$(".go-top").addClass('hide');
}
}
</script>
</body>
</html>
10、jQuery之位置操作和滚动菜单实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> body{
margin: 0px;
}
img {
border: ;
}
ul{
padding: ;
margin: ;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: ;
clear: both;
visibility: hidden;
} .wrap{
width: 980px;
margin: auto;
} .pg-header{
background-color: #303a40;
-webkit-box-shadow: 2px 5px rgba(,,,.);
-moz-box-shadow: 2px 5px rgba(,,,.);
box-shadow: 2px 5px rgba(,,,.);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px; }
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{ }
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
} .pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
} .pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body> <div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div> </div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content"> <div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div>
</div> <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript"> window.onscroll = function(){
var ws = $(window).scrollTop(); if(ws > ){
$('.catalog').addClass('fixed');
}else{
$('.catalog').removeClass('fixed');
} $('.content').children().each(function(){
var offs = $(this).offset(); //offset表示当前标签到顶部的和左边的距离;
var offTop = offs.top;
// 当前标签离顶部高度 < 滚动条高度
// 当前标签离顶部高度+ 当前标签的高度 > 滚动条高度
var total = offTop + $(this).height();
if(ws>offTop && total > ws){
// 如果滑轮到了底部，最后一个菜单增大
// 滑轮滚动的高度+window的高度 = 文档的高度 if($(window).scrollTop()+$(window).height() == $(document).height()){
$(".catalog").children(':last').css("fontSize", '48px').siblings().css('fontSize', '12px');
}else{
var t = $(this).attr('menu');
var target = 'div[auto-to="' + t +'"]'; //字符串拼接
$('.catalog').children(target).css("fontSize", '48px').siblings().css('fontSize', '12px');
return;
} }
});
};
</script>
</body>
</html>
11、jQuery之文本操作(文档处理)
内部操作
append appendTo preappendto preappend 外部操作
before after insertAfter insertBefore 删除
empty remove
复制
clone
12、jQuery之事件
对于dom来说，注册事件两种方式:a、onclick，当点击标签的时候执行对应的函数；b、windows注册全局的函数;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="添加" onclick="AddContent();"/>
<div onclick="func()"></div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="jquery-1.8.2.min.js"></script>
<script>
function AddContent(){
$('ul').append('<li>8</li>');
// $('li:last').click(function(){
// var temp = $(this).text();
// alert(temp);
// });
}
//window.xxc
function func() {
} // 当前文档准备就绪
$(document).ready(function(){ //和$(function)执行效果一样
//
});
$(function(){
// 最基本的jQuery事件绑定
// $('li').click(function(){
// var temp = $(this).text();
// alert(temp);
// });
// $('li').bind('click', function(){ /.bind和.click执行效果一样
// var temp = $(this).text();
// alert(temp);
// }); $('ul').delegate('li', 'click', function(){ //委托，一般在执行批量的时候使用
var temp = $(this).text();
alert(temp);
}) }) </script>
</body>
</html>
13、Ajax请求
Ajax全套地址:
http://www.cnblogs.com/wupeiqi/articles/5703697.html
1、找到特定的标签，并修改标签中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="l1"> </div> <script type="text/javascript" src="j1.js"></script>
<script type="text/javascript">
// var i = document.getElementById('l1') /*有赋值*/，id有一个
// var i = document.getElementsByName('l1'); // /*没有赋值*/，/*name可以有多个innertext，多个innertext不可以直接赋值*/
// i.innerText = "456";
// var i = document.getElementsByName('l1');
// for (var item in i){ //循环可以赋值
// i[item].innerText = "456";
var i=document.getElementsByTagName('div') //给所有的div标签赋值
for (var item in i){
i[item].innerText = ""
}
</script>
</body>
</html>
document.getElementById、document.getElementsByName和document.getElementsByTagName
2、js应用css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="l1"> </div>
<script type="text/javascript" src="j1.js"></script>
<script type="text/javascript">
var i = document.getElementById('l1')
i.className = "red";
</script>
</body>
</html>
3、Dom事件注册与执行
注册事件:将函数与事件进行绑定，注册到标签上来；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="l1"> </div>
<input type="button" onclick="edit();" value="修改" />
<script type="text/javascript" src="j1.js"></script>
<script type="text/javascript"> function edit(){
alert('');
}
</script>
</body>
</html>
alert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="l1"> </div>
<input type="button" onclick="edit();" value="修改" /> <!--如果是ondblclick，那么需要连续点击两次才能应用对应的函数中的样式-->
<input type="button" onmouseover="rollback();" value="恢复" /> <!--onmouseover表示鼠标移动到标签上面应用样式-->
<script type="text/javascript" src="j1.js"></script>
<script type="text/javascript"> function edit(){
//alert('123');
var i = document.getElementById('l1');
i.className = "red";
}
function rollback(){
var i = document.getElementById('l1');
i.className = "";
}
</script>
</body>
</html>
input button应用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="l1"> </div>
<input type="button" onclick="edit();" value="修改" /> <!--如果是ondblclick，那么需要连续点击两次才能应用对应的函数中的样式-->
<input type="button" onmouseover="rollback();" value="恢复" /> <!--onmouseover表示鼠标移动到标签上面应用样式-->
<script type="text/javascript" src="j1.js"></script>
<script type="text/javascript"> /* function edit(){
//alert('123');
var i = document.getElementById('l1');
i.className = "red";
}*/
function edit(){ #注意
var i = document.getElementsByName('l1');
for(var item in i){
i[item].className = "red";
}
}
function rollback(){
var i = document.getElementById('l1');
i.className = "";
}
</script>
</body>
</html> <!--注册事件:将函数与事件进行绑定，注册到标签上来；-->
易错点
4、页面加载和页面框加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="l1"> </div>
<input type="button" onclick="edit();" value="修改" /> <!--如果是ondblclick，那么需要连续点击两次才能应用对应的函数中的样式-->
<input type="button" onmouseover="rollback();" value="恢复" /> <!--onmouseover表示鼠标移动到标签上面应用样式-->
<script type="text/javascript" src="j1.js"></script>
<script type="text/javascript">
window.onload = function () { //页面内容加载完毕之后执行
alert('db');
}
document.ready = function () { //页面框架加载完毕之后执行
alert('wawwww');
}
/* function edit(){
//alert('123');
var i = document.getElementById('l1');
i.className = "red";
}*/
function edit(){
var i = document.getElementsByName('l1');
for(var item in i){
i[item].className = "red";
}
}
function rollback(){
var i = document.getElementById('l1');
i.className = "";
}
</script>
</body>
</html> <!--注册事件:将函数与事件进行绑定，注册到标签上来；-->
<body>
<div name="l1" id="l1"> </div>
<input type="button" onclick="edit();" value="修改" /> <!--如果是ondblclick，那么需要连续点击两次才能应用对应的函数中的样式-->
<input type="button" onmouseover="rollback();" value="恢复" /> <!--onmouseover表示鼠标移动到标签上面应用样式-->
<script type="text/javascript" src="j1.js"></script>
<script type="text/javascript"> obj.className获取或者修改样式
function rollback(){
var i = document.getElementById('l1');
console.log(i.className);
i.className = "";
}
获取或者修改样式
obj.getAttribute()获取属性
function rollback(){
var i = document.getElementById('l1');
// console.log(i.className);
// i.className = "";
var result= i.getAttribute('name');
console.log(result);
i.style.backgroundColor="pink";
}
style对样式元素的修改
<form action="https:www.sogou.com/web?">
<input type="text" name="query"/>
<input type="submit" name="submit"/> #submit才会提交
<input type="button" name="button"/> #button不会提交
</form> <form id="form1" action="https:www.sogou.com/web?">
<input type="text" name="query"/>
<input type="submit" name="submit"/>
<input type="button" onclick="submit_form();" name="button"/>
</form>
#让button可以提交
function submit_form(){
document.getElementById('form1').submit();
}
button提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<div Charles="" name="l1" id="l1"> </div>
<form id="form1" action="https:www.sogou.com/web?">
<input type="text" name="query"/>
<input type="submit" name="submit"/>
<input type="button" onclick="submit_form();" name="button"/>
</form>
<script>
function submit_form(){
//document.getElementById('form1').submit();
window.location.href="https://www.baidu.com"; /*点击button跳转*/
}
</script>
</body>
</html>
点击跳转到其他网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var result=confirm('是否继续?')
console.log(result);
</script>
</body>
</html>
confrim
点击确定为true，点击去取消为false，一般不用，都是自己写的，主要是因为难看；
function f1(){
console.log('f1')
}
setInterval(f1,); 5秒钟
</script>
setInterval设定函数自动执行周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/* var result=confirm('是否继续?')
console.log(result);*/
function f1(){
console.log('f1')
//clearInterval(obj) /*执行一次终止*/
}
obj = setInterval(f1,);
setTimeout(f1,) /*只执行一次*/
</script>
</body>
</html>
5、搜索框和跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎领导莅临！</title>
<script type="text/javascript">
function Go(){
var content=document.title;
var firstChar=content.charAt()
var sub = content.substring(,content.length)
document.title = sub+firstChar;
}
setInterval('Go()',);
</script>
</head>
<body> </body>
</html>
跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.gray{
color: gray;
}
.black{
color: black;
}
</style>
<script type="text/javascript">
function Enter(){
var id=document.getElementById("tip");
id.className = "black";
if(id.value=='请输入关键字'|| id.value.trim()==''){
id.value = ''
}
}
function Leave(){
var id =document.getElementById("tip");
var val=id.value;
if(val.length==||id.value.trim()==''){
id.value = '请输入关键字';
id.className='gray';
}else{
id.className = 'black';
}
}
</script>
</head>
<body>
<input type="text" class="gray" id="tip" value="请输入关键字" onfocus="Enter();" onblur="Leave();" />
</body>
</html>
搜索框
六、jQuery
核心:1、找到元素；2、操作元素；
在使用jQuery之前必须先导入jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script type="text/javascript" src="jquery-2.2.3.js"></script> <!--导入jquery-->
<script>
$(function(){
alert();
});
</script>
</body>
</html>
页面框架加载完成之后执行function中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="i1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<script type="text/javascript" src="jquery-2.2.3.js"></script> <!--导入jquery-->
<script>
//当页面框架加载完成之后，加载该函数，$是jquery自动生成的对象
$(function(){
$('#i1').text(); /*类似于document.getElementById()*/
$('.c1').eq().text(''); /*将class为c1的标签的第一个替换为4444,数字从0开始*/
});
</script>
</body>
</html>
属性和样式
作业:
后台管理
登录
用户输入是否为空，alert
$('#username').val()
管理
布局页面
左侧菜单
display:none
找到所有的兄弟标签，children
右侧有内容
跑马灯
搜索框
返回顶部
(tab菜单，事件轴)
作业
jQuery:
-找:
选择器
筛选
-操作
属性
css
文档
-其他
事件
Ajax请求
JSON
.... ====================
选择器
====================
-#xx
<div id="t1"></div>
$("#t1")
-.xx
<div class="t2"></div>
$('.t2')
-标签
<p>abcd</p>
<p>abcd</p>
$('p')
========================
-空格
<div id='tt'>
<div class='t3'>
<p></p>
</div>
</div> $("$tt p") -逗号
<p class='t5'></p>
<div class='t5'></div>
<span></span>
<a></a>
$('.t5,a')
2、左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div id="m1" onclick="Change(1);">菜单一</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div id="m2" onclick="Change(2);">菜单二</div>
<div class="hide">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div id="m3" onclick="Change(3);">菜单三</div>
<div class="hide">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div> <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
function Change(arg){
//找到到底点击了哪一个
if(arg==){
var menu = $('#m1')
}else if(arg==){
var menu = $('#m2')
}else{
var menu = $('#m3')
}
console.log(menu.text());
}
</script>
</body>
</html>
鼠标点击菜单展开，默认为隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div onclick="Change(this);">菜单一</div>
<div class="content hide">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div onclick="Change(this);">菜单二</div>
<div class="content hide">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div onclick="Change(this);">菜单三</div>
<div class="content hide">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
function Change(arg){
//找到到底点击了哪一个
//var t = $(arg).text() //$(arg)表示当前点击的标签,如果存在多个标签，可以使用this，替换上面的if else
// console.log(t) //点击菜单之后:一、找到下一个标签，移除hide
//二、找到其他菜单，内容影藏，添加hide
$(arg).next().removeClass("hide") //找到当前标签的父标签
//所有父亲标签的所有的兄弟标签
$(arg).parent().siblings().find('.content').addClass('hide');
}
</script>
</body>
</html>
下拉菜单影藏和展示
3、jQuery筛选器
筛选：
选择器:第三排所有人
筛选器:第三排的第三个人
原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td onclick="get_prev(this)">编辑</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
function get_prev(arg){
//$(arg).siblings()的所有兄弟
//循环多个标签中的每一个标签，每一个标签被执行时都会执行ma内部的函数
//将所有的返回值封装到一个数组(列表)中
//返回列表
var list=$(arg).siblings().map(function(){
//当前循环的标签
return $(this).text();
});
console.log(list,list[],list[],list[]);
}
</script>
</body>
</html>
map
查找:
var a= [, , , ]
$.each(a, function(item){ //循环所有的数据，去除每一个数据的内容
console.log(a[item])
}
);
var d = {'k1': 'v1','k2':'v2'};
$.each(d, function (key, value) {
console. log(key,value);
});
js数组和字典的循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
、弹出框
、取出表格数据
、将数据填充到弹出框
<tr>
<td></td>
<td></td>
<td></td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
</tbody>
</table>
<style>
.model{
position: fixed;
left: %;
top: %;
width: 400px;
height: 300px;
background-color: #dddddd;
margin-left: -200px; /*往左移*/
margin-top: -150px; /*往顶部移*/
}
.hide{
display: none;
}
</style>
<div class="model">
<form action="" method="get">
<p>主机名:<input type="text" id="hostname" /></p>
<p>IP:<input type="text" id="ip" /></p>
<p>端口:<input type="text" id="port" /></p> <input type="submit" value="提交"/> <!--submit提交的必须为表单，所以必须将需要提交的内容加入的表单内部-->
<input type="submit" value="取消"/>
</form>
</div>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
/* function get_prev(arg){
//$(arg).siblings()的所有兄弟
//循环多个标签中的每一个标签，每一个标签被执行时都会执行ma内部的函数
//将所有的返回值封装到一个数组(列表)中
//返回列表
var list=$(arg).siblings().map(function(){
//当前循环的标签
return $(this).text();
});
console.log(list,list[0],list[1],list[2]);
}*/
/*
编辑当前行*/
function GetPrev(ths) {
/* <td>11</td>
<td>22</td>
<td>33</td>*/
$(ths).prevAll()
/*所有的数据*/
var a= [, , , ]
$.each(a, function(item){ //循环所有的数据，去除每一个数据的内容
console.log(a[item])
}
);
var d = {'k1': 'v1','k2':'v2'};
$.each(d, function (key, value) {
console. log(key,value);
});
}
</script>
</body>
</html>
编辑变革内容弹出框设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><a>百度</a></p>
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
console.log($('p').html());
console.log($('p').text());
</script>
</body>
</html>
html和text的区别
如果内容为空，不替换，如果不为空，替换；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="Toggle();" />
<table border="">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
<!-- 、弹出框
、取出表格数据
、将数据填充到弹出框-->
<tr>
<td></td>
<td></td>
<td></td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
</tbody>
</table>
<style>
.model{
position: fixed;
left: %;
top: %;
width: 400px;
height: 300px;
background-color: #dddddd;
margin-left: -200px; /*往左移*/
margin-top: -150px; /*往顶部移*/
}
.hide{
display: none;
}
</style>
<div id="dialog" class="model hide">
<form action="" method="get">
<p>主机名:<input type="text" id="hostname" value=""/></p>
<p>IP:<input type="text" id="ip" /></p>
<p>端口:<input type="text" id="port" /></p> <input type="submit" value="提交"/> <!--submit提交的必须为表单，所以必须将需要提交的内容加入的表单内部-->
<input type="button" onclick="Cancel();" value="取消"/>
</form>
</div>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
/* function get_prev(arg){
//$(arg).siblings()的所有兄弟
//循环多个标签中的每一个标签，每一个标签被执行时都会执行ma内部的函数
//将所有的返回值封装到一个数组(列表)中
//返回列表
var list=$(arg).siblings().map(function(){
//当前循环的标签
return $(this).text();
});
console.log(list,list[0],list[1],list[2]);
}*/
/*
编辑当前行*/
/* function GetPrev(ths) {
/!* <td>11</td>
<td>22</td>
<td>33</td>*!/
var list = [];
$(ths).prevAll()
/!*所有的数据*!/
var a= [11, 22, 33, 44]
$.each(a, function(item){ //循环所有的数据，取出每一个数据的内容
console.log(a[item])
}
);
var d = {'k1': 'v1','k2':'v2'};
$.each(d, function (key, value) {
console. log(key,value);
});
}*/
function GetPrev(ths){
var list = [];
$.each($(ths).prevAll(), function (i) {
var item = $(ths).prevAll()[i];
var text = $(item).text();
list.push(text);
});
var new_list = list.reverse();
$("#hostname").val(new_list[]);
$("#ip").val(new_list[]);
$("#port").val(new_list[]); $('#dialog').removeClass('hide');
}
function Cancel(){
$("#dialog").addClass('hide');
}
function Toggle(){
$("#dialog").toggleClass('hide'); /*切换，第一次点击出现，再点击隐藏*/
}
</script>
</body>
</html>
编辑当前行内容，并提交或取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><a>百度</a></p>
<!-- <input type="text" id="name" />-->
<!--<textarea id="name"></textarea>-->
<select id="name">
<option value="">男</option>
<option value="">女</option>
</select>
<input type="button" onclick="GetValue();" />
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetValue(){
//var i = $('#name').val(); #获取值
//console.log(i);
$('#name').val();
}
</script>
</body>
</html>
val获取或者设置input、select或textarea的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="CheckAll();" value="全选" />
<input type="button" onclick="CheckReverse();"value="反选" />
<input type="button" onclick="CheckCancel();" value="取消" /> <table border="">
<thead></thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
</tr>
</tbody>
</table>
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function CheckAll(){
//$('#tb1').find(':checkbox').attr('checked','checked') atttr是对于所有的标签属性生效的
$('#tb1').find(':checkbox').prop('checked',true); //prop是对于checked而生的
}
function CheckReverse(){
//找，如果选中，取消，未选中，选中
$('#tb1').find(':checkbox').each(function(){
//$(this) =每一个复选框
//$(this).prop()如果选中，true，否则false
//attr 如果选中，checked，checked=checked
if($(this).prop('checked')){
$(this).prop('checked',false);
}else {
$(this).prop('checked',true);
}
})
}
function CheckCancel(){
//$('#tb1').find(':checkbox').removeAttr('checked');
$('#tb1').find(':checkbox').prop('checked',false);
}
</script>
</body>
</html>
checkbox全选，反选和取消
七、CSS
-css
<div style="color:red;"></div>
$('div').css('color','red')
$('div').css({'color':'red',})
-scrolltop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0 auto;">
<div style="height: 1500px;">
</div>
<div id="i1">asdf</div>
<div style="padding: 50px;position: relative;">
<div id="i2">a</div>
</div> <script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//var off = $('#i2').position(); /*position是针对父标签的偏移*/
var off=$('#i2').offset(); //offset是针对整个页面的偏移
console.log(off);
</script> </body>
</html>
offset和position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<div id="currentPosition" style="position: fixed;top: 0px;right: 0px;"></div>
<div>
<div class="chapter" style="height: 500px;">
<h1>第一张</h1>
</div> <div class="chapter" style="height: 1500px;">
<h1>第二张</h1>
</div> <div class="chapter" style="height: 2500px">
<h1>第三张</h1>
</div>
</div>
</div>
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){ //滚动条的时候触发事件
console.log();
//滚动条的高度与章节的高度作对比
var scroll_top = $(window).scrollTop(); //滚动的高度
var list = [];
$.each($('.chapter'),function(i){
//var chapter_count = $('.chapter').length;
var current_height = $($('.chapter')[i]).offset().top; //当前章节的高度
list.push(current_height);
})
$.each(list,function(i){
if (scroll_top+$(window).height()==$(document).height()){ //滚动的高度+窗体的高度==整个文档的高度
$('#currentPosition').text($('.chapter').last().text()); //取最后一章内容显示在右上角,#currentPosition取右上角内容
return
}
if (scroll_top > list[i]){
$('#currentPosition').text($($('.chapter')[i]).text());
return
}
})
})
})
</script>
</body>
</html>
滚动章节
八、Ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="AjaxRequest();"/>
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//本地ajax请求
function AjaxRequest(){
$.ajax({
url:'',
type:'GET',
data:{'k1':'v1','k2':'v2'},
success:function(data){
//当请求成功，并从远程获取返回值
console.log(data);
},
error:function(){ }
})
}
</script>
</body>
</html>
本地ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="" value="跨域Ajax" />
<div id="container"></div>
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function AjaxRequest(){
$.ajax({
url:'http://',
type:'GET',
dataType:'jsonp',
jsonpCallback:'list',
success:function(data){
var item = data.data[i];
var str = "<p>"+item.week+"</p>";
$('#container').append(str);
$.each(item.list,function(j){ })
}
}) }
</script>
</body>
</html>
跨域ajax请求 不全
、点击进入编辑模式
全选:table中循环每一个tr，然后循环table中的每一个tr，再去tr中检查checkbox是否已经选中
如果已经选中，把tr中的文件替换成<input value='当前tr文本中的内容' />
var old=$(xx).text();
var temp="<input value='"+old"' />"
$(xx).html(temp)
取消: <input value='当前tr文本的内容' />
当前tr文本的内容
作业思路
九、前段内容前瞻
HTML CSS JavaScript DOM JQuery
-选择器
-筛选
-CSS
-属性
-文档处理
-事件
-Ajax (Django)
-扩展
-基本操作 Bootstrap
bxSlider
JQuery validate ====================================
web框架
Django ====================================
angularjs
reactjs
全选 反选 取消 进入编辑模式
作业思路
十、jQuery文档处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i2" style="background-color: red;"></div>
<div id="search_conditions">
<div class="condition">
<a onclick="AddCondition(this,'#search_conditions')">+</a>
<input />
</div>
</div>
<script src="jquery-2.2.3.min.js"></script>
<script>
function AddCondition(ths,container){
//clone condition div
//再把colne的div追加到search_conditions下面
var cp = $(ths).parent().clone();
//$('#search_conditions').append(cp);
cp.children(':first').text('-').attr('onclick',"RemoveCondition(this,'search_conditions')");
cp.appendTo('#search_conditions')
}
function RemoveCondition(ths,container){
$(ths).parent().remove(); }
</script>
</body>
</html>
动态增加或减少输入框
十一、jQuery事件
onclick、click、bind；
select改变触发事件，使用change;
十二、jQuery扩展方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-2.2.3.min.js"></script>
<script src="extends.js"></script> //也可以将下面的js代码放入到js文件中
<script>
$.extend({
"charles":function(){
return
}
});
var ret = $.charles();
console.log(ret);
</script> </body>
</html>
$.extend({
"charles":function(){
return
}
});
(function(arg){ //jQuery自执行方法，退浆使用
arg.extend({
"wupwiqi":function(){
return ;
}
})
})(jQuery);
关于JavaScript、Dom、JQuery查看 http://www.cnblogs.com/wupeiqi/articles/4457274.html
十三、Bootstrap
Bootstrap的响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@media screen AND (min-width: 768px){
.body{
background-color: red;
}
}
</style>
</head>
<body>
<div class="body">ddddd</div> //当页面宽度小于768时，背景颜色消失
</body>
</html>
如何使用bootstrap
、下载bootstrap
、导入
css/min.css
js /min.js 、<div class="..."></div> //具体看官网文档
css之伪类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:before{
content: "SB";
}
</style>
</head>
<body>
<div class="c1">Charles</div>
</body>
</html>
after或者before是伪类，before将sb添加到charles前面，在bootstrap中伪类的内容设置为图标的编码;
HTML、CSS和JS的更多相关文章
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- 来，一起让我们越来越懒，面向CSS、JS未来编程。(9.28已更新)
2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点 ...
- 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子
一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...
- Asp.net 后台添加CSS、JS、Meta标签
Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...
- django 关于html、css、js 目录位置
项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...
- CI模板加载css和js
1.需求 ci无法加载css和js文件. 2.解决 删除..htaccess文件. 在config目录下配置base_url,并传给页面 $base_url = $this->config-&g ...
- HTML、CSS、JS对unicode字符的不同处理
unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 原文发表于这里 css表示法 首先来一段很常见的bootstrap的字体图标代码: . ...
- 关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js
网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根 ...
- nodejs处理图片、CSS、JS链接
接触Nodejs不深,看到页面上每一个链接都要写一个handler,像在页面显示图片,或者调用外部CSS.JS文件,每个链接都要写一个handler,觉得太麻烦,是否可以写个程序出来,能够自动识别图片 ...
随机推荐
- Python::OS 模块 -- 进程管理
os模块的简介参看 Python::OS 模块 -- 简介 os模块的文件相关操作参看 Python::OS 模块 -- 文件和目录操作 os模块的进程参数 Python::OS 模块 -- 进程参数 ...
- 不让padding影响元素的宽度
CSS3 新增了 box-sizing 属性. 以前,如果指定 div 的宽度为 div { width: 100px; height: 100px; padding: 10px; } 则包含 pad ...
- 2016年中国大学生程序设计竞赛（合肥）-重现赛1009 HDU 5969
最大的位或 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- Java笔记5-修饰符,重载,递归,数组
方法的定义修饰符 返回类型 方法名(参数列表) throws 异常类型列表 { //方法体}==如何来设计一个方法:案例:请根据如下的业务分别设计出方法1.根据给定的年份判断是否是闰年?public ...
- 《C与指针》第九章练习
本章问题 1.C语言缺少显示的字符串数据类型,这是一个优点还是一个缺点? answer: (这个问题存在争论(尽管我有一个结论))目前这个方法的优点是字符数组的效率和访问的灵活性,它的缺点是有可能引起 ...
- java端口扫描（原创）
项目需要扫描占用的端口来判断服务是否启动,通过查资料发现大多数方法都是ServerSocket socket = new ServerSocket(port);代码如下: package com.fr ...
- 【转载】开发备必：WEB前端开发规范文档
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者 ...
- windows环境下局域网内无法访问apache站点
DocumentRoot "D:/wamp/www/" <Directory /> AllowOverride none order deny,allo ...
- Window环境下 Git 下载Android源码
1.需要的工具 git.vpn代理 2. 设置git代理(Google source 无法下载,git设置代理) git config --global http.proxy "localh ...
- Windows xp IIS显示403错误解决方案
XP的IIS很烦人,很多限制. 最近一客户用XP安装IIS,总提示:403.9 错误 连接的用户过多 解决方案: 1)安装IIS配置工具 下载地址:http://download.microsoft. ...