html+css+js+jQuery学习笔记（一）

Css中“.”可以选择包含两个样式的东西“，”可以都选上

img可以把div撑开 只设置宽 或者高那么将按照比列缩放扩大

Outline:none;//input text类型有外边框；

Preferences->Key Bindings->user->编辑文档 //代码对齐
{ "keys": ["ctrl+alt+l"], "command": "reindent" },

cursor:pointer 小手

sub 上标

背景图定位：左右反 上下正

Display:none;放弃原来位置隐藏；

visibility:visible/hidden;平时可视/平时隐藏

play:none;不占位隐藏

visibility:hidden;占位隐藏

opacity 透明度

filter:alpha(opacity=60); 浏览器自己的透明滤镜

text-transform:uppercase;英文大写

text-transform:lowercase;英文小写

text-transform:capitalize;单次首字母大写

text-transform:none;原样式

prompt("");//

alert(“”);

confirm(“”)//弹出带选择选择框

Border-collapse:collapse;//table表的双边框变成但边框

**transition:all 5s ease 0s;//css样式转变时间//！！！震惊我一年！！

transform:rotate(90deg);//顺时针旋转九十度

Text-indent:-999em 或者px//段落首行缩进

=== 全等于

!== 不全等

条件 ? val1 : val2

Math.pow(5,7)

Math.sqrt()

Math.round()四舍五入的原理是在参数上加0.5然后进行下取整

有公式，如果想要在[a,b]闭区间取随机数，能取到a，也能取到b：

Math.random()能够生成一个0~1的数字，不包括0，也不包括1。术语叫做(0,1)开区间。

parseInt(Math.random() * (b - a + 1)) + a;

//

/数组

!!!!下标越界不报错 是unfinde

***push 尾插

***pop 尾删

***unshift 头插

***shift 头删

***Concat()//连接 连接的时候还得重新赋值 arr=arr.concat（arr2）

***Slice();//截取数组某一部分

***arr.slice(start,end) 返回一个新的数组，包含从 start 到 end （不包括该元素）的元素。

/

arr.splice(3,2,"斑马","骆驼");

一旦应用，arr立即改变。并不需要重新复制，换句话说，这个函数不返回新的数组。

var arr = ["A","B","C","D","E","F","G"];
arr.splice(3,2,"X","Y","Z","思密达"); //从数组下标为3开始这项，连数2项，改为……
console.log(arr);

// ***************插入一些项 ***************
var arr = ["A","B","C","D","E","F","G"];
arr.splice(2,0,"嘻嘻","哈哈"); //插入到下标为2的项前，不删除项目
console.log(arr);

***reverse()；//翻转数组

***sort();数组排序

***arr.sort(function(a,b){

//如果a要放在b前面，那么返回负数
//如果a要放在b后面，那么返回正数
//如果a和b不区分大小，那么返回0
if(a < b){
return -1;
}else if(a > b){
return 1;
}else if(a == b){
return 0;
}

});

//

///字符串///

***var str = arr.join(分隔符);如果不写分隔符，那么等价于用逗号分开

转为字符串

***charAt() 返回在指定位置的字符。

"abcdef".charAt(0);

和数组下标类似的。

***Arr.length

***indexOf() 检索字符串 //可以用于字符串

"我爱你亲爱的祖国的人民币".indexOf("的");     //5

***replace() 替换 funciton（match,....）中的match为 替换前的字符串

"abcdefgaa".replace("a","0");    // "0bcdefgaa"

把a替换为0 ， 只替换1个。

***split() 把字符串→数组，  从什么地方拆分， 就是参数

"我爱你亲爱的祖国的人民币".split("的");

***substr() 截取子串  

“字符串”.substr(start,length)

"abcdefghijklmn".substr(3,5);

 从下标为3的地方开始，取5个字符

***substring() 截取子串

“字符串”.substring(start,end); 不包括end

"abcdefghijklmn".substring(3,5);

***toLowerCase()、toUpperCase();

转换为大小写

split转为数组；

Join转为字符串

字符串方法返回值有三类：

