整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、什么是面向?qū)ο?
面向?qū)ο髢H僅是一個(gè)概念或者編程思想
通過一種叫做原型的方式來實(shí)現(xiàn)面向?qū)ο缶幊?/p>
1、 創(chuàng)建對(duì)象(自定義對(duì)象,內(nèi)置對(duì)象)
基于Object對(duì)象的方式創(chuàng)建對(duì)象-自定義對(duì)象
示例:
var 對(duì)象名稱=new Object( );
var flower=new Object();
flower.name="長春花";
flower.genera="夾竹桃科 長春花屬";
flower.area="非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地";
flower.uses="觀賞或用藥等";
flower.showName=function(){ alert(this.name); }
flower.showName();
常見的內(nèi)置對(duì)象
String（字符串）對(duì)象
Date（日期）對(duì)象
Array（數(shù)組）對(duì)象
Boolean（邏輯）對(duì)象
Math（算數(shù)）對(duì)象
RegExp對(duì)象
二、
如何解決使用同一個(gè)接口不需要?jiǎng)?chuàng)建很多對(duì)象，減少產(chǎn)生大量的重復(fù)代碼？
1、構(gòu)造函數(shù):
function Flower(name,genera,area,uses){
this.name=name;
…….
this.showName=function(){
alert(this.name);
}
}
var flower1=new Flower("長春花","夾竹桃科 長春花屬","非洲、亞熱帶、熱帶以及中國大陸的華東、西南、中南等地","觀賞或用藥等")
flower1.showName();
2、原型對(duì)象:
function Flower(){
}
Flower.prototype.name="曼陀羅花";
Flower.prototype.genera="茄科 曼陀羅屬";
Flower.prototype.area="印度、中國北部";
Flower.prototype.uses="觀賞或藥用";
Flower.prototype.showName=function() {
alert(this.name);
}
var flower1=new Flower();
flower1.showName();
var flower2=new Flower();
flower2.showName();
alert(flower1.showName==flower2.showName);
三、繼承
1.原型鏈:一個(gè)原型對(duì)象是另一個(gè)原型對(duì)象的實(shí)例
相關(guān)的原型對(duì)象層層遞進(jìn)，就構(gòu)成了實(shí)例與原型的鏈條，就是原型鏈
示例:
function Humans(){
this.foot=2;
}
Humans.prototype.getFoot=function(){
return this.foot;
}
function Man(){
this.head=1;
}
Man.prototype=new Humans(); //繼承了Humans
Man.prototype.getHead=function(){
return this.head;
}
var man1=new Man();
alert(man1.getFoot()); //2
alert(man1 instanceof Object); //true
alert(man1 instanceof Humans); //true
alert(man1 instanceof Man); //true
2.對(duì)象繼承:
function Humans(){
this.clothing=["trousers","dress","jacket"];
}
function Man(){ }
//繼承了Humans
Man.prototype=new Humans();
var man1=new Man();
man1.clothing.push("coat");
alert(man1.clothing);
var man2=new Man();
alert(man2.clothing);
3.組合繼承:
組合繼承：有時(shí)也叫做偽經(jīng)典繼承
將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一塊，發(fā)揮二者之長的一種繼承模式
使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承
四、這一章的示例代碼:
<html>
<head>
<title>面向?qū)ο髽?biāo)題欄替換和修改</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
main {
width: 960px;
height: 500px;
border-radius: 10px;
margin: 50px auto;
}
main h4 {
height: 100px;
line-height: 100px;
text-align: center;
}
.tabsbox {
width: 900px;
margin: 0 auto;
height: 400px;
border: 1px solid lightsalmon;
position: relative;
}
nav ul {
overflow: hidden;
}
nav ul li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid #ccc;
position: relative;
}
nav ul li.liactive {
border-bottom: 2px solid #fff;
z-index: 9;
}
#tab input {
width: 80%;
height: 60%;
}
nav ul li span:last-child {
position: absolute;
user-select: none;
font-size: 12px;
top: -18px;
right: 0;
display: inline-block;
height: 20px;
}
.tabadd {
position: absolute;
/* width: 100px; */
top: 0;
right: 0;
}
.tabadd span {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid #ccc;
float: right;
margin: 10px;
user-select: none;
}
.tabscon {
width: 100%;
height: 300px;
position: absolute;
padding: 30px;
top: 50px;
left: 0px;
box-sizing: border-box;
border-top: 1px solid #ccc;
}
.tabscon section,
.tabscon section.conactive {
display: none;
width: 100%;
height: 100%;
}
.tabscon section.conactive {
display: block;
}
</style>
<body>
<main>
<h4>
JS面向?qū)ο?動(dòng)態(tài)添加標(biāo)簽頁
</h4>
<div class="tabsbox" id="tab">
<!-- tab標(biāo)簽 -->
<nav class="fisrstnav">
<ul>
<li class="liactive"><span>測(cè)試1</span><span class="iconfont icon-guanbi"></span> </li>
<li><span>測(cè)試2</span><span class="iconfont icon-guanbi"></span> </li>
<li class="liactive"><span>測(cè)試3</span><span class="iconfont icon-guanbi"></span> </li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<!-- tab內(nèi)容 -->
<div class="tabscon">
<section class="conactive">測(cè)試1</section>
<section>測(cè)試2</section>
<section>測(cè)試3</section>
</div>
</div>
</main>
</body>
<script>
var that;
class Tab {
constructor(id) {
// 獲取元素
that=this;
this.main=document.querySelector(id);
this.add=this.main.querySelector('.tabadd');
// li的父元素
this.ul=this.main.querySelector('.fisrstnav ul:first-child');
// section 父元素
this.fsection=this.main.querySelector('.tabscon');
this.init();
}
init() {
this.updateNode();
// init 初始化操作讓相關(guān)的元素綁定事件
this.add.onclick=this.addTab;
for (var i=0; i < this.lis.length; i++) {
this.lis[i].index=i;
this.lis[i].onclick=this.toggleTab;
this.remove[i].onclick=this.removeTab;
this.spans[i].ondblclick=this.editTab;
this.sections[i].ondblclick=this.editTab;
}
}
// 因?yàn)槲覀儎?dòng)態(tài)添加元素 需要從新獲取對(duì)應(yīng)的元素
updateNode() {
this.lis=this.main.querySelectorAll('li');
this.sections=this.main.querySelectorAll('section');
this.remove=this.main.querySelectorAll('.icon-guanbi');
this.spans=this.main.querySelectorAll('.fisrstnav li span:first-child');
}
// 1. 切換功能
toggleTab() {
// console.log(this.index);
that.clearClass();
this.className='liactive';
that.sections[this.index].className='conactive';
}
// 清除所有l(wèi)i 和section 的類
clearClass() {
for (var i=0; i < this.lis.length; i++) {
this.lis[i].className='';
this.sections[i].className='';
}
}
// 2. 添加功能
addTab() {
that.clearClass();
// (1) 創(chuàng)建li元素和section元素
var random=Math.random();
var li='<li class="liactive"><span>新選項(xiàng)卡</span><span class="iconfont icon-guanbi"></span></li>';
var section='<section class="conactive">測(cè)試 ' + random + '</section>';
// (2) 把這兩個(gè)元素追加到對(duì)應(yīng)的父元素里面
that.ul.insertAdjacentHTML('beforeend', li);
that.fsection.insertAdjacentHTML('beforeend', section);
that.init();
}
// 3. 刪除功能
removeTab(e) {
e.stopPropagation(); // 阻止冒泡 防止觸發(fā)li 的切換點(diǎn)擊事件
var index=this.parentNode.index;
console.log(index);
// 根據(jù)索引號(hào)刪除對(duì)應(yīng)的li 和section remove()方法可以直接刪除指定的元素
that.lis[index].remove();
that.sections[index].remove();
that.init();
// 當(dāng)我們刪除的不是選中狀態(tài)的li 的時(shí)候,原來的選中狀態(tài)li保持不變
if (document.querySelector('.liactive')) return;
// 當(dāng)我們刪除了選中狀態(tài)的這個(gè)li 的時(shí)候, 讓它的前一個(gè)li 處于選定狀態(tài)
index--;
// 手動(dòng)調(diào)用我們的點(diǎn)擊事件 不需要鼠標(biāo)觸發(fā)
that.lis[index] && that.lis[index].click();
}
// 4. 修改功能
editTab() {
var str=this.innerHTML;
// 雙擊禁止選定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
// alert(11);
this.innerHTML='<input type="text" />';
var input=this.children[0];
input.value=str;
input.select(); // 文本框里面的文字處于選定狀態(tài)
// 當(dāng)我們離開文本框就把文本框里面的值給span
input.onblur=function () {
this.parentNode.innerHTML=this.value;
};
// 按下回車也可以把文本框里面的值給span
input.onkeyup=function (e) {
if (e.keyCode===13) {
// 手動(dòng)調(diào)用表單失去焦點(diǎn)事件 不需要鼠標(biāo)離開操作
this.blur();
}
}
}
}
new Tab('#tab');
</script>
</html>
近因?yàn)橐恍┚W(wǎng)頁的需要，需要比較深入的使用了CSS 的「?jìng)卧亍? Pseudo Element )，發(fā)現(xiàn)原來不只是用用before或after 而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法歸納整理下，希望對(duì)你的日常工作有所幫助。
「?jìng)卧亍怪苑Q作「?jìng)巍?，除了英文從「Pseudo」翻譯過來之外，就是因?yàn)樗⒉皇钦嬲W(wǎng)頁里的元素，但行為與表現(xiàn)又和真正網(wǎng)頁元素一樣，也可以對(duì)其使用CSS 操控。
跟偽元素類似的還有「?jìng)晤悺? Pseudo classes )，在W3C的定義里總共有五個(gè)偽元素(其他仍在測(cè)試階段)，分別是::before、::after、::first-line、::first-letter和::selection，為了和偽類區(qū)分，偽元素使用兩個(gè)冒號(hào)「::」開頭，而偽類使用一個(gè)冒號(hào)「:」開頭(像是:hover、:target...等)。
雖然現(xiàn)在的瀏覽器就算寫一個(gè)冒號(hào)也可以正常運(yùn)作，不過為了方便區(qū)分，用兩個(gè)冒號(hào)還是比較好的，而且不論瀏覽器是什么，::selection必須是兩個(gè)冒號(hào)才能正常運(yùn)作。
參考：MDN Pseudo-elements、偽類child和of-type
::before、::after大概是最常使用的偽元素，兩者都是以display:inline-block的屬性存在，::before是在原本的元素「之前」加入內(nèi)容，::after則是在原本的元素「之后」加入內(nèi)容，同時(shí)偽元素也會(huì)「繼承」原本元素的屬性，如果原本文字是黑色，偽元素的文字也會(huì)是黑色。
舉例來說，下面這段程式碼，有一個(gè)div 內(nèi)容是「大家好，我是div」，使用::before、::after 之后，會(huì)在原本div 的前后各添加一段文字，并且讓這兩段文字都呈現(xiàn)紅色。
div::before{
content:"我是 before";
color:red;
}
div::after{
content:"我是 after";
color:red;
}
上述的內(nèi)容乍看之下很容易理解，比較需要注意的是一定要具備content的屬性，就算是只有content:"";都可以，因?yàn)闆]有content的偽元素是不會(huì)出現(xiàn)在畫面上的，然而content是個(gè)很特別的屬性，它可以使用attr直接獲取內(nèi)容元素的屬性值( attribute )，舉例來說，在HTML里有一個(gè)超連結(jié)，點(diǎn)擊后會(huì)彈出新視窗并連結(jié)至Google：
<a target="_blank">google</a>
使用下列的程式碼用法，將會(huì)把超連結(jié)的href 內(nèi)容與target 內(nèi)容，透過偽元素一前一后的顯示出來。
a::before{
content: attr(href);
color:red;
}
a::after{
content: attr(target);
color:green;
}
此外content內(nèi)容是可以「相加」的，不過用法不像JavaScript使用+號(hào)來相連，而是直接用一個(gè)空白鍵就可以不斷的累加下去，以下面的程式碼來說，可以在剛剛擷取的超連結(jié)文字后方和target屬性前方，加入標(biāo)點(diǎn)符號(hào)。
a::before{
content: "( " attr(href) " ) < ";
color:red;
}
a::after{
content: " > ( " attr(target) " ) ";
color:green;
}
content 甚至可以使用url 放入圖片的功能，下列的程式碼會(huì)呈現(xiàn)出三張圖片。
div::before{
content:url(圖片網(wǎng)址) url(圖片網(wǎng)址) url(圖片網(wǎng)址);
}
通過調(diào)整border的屬性，我們可以實(shí)現(xiàn)上下左右的三角形，再結(jié)合偽元素before，after，content可以繪制多種多邊形，筆者在這篇文章有過介紹，感興趣的可以看看 ：只用1個(gè)div，你能用CSS繪制：正3、4、5、6、7、8邊形嗎？
在CSS里有個(gè)不常用的屬性就是quotes，這是做為定義「括號(hào)格式」的屬性，也就是如果在一段文字被包住，這段文字的前后就會(huì)出現(xiàn)自定義的標(biāo)簽替換（可以是括號(hào)、特殊符合、文字等），而且quotes支持多層嵌套，也就是你可以一層層的寫下去，以下面這段HTML文字舉例：
最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>
quotes 的屬性如果只寫一層，就會(huì)看到只出現(xiàn)一種括號(hào)，前后括號(hào)使用空白分隔，兩組為一個(gè)單位，前后可以不同符號(hào)。
q{
quotes: ' < ' ' > ';
}
如果寫了三層，就會(huì)看到出現(xiàn)三種括號(hào)，也會(huì)把文字當(dāng)作括號(hào)使用。
q{
quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
（請(qǐng)注意開合標(biāo)簽的就近分配原則）
同樣的道理，我們可以應(yīng)用在content里面，而且通過偽元素::before和::after處于前后的預(yù)設(shè)位置，甚至不用就實(shí)現(xiàn)前后括號(hào)的效果，以下面這段HTML文字舉例，把剛剛的q全部換成span：
最外層<span>第一層<span>第二層</span><span>第二層<span>第三層</span></span></span>
CSS的部分比較特別，在偽元素content里使用了open-quote (啟始括號(hào))和close-quote (結(jié)束括號(hào))這兩個(gè)有趣的值，換句話說open-quote對(duì)應(yīng)到，close-quote對(duì)應(yīng)到，此外也由于括號(hào)是在偽元素內(nèi)，就可以指定不同的顏色或樣式了。
span{
quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
content:open-quote;
color:red;
}
span::after{
content:close-quote;
color:#aaa;
}
文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html
原文作者：oxxostudio
由于網(wǎng)頁為繁體內(nèi)容，術(shù)語描述和標(biāo)點(diǎn)話術(shù)的差異的問題，筆者在保證不改變?cè)獾幕A(chǔ)上做了調(diào)整，并且內(nèi)容頁進(jìn)行了驗(yàn)證確認(rèn)無誤，歡迎大家指正。
雖然說偽元素很好用，但偽元素的內(nèi)容實(shí)際上不存在網(wǎng)頁里( 如果打開瀏覽器的開發(fā)者工具，是看不到內(nèi)容的)，所以如果在里頭塞了太多的重要的內(nèi)容，反而會(huì)影響到SEO 的成效，因此對(duì)于使用偽元素的定位，還是當(dāng)作「輔助」性質(zhì)會(huì)比較恰當(dāng)。
端開發(fā)是創(chuàng)建Web頁面呈現(xiàn)給用戶的過程。通過HTML，CSS等各種技術(shù)、前端框架解決方案，來實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。而在我們網(wǎng)站項(xiàng)目進(jìn)行前端開發(fā)最少不了的就是導(dǎo)航條及面包屑式導(dǎo)航，并且都是使用li標(biāo)簽實(shí)現(xiàn)。有的伙伴會(huì)問li與li之間如何分隔呢？這時(shí)我們可以用CSS偽元素:before來實(shí)現(xiàn)。
實(shí)現(xiàn)方式
css樣式寫法 li+li:before{content: "|";}即可，則要加空隙寫上padding: 0 20px;。
CSS樣式
.header ul{float: right;line-height: 60px;padding: 0px 30px;}
.header ul li{float: left; font: 16px; list-style: none;}
.header ul li+li:before { padding: 0 20px; color: #ddd;content: "|";}
HTML
<div class="header"> <div class="menu"> <ul> <li>網(wǎng)站前臺(tái)</li> <li>站內(nèi)信息</li> <li>管理員：Mr.Yang</li> <li>設(shè)置</li> </ul> </div> </div>
瀏覽效果
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
