标签：javascript基础
javascript 字符串
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法
常见功能：
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==‘1‘ true
!= 不等于
例如：
1!=2 true
=== 比较值和类型相等
1 === "1"
例如：
false 1 === 1 true
!=== 不等于
|| 或
&& 且
数组
JavaScript中的数组类似于python的列表
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"
定义函数：
<script>
function function_name(){
statement1;
statement2
}
</script>调用函数：
function_name()
示例：定义并调用函数：
<!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、循环时，循环元素是索引
a=[11,22,33,44]
for(var i in a){
console.log(a[i]);
}
11
22
33
44循环字典
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
age2、循环时，循环元素的下标，不支持字典
a=[11,22,33,44]
for(var i=0;i<a.length;i=i+1){
console.log(a[i]);
}
11
22
33
44JavaScript条件判断
if(条件){
}else if(条件){
}else if(条件){
}else{
}
JavaScript DOM操作：
1、找到标签
a、直接找标签
document.getElementById(‘id‘)：通过id获取单个元素 document.getElementByTagName(‘div‘)：通过tag获取多个元素 document.getElementByClassName(‘cl‘)：通过class获取多个元素
b、间接找标签
parentElement //父节点标签元素 children //所有字标签 firstElementChild //第一个子标签元素 lastElementChild //最后一个子标签元素 nextElementSibling //下一个兄弟标签元素 previousElementSibling //上一个兄弟标签元素
2、操作标签
获取标签中的文本内容
a、
标签.innerText
对标签内部文本重新赋值
标签.innerText=""
<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、
classname tag.className = "" 直接整体操作 tag.classList.add(“样式名”) 添加样式 tag.classList.remove(“样式名”) 删除样式
实例：全选、反选、取消
<!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>
本文出自 “zengestudy” 博客，请务必保留此出处http://zengestudy.blog.51cto.com/1702365/1918963
标签：javascript基础
原文地址：http://zengestudy.blog.51cto.com/1702365/1918963
