J.chong

1.加高
问题：扩展性不好

2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）

3.inline-block 清浮动方法：

问题：margin左右自动失效；

4.空标签清浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

清浮动方法

5.br清浮动
问题：不符合工作中：结构、样式、行为，三者分离的要求。

6.after伪类 清浮动方法（现在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}

after伪类： 元素内部末尾添加内容；

    :after{content"添加的内容";} IE6，7下不兼容

zoom 缩放

    a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
    b、FF 不支持；

7.overflow:hidden 清浮动方法；

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

overflow: scroll | auto | hidden；

overflow:hidden;溢出隐藏（裁刀！）

IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）：

a、IE6
b、浮动
c、横向margin
d、块属性标签（加display:inline;）

IE6下 li部分兼容性问题：

a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)
b、IE6 IE7  li  下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；）

vertical-align 垂直对齐方式
a、加垂直对齐方式的同排元素都要加垂直对齐方式；
b、垂直对齐方式可以解决元素下方间隙问题；

图片下方间隙问题

a、display:block; (改变标签本身特性)
b、overflow:hidden; (必须知道图片高度)
d、vertical-align (暂时最完美的方案)

position:relative; 相对定位

    a、不影响元素本身的特性；

b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响；

定位元素位置控制

    top/right/bottom/left  定位元素偏移量。

position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
e、相对定位一般都是配合绝对定位元素使用；

z-index:[number]； 定位层级

    a、定位元素默认后者层级高于前者；

遮罩弹窗（优酷弹窗）
标准 不透明度： opacity:0~1;
IE 滤镜： filter:alpha(opacity=0~100);

position:fixed； 固定定位

与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；

定位其他值：

position:static ； 默认值
position:inherit ;  从父元素继承定位属性的值

position:relative | absolute | fixed | static | inherit;

position:relative;

在 IE6 下父级的 overflow:hidden; 包不住子级的relative;

position:absolute;

在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；

position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）

表格标签：

table 表格
thead 表格头
tbody 表格主体
tfoot 表格尾
tr 表格行
th 元素定义表头
td 元素定义表格单元

表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充

form 表单
<input type="…… " name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏

select/option 下拉选框

对高度的支持不兼容；

textarea 文本域

各个浏览器下的默认滚动条显示不兼容
css3新增 resize 调整尺寸属性；

outline 轮廓线；
A标签轮廓线去除方法：
1、……
2、……

表单元素兼容性问题

IE6下input背景滚动；

\9 所有的IE9及之前
+ * IE7及ie7的ie浏览器认识    
_IE6及ie6的ie浏览器认识

<!--[if IE]>
这是IE 
<![endif]-->

<!--[if IE 9]>
9
<![endif]-->
…………………………
<!--[if IE 6]>
6
<![endif]-->

// 單個支持 顯示 #ffff00
.className{color:#ffff00!important}
.className{color:green;}

//多個不支持，顯示green
.className{color:#ffff00!important color:green}

data uri 圖片
http://dancewithnet.com/lab/2009/data-uri-mhtml/create/1376100722.php

flash透明<param name="wmode" value="transparent"> wmode="transparent"

box-sizing 盒模型解析模式
Content-box  标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content

IE8支持

 -webkit-box-sizing: border-box; 
 -o-box-sizing: border-box; 
 -ms-box-sizing: border-box; 
 box-sizing: border-box;

解決form元素兼容性，IE7不支持，所以需要加hack *

 margin: 0;
 padding: 0;
 border-width: 1px;
 height: 17px;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 
 *height:15px; 
 *width: 15px;

css模拟固定定位
expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2));

未知宽高的img居中问题

li的里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉

css模擬fixed定位一

css模擬fixed定位二

取值，只會取第一位、賦值，則是全部改變

filter：過濾；not:排除

注意:filter与has的区别，filter是针对当前操作元素，has是针对当关操作元素里面的东西；包含的意思

    //$('.box').filter('[title=one]')
    //取值时：当集合，只会取到第一位
    console.log($('li').html());
    //赋值时，则是全部改变
    $('li').html('aaa')
    //filter not，相反
    $('div').filter('.box').css('background','red')
    $('div').not('.box').css('background','red')
    //has 包含元素
    $('div').has('span').css('background','red')

