开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript基础之定义函数

简介:
+关注继续查看

javascript 字符串

字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法


常见功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
obj.length                           长度
  
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement)     替换,正则中有g则替换所有,否则只替换第一个匹配项,
                                     $数字:匹配的第n个组内容;
                                     $&:当前匹配的内容;
                                     $`:位于匹配子串左侧的文本;
                                     $':位于匹配子串右侧的文本
                                     $$:直接量$符号


布尔类型(Boolean)

布尔类型仅包含真假,与Python不同的是其首字母小写(true/false)

==  比较值相等

例如:

1
2
1=='1'
true


!=  不等于

例如:

1
2
1!=2
true


===  比较值和类型相等

1 === "1"

例如:

1
2
3
false
1 === 1
true

!===  不等于


||  或


&& 且



数组

JavaScript中的数组类似于python的列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
obj.length          数组的大小
  
obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序




JavaScript定义变量:

全局变量:

     name = "abc"

局部变量

     var name = "cba"


定义函数:

1
2
3
4
5
6
<script>
    function function_name(){
        statement1;
        statement2
    }
</script>

调用函数:

1
function_name()


示例:定义并调用函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demp</title>
</head>
<body>
<h1 id="demo">欢迎老男孩</h1>
</body>
<script>
    function func(){
        var tag = document.getElementById('demo');//根据ID获取标签
        var content =tag.innerText;//获取标签中的文本内容(这里为欢迎老男孩)
        var f = content.charAt(0); //获取文本第一个字符
        var l = content.substring(1,content.length); //获取文本第二个字符到最后一个字符
        var new_content = l + f; //第二个字符到最后一个字符加上第一个字符(迎老男孩欢)
        tag.innerText = new_content;//用新的字符替换原来的字符
    }
    setInterval('func()',1000);
</script>
</html>


setInterval('func()',interval)是javascript定时器, 表示每间隔interval毫秒,执行一次func()函数

charAt(n):JavaScript字符串的一个方法:获取指定下标的字符,跟python一样,下标从0开始

substring(m,n):JavaScript字符串的一个方法,获取从第m下标到第n下标的字符集

length:JavaScript字符串的一个方法,获取字符串长度


JavaScript for循环

1、循环时,循环元素是索引

1
2
3
4
5
6
7
8
a=[11,22,33,44]
for(var i in a){
    console.log(a[i]);
}
11
22
33
44


循环字典

1
2
3
4
5
6
7
8
9
10
11
12
13
a={"name":"zeng","age":28}
for(var item in a){
    console.log(a[item]);    
}
"zeng"
28
 
a={"name":"zeng","age":28}
for(var item in a){
    console.log(item);    
}
name
age


2、循环时,循环元素的下标,不支持字典

1
2
3
4
5
6
7
8
a=[11,22,33,44]
for(var i=0;i<a.length;i=i+1){
    console.log(a[i]);
}
11
22
33
44



JavaScript条件判断

if(条件){

}else if(条件){

}else if(条件){

}else{

}



JavaScript DOM操作

1、找到标签

a、直接找标签 

1
2
3
    document.getElementById('id'):通过id获取单个元素
    document.getElementByTagName('div'):通过tag获取多个元素
    document.getElementByClassName('cl'):通过class获取多个元素

b、间接找标签

    

1
2
3
4
5
6
    parentElement                 //父节点标签元素
    children                      //所有字标签
    firstElementChild             //第一个子标签元素
    lastElementChild              //最后一个子标签元素
    nextElementSibling            //下一个兄弟标签元素
    previousElementSibling        //上一个兄弟标签元素



2、操作标签

获取标签中的文本内容

a、

    标签.innerText

    对标签内部文本重新赋值

    标签.innerText=""

1
2
3
4
5
6
7
8
9
<a>asdfa</a>
<a>8908</a>
<a>asd234</a>
 
//获取所有a标签,保存到ll列表中,然后用for循环修改所有a标签的文本内容。
ll=document.getElementsByTagName('a')
[a, a, a]
for(var i=0;i<ll.length;i=i+1){ll[i].innerText='666'}
"666"


b、

1
2
3
4
    classname
        tag.className = "" 直接整体操作
        tag.classList.add(“样式名”)  添加样式
        tag.classList.remove(“样式名”)  删除样式


实例:全选、反选、取消

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demp</title>
</head>
<body style="margin: 0";>
<div>
    <input type="button" value="添加" onclick="ShowModel();">
    <input type="button" value="全选" onclick="ChooseAll();">
    <input type="button" value="取消" onclick="CancleAll();">
    <input type="button" value="反选" onclick="ReverseAll();">
    <table>
        <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>端口</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>host1</td>
                <td>8080</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>host2</td>
                <td>8081</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>host3</td>
                <td>8083</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    function ChooseAll(){
        var tbody = document.getElementById("tb");
        var tr_list = tbody.children;
        for(var i=0;i<tr_list.length;i=i+1){
            var current_tr = tr_list[i]
            var checkbox = current_tr.children[0].children[0];
            checkbox.checked = true;
        }
    }
     
    function CancleAll(){
        var tbody = document.getElementById("tb");
        var tr_list = tbody.children;
        for(var i=0;i<tr_list.length;i=i+1){
            var current_tr = tr_list[i]
            var checkbox = current_tr.children[0].children[0];
            checkbox.checked = false;
        }
    }
     
    function ReverseAll(){
        var tbody = document.getElementById("tb");
        var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i=i+1){
            var current_tr = tr_list[i]
            var checkbox = current_tr.children[0].children[0];
            if(checkbox.checked) {
                checkbox.checked = false;
            }
            else{
                checkbox.checked = true;
            }
        }
    }
</script>
</html>



JavaScript序列化及转义


序列化

JSON.stringify( ):将对象转化成字符串

JSON.parse( ):将字符串序列化成对象


例如:在Google chrome开发者工具中测试:

1
2
3
4
5
6
7
8
a
[11, 22, 33, 44]
s=JSON.stringify(a)
"[11,22,33,44]"
s
"[11,22,33,44]"
JSON.parse(s)
[11, 22, 33, 44]


转义

  • decodeURI( )                   URl中未转义的字符

  • decodeURIComponent( )   URI组件中的未转义字符

  • encodeURI( )                   URI中的转义字符

  • encodeURIComponent( )   转义URI组件中的字符

  • escape( )                         对字符串转义

  • unescape( )                     给转义字符串解码

  • URIError                         由URl的编码和解码方法抛出


示例:

    

1
2
3
4
5
6
7
8
9
10
url = "http://www.w3school.com.cn/jsref/中文"
 
new_url = encodeURI(url)
"http://www.w3school.com.cn/jsref/%E4%B8%AD%E6%96%87"
 
decodeURI(new_url)
"
 
encodeURIComponent(url)
"http%3A%2F%2Fwww.w3school.com.cn%2Fjsref%2F%E4%B8%AD%E6%96%87"

 

encodeURI(): 就是将url中的中的特殊字符重新编码

encodeURIComponent():将URI前面的双斜杠和冒号也重新编码


JavaScript作用域

我们先来说下python的作用域

例1:

1
2
3
4
def func():
    if 1 == 1:
        name = "abc"
    print name

例2:

1
2
3
4
def func():
    if 1 ==1:
        name = "abc"
print name

我们知道python以函数作为作用域,所以例1不会报错,例2会报错


JavaScript作用域的重要三句话:

  • JavaScript默认跟python一样,以函数作为作用域

  • 函数的作用域在函数未被调用之前就已经被创建了

  • 函数的作用域存在作用域链

  • 函数内局部变量要提前声明


实例1:=================JavaScript默认跟python一样,以函数作为作用域==============

1
2
3
4
5
6
7
8
function func(){
    if(1==1){
        var name = 'abc';
    }
    console.log(name);
}
func()
abc



======================函数的作用域存在作用域链========================

实例2:

1
2
3
4
5
6
7
8
9
10
11
name = "aaa"
function func(){
    var name = "bbb";
    function inner(){
        var name = "ccc";
        console.log(name);
    }
    inner()
}
func()
ccc

函数的作用域链其实就是函数作用域的优先级关系



例3:

1
2
3
4
5
6
7
8
9
10
11
12
name = "aaa"
function func(){
    var name = "bbb";
    function inner(){
        //var name = "ccc";
        console.log(name);
    }
    return inner
}
var ret = func()
ret()
bbb

由于func( )函数返回的是inner函数, 所以func()被调用时,返回的是inner()函数自身,而ret()则是调用inner()函数。函数的作用域链在函数创建时就产生了,所以在在调用func()函数时,name=“bbb”, 执行ret()时name也就是bbb


例4:

name = "aaa"

1
2
3
4
5
6
7
8
9
10
11
12
function func(){
    var name = "bbb";
    function inner(){
        //var name = "ccc";
        console.log(name);
    }
    var name = "ddd"
    return inner
}
var ret = func()
ret()
ddd

现不看inner()函数代码段,先设置name=“bbb”, 后来又设置name=“ddd”,所以name是由bbb修改成了ddd,所以最终结果是ddd。



例5 =======================函数内局部变量要提前声==============================

1
2
3
4
5
6
function func(){
    console.log(xxoo)
    var xxoo = "aaa"
}
func()
undefined

JavaScript跟python一样,代码是从上往下执行的,当解释器读到console.log(xxoo)时,会发现xxoo代码没有赋值,JavaScript会给这个变量设置默认值为undefined,所以执行func()函



JavaScript面向对象编程

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age){
  this.name = name;
  this.age = age;      
}
  
var p = new Person('tree', 25)
p (回车)
Person {name: "tree", age: 25}
p.name (回车)
"tree"
p.age (回车)
25


JavaScript绑定事件的三种方式:

1、在标签上绑定,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绑定事件</title>
</head>
<body>
<table border="1" style="width: 100px; height: 100px;"
    <tr onmouseover="f1(0)"; onmouseout="f2(0)">
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr onmouseover="f1(1)"; onmouseout="f2(1)">
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr onmouseover="f1(2)"; onmouseout="f2(2)">
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
</table>
</body>
<script type="text/javascript">
    function f1(n){
        var tag = document.getElementsByTagName('tr')[n];
        tag.style.backgroundColor = "red";
    }
    function f2(n){
        var tag = document.getElementsByTagName('tr')[n];
        tag.style.backgroundColor = "";
    }
</script>
</html>


2、在js中绑定事件,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
<title>绑定事件</title>
</head>
<body>
<table border="1" style="width: 100px; height: 100px;"
    <tr">
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr">
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr">
        <td>3</td>
        <td>3</td>
        <td>3</td>
</tr>
</table>
</body>
<script type="text/javascript">
    var tag = document.getElementsByTagName("tr");
    var len = tag.length;
    for(var i=0; i<len; i++){
        tag[i].onmouseover = function(){
        this.style.backgroundColor = "red";
        }
        tag[i].onmouseout = function(){
        this.style.backgroundColor = "";
        }
    }
</script>
</html>

这里有一个很重要的关键字this,谁调用函数this就指向谁











本文转自 曾哥最爱 51CTO博客,原文链接:http://blog.51cto.com/zengestudy/1918963,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
155个JavaScript基础问题(106-115)
155个JavaScript基础问题(106-115)
57 0
155个JavaScript基础问题(116-125)
155个JavaScript基础问题(116-125)
62 0
155个JavaScript基础问题(126-135)
155个JavaScript基础问题(126-135)
63 0
155个JavaScript基础问题(136-145)
155个JavaScript基础问题(136-145)
49 0
155个JavaScript基础问题(146-155)
155个JavaScript基础问题(146-155)
75 0
155个JavaScript基础问题(1-5)
155个JavaScript基础问题(1-5)
80 0
155个JavaScript基础问题(6-10)
155个JavaScript基础问题(6-10)
61 0
155个JavaScript基础问题(11-20)
155个JavaScript基础问题(11-20)
79 0
155个JavaScript基础问题(21-25)
155个JavaScript基础问题(21-25)
67 0
155个JavaScript基础问题(26-30)
155个JavaScript基础问题(26-30)
78 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript 语言在引擎级别的执行过程
立即下载
Javascript中的函数
立即下载
Javascript中的对象
立即下载