发表于 | 更新于

一、 JS 内置函数

1. string.concat(str)

说明：将两个或多个字符串连接起来，返回一个新的字符串（不会改变原有字符串）

参数 描述
str 被拼接在后面的字符串 
1
2
3
4
var a = "hello ";
var b = "world!";
var c = a.concat(b);
console.log(c);  //"hello world!"

2. string.indexOf(searchValue,startIndex)

说明：返回字符串中一个 子串 第一次出现的索引(从左到右,从0开始)；如果没有匹配项，返回 “-1”

参数 描述
searchValue 必需，要检索的字符串
startIndex 可选项，开始检索的位置；合法值为 0 到 string.length-1 
1
2
3
var a = "Hello world!";
var index = a.indexOf('l',3);   //从索引 3 开始，查找字符串"l"首次出现的位置 结果是 3
var index1 = a.indexOf('l');  //查找字符串"l" 首次出现的位置  结果是 2

3. string.lastIndexOf(searchValue,startIndex)

说明：返回字符串中一个 子串 最后一次出现的索引(从右到左,从0开始)；如果没有匹配项，返回 “-1”

参数 描述
searchValue 必需，要检索的字符串
startIndex 可选项，开始检索的位置；合法值为 0 到 string.length-1

4.string. charAt(index)

说明：返回指定位置的字符

1
2
3
var a = "Hello world!";
var code = a.charAt(1);
console.log(code);  //结果是 e

5. string.substring(start,stop)

说明：返回string中 start 到 stop- 1 之间的所有字符；返回值长度为 stop- start；

注意：如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

参数 描述
start 必需，非负整数，规定要提取的字符串的开始位置
stop 可选项，非负整数，规定要提取的字符串的结束位置(实际比需要的位置多1)；若省略该参数，提取的字符串为start 到字符串结尾 
1
2
var str = "Hello world!";
var newStr = str.substring();

6. string.substr(start,length)

说明：提取从 start 下标开始的指定长度的字符

参数 描述
start 必需，提取字符串的开始下标
length 可选项，提取的字符串长度；若省略该参数，提取的字符串为 start 到字符串结尾

发表于 | 更新于

一、字符串相关

1. 字符串数组去重

1
2
3
4
5
6
7
8
9
function removal(arr){
    for(var i=0;i<arr.length;i++){
        if(arr.indexOf(arr[i]) != i){
            arr.splice(i,1);
            i--;
        }
    }
    return arr;
}

2. 判断一个字符串是否在一个数组中

1
2
3
4
5
6
7
8
9
10
//参数 str-字符串  strArray-数组
function isInArray(str,strArray){
    for(var i=0;i<strArray.length;i++){
        var thisStr = strArray[i].toString();
        if(thisStr == str){
            return true;
        }
    }
    return false;
}

3. 返回特定字符串在数组中的位置(下标)

1
2
3
4
5
6
//参数 str-字符串  strArray-数组
function getIndex(str,strArray){
    for(var i=0;i<strArray.length;i++){
        if(str == strArray[i]) return i;
    }
}

4. 返回一个字符在字符串中第N次出现的位置

1
2
3
4
5
6
7
8
//参数 char-匹配的字符  string-字符串  num-第几次
function findIndex(char,string,num){
    var x = string.indexOf(char);
    for(var i=0;i<num;i++){
        x = string.indexOf(char,x+1);
    }
    return x;
}

二、其他

1. 打开子窗口

1
2
3
4
5
6
7
8
9
10
function openDialog(url,params,width,height){
    //因为浏览器打开的窗口表现形式不是完全一样的，所以先判断浏览器类型
    var is_opera = /opera/i.test(navigator.userAgent);
    var is_ie = (/msie/i.test(navigator.userAgent) && !is_opera);
    var is_ie_6 = (is_ie && /msie 6\.0/i.test(navigator.userAgent));
    if(is_ie_6){
        height = height + 50; 
    }
    return window.showModalDialog(url,params,"menubar:no;dialogWidth:"+ width + "px;dialogHeight:" + height +"px;status:no;help:no;resizable:no;scroll:yes;location:no;toolbar:no;");
}

