前端工具使用记录(css/js/htm)

一、css功能(Cascading Style Sheets)
1.内部样式表直接在标签内部定义,使用style属性,写法如下:

<style></style>

2.使用外部样式表时,CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件,你需要在网页的部分插入以下内容:

<link rel="stylesheet" type="text/css"  href="文件位置/你的CSS文件名.css" />

3.内联样式是直接在html标签上定义该标签的css样式,如:

<div style="width:200px;height:30px;"></div>

顺序:
浏览器默认样式 < 浏览器用户自定义样式 < 外部样式表 < 内部样式表 < 内联样式表
样式表内部选择器生效顺序:
标签选择器 <类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

生效规则:

  1. 样式表的元素选择器选择越精确,则其中的样式优先级越高。
    id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
  2. 对于相同类型选择器指定的样式,在样式表文件中,越靠后的优先级越高。
  3. 一个元素同时应用多个class,后定义的优先(即近者优先)
  4. 如果要让某个样式的优先级变高,可以使用!important来指定。

权重分为四个等级

第一等:内联样式,权重1000,即标签内的style属性设置的样式

第二等:ID选择器,权重100,例如#id{...}

第三等:类选择器,伪类选择器,属性选择器,权重10,例如.class{...}、:hover{...}、[arrtibute=value]

第四等:标签选择器,伪元素选择器,权重1,例如div{...}、::after{...}

根据样式根据以上规则,按照选择器累加计算权重,例如
#my-id .my-class div p{…}
对于p标签的来说,这个样式的权重就是100+10+1+1=112,如果p还有别的样式,只要小于(严格小于)112,就使用这个样式,别的样式无效。

display 属性 none(此元素不会被显示)、block(此元素将显示为块级元素,此元素前后会带有换行符)、inline(默认。此元素会被显示为内联元素,元素前后没有换行符)、inline-block(行内块元素)

二、html
全写: HyperText Mark-up Language 译名: 超文本标识语言.
通过标签来控制网页的文档、字符和段落等的格式,以及对脚本语言等的调用;纯文本文件;文件扩展名: .html;html文件必须在Web浏览器上运行。

一份 HTML 文件的基本架构 :

<!doctype html>
<HTML>  
<HEAD>  
<title>HTML超文本标记语言在线教程</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <meta name="author" content="合肥世杰">  
<meta name="keywords" content="html,css,asp,jsp,php">
 <meta name="description" content="世杰教育网站!"> 
 <meta http-equiv="refresh" content="10">  
 <meta http-equiv="refresh" content="2;url=http://www.163.com"> 
  <meta http-equiv="Expires" content="01 Jan 2008 00:00:00"> 
  <base href="http://www.sje.com.cn" target="_blank"> 
  <link href="../css.css" rel="stylesheet" type="text/css">  
  <link rel="fontdef" src="Amelia.pfr"> 
  </HEAD>  
  <BODY> 网页的内容,很多标记都作用于此  
  <script src="/jquery.js"></script>
  </BODY> 
   </HTML>

三、bootstrap
文本的颜色:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light
背景颜色:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

