JavaScript 学习

作者: print("") 分类: WEB前端 发布时间: 2018-05-10 20:31


今JavaScript   

独立的语言、浏览器具有js解释器

1.存在于HTMl中在head中

2.存在于js文件中 <script src=’js文件路径’></script>

PS:JS代码需要放置在<body>标签内部的最下方

注释:

单行//
多行 /* */

变量:

python : name=’liang’
JavaScript: name= ‘liang’ # 全局变量
var name =’eriv’ # 局部变量写js代码

    - html 文件中编写
    – 临时. 浏览器的终端 console基本数据类型:数字 a=18;字符串 操Javascript 字符串的常见操作

obj.length 长度
obj.trim() 移除空白
obj.trimLeft() 移除左边空白
obj.trimRight() 移除右边空白
obj.charAt(n) 返回字符串的第n个字符
obj.concat(value,…) 拼接字符串
obj.indexOf(substring,start) 子系列位置
obj.lastIndexOf(subtring,start) 子系列位置
obj.substring(from,to) 根据索引获取子序列
obj.slice(start,end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimter,limit) 分割
obj.search(regexp) 从头匹配、返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索、如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp,replacement) 替换,正则中有g则替换所有、否则只替换第一个匹配项,

$数字:

匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$’:位于匹配子串右侧的文本
$$:直接量$符号Javascript数组操作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() 对数组元素进行排序布

尔类型小写 true false

== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或 &&

for循

#第一种循环

a=[11,22,33,44]
for(var item in a){
console.log(item);
}
a={‘k1′:’v1′,’k2′:’v2’}
for(var item in a){
console.log(item);
}

#第二种for 循环

for(var i=0;i<10;i++){
}
a=[11,22,33,44]
for(var i=0;i<a.length;i+2){
}#不支持字典循环

条件语句

if(条件){
}
else if(条件){
}
else if(条件){
}
else{
}
if(1==1){
}
if(1!=1){
}
if(1===1){
}
if(1!===1){
}

== 值相等
=== 值和类型都相等
&& and
|| or
if(1==1 && 2==2)
if(1==1 || 2==2)函数:function 函数名(a,b,c){
}

函数名(1,2,3)

定时器:

setInterval(‘执行的代码’,间隔时间)

函数

<script>
function func(){
// 根据ID获取指定标签的内容
var tag=document.getElementById(‘i1’);
// 获取标签内部的内容
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()’,500)

小例子实现字体动态

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
</head>
<body>
<div id=”i1″>我真的很讨厌你啦!</div>
<script>
function func(){
// 根据ID获取指定标签的内容
var tag=document.getElementById(‘i1’);
// 获取标签内部的内容
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()’,500)
</script>
</body>
</html>

DOM 学习

1.找到标签获取单个元素 document.getElementById(‘i1’)
通过name属性获取标签集合 document.getElementsByname(‘i1’)
获取多个元素(列表) document.getElementsByTagName(‘div’)
获取多个元素(列表) document.getElementsByclassName(‘c1’)直接找document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合间接找document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素

小例子三层次的页面

<!DOCTYPE html>

<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
.head{
display: none;
}
.c1{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body style=”margin: 0 auto “>
<div>
<input type=”button” value=”添加” onclick=”showmode();”/>
<table>
<thead>
<tr>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>90</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>190</td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>193</td>
</tr>
</tbody>
</table>
</div>
<!– 遮罩层开始 –>
<div id=”i1″ class=”c1 head”></div>
<!– 遮罩层结束 –>
<!– 弹出框开始 –>
<div id=”i2″ class=”c2 head”>
<p><input type=”text” /></p>
<p><input type=”text” /></p>
<p>
<input type=”button” value=”取消” onclick=”showremove();”>
<input type=”button” value=”确定”>
</p>
</div>
<!– 弹出框结束 –>
<script>
function showmode() {
document.getElementById(‘i1’).classList.remove(‘head’);
document.getElementById(‘i2’).classList.remove(‘head’);
}
function showremove() {
document.getElementById(‘i1’).classList.add(‘head’);
document.getElementById(‘i2’).classList.add(‘head’);
}
</script>
</body>
</html>

小例子升级

<!DOCTYPE html>

<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
.head{
display: none;
}
.c1{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body style=”margin: 0 auto “>
<div>
<input type=”button” value=”添加” onclick=”showmode();”/>
<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>1.1.1.1</td>
<td>90</td>
</tr>
<tr>
<td><input type=”checkbox” id=”test” /></td>
<td>1.1.1.2</td>
<td>190</td>
</tr>
<tr>
<td><input type=”checkbox” /></td>
<td>1.1.1.3</td>
<td>193</td>
</tr>
</tbody>
</table>
</div>
<!– 遮罩层开始 –>
<div id=”i1″ class=”c1 head”></div>
<!– 遮罩层结束 –>
<!– 弹出框开始 –>
<div id=”i2″ class=”c2 head”>
<p><input type=”text” /></p>
<p><input type=”text” /></p>
<p>
<input type=”button” value=”取消” onclick=”showremove();”>
<input type=”button” value=”确定”>
</p>
</div>
<!– 弹出框结束 –>
<script>
function showmode() {
document.getElementById(‘i1’).classList.remove(‘head’);
document.getElementById(‘i2’).classList.remove(‘head’);
}
function showremove() {
document.getElementById(‘i1’).classList.add(‘head’);
document.getElementById(‘i2’).classList.add(‘head’);
}
function chooseAll() {
var tbody=document.getElementById(‘tb’);
//获取所以的tr
var tr_list=tbody.children;
for(var i=0;i<tr_list.length;i++){
//循环所以的tr
var current_tr=tr_list[i];
var checkbox=current_tr.children[0].children[0];
checkbox.checked=true;
}
}
function cancleAll() {
var tbody=document.getElementById(‘tb’);
//获取所以的tr
var tr_list=tbody.children;
for(var i=0;i<tr_list.length;i++){
//循环所以的tr
var current_tr=tr_list[i];
var checkbox=current_tr.children[0].children[0];
checkbox.checked=false;
}
}
function ReverseAll() {
var tbody=document.getElementById(‘tb’);
//获取所以的tr
var tr_list=tbody.children;
for(var i=0;i<tr_list.length;i++){
//循环所以的tr
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>
</body>
</html>

后台管理小例子

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: black;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style=”height: 48px”></div>
<div style=”width: 300px”>
<div class=”item”>
<div id=”i1″ class=”header” onclick=”changMeu(‘i1′);”>菜单1</div>
<div class=”content “>
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class=”item”>
<div id=’i2’ class=”header” onclick=”changMeu(‘i2′);”>菜单2</div>
<div class=”content hide”>
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class=”item”>
<div id=’i3’ class=”header” onclick=”changMeu(‘i3′);”>菜单3</div>
<div class=”content hide”>
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class=”item”>
<div id=’i4’ class=”header” onclick=”changMeu(‘i4’);”>菜单4</div>
<div class=”content hide”>
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div>
</div>
<script>
function changMeu(nid) {
var current_header=document.getElementById(nid);
// console.log(current_header);
var item_list=current_header.parentElement.parentElement.children;
for(var i=0;i<item_list.length;i++){
var current_item=item_list[i];
var current_item_child=current_item.children[1].classList.add(‘hide’)
}
current_header.nextElementSibling.classList.remove(‘hide’);
}
</script>
</body>
</html>

CATEGORY : WEB前端 JS

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

1
说点什么

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
梁 凯强 Recent comment authors
  Subscribe  
最新 最旧 得票最多
提醒