next()與prev()：緊跟相鄰元素【必要條件】，如果帶參數，也必須是緊跟相鄰元素，如果操作下一個選擇類名，必須使用nextALl()/prevAll()

注意：index()：當前元素在所有兄弟節點的位置,不帶參數時與標籤或類id等無關

<h1></h1>
<h5></h5>
<h3 id='h'></h3>
<h2></h2>

$('#h').index() //2

width(): width

innerWidth():width+padding

outerWidth():width+padding+border

outerWidth(true):width+padding+border+margin

offsetLeft獲取不到隱藏的值 ；如果div.style.display = 'none'

$('div').get(0).offsetWidth  //0 
$('div').outerWidth() // 100，可獲取到隱藏元素

insertBefore/insertAfter; appendTo,prependTo動詞

$('span').insertBefore('div') //操作span在div前面
$('span').insertAfter('div') //操作span在div後面

before ,after, append ,preend，名詞

$('span').before('div') //span的前面必須是div
$('span').after('div') //span的後面必須是div

offset()獲取到屏幕的距離，注意與offsetleft的區別（offsetleft到有定位父級的元素，如果獲取到屏幕的距離 需）

    function getPos(obj){
        var pos = {left: 0, top:0};
        while (obj) {
            pos.left +=obj.offsetLeft;
            pos.top +=obj.offsetTop;
            obj = obj.offsetParent
        }
        return pos;
    }

position()，當使用position()時，相當於被操作元素加個定位，注意本身被操作元素的margin值不影響的，即到有定位的父級

    console.log($('div').position().left);
    //到有定位的父級的left值，把當前元素轉換為定位的形式，所以margin是不影響的，因為定位元素的left及top值

parent()：獲取父級(不管是否有定位)

offsetParent():獲取有定位的父級<br />對應 offsetNode</p>

jq寫drag

    $(function () {
        var disX = 0;
        var disY = 0;
        $('div').mousedown(function (e) {
            disX = e.pageX - $(this).offset().left;
            disY = e.pageY - $(this).offset().top;
            $(document).mousemove(function (e) {
                $('div').css({'left': e.pageX - disX});
                $('div').css({'top': e.pageY - disY});
            })
            $(document).mouseup(function () {
                $(document).off()
            })
        })
        return false;
    })

fadeTo(時間，透明度)

get()，jq轉原生：$('#div1').get(0).innerHTML;get()如果不加參數，相當於轉成一組集合；

for(var i=0;i<$('li').length;i++){
    $('li').get(i).style.background = 'red'
}

更簡單的，加上[i]則自動轉為原生

for(var i=0;i<$('li').length;i++){
        $('li')[i].style.background = 'red' 
    }

text()，當選擇為一組元素集合時；會獲取到所有的內容，而html()只會獲取到集合中的第一個；

remove()，刪除的元素返回值即被刪元素；所以 var _div = $('div').remove()

detach()跟remove()一樣，但會保留事件；

parents()：获取当前元素的所有祖先节点，参数就是筛选功能

closest():获取最近的祖先节点，包括自身，必须写参数

Until()截止的意思：
nextUntil('h2')，当走到h2包括h2自身都不会走下去；

类似有：parentsUntil()、nextUntil()、prevUntil()

clone()

$('div').clone().appendTo( $('body') )

wrap():包装方法

$('span').wrap('<b></b>')

//<b><span></span></b>
//<b><span></span></b>

$('span').wrapAll('<b></b>')

//<b><span></span><span></span></b>

wrapInner内部包装

$('span').wrapInner('<b></b>')

//<span><b></b></span><span><b></b></span>

unwrap()：删除包装、删除父级；不包括body

<span></span>
<div><span></span></div>

====>>
$('span').unwrap()
//结果：把span的父级删除
<span></span>
<span></span>

add():添加组合:使用两个不同标签或类的组合在一起可一次性设置相同的属性，如背景

//使用span 及div 的背景色都为yellow;
    var elem = $('div')
    var elem2 = elem.add('span')
    elem.css('color','red')
    elem2.css('background','yellow') //div及span

slice():截取一组元素的前几位；