四、javascript
以on为前缀的属性绑定一个回调,例如onclick
window.οnlοad=function(){//当文档加载完成后,执行}

use strict //如果浏览器支持,开启ECMAScript 5的严格模式
JavaScript是用unicode字符集编写的。区分大小写。
JavaScript标识符由字母、下划线或美元符号($)开始,后续字符由字母、数字、下划线或美元符号。
JavaScript数据类型分为原始类型(primitive type)和对象类型(Object type)。JavaScript原始类型分为数字、字符串、布尔类型。JavaScript有两个特殊的原始值:null(空)和undefined(未定义)。
不在函数内声明的变量称为全局变量,在JavaScript程序中任何地方都可见。
在函数内声明的变量,只在函数内可见。

运算符包括加法(+)、减法(-)、乘法(*)、除法(/)和求余(%)。
返回undefined说明这个属性或元素不存在,如果函数没有返回值,则返回undefined。
在函数体内,局部变量的优先级高于全局变量。

JavaScript为属性访问有两种:
expression.identifier
expression[expression]

===称为严格相等运算符,检查两个操作数是否严格相等;==检查两个操作数是否相等,允许进行数据转换。

delete删除对象属性或数组元素,例如:
delete o.x
delete a[2]

每个对象拥有三个相关的对象特性:
1.对象的原型 对象的属性继承自它的原型对象
2.对象的类 标识对象类型的字符串
3.对象的扩展标记

创建对象方法:
1.对象直接量 var empty = {}
2.关键字new var empty = new Object()
3.Object.create()

查询一个不存在的属性,并不会报错,而是返回undefined
getter和setter属性
var oo = {
name : ‘贤心’,
get sex(){
return ‘man’;
}
};
oo.sex = ‘woman’;
console.log(oo.sex); //结果依然是man

数据属性的4个特性是:值、可写性、枚举、可配置性。
对象的三个属性:原型(prototype)、类(class)和可扩展性(extensible attribute)。
要想创建属性或设置属性,需要调用Object.defineProperty()
Object.defineProperty(obj, prop, descriptor) // 对象、属性、描述符
Object.defineProperty(a, “length”, {writeable:false})

JSON.stringify()序列化
JSON.parse()反序列化

数组元素可以是任意类型,并且同一个数组中的元素可以是不同的类型。
var a = [];
var b = new Array();

push()在数组尾部添加一个元素
pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。
遍历可以用for()或for( in )方式
arrayObject.join(separator)该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的.
arrayObject.reverse()方法用于颠倒数组中元素的顺序
arrayObject.sort(sortby)方法用于对数组的元素进行排序。如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。
function sortNumber(a, b) {
return a - b;
}
var a = [11, 2, -3, 4, 5];
a.sort(sortNumber);
arrayObject.concat(arrayX,arrayX,…,arrayX)方法用于连接两个或多个数组
arrayObject.slice(start,end)方法可从已有的数组中返回选定的元素。
arrayObject.splice(index,howmany,item1,…,itemX) :index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目。

arrayObject.shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject
arrayObject.unshift(newelement1,newelement2,…,newelementX)方法可向数组的开头添加一个或更多元素,并返回新的长度。
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测;如果所有元素都满足条件,则返回 true。every() 不会对空数组进行检测;不会改变原始数组。
array.every(function(currentValue,index,arr), thisValue)
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。some() 不会对空数组进行检测;不会改变原始数组。array.some(function(currentValue,index,arr),thisValue)
stringObject.indexOf(searchvalue,fromindex)方法可返回某个指定的字符串值在字符串中首次出现的位置。
Array.isArray(obj)方法用于判断一个对象是否为数组。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

匿名函数:没有实际名字的函数
(function (){
//由于没有执行该匿名函数,所以不会执行匿名函数体内的语句。
console.log(“张培跃”);
})
如果需要执行匿名函数,在匿名函数后面加上一个括号即可立即执行!
(function (str){
console.log(“str=”+str);
})(“good luck!”)

function前面的圆括号是必须的,JavaScript解析器会将其解析为函数定义表达式,函数后面跟着(),这样定义的函数会立即调用。
闭包就是跨作用域访问变量 —— 内部作用域可以保持对外部作用域中变量的引用从而使得(更)外部作用域可以访问内部作用域中的变量。
闭包引用的外层作用域内的变量依然存在,并且将一直存在,直到执行闭包的的作用域被销毁,这里的局部变量才会被销毁。

为什么需要闭包?
局部变量无法共享和长久的保存,而全局变量可能造成变量污染,所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

特点:占用更多内存;不容易被释放

如何使用?
1.定义外层函数,封装被保护的局部变量
2.定义内层函数,执行对外部函数变量的操作
3.外层函数返回内层函数的对象,并且外层函数被调用,结果保存在一个全局的变量中

function fn(){
var num = 3;
return function(){
var n = 0;
console.log(++n);
console.log(++num);
}
}
var fn1 = fn();
fn1();
fn1();
输出: 1 4 1 5
匿名函数作为fn的返回值被赋值给了fn1,这时候相当于fn1=function(){var n = 0 … },并且匿名函数内部引用着fn里的变量num,所以变量num无法被销毁,而变量n是每次被调用时新创建的,所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁,于是乎最后就剩下孤零零的num,于是这里就产生了内存消耗的问题。

call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。
function fruit(){}
fruit.prototype = {
color: ‘red’,
say: function(){
console.log(“My color is:” + this.color);
}
}
var apple = new fruit();
apple.say();
var banana = {
color: ‘yellow’,
};
apple.say.call(banana);
apple.say.apply(banana);
输出:My color is:red
My color is:yellow
My color is:yellow
可以看出 call 和 apply 是为了动态改变 this 而出现的,当一个 object 没有某个方法(本栗子中banana没有say方法),但是其他的有(本栗子中apple有say方法),我们可以借助call或apply用其它对象的方法来操作。
call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

var f = function(){};
var o = new f();
console.log(’–’ + (o.constructor == f));
输出:true
在这里插入图片描述
正则表达
i 执行不区分大小写匹配
g 执行全局匹配,即找出所有的匹配
m 多行匹配,^匹配一行的开头和字符串的开头, $匹配行的结束和字符串的结束。

history是你浏览过的网页的url(简单的说就是网址)的集合,也就是你的浏览器里的那个历史记录。它在js里是一个内置对象,就跟document一样,它有自己的方法,go就是其中一个。javascript:history.go(-1)就是返回之前的页面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章