学习jQuery-----（1）简单复习一下jQuery，说实话jQuery我用的还真不多，我都要快忘了。。。。。毕竟光

简单复习一下jQuery，说实话jQuery我用的还真不多，我都要快忘了。。。。。毕竟光学不用早晚忘净，这几天先复习一下jQuery的常用方法，以及写几个小的demo，那就开始吧！！

引入

在jQuery官网中下载jQuery未压缩版，用script标签引入

$（）

jQuery的基本方法，里面可以传两个参数，第一个通常是你想要获取的DOM对象，第二个则是他的执行期上下文。先来说第一个参数，我们通常可以传标签名，属性名（class），ID名。例如：

<div></div>    
<div class="demo"></div>    
<div id="demo1"></div>

我们可以用jQuery获取：

$("div")        
$(".demo")        
$("#demo1")

第二个参数：

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

jQuery获取：

$("span" , "div")

获取div标签内的所有的span标签

.css（）

用法如下，给DOM添加样式

<span id="demo1">    <li class="item">item</li></span>

$(".demo1").css('background' , 'red')

如果添加的样式有很多的话，可以用对象的方式

$(".item" , "#demo1").css({       
    background: "red",       
    color: "white"   
})

.eq()

首先我们获取了页面里所有的li，我们需要对某些单个的li进行操作

<li>0</li>  
<li>1</li>    
<li>2</li>    
<li id="item">3</li>

$("li:first").css('background' , "red")//获取第一个li        
$("li:last").css('background' , "red") //获取最后一个li       
$("li:eq(1)").css('background' , "red")//自定义获取li
$("li:odd").css("background" , "red")//选择获取的li中偶数位的li
$("li:even").css("background" , "red")//奇数位的li

也可以接在$后面

$("li").eq(2).css("background" , "red")

.get()方法

$()里也可以传一个DOM节点。我们可以用get获取

var li = $("<li>6</li>").get(0)        
li.style.backgroundColor = "red"        
document.body.appendChild(li)

.filter()方法

向数组一样，我们遍历选取出的li，并给一个筛选的回调函数

$('li').filter(function (index) {            
    return index % 2 === 0;        
}).css("background" , "red")

这段代码的功能是选取偶数位的li，类似于：odd

$('li').not(function (index) {            
    return index % 2 === 0;        
}).css('background' , 'red')

和filter功能相反的方法。

.has()&.find()方法

<div>            
    <li id="5">5</li>            
    <span>6</span>        
</div>

$("div").has("li").css({background: "red", height: "100px", width: "100px"})        
$("div").find("li").css('background' , "blue")

第一行代码是找到含有li的div节点，第二行是找到被div包裹的li节点，简单来说，has找的是父节点，find找的是子节点。

.text()方法

给节点添加文本内容

$('li').text('123')        
console.log($("li").text())

.html()方法

给节点添加html节点

$('li').html("<p>123</p>")        
console.log($("li").html())

.attr()&.paop()方法

<input type="checkbox">    
<span id="item"></span>

$("#item").attr("sound" , "good");        
console.log($("#item").attr("sound"))        
$("input").prop("type", "password")

attr可以随意的添加属性，prop只能改变原生的属性，比如改变input原生的type属性值

.addClass()&.removeClass()方法

添加和移除class

$("#demo").addClass("demo1 demo2")        
$("#demo").removeClass("demo1")        
$("#demo").removeClass()//移除全部class

绑定事件

$("input").click(function () {            
    console.log(111)        
})

简单实现原生的jQuery的$()功能

(function () {        
    window.jquery = jquery;        
    window.$ = window.jquery;
        
    function jquery(selector) {            
        return new jquery.prototype.init(selector);        
    };
        
    jquery.prototype.init = function (selector , content) {            
        var dom = document.getElementsByClassName(selector);            
        for(var i = 0; i < dom.length; i++) {                
            this[i] = dom[i];            
        }            
        return this;        
    } 
        
    jquery.prototype.css = function () {            
        console.log(111)            
        return this;        
    }
                
    jquery.prototype.init.prototype = jquery.prototype    
})();    
console.log($('item'));    
$("item").css().css();

一个小demo（选项卡）

html部分

<div class="wrapper">        
    <div class="btnWrapper">            
        <button class="active">1</button>            
        <button >2</button>            
        <button>3</button>        
    </div>        
    <div class="content">            
        <div class="show">1</div>            
        <div>2</div>            
        <div>3</div>        
    </div>    
</div>

css部分

.wrapper{            
    width: 300px;            
    height: 300px;            
    border: 2px solid black;        
}         
.wrapper .btnWrapper{            
    height: 50px;            
    text-align: center;        
}        
.wrapper .btnWrapper button{            
    height: 50px;            
    width: 50px;            
    background-color: orange;         
}        
.wrapper .content{            
    position: relative;        
}        
.wrapper .content div {            
    width: 300px;            
    height: 250px;            
    top: 0;            
    left: 0;            
    display: none;            
    background: blue;            
    font-size: 30px;            
    position: absolute;        
}        
.wrapper .btnWrapper .active{             
    background: green;        
}        
.wrapper .content .show{            
    display: block;       
}

js部分

$("button").click(function () {            
    $(".active").removeClass("active")            
    $(this).addClass("active")            
    var num = $(this).index()            
    $("div" , ".content").removeClass("show")            
    $(".content").find('div').eq(num).addClass("show")        
})