$('li').slice(1,4).css('background','red')
    //截止起始到终止的元素，不包括终止元素,即截取前3个；

serialize():数据串连:序列化

<form>
    <input type="text" name="a" id="" value="1"/>
    <input type="text" name="b" id="" value="2"/>
    <input type="text" name="c" id="" value="3"/>
</form>

console.log($('form').serialize());
//string: a=1&b=2&c=3

数组形式：serializeArray()

 console.log($('form').serializeArray());

 [ { name="a",  value="1"},  { name="b",  value="2"},  { name="c",  value="3"}]

animate({},时间,运动形式,回调)

    //先走宽再走高；
    $(this).animate({width: 300}, 1000).animate({height: 300}, 2000)

stop()：默认只会阻止当前运动；

stop(true):阻止后续运动；
stop(true,true):可以立即停止到指定的目标点；
finish():立即停止到所有目标点上；

    //先走宽再走高；
    $(this).animate({width: 300}, 1000).delay(1000).animate({height: 300}, 2000)

事件委托，注意顺序区别,on要先写动作'click'，再写被点击元素，delegate则相反，顺序写反不能生效

取消分别为off(),undelegate()

$('ul').on('click','li',function(){   //on(动作，元素，函数)
    this.style.background = 'red'
})
//或
$('ul').delegate('li','click',function(){ //delegate(元素，动作，函数)
    this.style.background = 'red'
})

trigger()主动触发; 当然主要用在自定义事件上；

$('box').trigger('click');

$('div').on('show',function(){
    alert(1)
})
$('div').trigger('show')

ev.data /ev.target / ev.type

//ev.data点击时传参；ev.data == json整体 
$('#div1').on('click', {name: 'hello'}, function (ev) {
    alert(ev.data.name)
})

//ev.target当前操作事件源；
$('#div1').on('click', function (ev) {
    ev.target.style.background = 'red'   //当前操作变红；
})
//ev.type
$('#div1').on('click', function (ev) {
    alert(ev.type)  //click
})

$.下的常用方法；工具方法

$.(),$().html(),$().val()等，只能给JQ对象用

$.xxx..不带括号；不仅可给JQ用，也可给原生用，工具方法；

$.type

var a = 'hello'
console.log(typeof a); //原生： string
console.log($.type(a)); //JQ： string  比原生可判断更多类型；
console.log($.type(new Date)); //data
console.log($.type({})); //obj
console.log($.type([])); //array
console.log($.type(null)); //null

$.trim(str)，去前后空格；

$.inArray(),类似于indexOf

var arr = ['a','b','c','d']
console.log($.inArray('b', arr));  //1，b的位置第二位，如果找不到则返回-1

$.proxy():改变this指向；$.proxy(函数名,要改的this指向位置)()最后再调用，否则不会运行；

function show(){
    alert(this)
}
//  show()  //window

$.proxy(show,document)()

//传参的情况；
function show(n1,n2){
    alert(n1)
    alert(n2)
    alert(this)
}
//    show()  //window
$.proxy(show,document)(3,4)
//$.proxy(show,document,3,4)()
//$.proxy(show,document,3)(4) 
传参的位置都改；

//比如： 
$(document).click(show)  //默认是document

//更改为window
$(document).click($.proxy(show,window))

//事件的传参只能写在里面，写在外面则直接执行了（不需要点击执行，不是要的效果）

$(document).click($.proxy(show,window,3,4))

$.noConflict()：防止冲突

    var mm = $.noConflict();
    var $ = 10;  //被10占用时
    mm(function () {
        
    })

$.parseJSON()：把字符串解析成JSON类型

var str  = '{"name":"hello"}'
console.log($.parseJSON(str));

//所以：$.parseJSON(str).name即可找到'hello'

$.makeArray():把类数组转成真正的数组

//比如：
    var _div = document.getElementsByTagName('div')  //类数组
    _div.push();
//虽然是集合，但并不是真正的数组，所以不能push

  $.makeArray(_div).push('a')

$.ajax({})

$.ajax({
    type:'POST',
    url:'xxx.php',
    dataType:'json',
    success: function (data) {
        alert(data);
    },
    error:function(){
        alert(2)
    }
})