返回数字类型：indexOf，lastIndexOf，search , charCodeAt

返回数组的方法：split，match

返回字符串的方法：charAt，substring，substr, slice, replace

//

//

正则表达式

Exec ///test

var str = /abc/g;

console.log(str.exec(demo));

普通字符包括：字母（abcABC），数字（123），_等等

特殊字符：() [] {} ^ $ * ? \ | + .

单词分隔符我们用\b表示 [a-zA-Z_0-9]之外的字符

非单词分隔符我们用\B表示

****字符集[] 里面放的东西test对象的一个东西

3.5预定义类

. [^\n\r] 除了换行和回车之外的任意字符

\d [0-9] 数字字符

\D [^0-9] 非数字字符

\s [ \t\n\x0B\f\r] 空白字符

\S [^ \t\n\x0B\f\r] 非空白字符

\w [a-zA-Z_0-9] 单词字符(所有的字母)

\W [^a-zA-Z_0-9] 非单词字符

3.6 量词

? 软性量词 出现零次或一次

* 软性量词 出现零次或多次(任意次)

+ 软性量词 出现一次或多次（至道一次）

{n} 硬性量词 对应零次或者n次

{n,m} 软性量词 至少出现n次但不超过m次(中间不能有空格)

{n,} 软性量词 至少出现n次(+的升级版)

3.7 修饰符

g 表示全局匹配

i 忽略大小写

m 多行匹配

3.8其他

[\u4e00-\u9fa5]表示中文集

| 表示或者的意思

alert(/a|b/.test('b')) =》 true

alert(/a|b/.test('c')) =》 false

3.9 分组

分组

1 解决多个字符串重复

2 可以在外面获取

格式 (任意个字符)

获取

在正则表达式内部获取：\数字

在正则表达式外部获取：$数字

注意数字是从1开始的。

//
(function fun(){
alert("哈哈")
})();

闭包

function text() {
        var arr = [];
        for (var i = 0; i < 10; i++) {
            (function (a) {
                arr[a] = function () {
                    console.log(a);
                } //保存的是立即执行函数的成果AO()
            }(i))
        }
        return arr;
    }
//

不仅仅是class属性需要用className避讳一下，还有：

class 要写成.className

for 要写成.htmlFor  （label用的）

rowspan 要写成rowSpan

colspan 要写成colSpan

setAttribute()、getAttribute()。

getAttribute();   //得到属性
setAttribute();   //设置属性

oImg.setAttribute("src","images/2.jpg");
等价于
oImg.src = “images/2.jpg”;

setAttribute和点语法有一丢丢不一样：

第一，所有自定义的属性，都不能通过点语法得到

<div shaoshanhuan=”38”></div>

alert(oBox.shaoshanhuan);  //undefined，自定义的属性，不是w3c的属性，都不能用点语法
alert(oBox.getAttribute("shaoshanhuan")); //38

Onclick 单击

Onmouseover 鼠标进入

Onmouseout 鼠标离开

Ondblclivk 双击

Onfouse 得到焦点

Onblue 失去焦点

Onmousedown 鼠标按下

Onmouseup 鼠标按键抬起

Windows.onload 页面中的代码完全加载完毕以后

play:none;隐层

play:block;显示

innerHTML//内部文本

document.getElementsByName(“”)//里面放的是表单中的name

window.getComputedStyle(oDiv).getPropertyValue("width")

getPropertyValue看上去就像打它，看着就不爽，所以可以简写：

getComputedStyle(oDiv)["padding-left"]

好用的东西，一定不兼容。所以IE6、7、8不兼容getComputedStyle.getPropertyValue()的写法，另外一套写法：附加在元素身上的currentStyle属性，它表现和style点语法一样，使用驼峰式访问。

oDiv.currentStyle.width

现在要注意，它必须使用驼峰：

oDiv.currentStyle.paddingTop

oDiv.currentStyle["paddingLeft"]

总结：

高级：

高级：
window.getComputedStyle(oDiv).getPropertyValue("padding-left");
getComputedStyle(oDiv).getPropertyValue("padding-left");
getComputedStyle(oDiv)["padding-left"];
IE6、7、8：
oDiv.currentStyle.paddingLeft;
oDiv.currentStyle["paddingLeft"];

