HTML,CSS,Javascript,JQuery
HTML
一套浏览器认识的规则
标签
1.<head></head>
2.<title></title>
3.<body></body>
4.<p></p>:段落标签---->块级标签
5.<br />:换行标签
6.<h1></h1>:标题---->块级标签
......
<h6></h6>:标题
7.<span></span> ---->行内标签
8.<div></div>---->块级标签
9.<input />，<form></form>
<form action="http://localhost:8000/index" method="GET">
<input type="text" name="user" />
<input type="text" name="email" />
<input type="password" name="pwd" />
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/> # 提交按钮
</form>
<form enctype="multipart/form-data"> # 把文件一点儿一点儿发送过去
<div>
<select name="city" multiple="multiple" size="10"> # 多选
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
<option value="4">成都</option>
</select>
<input type="text" name="user" />
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" checked="checked" /> #单选框，input type="radio" name属性相同则互斥
女：<input type="radio" name="gender" value="2" />
<p>爱好<p/>
篮球：<input type="checkbox" name="favor" value="1" checked="checked" /> # 复选框 checked="checked" 默认被选中
足球：<input type="checkbox" name="favor" value="2" checked="checked" />
台球：<input type="checkbox" name="favor" value="3" />
网球：<input type="checkbox" name="favor" value="4" />
<p>技能</p>
代码：<input type="checkbox" name="skill" value="1" checked="checked"/>
英语：<input type="checkbox" name="skill" value="2" />
<p>上传文件</p>
<input type="file" name="fname" />
</div>
<textarea name="meno">默认内容</textarea> # 多行文本
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
10.<a></a>
<a href="http://www.baidu.com" target="_blank">百度</a> # 跳转的作用
<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>
11.<img>
<a href="http://www.baidu.com">
<img src="1.jpg" title="美女" style="height: 200px;width: 200px;" alt="美女">
</a>
12.<table></table>
<table border="1">
<tr>
<td>主机名</td>
<td>端口</td>
<td>
<a href="s2.html">查看详细</a>
</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>第二行，第3列</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>第二行，第3列</td>
</tr>
</table>
13.<thead></thead>,<tbody></tbody>
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</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>
</tbody>
</table>
14.<label></label> 用于点击文字，使得关联的标签获取光标
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
CSS
重要：
position, background, text-align, margin, padding, z-inx, font-size, over-flow, hover, float(clear:both), line-hight, border, display
1.id选择器(不推荐),class选择器(推荐)
<div style="background-color: #2459a2;height: 48px;">ff</div>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 48px;
}
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">ff</div> # id不可以重复
<div class="c1">2</div> # class可以重复
<div class="c1">3</div>
</body>
2.标签选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{ #找到所有的div标签,并设置样式
background-color: black;
color: white;
}
</style>
</head>
3.层级选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span div{ #只有span中的div应用此样式 或 .c1 div
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">ff</div>
<span class="c1">dsfsdfs
<div id="c2">dsfsf</div>
fdgdssf</span>
<div class="c1">2</div>
</body>
4.组合选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{ # 共同应用同一样式
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">ff</div>
<div id="i2">2</div>
<div id="i3">3</div>
</body>
5.属性选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[n="hello"]{ width:100px; height:200px;}
</style>
</head>
<body>
<input type="text" n="hello" />
<input type="password" />
</body>
6.优先级，标签上的style优先，编写顺序，就近原则
7.边框
<body>
<div style="border: 1px solid red;">
sdfsd
</div>
</body>
<div style="height: 48px;
width:80%;
border: 1px solid red;
font-size: 16px;
text-align: center; #水平居中
line-height: 48px; #上下居中
font-weight: bold; #字体加粗
">sdfsdf
</div>
8.float样式
<body>
<div style="width: 20%;background-color: red;float: left;">1</div>
<div style="width: 80%;background-color: black;float: left;">2</div>
</body>
9.
<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;auto;">
<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;">
sdfsdfs
</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="clear: both;"></div>
</div>
</body>
10.display样式，块级标签和内联标签的转换
<body>
<div style="background-color: red;display: inline;">asd</div> #变为内联标签
<spanstyle="background-color: red;display:block;">dsf</span> #变为块级标签
</body>
内联标签：无法设置高度，宽度，padding margin
块级标签：可以设置
display: inline-block # 兼具内联标签和块级标签的特性
<body>
<span style="display:inline-block;background-color: red;height: 50px;width: 70px"></span>
<a style="background-color: red;">sfds</a>
</body>
display: none; # 让标签消失
11.padding(内边距) ,margin(外边距)
12.css重用
<style>
.c{共有}
.c1{独有}
.c2{独有}
</style>
<div class='c c1'></div>
<div class='c c2'></div>
13.position
<body>
<div style="width:50px;height: 50px;background-color: black;color:white;
position: fixed; # 固定于页面的某一位置
bottom: 20px;
right: 20px;">返回顶部</div>
<div style="height: 5000px;background-color:#dddddd;">
</div>
</body>
菜单永远在顶部
position:fixed
<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{
height:5000px;
background-color: #dddddd;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
position:absolute+relative 相对于父级标签的位置放置
<body>
<div style="width: 500px;height: 200px;position: relative;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="width: 500px;height: 200px;position: relative;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="width: 500px;height: 200px;position: relative;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>
三层，z-index(层级顺序)
<body>
<div 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;">
<input type="text" />
</div>
<div style="display:none;z-index: 9;position: fixed;background-color: black;
top: 0;
bottom: 0
left: 0;
right: 0;
opacity: 0.5;
"></div>
<div style="height:5000px;bakground-color: green;">
dsfsfs
</div>
</body>
14.overflow(超过范围就隐藏,或出现滚动条) overflow:hidden overflow:auto
<body>
<div style="height: 200px;width: 300px;overflow: auto">
<img src="1.jpg">
</div>
</body>
15.hover
<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;
color: white;
}
.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>
16.background-image:url('image/4.gif') # 默认div大的话，图片会重复放
background-repeat: repeat-y;
background-postion: 10px 10px;
<body>
<div style="height: 35px;width: 400px;position; relative;">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px;"/>
<span style="position:absolute;right: 0;top: 10px;background-image: url(i_name.jpg);height:16px;width:16px;display:inline-block;"></span>
</div>
</body>
页面布局：
主站布局 <div class='pg-header'>
<div style='width: 980px;margin 0; atuo;'>
内容自动居中
</div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>
后台管理布局 a.左侧菜单跟随滚动条
b.左侧以及上下不动 ******** <head>
<title>Title</title>
<style>
body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height:48px;
background-color: #2459a2;
color: white;
line-height: 48px;
}
.pg-header .logo{
width: 200px;
background-color: cadetblue;
text-align: center;
}
.pg-header .user{
width: 160px;
background-color: wheat;
color: white;
height: 48px;
}
.pg-header .user:hover{
background-color: blue;
}
.pg-header .user .a img{
height: 40px;
width: 40px;
margin-top: 4px;
border-radius:50%;
}
.pg-header .user .b{
z-index:20;
position: absolute;
top: 48px;
right: 44px;
background-color:red;
width: 160px;
display: none;
}
.pg-header .user .b a{
display: block;
}
.pg-content .menu{
position: fixed;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: fixed;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
background-color: purple;
overflow: auto; 自动出现滚动条
z-index: 9;
}
</style>
</head>
<body>
<div class='pg-header'>
<div class="logo left">
LOGO
</div>
<div class="user right" style="position: relative;">
<a class="a" href="#">
<img src="22.jpg">
</a>
<div class="b">
<a>资料</a>
<a>注销</a>
</div>
</div>
</div>
<div class='pg-content'>
<div class="menu left"> </div>
<div class="content left"> </div>
</div>
<div class='pg-footer'></div>
</body> -------------------------------------------------
position:
fixed:永远固定在窗口的某个位置
relative:单独无意义
absolute:第一次定位，可以在指定位置，滚动滚轮时，不在了
Javascript
1.注释
单行注释：//
多行注释：/* */
2.变量
name = 'hello' #全局变量
var name = 'tom' # 局部变量
3.数据类型
age = "18"; # 字符串 i = parseInt(age); # 整型
字符串
a = 'hello tom'
a.charAt(1) # e
a.charAt(0) # h
a.substring(1,3) # "el"
a.length # 9
实例:
<script>
function f1(){
console.log(1);
}
//创建定时器
setInterval("f1()",2000); # 执行的代码，间隔时间
</script>
<body>
<div id="i1">欢迎XXX莅临指导</div>
<script>
function func(){
//根据ID获取指定标签的内容
var tag = document.getElementById('i1');
//获取标签内部的内容
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(l,content.length);
var new_content = l + f;
tag.innerText = new_content;
}
setInterval('func()',1000);
</script>
</body>
4.
a = 'hellotom'
a.concat(‘jerry’) #hellotomjerry
a.indexOf('e') #1
a = 'alexalex'
a.split('e') # ["al","xal","x"]
a.split('e',1) # ["al"]
5.数组
a = [11,22,33,44]
a.length # 4
a.splice(1,1,99) # 起始位置，删除几个，插入的数据
a # [11,99,33,44]
a.splice(1,0,909)
a # [11,909,99,33,44]
a.splice(1,1)
a # [11,99,33,44]
a.slice(1,3) # [99,33]
6.对象
7.for循环
//循环时，循环的元素是索引 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);
}
a = [11,22,33,44]
for(var i=0;i<a.length;i++){
}
不支持字典
while循环
while(条件){ }
8.条件语句
if(条件){
}else if(条件){
}else{
}
if(1==1){}
if(1!=1){}
if(1===1){}
if(1！==1){}
if(1==1 && 2==2){}
if(1==1 || 2==2){}
1 == "1" # true ,值相等即可
1 === "1" # false，值和类型都要相等
switch(name){
case '1':
console.log(123);
break;
case '2':
console.log(456);
break;
case '3':
console.log('999');
break;
}
9.函数
function func(arg){
return arg+1
}
var result = func(1)
console.log(result);
普通函数
function func(){
}
匿名函数
setInterval(function(){
console.log(123);
},5000)
自执行函数：创建函数并且自动执行
(function(){
console.log(arg);
})(1)
10.序列化
JSON.stringify()把数组转化为字符串
> li = [11,22,33,4,5]
> s = JSON.stringify(li)
< "[11,22,33,4,5]"
JSON.parse()把上面的字符串再转化为数组
> newLi = JSON.parse(s) # 更常用
> newLi
< [11,22,33,4,5]
11.转义
> url = "https://www.sogou.com/web?query=理解";
< "https://www.sogou.com/web?query=理解"
> encodeURI(url)
< "https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"
> newUrl = encodeURI(url);
< "https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"
> decodeURI( newUrl)
< "https://www.sogou.com/web?query=理解"
=====================================================
> url
< "https://www.sogou.com/web?query=理解"
> newUrl = encodeURIComponent(url)
< "https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E7%90%86%E8%A7%A3"
客户端请求服务器端，服务器端把数据经过转义保存到客户端的cookie中
12.eval
13.时间
Date对象
> var d = new Date()
> d.getMinutes()
< 41
> n = d.getMinutes + 4
< 45
> d.setMinutes(n)
< 1479541546307
> d
< Sat Nov 19 2016 15:01:01 GMT+0800 (中国标准时间)
14.作用域
先看python的，python是以函数作为作用域
情况一：
def func():
if 1==1:
name = 'tom'
print(name) #成功
情况二：
def func():
if 1==1:
name = 'tom'
print(name)
func()
print(name) # 报错
1.Javascript是以函数作为作用域
function func(){
if(1==1){
var name = 'tom';
}
console.log(name);
}
func() # tom 正常执行
2.函数的作用域在函数未被调用之前就已经创建
function func(){
if(1==1){
var name = 'tom';
}
console.log(name);
}
3.函数的作用域存在作用域链，并且也是在被调用之前创建
xo = 'tom'
function func(){
var xo = 'eric';
function inner(){
var xo = 'tony';
console.log(xo);
}
inner()
}
func() # tony
-----------------------------------------------
xo = 'tom'
function func(){
var xo = 'eric';
function inner(){
console.log(xo);
}
return inner
}
var ret = func()
ret() # 相当于inner(), 'eric'
DOM
1.找标签
获取单个元素 document.getElementById('i1')
获取多个元素（数组） document.getElementsByTagName('div')
获取多个元素（数组） document.getElementsByClassName('c1')
2.操作标签
a.获取标签中的文本内容
标签.innerText
对标签内部文本进行重新赋值
标签.innerText = " "
b. className
> tag
< <div id="i1">c2</div>
> tag.className = 'c1'; # 整体做操作
< "c1"
> tag
< <div id="i1" class="c1">c2</div>
> tag.className = 'c2';
< "c2"
> tag
< <div id="i1" class="c2">c2</div>
> tag.classList
< ["c2"]
> tag.classList.add('c3') # 添加指定样式
<
> tag
< <div id="i1" class="c2 c3">c2</div>
> tag.classList.remove('c2') # 删除指定样式
<
> tag
< <div id="i1" class="c3">c2</div>
3.直接选择器
<body>
<div id="i1">我是i1</div>
<a>asd</a>
<a>909</a>
<a>sdfdfd</a>
</body> -----------------------
> document.getElementById('i1')
< <div id="i1">我是i1</div>
> document.getElementById('i1').innerText
< "我是i1"
> document.getElementById('i1').innerText = "新内容"
< “新内容”
> document.getElementsByTagName('a')
< [<a>asd</a>,<a>909</a>,<a>sdfdfd</a>]
> document.getElementsByTagName('a')[1]
< 909
> document.getElementsByTagName('a')[1].innerText = 666
< 666
> tags = document.getElementsByTagName('a')
< [<a>asd</a>,<a>909</a>,<a>sdfdfd</a>]
> for(var i=0;i<tags.length;i++){tags[i].innerText=777;}
< 777 # 改变所有值
4.间接选择器
tag = document.getElementById('i1')
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素
5.
<div onclick='func();'>点我</div>
<script>
function func(){
}
</script>
6.模态对话框
checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
<head>
<style>
.hide{
display: none;
}
.c1{
position:fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
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="bbutton" value="添加" onclick="ShowModel();"/>
<input type="bbutton" value="全选" onclick="ChooseAll();"/>
<input type="bbutton" value="取消" onclick="CancleAll();"/>
<input type="bbutton" 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" 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');
}
</script>
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
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
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
var current_tr=tr_list[i];
var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){
checkbox.checked = false;
}else{
checkbox.checked = true;
}
}
} </body>
<head>
<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>
7.
JQuery
1.
2.
3.
4.
5.
6.
HTML,CSS,Javascript,JQuery的更多相关文章
- 前端~HTML~CSS~JavaScript~JQuery~Vue
HTML CSS JavaScript DOM文档操作 jQuery实例 Vue
- HTML系列(HTMl+CSS+JavaScript+Jquery)--un
HTML 指超文本标签语言. 点击查看更详细的HTML内容 包括:一.基本标签;二.常用标签;三.表单<form></form>;四.表格<table></t ...
- selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治疗selenium各种定位不到，点击不了的并发症）
跟你说,你总是靠那个firebug,chrome的F12啥的右击复制xpath绝对总有一天踩着地雷炸的你死活定位不到,这个时候就需要自己学会动手写xpath,人脑总比电脑聪明,开始把xpath语法给我 ...
- 在线运行Javascript,Jquery,HTML,CSS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...
- JavaScript ,Css and Jquery In OpenERP 7.0
From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...
- JavaScript jQuery 入门回顾 2
JQuery 滑动 利用jQuery可以在元素上创建滑动效果. slideDown() 向下滑动元素. slideUp() 向上滑动元素. slideToggle() 在 slideDown() 与 ...
- CSS+Javascript的那些框架
CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint http://www.oschina.net/p/blueprintcss Ela ...
随机推荐
- MySQL定义异常和异常处理方法
在MySQL中.特定异常须要特定处理.这些异常可以联系到错误,以及子程序中的一般流程控制.定义异常是事先定义程序运行过程中遇到的问题,异常处理定义了在遇到问题时相应当採取的处理方式.而且保证存储过程或 ...
- linux—jdk 安装步骤
1. 查看现有版本 java -version 2. 查看jdk的具体版本 rpm –qa| grep jdk rpm –qa| grep gcj 3. ...
- React系列——react-redux之connect方法解析
connect简介 前方高能预警,有耐心才能看完文章!! react-redux仅有2个API,Provider和connect,Provider提供的是一个顶层容器的作用,实现store的上下文 ...
- C++ Scoket的升级版（多态的运用）
//Socket报文发送c++升级版 #define _CRT_SECURE_NO_WARNINGS #include<iostream> using namespace std; #in ...
- eclipse配置weblogic服务器
最近项目要从tocmat迁移到weblogic,使用weblogic的原因不用多说,好处不言而喻.于是准备配置基于eclipse的weblogic服务器,并将整个过程记录下来分享给大家. ...
- 20个JS 小技巧超级实用
1. 将彻底屏蔽鼠标右键 oncontextmenu=”window.event.returnValue=false” < table border oncontextmenu=return(f ...
- ie tbody table 兼容方法
IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2 ...
- Mac 终端命令行颜色高亮显示
一.颜色高亮显示 针对terminal采用bash模式: 编辑 ~/.bash_profile, 加入以下代码: export CLICOLOR=1 export LSCOLORS=gxfxaxdxc ...
- poj 1129(dfs+图的四色定理)
题目链接:http://poj.org/problem?id=1129 思路:根据图的四色定理,最多四种颜色就能满足题意,使得相邻的两部分颜色不同.而最多又只有26个点,因此直接dfs即可. #inc ...
- Linux shell 1-初步认识
1.什么是linux linux是一种操作系统,它可划分为以下四部分 1.linux内核(Linux系统的核心,负责管理系统内存,硬件驱动,文件系统等) 2.GNU工具(一组软件工具,提供一些类UNI ...