$.get(url,{},成功的回调)

$.post(url,{},成功的回调)

$.getJSON(url,{},成功的回调)，支持JSONP形式：指定?callback=?; jsonp需要一个函数名；

$.getJSON('xxx.php?callback=show',function(){
});
show()

插件的使用

$.extend()://工具方法下的形式；

$.fn.extend()// 扩展到jq对象下的形式</p>

$.extend({
    leftTrim: function (str) {
        return str.replace(/^\s+/,'')
    },
    rightTrim:function(){},
    aaa:function(){alert(1)},
    bbb:function(){}
})

//调用
$.leftTrim(str)
$.aaa() //1

$.fn.extend({
    drag:function(){
        var disX = 0;
        var disY = 0;
        var _this = this;
        this.mousedown(function(e){
            disX = e.pageX - $(this).offset().left;
            disY = e.pageY - $(this).offset().top;
            $(document).mousemove(function(e){
                _this.css('left', e.pageX - disX);
                _this.css('top', e.pageY - disY);
            })
            $(document).mouseup(function(){
                $(this).off()
            })
            return false
        })
    },
    aaa:function(){
        alert(2)
    }
})

//调用：$('#div1').drag()
//$().aaa(); //2

超简单版vquery

1、$('div')===> function $(vArg){ } //vArg表示不定类型的参数；

2、$().css()，函数调用函数？ ===》类似于创建面面对像：var arr = [] ; arr.push();<br />对像.函数(),所以，要使用$()是一个对象；

function $(vArg){
    return object;
}

使用对象必须创建构造函数，所以架子是：

function Vquery(vArg){
var this.elements = [] //存的是$()里的东西
    
}

Vquery.prototype.css = function(){};
Vquery.prototype.html = function(){};

function $(vArg){
    return new Vquery(vArg);
}
//必须传参才能使用，重点是返回对象；

未作容错

function bindEvent(obj, events, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(events, function (e) {
            //fn() -- > false
            //不写return false ===> undefined
            //undefined == false == >返回false
            if (fn() == false) {
                e.preventDefault();
                e.cancelBubble = true; //冒泡
            }
        }, false)
    }
    else {
        obj.attachEvent('on' + events, function () {  //IE下
            if (fn() == false) {
                window.event.cancelBubble = true; //IE下阻止冒泡
                return false;//IE下阻止默认事件
            }
        })
    }
}
function getByClass(_parent, sClass) {
    var arr = [];
    var elems = _parent.getElementsByTagName('*')
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].className == sClass) {
            arr.push(elems[i])
        }
    }
    return arr;
}
function getStyle(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function toArray(elems) {
    var arr = []
    for (var i = 0; i < elems.length; i++) {
        arr.push(elems[i])
    }
    return arr;
}
function Vquery(vArg) {
    this.elements = []
    switch (typeof vArg) {
        case 'function':
            bindEvent(window, 'load', vArg);
            break;
        case 'string':

            switch (vArg.charAt(0)) {
                case '#':
                    this.elements.push(document.getElementById(vArg.substring(1)));
                    break;
                case '.':
                    this.elements = getByClass(document, vArg.substring(1));
                    break;
                default :
                    this.elements = toArray(document.getElementsByTagName(vArg)) //类数组 ，所以类型改变了,to为了保持this.elements的类型；
                    break;
            }
            break;
        case 'object' ://vArg.constructor == Array //注意不加引号
            if (Object.prototype.toString.call(vArg) == '[object Array]') {

                this.elements = vArg;
            } //如果得到的object是数组，则再push变成复合数组[[]]，所以需要处理；
            else {
                this.elements.push(vArg);
            }
            break;
    }
}

Vquery.prototype.html = function (str) {
    if (str) {
        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i].innerHTML = str;
        }
    }
    else {
        return this.elements[0].innerHTML;
    }
    return this;
}
Vquery.prototype.click = function (fn) {
    for (var i = 0; i < this.elements.length; i++) {
        bindEvent(this.elements[i], 'click', fn)
    }
    //this.on('click',fn)
    return this;
}
Vquery.prototype.mouseover = function (fn) {
    for (var i = 0; i < this.elements.length; i++) {
        bindEvent(this.elements[i], 'mouseover', fn)
    }
    //this.on('mouseover',fn)
    return this;
}
Vquery.prototype.on = function (event, fn) {
    for (var i = 0; i < this.elements.length; i++) {
        bindEvent(this.elements[i], event, fn)
    }
    return this;
}
Vquery.prototype.hide = function () {
    for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style.display = 'none'
    }
    return this;
}
Vquery.prototype.show = function () {
    for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style.display = 'block'
    }
    return this;
}
Vquery.prototype.hover = function (fnIn, fnOut) {
    this.on('mouseover', fnIn);
    this.on('mouseout', fnOut)
    return this;
}
Vquery.prototype.css = function (attr, value) {
    if (arguments.length == 2) {  //设置

        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i].style[attr] = value;
        }
    }
    else if (arguments.length == 1) {  //获取
        if (typeof attr == 'object') {   //注意理解此处
            for (var j in attr) {
                for (var i = 0; i < this.elements.length; i++) {
                    this.elements[i].style[j] = attr[j];
                }
            }
        }
        else {
            return getStyle(this.elements[0], attr)
        }
    }
    return this;
}
Vquery.prototype.attr = function (attr, value) {
    if (arguments.length == 2) {  //设置
        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i].setAttribute(attr, value);
        }
    }
    else if (arguments.length == 1) {  //获取
        return this.elements[0].getAttribute(attr);

    }
}
Vquery.prototype.eq = function (num) {
    //return this.elements[num];  //this.elements获取到的都是原生的；所以
    return $(this.elements[num])   //转换对象；
}
Vquery.prototype.index = function () {
    var elems = this.elements[0].parentNode.children; //先找当前选中的父节点，再找子节点可得出同辈所有；
    for (var i = 0; i < elems.length; i++) {
        if (elems[i] == this.elements[0]) {
            return i;
        }
    }
}
Vquery.prototype.siblings = function () {
    var arr = []
    var elems = this.elements[0].parentNode.children; //先找当前选中的父节点，再找子节点可得出同辈所有；
    for (var i = 0; i < elems.length; i++) {
        if (!(elems[i] == this.elements[0])) {
            arr.push(elems[i])
        }
    }
    return $(arr)
}

