一 HTML
一大堆的标签:块级行内
二 CSS
页面布局
主站:
<div class='pg-header'>
<div style="980px;margin:0 auto;">
内容自动居中
</div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>
后台管理布局:
position:
fixed --永远固定在窗口的某个位置
relative --单独使用无意义
absolute --第一次定位可以在指定位置,滚轮滚动后位置改变
a. 上下内容不动,左右内容滚动
b.上下左内容不动,右侧内容滚动
ps：img style-“border-radius：50%”设置为圆形边框
style里边可以叠加限定为某类标签添加属性
图标可使用font-awesome来在线使用;
通过以下代码可以实现div下的子标签改变属性
.item:hover .b{
background-color: green;
display: block;
}
三 JavaScript
1条件语句:
swtich(name){
case '1':
code;
break;
case '2':
code;
break;
...
default:
code;
}
2函数:
普通函数 function func() { code; }
匿名函数
setInterval("func()",5000);可写成
setInterval(function{code;},5000),其中的就是匿名函数,没有函数名
自执行函数(创建函数并自动执行)//引用别人的js文件时都是采用这种形式
function fun(arg) {
console.log(arg);
}
func(1);
//代码中必须明确调用才能执行fun(arg)函数
但
(function(arg)) {
console.log(arg);
}(1);//运行到这段代码会直接运行而不用显示调用
3 序列化
JSON.stringify(li)把列表转化为字符串
JSON.parse(str)把字符串转化为数组
4.转义
decodeURI( ) URl中未转义的字符(将中文转义字符还原)
decodeURIComponent( ) URI组件中的未转义字符(将特殊字符和中文的转义字符还原)
encodeURI( ) URI中的转义字符(对中文字符进行转义)
encodeURIComponent( ) 转义URI组件中的字符(对特殊字符和中文字符进行转义)
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
5. eval
python:
val = eval(表达式)
exec(执行代码)
JavaScript
是python中上述的合集
6. 时间
Date对象来操纵时间,Date是一个时间类
var d=new Date();
d.getXXX()获取对应值
d.setXXX()设置对应值
7. 作用域
其他语言:以代码块为作用域 出现{}为一个代码块C++ C# Java
public void func(){
if(true){
name ="alex";
}
console.write(name);
}
func();
//这样会报错
python:
情况一
def func():
if True:
name = 'alex'
print(name)
func()
//这样运行不会报错,因为python是以函数为作用域的.
情况二
def func():
if True:
name = 'alex'
print(name)
func()
print(name)
//这样运行会报错
JavaScript:以函数为作用域的
function func() {
if (true){
name = 'alex';
}
console.log(name);
}
func();
//得以正确运行
============2函数的作用域在函数未被调用之前已经创建============
function func() {
if (true){
name = 'alex';
}
console.log(name);
}
func();
====3函数的作用域存在于作用域链,并且也是被调用之前创建======
实例1
function func() {
var xo='eric';
function inner() {
var xo = 'tony';
console.log(xo);
}
inner();
}//inner函数查找xo时首先在函数内部查找,找不到就在上层函数作用域链找,
//找不到去全局变量找,最后找不到就报错
实例2
xo='alex'
function func() {
var xo='eric';
function inner() {
console.log(xo);
}
return inner;
}
var outer = func();
outer();//此处输出eric
实例3
xo='alex'
function func() {
var xo='eric';
function inner() {
console.log(xo);
}
inner();
var xo='tony'
return inner;
}
var outer = func();
outer();//此处输出tony
=============4函数内部变量提前声明===============
function func() {
console.log(xo);
var xo = 'alex';//输出为undefined,如果没有这一句,将会报错
}
func();
8. JavaScript面向对象,实际是对函数的变身
function foo(){
var temp='alex';
}
foo();//这是简单函数
function foo(n){ //充当构造方法
this.name = n;
this.sayName = function() {//此处为类定义的方法
console.log(this.name);
}
}
var obj = new foo('we');
obj.name;//此处为alex
obj.sayName();//
var obj2 = new foo('ladoong');
obj2.name;
obj2.sayName();
其中重复存储了其中的sayName()函数
原型:
function Foo(n){
this.name = n;
}
//Foo的原型
Foo.prototype = {
'sayName':function(){
console.log(this.name);
}
}
这样做就可以解决上述问题;创建对象时
a.this代指对象(相当于python 中的self)
b.创建对象时,new 函数()相当于创建一个对象
四 DOM
查找
直接查找
var obj = document.getElementById('i1')
间接查找
文本内容操作:
innerText只是获取当前标签的文本内容,忽略其中的标签
innerHTML 获取其中的全部内容
value
对于input获取当前标签中的值
select获取选中的value值,selectedIndex可以获取获取设置响应的select标签
textarea获取其中的值
样式操作:
className:
classList:
classList.add
classList.remove
obj.style.color 样式操作针对更小 对于font-size 则为obj.style.fontSize
属性操作:
obj.setAttribute("key","value")//设置标签中的某个属性
obj.attributes
obj.getAttribute("key")
创建标签,并添加到HTML中
a.字符串形式
var tag='<input type="text">';
document.setElementId('i1').insertAdjacentHTML('beforeEnd',tag);
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
b.对象的方式
var tag = document.createElement('input');
tag.setAttribute('type',"text");
document.getElementById('i1').appendChild(tag);
提交表单
表单通过任何标签都可以提交通过js
document.getElementById('f1').submit();
其他操作
console.log 输出框
alert 弹出框
confirm 确认框 返回为true或false
// URL和刷新
location.href 获取当前URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
事件
onclick,onblur,onfocus,onmouseover.onmouseout
行为 样式 结构 相分离的页面
js css div
绑定事件两种方式:
a.直接标签绑定 onclick='xxx()' onfocus
b.先获取Dom 对象,然后绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
this,当前触发事件的标签