整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者:極客小俊
一個專注于web技術的80后
你不用拼過聰明人，你只需要拼過那些懶人 你就一定會超越大部分人!
面向對象的英文全稱:Object Oriented Programming , 簡稱OOP
首先我們要先了解面向過程的編程思想, 就是代碼從上到下都沒有封裝的意思，某些代碼裸露在外、沒有模塊化、代碼雜亂無章的寫法. 并且還不好維護，也不便于后期二次修改
面向對象的編程思想: 通俗地說就是要具備代碼好維護、代碼重用性高、耦合度低、高內聚、模塊化、便于修改
名詞解釋:
高內聚: 指一個軟件模塊是由相關性很強的代碼組成，只負責一項任務，也就是常說的單一責任原則。
低耦合: 指讓每個模塊盡可能地獨立完成某個特定的子功能。
面向對象的主要特點:
js是一門基于對象的語言
js是一門解釋型的語言
js是一門腳本語言、弱類型語言!
分析什么是對象?
對象:具有特征和行為或者說 有屬性和方法, 具體特指的某一個事物
屬性 就是變量 表示一個對象的狀態 對象下面的變量就叫做:屬性
方法 就是函數 表示一個對象的行為過程 對象下面的函數就叫做:方法
創建對象也叫實例化對象, Object是系統的構造函數
//語法
var 變量名=new Object();如何添加對象的屬性和方法
添加屬性: 如何添加屬性？
var 變量名=new Object();
變量名.屬性名=值;添加方法: 如何添加方法?
var 變量名=new Object();
變量名.方法名=function(){
..代碼段...
}
或
function 函數名(){
}
變量名.方法名=函數名;案例:
var obj=new Object();
obj.name='張三';
obj.age=33;
obj.city='重慶';
obj.say=function(){
alert('張三說話了!');
}
console.log(obj);這種創建方式的缺點是:
1.如果使用這種方式創建了多個對象、會產生對象不能分辨出到底屬于哪一個類型!
2.每創建 一個對象都需要new Object() 一次 耗費內存空間、 不能一次性創建多個對象
小知識: 如何判斷某一個對象引用變量是不是屬于某一個類型?
語法: 對象引用變量名稱 instanceof 類名稱 返回true就是屬于這個類 返回false不屬于這種類型
this關鍵字的基本使用
在當前的對象方法中，可以使用this關鍵字代表當前對象
小知識: 訪問對象屬性和方法的另一種寫法: 對象[“屬性名”] 或 對象方法名
案例代碼如下:
var obj2=new Object();
obj2.name='李四';
obj2.age=66;
obj2.city='北京';
obj2.say=function(){
console.log('李四說話了');
console.log(this.name);
}
console.log(obj2["name"]);
obj2["say"]();
工廠方式也可以叫做封裝函數
優點: 代碼復用性提升、不同的數據當做參數進行傳遞
自定義構造函數創建對象
了解一下如何一次性創建多個對象?
工廠方法 方法1: 首先把創建對象的系統構造對象相關代碼封裝在一個函數中,不同的數據當做參數進行傳遞,然后返回創建好的對象
案例代碼如下:
function createObject(username,age){
var obj=new Object();
obj.name=username;
obj.age=age;
obj.city='重慶';
obj.say=function(){
console.log(this.name+'的年齡是:'+this.age);
}
return obj;
}
var obj1=createObject('張三',23);
var obj2=createObject('李四',66);
obj1.say();
obj2.say();工廠方法 方法2:自定義構造函數創建對象, 自己定義一個構造函數,創建對象
優點: 可以區分出對象引用屬于哪一類
案例代碼如下
//Person就是構造函數
function Person(username,age,city){
this.name=username;
this.age=age;
this.city=city;
this.say=function(){
console.log(this.name+'的年齡是:'+this.age);
}
}
var obj1=new Person('張三',33,'北京市');
var obj2=new Person('李四',66,'重慶市');
obj1.say();
obj2.say();小結: 通過上面的案例可以小結出一個概念: 就是函數如果前面有new關鍵字，那么這個函數就是構造函數，否則就是一個普通函數
==在javascript中使用new關鍵字來修飾一個 普通函數的解答
系統做4件事情
json對象是創建對象的一種字面量表示形式
var 變量名={ } //這就叫字面量方式創建對象
案例代碼
var obj={};
obj.name='張三';
obj.age=22;
obj.city='北京市';
obj.fn=function () {
console.log('我的名字叫'+this.name+' 我的年齡是:'+this.age+' 我在'+this.city+'生活和工作!');
}
obj.fn();推薦寫法:
字面量優化后的形式:其實就是json數據格式的形式 [推薦寫法]
案例代碼
var obj2={
name:'張三',
age:22,
city:'北京市',
fn:function () {
console.log(this);
console.log('我的名字叫'+this.name+' 我的年齡是:'+this.age+' 我在'+this.city+'生活和工作!');
}
};
obj2.fn();注意: var obj=new Object() 與 var obj={ } 是完全一樣的 只是一個在內存中的堆區中開空間 而另一個在棧區開辟空間
function Obj() {
}
var test=new Obj(); //在內存中的堆區中開空間
console.log(test);
var json={} //在棧區開辟空間 用完即釋放
console.log(json);極客小俊@，首發原創技術文章
如果喜歡話請 "點贊 評論 收藏" 一鍵三連
大家的支持就是我堅持下去的動力!
多時候，我們在學習前端開發的時候，都以為只要學習好前端開發的語法就行了，或者說做做幾個動效，能寫出來就行了，卻都不知道，其實前端開發的設計模式也很重要！
設計模式（design pattern）是一套反復使用、思想成熟、經過分類和無數實戰設計經驗的總結。
是為了代碼可重用、可擴展、可解耦、更容易被人理解和保證代碼可靠性。
設計模式共有23種，今天我們來講的是工廠模式，其他模式我們后面會繼續給大家講
工廠模式，正像它的名字一樣，可以像工廠一樣生產出我們想要的東西，只要我們提供原料。在我們日常編寫代碼過程中，很可能，我們不知不覺中就已經使用過工廠模式。我們看一個簡單的例子：
簡單的demo
在這個函數中，我可以通過傳入不同的參數，創建具有不同參數值得對象。可以看到，工廠模式其實很簡單。
工廠模式（Factory Pattern）主要分為簡單工廠模式和抽象工廠模式。
簡單工廠（Simple Factory Pattern）模式主要用于創建同一類的對象，比如我們創建需要一個身份，老師或者學生。可以通過下面這個函數：
簡單工廠模式
我們可以傳入不同的 type 比如"student"或“teacher”去創建不同的對象，然后再通過不同的person對象去給里面的屬性賦值。無論是"student"或者"teacher"都是person，所以說簡單工廠函數就是用來創建同一類對象的不同實例。
上面的代碼通過原型_prototype_去添加兩個函數，（關于原型的知識，不是一兩句可以講完的，如果不懂得話，大家可以到網上去搜索相關的資料進行了解）然后通過this[type]去選擇不同的方法，如果這里不明白的話我可以解釋一下，this是一個對象，指向當前函數（在JavaScript里函數是對象），然后this[屬性名/方法名] 去調用內部的屬性或方法，那么this[type] (person)就是調用對應的方法去實例化一個具體的類（student或teacher）。通過this[type] (person)去調用。
這就是簡單工廠函數。
抽象工廠模式 ：與簡單工廠函數不同的是，抽象工廠函數會先設計好接口，具體的實現在子類中進行。這樣看概念有點模糊，我們來看一個例子:
我們定義一個父類，abstractCreatePerson也就是創建一個人，然后這個人有一個自我介紹的方法方法selfIntroduction，那么不同的人就有不同的介紹內容，這個時候我們就可以用到抽象工廠模式：
抽象工廠模式
可以看到這段代碼，父類 abstractCreatePerson 中先聲明了一個方法，然后通過 Object.create() 方法去繼承這個父類，（因為這樣不會覆蓋原有的原型鏈），然后我們再在子類中去實例化方法，不同的子類就有了不同的實例方法。
這就是工廠模式，他提高了我們代碼的可重用性，降低了模塊之間的耦合度。
最后總結一下
jQuery對象是一個數組，可以通過數組下標轉為DOM對象
// jQuery和DOM對象的互轉
// 相當于window.onload
$(function(){
$("button").click(
function () {
alert("helloWorld");
var $btn=$("button");
alert($btn.length);
// 使用數組下標來轉為DOM對象
alert($btn[0].firstChild.nodeValue);
var btn=document.getElementById("btn");
// 使用$()進行包裝將DOM對象轉為jQuery對象
alert($(btn).text());
}
)
})
基本選擇器根據id，class和標簽名來查找DOM元素
$("#id")
$(".class")
$("div")
("prev ~ siblings")選擇器只能選擇"#prev"元素后面的同輩元素，而jquery中的方法siblings()與前后位置無關，只要是同輩節點就可以選取
<div id="content">
<span></span>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
</div>
$(function () {
// 派生選擇器 $("div span") 選取div的所有span(后代)元素 不考慮層次
var ele=$("div span");
alert(ele.length); // 4
// 父子選擇器 $("parent > child") 選取parent元素下的child元素
var ele1=$("div > span");
alert(ele1.length); // 1
// 直接兄弟選擇器 $("prev + next") 選取緊接在prev元素后的下第一個兄弟關系的next元素
var ele2=$("div span + p");
alert(ele2.length); // 1
// 后續全部兄弟節點選擇器 $("prev ~ siblings") 選取prev元素后的所有兄弟關系的siblings元素
var ele3=$("div span ~ p");
alert(ele3.length); // 3
})
過濾選擇器通過特定的過濾規則來篩選出所需的DOM元素，該選擇器都以":"開頭
按照不同的過濾規則，過濾選擇器可以分為基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾和表單對象屬性過濾選擇器
使用text()方法
// 讀取文本
$("#bj").text();
// 修改文本 將文本改成北京
$("bj").text("北京");
### 操作屬性節點
使用attr()方法
//獲取屬性 獲取value屬性
$("input[name='username']").attr("value");
//修改屬性 修改value屬性值為張三
$("input[name='username']").attr("value","張三");
使用jquery的工廠函數$(html) 會根據html來創建一個DOM對象，并把這個DOM對象包裝成一個jQuery對象
創建好節點之后需要將創建的節點插入文檔中
$("<li id='bj'>北京</li>").appendTo($("#city"));
$("<li id='sh'>上海</li>").insertAfter($("#bj"));
$("#bj").remove();
$("#city").empty();
可以使用attr()方法來進行屬性操作
jQuery中提供了很多方法來實現獲取和設置某些屬性。
removerAttr()可以刪除指定元素的指定屬性
$(document).ready() 網頁中所有的DOM繪制完畢后執行，可能DOM元素關聯的東西并沒有加載完，簡寫$() 與window.onload類似
對匹配的元素進行特定的事件綁定 bind()
$(".class").bind("click",function(){
alert("點擊事件綁定");
})
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