Vquery.prototype.find = function (sel) {
    var arr = [];
    if (sel.charAt(0) == '.') { //.class
        //这里的this.elements存的是$()里面的东西
        for (var i = 0; i < this.elements.length; i++) { //循环每一个ul里
            arr = arr.concat(getByClass(this.elements[i], sel.substring(1)));
            //每一个ul -->  this.elements下可能会有多个li，
            //比如，第一次找个2个，第2次找到3个，所以需使用数组concat方法
            //注意此次不能使用push,因为 getByClass方法得到的即为数组；
            //2,也不能简单 =  因为比如第2次得到3个会覆盖第一次得到的2个，
            //所以，使用arr.concat
        }
    }
    else { //tag
        for (var i = 0; i < this.elements.length; i++) {
            arr = arr.concat(toArray(this.elements[i].getElementsByTagName(sel))) //类数组转
        }
    }
    return $(arr); //同样是原生的，所以需要使用 $(arr)
}

function $(vArg) {
    return new Vquery(vArg) //返回对象
}

$.trim = function (str) {
    return str.replace(/^\s+|\s+$/g,'')
}
$.proxy = function(){}
$.makeArray = function(){}
$.inArray = function(){}


$.extend = function(json){
    for(var attr in json){
        $[attr] = json[attr]
    }
}
$.fn = {}
$.fn.extend = function(json){
    for(var attr in json){
        Vquery.prototype[attr] = json[attr]
    }
}

插件扩展

工具写法：$.extend(); JQ对象写法：$.fn.extend()

      $.extend({

            aaa:function(){
                alert(1)
            },
            bbb:function() {
                alert(2)
            }

        })
        $.aaa() //1
        $.bbb() //2


//必须扩展到Vquery的原型下；
        $.fn.extend({

            aaa:function(){
                alert(4)
                return this;
            },
            bbb:function() {
                alert(5)
                return this;
            }

        })
         //4
        $().bbb().aaa() //5