发表于 | 更新于

JS——call和apply用法

JS中每个函数都包含两个非继承而来的call()和apply()方法，它们的作用是一样的

方法说明: 调用一个对象的一个方法，用另一个对象替换当前对象；将一个函数的对象上下文从初始的上下文改变为thisObj指定的对象；

1. call(thisObj,arg1,arg2…)

参数: thisObj表示 将被用作当前对象 的对象; arg1,arg2表示 传递给当前对象的参数

注意: 两个参数均可省略，但thisObj省略，那么Global对象将被用作thisObj；参数必须一一列举出来

例1

1
2
3
4
5
6
7
8
9
10
11
12
function func1(){
    this.name = 'Tom';
    this.words = function(words){
        console.log('I am ',words);
    }
}
function func2(){
    func1.call(this);
}
var func3 = new func2();
func3.words('George');   // I am George
console.log(func3.name);  // Tom

以上代码，func2中func1调用了call方法，等于是在func2中执行了func1()；此时func2继承了func1的属性和方法。

例2

1
2
3
4
5
6
7
8
9
10
11
12
var Pet = {
	words: "......",
	speak:function(say){
		console.log(say + " " + this.words);
	}
}
Pet.speak('Speak');  // Speak ......
var Dog = {
    words:"Wang"
}
//调用call时，this指向了Dog
Pet.speak.call(Dog,"Speak") // Speak Wang

2. apply(thisObj,[argArray])

参数: thisObj表示 将被用作当前对象 的对象; argArray表示 传递给当前对象的参数

注意: 两个参数均可省略，但thisObj省略，那么Global对象将被用作thisObj；参数必须是数组形式的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person(name,age){
	this.name=name;
	this.age=age;
}
/*定义一个学生类*/
function Student(name,age,grade){
	Person.apply(this,arguments);
	this.grade=grade;
}
//创建一个学生类
var student=new Student("zhangsan",21,"一年级");
//测试
console.log("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
//测试结果name:zhangsan age:21  grade:一年级
//Student方法里面没有给name和age属性赋值,apply使其继承了Person的属性和方法

发表于 | 更新于

一、元素

1. 行内元素

特性：

1）在一行内可以有多个行内元素

2）设置宽度width无效；设置高度无效，可以通过设置line-height来设置；设置margin只有左右有效，上下无效；设置padding只有左右有效，上下无效

3）只能包含行内元素

4）遇到父级元素边界会自动换行

常用行内元素：span、img、a、input、textarea、select、strong、lable、button、abbr（缩写）、em（强调）、cite（参考文献引用）、i（斜体）、q（引号）、small、big、sup（上标）、sub、u（下划线）等

特殊的行内元素：input、img、textarea、select、button、label。这些行内元素又被称为置换元素，它们默认地设置了宽高，性质等同于设置了 display:inline-block

置换元素：（浏览器根据元素的标签和属性，来决定元素的具体显示内容），置换元素在其显示中生成了框，故可以设置width、height、padding、margin，表现等同于设置了 display:inline-block

行内元素的间距：相邻的两个行内元素之间会有间距

去除行内元素之间的间距有以下两种办法：

1）重设字体。将行内元素的直接父级设置font-size:0px；再给行内元素设置字体大小即可解决

2）借助HTML注释。在两个行内元素之间加入注释

2. 块元素

特性：

1）独占一行；

2）可以设置宽、高；不设置宽度时默认为100%；

3）块元素可以包含行内元素和块元素

常用块元素：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

3. 行内块元素

特性：

1）元素排列在一行

2）宽度默认由内容决定

3）元素间默认有间距

4）支持宽高、外边距、内边距的所有样式的设置