兼容性问题

if(window.getComputedStyle){
alert("我会getComputedStyle");
}else{
alert("我不会getComputedStyle，那四个啥？")

}

现在我们要在一个轮子，就是封装一个函数，这个函数接收两个参数，第一个是对象，第二个是属性名。

fetchComputedStyle(obj,”padding-left”);
fetchComputedStyle(obj,”paddingLeft”);

这个函数返回的是这个属性值的计算后的样式。更牛逼的是，我们无论用户输入的是驼峰还是非驼峰，都让这个函数鲁棒。

div.currentStyle.opacity   //可以得到css清单中的opactiy里面写的值。而不是filter的值。

支持opacity的浏览器，总会将.6这种写法规范为0.6 。 而不支持opacity的浏览器则会返回原有的形式.6。这是一个小坑，进行比较的时候需要注意。

ele.offsetLeft

ele.offsetTop

ele.offsetWidth

ele.offsetHeight

ele.clientWidth

ele.clientHeight

  一、clientWidth和clientHeigh 、 clientTop和clientLeft

       1，clientWidth的实际宽度

       clientWidth = width+左右padding//浏览器的宽度

       2，clientHeigh的实际高度//浏览器的高度

        clientHeigh = height + 上下padding

       3，clientTop的实际宽度

          clientTop = boder.top(上边框的宽度)

       4，clientLeft的实际宽度

           clientLeft = boder.left(左边框的宽度)

   二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

        1,offsetWidth的实际宽度

           offsetWidth = width + 左右padding + 左右boder

        2,offsetHeith的实际高度

           offsetHeith = height + 上下padding + 上下boder

        3，offsetTop实际宽度

           offsetTop：当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

        4，offsetLeft实际宽度

          offsetLeft：当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

timer = setInterval(function(){
},20)
clearInterval(timer);

这个按钮持续点击，盒子运动越来越快。这是因为每次点击，盒子身上就有更多的定时器在作用。

解决办法，就是四个字的口诀“设表先关”。

startBtn.onclick = function(){
//设表先关
clearInterval(timer);
//设置定时器
timer = setInterval(function(){
nowleft += 2;
oDiv.style.left = nowleft + "px";
}, 20);
}

所以解决办法，就是验收、拉回终点、停表：“拉终停表”

var timer = setInterval(function(){
nowleft += 7;
if(nowleft > 600){
nowleft = 600;
clearInterval(timer);
}
oDiv.style.left = nowleft + "px";
console.log(nowleft);
},20);

间隔时间是以毫秒为单位，1000毫秒就是1秒。

“毫”就是千分之一，

“厘”就是百分之一，

“分”就是十分之一

var obj = {
"name":"考拉",
"age" : 18
};

obj.sex = "刚变完性";

for(var k in obj){
  console.log(k + "的值是" + obj[k]);

}

Var t=new Date();

Call apply//

//

callback.call(elem);

或者：

callback.apply(elem);

执行callback函数，并且让callback函数中的this关键字为elem。

说白了apply、call功能是一样的，功能都是：让函数调用，并且给函数设置this是谁。

function xianshixinxi(a,b,c){
console.log(this.name);
console.log(a + b + c);
}
xianshixinxi.call(obj,2,3,4);

xianshixinxi.apply(obj,[2,3,4]);

window.setTimeout(函数,时间);

在指定时间之后，执行函数一次，仅仅执行1次。

clearTimeout();

function linear(t , b , c , d){
return c * t / d + b;
}
function easeIn(t,b,c,d){
    return c * ( t /= d) * t + b;
}
function easeOut(t,b,c,d){
    return -c *(t/=d)*(t-2) + b;
}

他们的参数，都是t、b、c、d：

第一个参数t表示当前帧编号

第二个参数b表示起始位置

第三个参数c表示变化量

第四个参数d表示总帧数

函数的返回值，就是t这一帧，元素应该在的位置。

clearTimeout();