HTML、JS、CSS常用知识

JS引入

1. 外部引入


<script type="text/javascript" src="路径/文件名.js"></script>

2. 内部引入


xxxxxxxxxx
<script type="text/javascript">js代码</script>

3. 行内引入


xxxxxxxxxx
<input type="button" value="行内引入方式" onclick="javascript:alert('我是行内引入方式');">

CSS引入

1. 行内样式

使用style属性引入CSS样式。实际在写页面时不提倡使用，在测试的时候可以使用。


xxxxxxxxxx
<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

2. 内部样式表

在style标签中书写CSS代码。style标签写在head标签中。


xxxxxxxxxx
<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

3. 外部样式表

CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

（1）链接式


xxxxxxxxxx
<link type="text/css" rel="styleSheet" href="CSS文件路径" />

（2）导入式


xxxxxxxxxx
 ```
 <style type="text/css">
   @import url("css文件路径");
 </style>
 
 <head>
   <meta charset="utf-8" />
   <title>外部样式表</title>
   <!--链接式:推荐使用-->
   <link rel="stylesheet" type="text/css" href="css/style.css" /> 
   <!--导入式-->
   <style type="text/css">
     @import url("css/style.css");
   </style>
 </head>

（3）链接式和导入式的区别


xxxxxxxxxx
  * <link>
  1、属于XHTML
  2、优先加载CSS文件到页面
  * @import
  1、属于CSS2.1
  2、先加载HTML结构再加载CSS文件。

（4）样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

实时监听INPUT输入


x
<input id="myInput" type="text" placeholder="请输入想说的话...">

 $("#myInput").on("input", function () {
    //实时显示输入的值
    $("#result").text($(this).val());
 });

FileReader读取本地文件

FileReader是一种异步读取文件机制，结合input:file可以很方便的读取本地文件。

1、首先需要实例化一个FileReader对象

2、FileReader提供的方法：

　　①readAsArrayBuffer(file)：按字节读取文件内容，结果用ArrayBuffer对象表示;

　　②readAsBinaryString(file)：按字节读取文件内容，结果为文件的二进制串;

　　③readAsDataURL(file)：读取文件内容，结果用data:url的字符串形式表示;

　　④readAsText(file,encoding)：按字符读取文件内容，结果用字符串形式表示;

　　⑤abort()：终止文件读取操作.

　　其中readAsDataURL和readAsText较为常用，这里只对这两者进行说明。

3.1readAsDataURL会将文件内容进行base64编码后输出：


xxxxxxxxxx
var inputBox = document.getElementById("inputBox"); // dom对象
inputBox.addEventListener("change",function(){
  var reader = new FileReader();
  reader.readAsDataURL(inputBox.files[0]);//发起异步请求
  reader.onload = function(){
    //读取完成后，数据保存在对象的result属性中
    console.log(this.result);//base64内容显示
  }
})

3.2由于媒体文件的src属性，可以通过采用网络地址或base64的方式显示，因此我们可以利用readAsDataURL实现对图片的预览。


xxxxxxxxxx
<input type="file" id="inputBox" >
<img src="" id="img">

var inputBox = document.getElementById("inputBox");
var img = document.getElementById("img");
inputBox.addEventListener("change",function(){
  var reader = new FileReader();
  reader.readAsDataURL(inputBox.files[0]);//发起异步请求
  reader.onload = function(){
    //读取完成后，将结果赋值给img的src
    img.src = this.result;
  }
})

jQuery数组的操作（一）

1、创建数组


xxxxxxxxxx
var arrayObj = new Array();　      //创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
a[0] = 10;
a[1] = "aaa";
a[2] = 12.6;
// 可以实例化的时候直接赋值
var a = new Array(1, 2, 3, 4, 5);
var b = [1, 2, 3, 4, 5];

2、数组元素的访问

数组[下标] 用来读写元素


xxxxxxxxxx
var testGetArrValue=arrayObj[1];   //获取数组的元素值
arrayObj[1]= "这是新值";            //给数组元素赋予新的值

3、数组元素的添加

arrayObj.push(item) // 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift(item) // 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度


xxxxxxxxxx

var a =  ["aa","bb","cc"];
console.log(a.push("dd"));      // -> 4
console.log(a);                 // -> aa,bb,cc,dd
console.log(a.push([1,2,3]));   // -> 5
console.log(a);                 // -> aa,bb,cc,dd,1,2,3
//跟concat的区别在于，concat不影响原数组，直接返回新数组，而push则直接修改原数组，返回的是数组新长度

4、数组元素的删除

arrayObj.pop() // 移除最后一个元素并返回该元素值
arrayObj.shift() // 移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount)

splice() 方法，可以删除数组中的指定元素。

删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素;

常用实例：

数组.splice($.inArray(元素,数组),数量)


xxxxxxxxxx
var arr = ['a','b','c','d'];
arr.splice($.inArray('c',arr),1);
// 结果：arr =['a','b','d']


xxxxxxxxxx
var a =  ["aa","bb","cc"];
console.log
console.log(a.pop());  // -> cc
console.log(a);    // -> aa, bb
var a = [1,2,3,4,5,6,7,8,9];
console.log(a.splice(3,2));  // -> 4,5
console.log(a);    // -> 1,2,3,6,7,8,9

5、数组的截取和合并

arrayObj.slice(start, [end]); 以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); 将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组


xxxxxxxxxx
var a = [123];
var b = "sunnycat";
var c =  ["www",21,"ido"];
var d = {x:3.14, y:"SK"};
var e = [1,2,3,4,[5,6,[7,8]]];
alert(a.concat(b));   // -> 123,sunnycat
alert(a); //  -> 123
alert(b.concat(c, d));    // -> sunnycatwww,21,ido[object  Object]
alert(c.concat(b));   // -> www,21,ido,sunnycat
alert(e.concat(11,22,33).join(" #  "));    // -> 1 # 2 # 3  # 4 # 5,6,7,8 # 11 # 22 # 33

需要注意的是只能用于数组或字符串，如果被连接（前面的a）的是数值、布尔值、对象，就会报错，字符串连接数组时，字符串会跟数组首元素拼接成新元素，而数组连接字符串则会追加新元素（这点我也不清楚原委，知情者请透露），对于数组里面包含数组、对象的，连接后保持原样

6、数组元素的排序

arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort(); //对数组元素排序，返回数组地址

7、数组元素的字符串化

arrayObj.join(separator); 用指定间隔符，把数组元素连起来转为字符串。


xxxxxxxxxx
var a =  ['a','b','c','d','e','f','g'];
alert(a.join(" * ")); // -> a * b * c * d * e * f * g

jQuery数组的操作（二）

1. $.each(array, [callback]) 遍历[常用]

each遍历是for循环的变体,但比for循环强大.在数组中,它可以轻松的获取数组索引及对应的值。如果需要退出 each 循环可使回调函数返回 false。


xxxxxxxxxx
var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同 
$.each(_mozi,function(key,val){ 
//回调函数有两个参数,第一个是元素索引,第二个为当前值 
alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val); 
});

2. $.grep(array, callback, [invert]) 过滤数组[常用]

$.grep() 函数使用指定的函数过滤数组中的元素，并返回过滤后的数组。

提示：源数组不会受到影响，过滤结果只反映在返回的结果数组中。

语法


xxxxxxxxxx
$.grep( array, function(elementOfArray, indexInArray) [, invert ] )

参数	描述
array	Array类型将被过滤的数组。
function	Function类型指定的过滤函数。grep()方法为function提供了两个参数：其一为当前迭代的数组元素，其二是当前迭代元素在数组中的索引。
invert	可选。 Boolean类型默认值为false，指定是否反转过滤结果。如果参数invert为true，则结果数组将包含function返回false的所有元素。

例：


xxxxxxxxxx
<div></div>
<p></p>
<span></span>
<script>
$(function () { 
    // 选出数组里面不大于5，且索引号大于4的元素。
    var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
    $( "div" ).text( arr.join( ", " ) );
    arr = jQuery.grep(arr, function( element, index ) {
        return ( element > 5 && index > 4 );
    });
    
    // 选出数组里面不等于9的元素
    $( "p" ).text( arr.join( ", " ) ); 
    arr = $.grep(arr, function( a ) {
        return a == 9;
   true },);
    $( "span" ).text( arr.join( ", " ) );
});

3. $.inArray(val,array)判断值是否存在于数组中[常用]

解释: 确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回 -1 。

4. $.map(array,[callback(element,index)])按给定条件转换数组 [一般]

解释:对于array中的每个元素，调用callback()函数，最终返回一个新的数组，原数组不变。


xxxxxxxxxx
$(function () {
    var arrInt = [1, 3, 5, 79];
    //map返回来的是一个新数组，第个值乘2
    var b = $.map(arrInt, function (value, key) {
                return value * 2;
            });
     console.log(b); // b.join(","),使用“，”符号连接成字符串
})

5. $.merge(first,second)合并两个数组[一般]

解释: 返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素；

这个方法是用jQuery的方法替代原生concat()方法, 但功能并没有concat()强大, concat()可以同时合并多个数组。

6. $.unique(array)过滤数组中重复元素[不常用]

解释: 删除数组中重复元素. 只处理删除DOM元素数组,而不能处理字符串或者数字数组. 第一次看到这个方法,觉得这是个很便捷的方法, 可以过滤重复, 哈, 多完美, 但仔细一看, 仅限处理DOM元素. 功能8折了.所以, 我给它定义成了一个不常用的元素, 至少, 我用jQuery以来没用到过它

7. $.makeArray(obj) 将类数组对象转换为数组[不常用]

解释: 将类数组对象转换为数组对象, 类数组对象有 length 属性,其成员索引为0至 length-1. 这是个多余的方法, 无所不能的$本来就包含了这个功能. jQuery官网上解释的非常模糊. 其实, 它就是将某个类数组对象(比如用getElementsByTagName获取的元素对象集合)转换成数组对象.

8. $(dom).toArray()将所有DOM元素恢复成数组[不常用]

解释: 把jQuery集合中所有DOM元素恢复成一个数组; 并不常用的方法, 个人甚至觉得它和$.makeArray一样多余.

9. 数组的交、并、差

(1)交集


xxxxxxxxxx
// 利用filter方法来遍历是否有相同的元素
var arr3 = arr2.filter(function(v){
            return arr1.indexOf(v)!==-1     
        });
        
// ES7写法
let intersection = a.filter(v => b.includes(v))

(2)并集

(3) 差集


xxxxxxxxxx
var result = arr2.concat(arr3 ).filter(function (v) {
                return arr2.indexOf(v)===-1 || arr3 .indexOf(v)===-1
            });
// ES7写法
let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v))

JS两个数组的交集、差集、并集、补集

方法1：使用 jQuery 实现


xxxxxxxxxx
var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a：", a);
console.log("数组b：", b);
// 交集
let intersect = $(a).filter(b).toArray();
// 差集
let minus = $(a).not(b).toArray();
// 补集
let complement = $(a).not(b).toArray().concat($(b).not(a).toArray());
// 并集
let unionSet = $.unique(a.concat(b));
console.log("a与b的交集：", intersect);
console.log("a与b的差集：", minus);
console.log("a与b的补集：", complement);
console.log("a与b的并集：", unionSet);

注意：数组a和b的顺序不一样，结果不一样，使用之前最好测试看下结果

方法2：使用 ES6 语法实现

在 ES6 中我们可以借助扩展运算符（…）以及 Set 的特性实现相关计算，代码也会更加简单些。


xxxxxxxxxx
var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a：", a);
console.log("数组b：", b);
var sa = new Set(a);
var sb = new Set(b);
// 交集
let intersect = a.filter(x => sb.has(x));
// 差集
let minus = a.filter(x => !sb.has(x));
// 补集
let complement = [...a.filter(x => !sb.has(x)), ...b.filter(x => !sa.has(x))];
// 并集
let unionSet = Array.from(new Set([...a, ...b]));
console.log("a与b的交集：", intersect);
console.log("a与b的差集：", minus);
console.log("a与b的补集：", complement);
console.log("a与b的并集：", unionSet);

方法3：使用ES5语法实现

（1）直接使用 filter、concat 来计算


xxxxxxxxxx
var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
//交集
var c = a.filter(function(v){ return b.indexOf(v) > -1 })
//差集
var d = a.filter(function(v){ return b.indexOf(v) == -1 })
//补集
var e = a.filter(function(v){ return !(b.indexOf(v) > -1) })
 .concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}))
//并集
var f = a.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}));
console.log("数组a：", a);
console.log("数组b：", b);
console.log("a与b的交集：", c);
console.log("a与b的差集：", d);
console.log("a与b的补集：", e);
console.log("a与b的并集：", f);

（2）对 Array 进行扩展

a. 为方便使用，我们可以对数组功能进行扩展，增加一些常用的方法。


xxxxxxxxxx
//数组功能扩展
//数组迭代函数
Array.prototype.each = function(fn){
 fn = fn || Function.K;
 var a = [];
 var args = Array.prototype.slice.call(arguments, 1);
 for(var i = 0; i < this.length; i++){
 var res = fn.apply(this,[this[i],i].concat(args));
 if(res != null) a.push(res);
 }
 return a;
};
//数组是否包含指定元素
Array.prototype.contains = function(suArr){
 for(var i = 0; i < this.length; i ++){
 if(this[i] == suArr){
 return true;
 }
 }
 return false;
}
//不重复元素构成的数组
Array.prototype.uniquelize = function(){
 var ra = new Array();
 for(var i = 0; i < this.length; i ++){
 if(!ra.contains(this[i])){
 ra.push(this[i]);
 }
 }
 return ra;
};
//两个数组的交集
Array.intersect = function(a, b){
 return a.uniquelize().each(function(o){return b.contains(o) ? o : null});
};
//两个数组的差集
Array.minus = function(a, b){
 return a.uniquelize().each(function(o){return b.contains(o) ? null : o});
};
//两个数组的补集
Array.complement = function(a, b){
 return Array.minus(Array.union(a, b),Array.intersect(a, b));
};
//两个数组并集
Array.union = function(a, b){
 return a.concat(b).uniquelize();
};

b. 为方便使用，我们可以对数组功能进行扩展，增加一些常用的方法。


xxxxxxxxxx
var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a：", a);
console.log("数组b：", b);
console.log("a与b的交集：", Array.intersect(a, b));
console.log("a与b的差集：", Array.minus(a, b));
console.log("a与b的补集：", Array.complement(a, b));
console.log("a与b的并集：", Array.union(a, b));

jQuery对象和DOM对象区别

jquery对象和dom对象区别

1. jquery对象

$("#div")得到的是[object Object]，即jquery对象。

2. dom对象

document.getElementById("div")得到的是[object HTMLDivElement]，即dom对象。

3. jquery对象转成dom对象

两种方法：[index]和.get(index)

$("#div")[0]或者$("#div").get(0)

4. dom对象转成jquery对象

只需要用$()把DOM对象包装起来。

var v = document.getElementById("myID"); //DOM对象 var $v = $(myID); //jQuery对象

jquery对象和dom对象区别

jQuery 事件 target 属性

语法：event.target

规定返回的最后一个值来自哪个事件。这个 event 参数来自事件绑定函数。

例：显示哪个 DOM 元素触发了事件


xxxxxxxxxx
<h1>这是一个标题</h1>
<h2>这是另一个标题</h2>
<p>这是一个段落</p>
<button>这是一个按钮</button>
<div id="output"></div>
$("p, button, h1, h2").click(function(event){
  $("#output").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
});

正则表达式

一、通用规则

1.语法

字符	描述
\	将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。
^	匹配输入字符串的开始位置；除非在方括号表达式中使用，当该符号在方括号表达式中使用时，表示不接受该方括号表达式中的字符集合。要匹配 ^ 字符本身，请使用 \^。
$	匹配输入字符串的结束位置。
*	匹配前面的子表达式零次或多次。
+	匹配前面的子表达式一次或多次。
?	匹配前面的子表达式零次或一次。等价于 {0,1}。指明一个非贪婪限定符
.	匹配除换行符“\n”之外的任何单个字符。要匹配包括“\n”在内的任何字符，请使用像"`(.\|\n)`”的模式。
{n}	n是一个非负整数。匹配确定的n次。例如，“`o{2}`”不能匹配“`Bob`”中的“`o`”，但是能匹配“`food`”中的两个o。
{n,}	n是一个非负整数。至少匹配n次。例如，“`o{2,}`”不能匹配“`Bob`”中的“`o`”，但能匹配“`foooood`”中的所有o。“`o{1,}`”等价于“`o+`”。“`o{0,}`”则等价于“`o`”。
{n,m}	m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。请注意在逗号和两个数之间不能有空格。'o{0,1}' 等价于 'o?'。
\|	指明两项之间的一个选择。
( )	标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。
\n	匹配一个换行符。等价于 \x0a 和 \cJ。
\r	匹配一个回车符。等价于 \x0d 和 \cM。
\t	匹配一个制表符。等价于 \x09 和 \cI。
\v	匹配一个垂直制表符。等价于 \x0b 和 \cK。
\f	匹配一个换页符。等价于 \x0c 和 \cL。
\d	匹配一个数字字符。等价于 [0-9]
\D	匹配一个非数字字符。等价于 `[^0-9]`
\w	匹配字母、数字、下划线。等价于[A-Za-z0-9_]
\W	匹配非字母、数字、下划线。等价于 `[^A-Za-z0-9_]`
\s	匹配任何空白字符，包括空格、制表符、换行符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
\S	匹配任何非空白字符。等价于 “`[^ \f\n\r\t\v]`”。
(pattern)	匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '(' 或 ')'。
(?:pattern)	匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (\|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y\|ies) 就是一个比 'industry\|industries' 更简略的表达式。
(?=pattern)	正向肯定预查（look ahead positive assert），在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，"Windows(?=95\|98\|NT\|2000)"能匹配"Windows2000"中的"Windows"，但不能匹配"Windows3.1"中的"Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?!pattern)	正向否定预查(negative assert)，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如"Windows(?!95\|98\|NT\|2000)"能匹配"Windows3.1"中的"Windows"，但不能匹配"Windows2000"中的"Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。

修饰符	描述
i	ignore - 不区分大小写
g	global - 全局匹配；查找所有的匹配项
m	multi line - 多行匹配

2.常用正则

匹配空行	/^\s*$/
中文字符	[\u4e00-\u9fa5]

匹配 HTML 标记	/<\s(\S+)(\s[^>])?>[\s\S]<\s\/\1\s*>/

二、JS

1. match

格式：stringObj.match(rgExp)

stringObj为字符串必选；rgExp为正则表达式必选项。

返回值：如果能匹配则返回结果数组，如果不能匹配返回null。

我们必须明确的是，这个方法跟其他语言是不同的。

全局标示g

当有g时，匹配整个字符串；当无g时，匹配首次的子符串。 var reg = / 正则表达式 /g


xxxxxxxxxx
var str = 'AAA18BBB99CCC86DDD13';
var res = str.match(/\d+/); //只能匹配字符串中出现的首个数字，未使用全局匹配符g
// 结果：res=[18]
// 当有g时：res = [18,99,86,13]

2. test

test() 方法用于检测一个字符串是否匹配某个模式.

语法：RegExpObject.test(string)

返回值：如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

三、Python

1. match、search、findall用法区别

match:从字符串首字母开始匹配，如果匹配成功，则返回Match对象,反之返回空。若想获取返回Match对象转为值，则用group()方法。
search：从这个整个字符串匹配，如果匹配成功，则返回Match对象,反之返回空。若想获取返回Match对象转为值，则用group()方法。
findall：匹配所有的字符串，返回的是list。


xxxxxxxxxx
import re
s = '3123C72D1D8E67'
r = re.match('\d',s)
print(r)
r1 = re.search('\d',s)
print(r1.group())
r2 = re.findall('\d',s)

结果


xxxxxxxxxx
<_sre.SRE_Match object; span=(0, 1), match='3'>
3
['3', '1', '2', '3', '7', '2', '1', '8', '6', '7']

定时器

语法

setInterval () 定时

setInterval(code, milliseconds); setInterval(function, milliseconds, param1, param2, ...)

参数	描述
code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1, param2, ...	可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

clearInterval() 停止

clearInterval(id_of_setinterval)

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

setInterval()产生一个定时器，定义一个定时器标识；使用 clearInterval(定时器标识) 来停止。

用法1


xxxxxxxxxx
var mytag;
function jump(){
　　…………　　//函数内容
}
mytag = setInterval("jump",5000); //每个5秒调用一次函数

// 当需要停止时
$("#mydiv").click(function(){
　　clearInterval(mytag);
　　};　　
});

用法2


xxxxxxxxxx
var mytag;
function autoPlay(){
　　mytag = setInterval(function(){
　　　　………… 　　// 函数内容
　　},5000);   // 每5秒执行一行
}
autoPlay();　　// 调用函数

// 当需要停止时
$("#mydiv").click(function(){
　　clearInterval(mytag);
　　};　　
});

总结

setInterval与clearInterval都是直属于window对象。

第一种用法思路比较清晰，先设置一个函数，在通过setInterval来自行调用，但是将其在别处调用比较困难；

第二种方法看起来比较乱，在setInterval内部写下自行调用的函数，然后在给他套上一个有名函数，然后通过调用有名函数来实行自动，在别处调用比较方便。

循环终止和退出

跳出each循环
return false 跳出循环
return true 进入下一个循环
跳出for循环
break 直接退出for这个循环。这个循环将不再被执行！ continue 直接跳出本次for循环。下次继续执行。 return语句就是用于指定函数返回的值。即使函数主体中还有其他语句，函数执行也会停止！

居中

inline-block
text-align:center; line-height:50px;
block
margin:auto;

获取DOM属性

$(this).attr("id")

$(this).attr("class")

jQuery清空file文件域


xxxxxxxxxx
var file = $("#file") 
file.after(file.clone().val("")); 
file.remove();

背景图片透明


xxxxxxxxxx
.bodystyle::before{
                content: " ";
                position: fixed;
                z-index: -1;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-image: url(bglog.png); 
                background-repeat: repeat;
                opacity: 0.1;
            }

background参数

在一个声明中设置所有背景属性


xxxxxxxxxx
background: #00FF00 url(bgimage.gif) no-repeat fixed top;

参数	描述
background-color	规定要使用的背景颜色。
background-position	规定背景图像的位置。
background-size	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-origin	规定背景图片的定位区域。
background-clip	规定背景的绘制区域。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-image	规定要使用的背景图像。
inherit	规定应该从父元素继承 background 属性的设置。

1. background-repeat

用来设置背景图像的铺排填充方式, 默认值: repeat 。

repeat 表示横向纵向上均平铺;

no-repeat 表示不平铺;

repeat-x 表示横向上平铺,

repeat-y 表示纵向上平铺

round 表示背景图像自动缩放直到适应且填充满整个容器。注意: 当设置为 round 时, background-size 的 cover 和 contain 属性失效。

space 表示背景图像以相同的间距平铺且填充满整个容器或某个方向. 注意: 当 background-size 设置为 cover 和 contain 时, background-rapeat 的 space 属性失效。

2. background-position

用来设置背景图像的位置, 默认值: 0% 0%, 效果等同于 left top。

如果设置一个值, 则该值作用在横坐标上, 纵坐标默认为50%(即center) ; 如果设置两个值, 则第一个值作用于横坐标, 第二个值作用于纵坐标,

取值可以是方位关键字[left\top\center\right\bottom], 如 background-position: left center ;

也可以是百分比或长度, 百分比和长度可为设置为负值, 如: background-position: 10% 30px ;

3. background-attachment

用来设置背景图像是随对象内容滚动还是固定的，默认值 scroll。

fixed 背景图像相对窗体固定，即内容滚动时，图片不动; scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动; local 相对元素内容固定，背景图像跟随元素内容。

鼠标进入与离开的事件

mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发，

mouseenter 事件只有在鼠标指针进入被选元素时被触发。

1.mouseover与mouseout

2.mouseenter与 mouseleave

::before与::after

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus 常见伪元素——::first-letter,::first-line,::before,::after,::selection

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容。

content属性

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

string
使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}

attr()

通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。


xxxxxxxxxx
<style type="text/css">
a::after{
    content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>

url()/uri()

用于引用媒体文件。


xxxxxxxxxx
a::before{
    content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}

counter()
调用计数器，可以不使用列表元素实现序号功能。配合counter-increment和counter-reset属性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

JS读取本地文件

一、上传文件方法


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS读取本地文件</title>
</head>

<body>
    <div>
        <div>方法一</div>
        <input type="file" id="myID1" style="display: none" onchange="fileImport();">
        <input type="button" id="fileImportBtn" value="导入">
        <div>方法二</div>
        <input type="file" id="myID2" onchange="fileImport2();">
    </div>
    <div id="output"></div>
    <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
        $("#fileImportBtn").click(function() {
            $("#myID1").click();
        })

        function fileImport() {
            //获取读取我文件的File对象
            var selectedFile = document.getElementById('myID1').files[0];
            // var selectedFile = $('#myID1').get(0).files[0]; // 与上一行等价

            var name = selectedFile.name;   //读取选中文件的文件名
            var size = selectedFile.size;   //读取选中文件的大小
            console.log("文件名:" + name + "大小:" + size);
            var reader = new FileReader();  //这是核心,读取操作就是由它完成.
            reader.readAsText(selectedFile,"GBK"); //读取文件的内容,也可以读取文件的URL
            reader.onload = function() {
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                console.log(this.result);
                $("#output").html(this.result);
            }
        }
    </script>

    <script type="text/javascript">
        // 定义函数
        function fileImport2(){
            //获取读取我文件的File对象
            var selectedFile = $('#myID2').get(0).files[0];
            var reader = new FileReader(); //这是核心,读取操作就是由它完成.
            reader.readAsText(selectedFile,"GBK"); //读取文件的内容,也可以读取文件的URL
            reader.onload = function(){
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                console.log(this.result);   // 与reader.result一样
                $("#output").html(this.result);
            };
        };
    </script>
</body>
</html>

二、将读取的文件转化成数组


xxxxxxxxxx
// 参数str为读取出的字符
function getArray(str){
    var re = /(\r\n|\n)/g; 
    var tmpStr = str.replace(re,","); 
    var Arr = tmpStr.split(",");
    // $.grep筛选或者使用for循环过滤掉空值
    var newArr = $.grep(Arr,function(element,index){ return element==""},true)
    console.log("新数组：\n",newArr);
};

jQuery对象和DOM对象的区别

以前一直认为jquery中的$("#id")和document.getElementById("id")得到的效果是一样的，今天做特效的时候才发现并不是这么一回事，通过测试得到:

1、alert($("#div"))得到的是[object Object]

2、alert(document.getElementById("div"))得到的是[object HTMLDivElement]

3、alert($("#div")[0])或者alert($("#div").get(0))得到的是[object HTMLDivElement]

原因解读：

document.getElementById()返回的是DOM对象，而$()返回的是jQuery对象

什么是jQuery对象？

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法** 这段代码等同于用DOM实现代码： document.getElementById("id").innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在两者转换前首先我们给一个约定：如果一个获取的是jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转成DOM对象

**两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); (1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。如：var $v =$("#v") ; //jQuery对象 var v=$v[0]; //DOM对象 alert(v.checked) //检测这个checkbox是否被选中 (2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象如：var $v=$("#v"); //jQuery对象 var v=$v.get(0); //DOM对象 alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 如：var v=document.getElementById("v"); //DOM对象 var $v=$(v); //jQuery对象转换后，就可以任意使用jQuery的方法了。通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

其它的相关使用方法

1、DOM对象转jQuery对象

普通的Dom对象一般可以通过$()转换成jQuery对象。

如：$(document.getElementById("msg")) 返回的就是jQuery对象，可以使用jQuery的方法。

2、jQuery对象转DOM对象

由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]

这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。

以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML;

3、两种方法获取对象方式：

如有

通过id:

　　document.getElementById('formid');

　　$('#formid')

通过name

　　document.getElementsByName('formName')[0]

　　$("form[name='formName']")

jquery固有的方法：

转自：https://www.cnblogs.com/theWayToAce/p/5591221.html

Flex布局

一、概要图


xxxxxxxxxx
.box{
  display: flex;    
  display: inline-flex; /*行内元素*/
  display: -webkit-flex; /* Safari Webkit内核的浏览器 */
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、容器属性

1.flex-direction属性*

flex-direction属性决定主轴的方向（即项目的排列方向）。


xxxxxxxxxx
flex-direction: row | row-reverse | column | column-reverse;

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap属性*

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。


xxxxxxxxxx
flex-wrap: nowrap | wrap | wrap-reverse;

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

3.flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。


xxxxxxxxxx
flex-flow: <flex-direction> <flex-wrap>;

4.justify-content属性*

justify-content属性定义了项目在主轴上的对齐方式。


xxxxxxxxxx
justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items属性*

align-items属性定义项目在交叉轴（副轴/侧轴）上如何对齐。


xxxxxxxxxx
align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


xxxxxxxxxx
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

三、项目属性

1. order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。


xxxxxxxxxx
order: <integer>;

2. flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。


xxxxxxxxxx
flex-grow: <number>; /* default 0 */

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3. flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。


xxxxxxxxxx
flex-shrink: <number>; /* default 1 */

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

4. flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。


xxxxxxxxxx
flex-basis: <length> | auto; /* default auto */

5. flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。


xxxxxxxxxx
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

6.align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。


xxxxxxxxxx
align-self: auto | flex-start | flex-end | center | baseline | stretch;