整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、什么是面向对象?
面向对象仅仅是一个概念或者编程思想
通过一种叫做原型的方式来实现面向对象编程
1、 创建对象(自定义对象,内置对象)
基于Object对象的方式创建对象-自定义对象
示例:
var 对象名称=new Object( );
var flower=new Object();
flower.name="长春花";
flower.genera="夹竹桃科 长春花属";
flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
flower.uses="观赏或用药等";
flower.showName=function(){ alert(this.name); }
flower.showName();
常见的内置对象
String（字符串）对象
Date（日期）对象
Array（数组）对象
Boolean（逻辑）对象
Math（算数）对象
RegExp对象
二、
如何解决使用同一个接口不需要创建很多对象，减少产生大量的重复代码？
1、构造函数:
function Flower(name,genera,area,uses){
this.name=name;
…….
this.showName=function(){
alert(this.name);
}
}
var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等")
flower1.showName();
2、原型对象:
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.原型链:一个原型对象是另一个原型对象的实例
相关的原型对象层层递进，就构成了实例与原型的链条，就是原型链
示例:
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.对象继承:
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.组合继承:
组合继承：有时也叫做伪经典继承
将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式
使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
四、这一章的示例代码:
<html>
<head>
<title>面向对象标题栏替换和修改</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面向对象 动态添加标签页
</h4>
<div class="tabsbox" id="tab">
<!-- tab标签 -->
<nav class="fisrstnav">
<ul>
<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span> </li>
<li><span>测试2</span><span class="iconfont icon-guanbi"></span> </li>
<li class="liactive"><span>测试3</span><span class="iconfont icon-guanbi"></span> </li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<!-- tab内容 -->
<div class="tabscon">
<section class="conactive">测试1</section>
<section>测试2</section>
<section>测试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 初始化操作让相关的元素绑定事件
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;
}
}
// 因为我们动态添加元素 需要从新获取对应的元素
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';
}
// 清除所有li 和section 的类
clearClass() {
for (var i=0; i < this.lis.length; i++) {
this.lis[i].className='';
this.sections[i].className='';
}
}
// 2. 添加功能
addTab() {
that.clearClass();
// (1) 创建li元素和section元素
var random=Math.random();
var li='<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
var section='<section class="conactive">测试 ' + random + '</section>';
// (2) 把这两个元素追加到对应的父元素里面
that.ul.insertAdjacentHTML('beforeend', li);
that.fsection.insertAdjacentHTML('beforeend', section);
that.init();
}
// 3. 删除功能
removeTab(e) {
e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
var index=this.parentNode.index;
console.log(index);
// 根据索引号删除对应的li 和section remove()方法可以直接删除指定的元素
that.lis[index].remove();
that.sections[index].remove();
that.init();
// 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
if (document.querySelector('.liactive')) return;
// 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态
index--;
// 手动调用我们的点击事件 不需要鼠标触发
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(); // 文本框里面的文字处于选定状态
// 当我们离开文本框就把文本框里面的值给span
input.onblur=function () {
this.parentNode.innerHTML=this.value;
};
// 按下回车也可以把文本框里面的值给span
input.onkeyup=function (e) {
if (e.keyCode===13) {
// 手动调用表单失去焦点事件 不需要鼠标离开操作
this.blur();
}
}
}
}
new Tab('#tab');
</script>
</html>
近因为一些网页的需要，需要比较深入的使用了CSS 的「伪元素」( Pseudo Element )，发现原来不只是用用before或after 而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法归纳整理下，希望对你的日常工作有所帮助。
「伪元素」之所以称作「伪」，除了英文从「Pseudo」翻译过来之外，就是因为它并不是真正网页里的元素，但行为与表现又和真正网页元素一样，也可以对其使用CSS 操控。
跟伪元素类似的还有「伪类」( Pseudo classes )，在W3C的定义里总共有五个伪元素(其他仍在测试阶段)，分别是::before、::after、::first-line、::first-letter和::selection，为了和伪类区分，伪元素使用两个冒号「::」开头，而伪类使用一个冒号「:」开头(像是:hover、:target...等)。
虽然现在的浏览器就算写一个冒号也可以正常运作，不过为了方便区分，用两个冒号还是比较好的，而且不论浏览器是什么，::selection必须是两个冒号才能正常运作。
参考：MDN Pseudo-elements、伪类child和of-type
::before、::after大概是最常使用的伪元素，两者都是以display:inline-block的属性存在，::before是在原本的元素「之前」加入内容，::after则是在原本的元素「之后」加入内容，同时伪元素也会「继承」原本元素的属性，如果原本文字是黑色，伪元素的文字也会是黑色。
举例来说，下面这段程式码，有一个div 内容是「大家好，我是div」，使用::before、::after 之后，会在原本div 的前后各添加一段文字，并且让这两段文字都呈现红色。
div::before{
content:"我是 before";
color:red;
}
div::after{
content:"我是 after";
color:red;
}
上述的内容乍看之下很容易理解，比较需要注意的是一定要具备content的属性，就算是只有content:"";都可以，因为没有content的伪元素是不会出现在画面上的，然而content是个很特别的属性，它可以使用attr直接获取内容元素的属性值( attribute )，举例来说，在HTML里有一个超连结，点击后会弹出新视窗并连结至Google：
<a href="https://www.google.com" target="_blank">google</a>
使用下列的程式码用法，将会把超连结的href 内容与target 内容，透过伪元素一前一后的显示出来。
a::before{
content: attr(href);
color:red;
}
a::after{
content: attr(target);
color:green;
}
此外content内容是可以「相加」的，不过用法不像JavaScript使用+号来相连，而是直接用一个空白键就可以不断的累加下去，以下面的程式码来说，可以在刚刚撷取的超连结文字后方和target属性前方，加入标点符号。
a::before{
content: "( " attr(href) " ) < ";
color:red;
}
a::after{
content: " > ( " attr(target) " ) ";
color:green;
}
content 甚至可以使用url 放入图片的功能，下列的程式码会呈现出三张图片。
div::before{
content:url(图片网址) url(图片网址) url(图片网址);
}
通过调整border的属性，我们可以实现上下左右的三角形，再结合伪元素before，after，content可以绘制多种多边形，笔者在这篇文章有过介绍，感兴趣的可以看看 ：只用1个div，你能用CSS绘制：正3、4、5、6、7、8边形吗？
在CSS里有个不常用的属性就是quotes，这是做为定义「括号格式」的属性，也就是如果在一段文字被包住，这段文字的前后就会出现自定义的标签替换（可以是括号、特殊符合、文字等），而且quotes支持多层嵌套，也就是你可以一层层的写下去，以下面这段HTML文字举例：
最外层<q>第一层<q>第二层</q><q>第二层<q>第三层</q></q></q>
quotes 的属性如果只写一层，就会看到只出现一种括号，前后括号使用空白分隔，两组为一个单位，前后可以不同符号。
q{
quotes: ' < ' ' > ';
}
如果写了三层，就会看到出现三种括号，也会把文字当作括号使用。
q{
quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
（请注意开合标签的就近分配原则）
同样的道理，我们可以应用在content里面，而且通过伪元素::before和::after处于前后的预设位置，甚至不用就实现前后括号的效果，以下面这段HTML文字举例，把刚刚的q全部换成span：
最外层<span>第一层<span>第二层</span><span>第二层<span>第三层</span></span></span>
CSS的部分比较特别，在伪元素content里使用了open-quote (启始括号)和close-quote (结束括号)这两个有趣的值，换句话说open-quote对应到，close-quote对应到，此外也由于括号是在伪元素内，就可以指定不同的颜色或样式了。
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
由于网页为繁体内容，术语描述和标点话术的差异的问题，笔者在保证不改变原意的基础上做了调整，并且内容页进行了验证确认无误，欢迎大家指正。
虽然说伪元素很好用，但伪元素的内容实际上不存在网页里( 如果打开浏览器的开发者工具，是看不到内容的)，所以如果在里头塞了太多的重要的内容，反而会影响到SEO 的成效，因此对于使用伪元素的定位，还是当作「辅助」性质会比较恰当。
端开发是创建Web页面呈现给用户的过程。通过HTML，CSS等各种技术、前端框架解决方案，来实现互联网产品的用户界面交互。而在我们网站项目进行前端开发最少不了的就是导航条及面包屑式导航，并且都是使用li标签实现。有的伙伴会问li与li之间如何分隔呢？这时我们可以用CSS伪元素:before来实现。
实现方式
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>网站前台</li> <li>站内信息</li> <li>管理员：Mr.Yang</li> <li>设置</li> </ul> </div> </div>
浏览效果
*请认真填写需求信息，我们会在24小时内与您取得联系。
