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 ...
随机推荐
- springbatch操作DB
一.需求分析 使用Spring Batch对DB进行读写操作: 从一个表中读取数据, 然后批量的插入另外一张表中. 二.代码实现 1. 代码结构图: 2. applicationContext.xml ...
- python_集合_笔记
集合 特性: a.确定性(元素必须可以hash) b.互异性(去重) c.无序性(集合中的元素没有先后之分) 集合关系测试 交集 & jihe1.intersection(jihe2) 差集 ...
- 第一百四十八节，封装库--JavaScript，菜单切换
第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...
- 下列哪一个接口定义了用于查找、创建和删除EJB实例
下列哪一个接口定义了用于查找.创建和删除EJB实例 A.Home B.Remote C.Local D.Message 解答:A remote接口定义了业务方法,用于EJB客户端调用业务方法. hom ...
- struts2中，Action通过什么方式获得用户从页面输入的数据，又是通过什么方式把其自身的数据传给视图的？
struts2中,Action通过什么方式获得用户从页面输入的数据,又是通过什么方式把其自身的数据传给视图的? 解答: 1)可以直接通过与表单元素相同名称的数据成员(需要存在符合命名规范set和get ...
- （随用随总结）Linux下面的特殊权限&不同的文件类型
一.Linux的文件信息 linux文件被保存在文件系统下,由以下属性组成: ls -l 之后看到的信息 从左到右可以看到文件的以下属性 各种类型 访问权限 链接数(跟 inode相关,ln 硬链 ...
- VUE:使用vue-cli脚手架无法安装npm install axios 的巨坑
使用命令 npm install axios 安装axios可能会报错,无法引用, 这个时候使用淘宝的镜像cnpm安装就可以了 cnpm install axios 如果没有安装cnpm,执行以下命令 ...
- 用ChemDraw画3D图的方法
在绘制化学图形的时候,很多的用户都会发现很多的图形都是三维的,这个时候就需要找一款能够绘制3D图形的化学绘图软件.ChemOffice 15.1是最新的化学绘图工具套件,总共有三个组件,其中ChemD ...
- 源码分析——Action代理类的工作
Action代理类的新建 通过<Struts2 源码分析——调结者(Dispatcher)之执行action>章节我们知道执行action请求,最后会落到Dispatcher类的serv ...
- [MySQL] 变量（参数）的查看和设置 [转]
[MySQL] 变量(参数)的查看和设置 类似于Oracle的参数文件,MySQL的选项文件(如my.cnf)用于配置MySQL服务器,但和Oracle叫法不一样,在MySQL里, 官方叫变量(Var ...