零JS筆記 | 記憶點二

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

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

零JS筆記 | 記憶點二

最新文章

最近回复

分类

归档

其它