js面對對象和jQuery的使用

閉包

函數嵌套函數，內部函數能夠引用外部函數的參數和變量，參數和變量不會被垃圾回收機制收回.

用處

• 一、將一個變量長期駐紮在內存當中，可用於循環中存索引值

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i=0;i<aLi.length;i++)
        {
            (function(i){
                aLi[i].onclick = function(){
                    alert(i);
                }
            })(i);
        }
    }
</script>
......
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

• 二、私有變量計數器，外部沒法訪問，避免全局變量的污染

<script type="text/javascript">
var count = (function(){
    var a = 0;
    function add(){
        a++;
        return a;
    }
    return add;
})()
count();
count();
var nowcount = count();
alert(nowcount);
</script>

js的內置對象:

1.document

document.referrer //獲取上一個跳轉頁面的地址(須要服務器環境)

2.location

window.location.href //獲取或者重定url地址 window.location.search //獲取地址參數部分 window.location.hash //獲取頁面錨點或者叫哈希值

3.Math

Math.random 獲取0-1的隨機數 Math.floor 向下取整 Math.ceil 向上取整

面向對象

面向過程與面向對象編程

一、面向過程：全部的工做都是現寫現用。
二、面向對象：是一種編程思想，許多功能事先已經編寫好了，在使用時，只須要關注功能的運用，而不須要這個功能的具體實現過程。

javascript對象

將相關的變量和函數組合成一個總體，這個總體叫作對象，對象中的變量叫作屬性，變量中的函數叫作方法。javascript中的對象相似字典。

建立對象的方法

1.單體:

<script type="text/javascript">
var Tom = {
    name : 'tom',
    age : 18,
    showname : function(){
        alert('個人名字叫'+this.name);    
    },
    showage : function(){
        alert('我今年'+this.age+'歲');    
    }
}
</script>

2.工廠模式:

<script type="text/javascript">

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.showname = function(){
        alert('個人名字叫'+this.name);    
    };
    o.showage = function(){
        alert('我今年'+this.age+'歲');    
    };
    o.showjob = function(){
        alert('個人工做是'+this.job);    
    };
    return o;
}
var tom = Person('tom',18,'程序員');
tom.showname();
</script>

3.構造函數:

<script type="text/javascript">
    function Person(name,age,job){            
        this.name = name;
        this.age = age;
        this.job = job;
        this.showname = function(){
            alert('個人名字叫'+this.name);    
        };
        this.showage = function(){
            alert('我今年'+this.age+'歲');    
        };
        this.showjob = function(){
            alert('個人工做是'+this.job);    
        };
    }
    var tom = new Person('tom',18,'程序員');
    var jack = new Person('jack',19,'銷售');
    alert(tom.showjob==jack.showjob);
</script>

4.原型模式:

<script type="text/javascript">
    function Person(name,age,job){        
        this.name = name;
        this.age = age;
        this.job = job;
    }
    Person.prototype.showname = function(){
        alert('個人名字叫'+this.name);    
    };
    Person.prototype.showage = function(){
        alert('我今年'+this.age+'歲');    
    };
    Person.prototype.showjob = function(){
        alert('個人工做是'+this.job);    
    };
    var tom = new Person('tom',18,'程序員');
    var jack = new Person('jack',19,'銷售');
    alert(tom.showjob==jack.showjob);
</script>

5.繼承:

<script type="text/javascript">

        function fclass(name,age){
            this.name = name;
            this.age = age;
        }
        fclass.prototype.showname = function(){
            alert(this.name);
        }
        fclass.prototype.showage = function(){
            alert(this.age);
        }
        function sclass(name,age,job)
        {
            fclass.call(this,name,age);
            this.job = job;
        }
        sclass.prototype = new fclass();
        sclass.prototype.showjob = function(){
            alert(this.job);
        }
        var tom = new sclass('tom',19,'全棧工程師');
        tom.showname();
        tom.showage();
        tom.showjob();
    </script>

jQuery介紹

jQuery是目前使用最普遍的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其餘庫。微軟公司甚至把jQuery做爲他們的官方庫。

• jquery是一個函數庫，一個js文件，頁面用script標籤引入這個js文件就可使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery加載

將獲取元素的語句寫到頁面頭部，會由於元素尚未加載而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。

<script type="text/javascript">

$(function(){
     代碼
});
</script>

jquery選擇器

jquery用法思想一

選擇某個網頁元素，而後對它進行某種操做

jquery選擇器

jquery選擇器能夠快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。

$(document) //選擇整個文檔對象
$('li') //選擇全部的li元素
$('#myId') //選擇id爲myId的網頁元素
$('.myClass') // 選擇class爲myClass的元素
$('input[name=first]') // 選擇name屬性等於first的input元素
$('#ul1 li span') //選擇id爲爲ul1元素下的全部li下的span元素

對選擇集進行修飾過濾(相似CSS僞類)

$('#ul1 li:first') //選擇id爲ul1元素下的第一個li
$('#ul1 li:odd') //選擇id爲ul1元素下的li的奇數行
$('#ul1 li:eq(2)') //選擇id爲ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id爲ul1元素下的前三個以後的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素

對選擇集進行函數過濾

$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素

選擇集轉移

$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的全部子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等於myClass的元素

jquery樣式操做

jquery用法思想二

同一個函數完成取值和賦值

操做行間樣式

// 獲取div的樣式
$("div").css("width");
$("div").css("color");


//設置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特別注意

選擇器獲取的多個元素，獲取信息獲取的是第一個，好比：$("div").css("width")，獲取的是第一個div的width。

操做樣式類名

$("#div1").addClass("divClass2") //爲id爲div1的對象追加樣式divClass2
$("#div1").removeClass("divClass")  //移除id爲div1的對象的class名爲divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式

jquery屬性操做

• 一、html() 取出或設置html內容

// 取出html內容
var $htm = $('#div1').html();

// 設置html內容
$('#div1').html('<span>添加文字</span>');

• 二、text() 取出或設置text內容

// 取出文本內容
var $htm = $('#div1').text();

// 設置文本內容
$('#div1').text('<span>添加文字</span>');

• 三、attr() 取出或設置某個屬性的值

// 取出圖片的地址
var $src = $('#img1').attr('src');

// 設置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

綁定click事件

給元素綁定click事件，能夠用以下方法：

$('#btn1').click(function(){

// 內部的this指的是原生對象

// 使用jquery對象用 $(this)
})

$(function(){
// 給按鈕綁定click事件
$('#btn').click(function(){
//重複切換sty樣式
$('.box').toggleClass('sty');
    })
})