您的位置：首页 > Web前端 > JavaScript

JavaScript

2020-02-03 07:55 706 查看

jsJavaScript

1.注释格式

//单行注释内容

/*多行注释*/

2.数据类型

1基本数据类型

一共有五种,分别为数值类型number,字符串类型string,布尔类型boolean,undefined,null

var n1 = 3.4;
var n2 = 6.6;//number类型,不分整型或浮点型
var str1 = "helloworld";
var str2 = 'helloworld';//string类型,单引号,双引号均可
var flag = false;
var flag2 = true;
var x;//undefined类型的值只有一个, 就是undefined。当声明了变量没有为变量赋值时，变量的值则为undefined。

2.复杂数据类型

​ JS的复杂数据类型主要指对象需要注意的是，在JS中，数组、函数也属于对象

3.运算符

算术运算符: +，-，*，/，%，++，–

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ==，!=，>，>=，<，<=

位运算符: & ， |

逻辑运算符: && ，||

前置逻辑运算符: ! (not)

三元运算符: 表达式 ? 表达式 : 表达式

4.JS语句

1.if分支结构

var score = prompt("请输入您的成绩:");
score = parseFloat(score);//将传入的内容转成浮点型的数值
if (score >= 80 && score <= 100) {
alert("优秀");//alert()函数是将内容以提示框的形式输出
}else if(score >= 60 && score < 80){
alert("良好");
}else if(score >= 0 && score <60 ){
alert("不及格");
}else{
alert("您输入的成绩不合法");
}

2.switch语句

var n1 = prompt("请输入数值1:") - 0;
var opt = prompt("请输入运算符:");
var n2 = prompt("请输入数值2") - 0;
switch (opt) {
case "+":
alert("两个数的和为:" + (n1+n2));
break;
case "*":
alert("两个数的乘积为:"+ (n1*n2));
break;
case "-":
alert("两个数的差为:"+ (n1-n2));
break;
case "/":
alert("两个数的商为:"+ (n1/n2));
default:
alert("您输入的运算符不合法!1")
}

3.for循环语句

var arr = [123, "abc", false, new Object() ];
for( var i=0; i<arr.length; i++){
console.log( arr[i] );//console.log是将内容打印到控制台,在浏览器中按f12即可查看
}

4while循环

var sum = 0;
var i =1;
while( i > 0 && i <= 100){
sum+=i;
i++;
}
console.log(sum);

5.JS数组

Array对象用于在单个的变量中存储多个值.

1通过Array构造函数创建数组

var arr1 = new Array();

​ 创建时并赋值

var arr2 = new Array(88,"hello",true,100);

2.通过数组直接量创建数组

var arr1 = [];

​ 声明一个指定初始的数组

var arr2 = [88,"hello",true,100];

3.获取数组的长度的方法

arr.length

6.JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function。

1.声明函数的语法

function getSum(a,b){
return a*b;
}

2.调用函数的方法

getSum(1,2);

7.DOM操作

1.案例:电灯开关

<script>
/** 练习：点击按钮，开灯或关灯 */
var flag = false; //false是默认状态,表示关灯
function changeImg(){
//1.获取id为img1的元素,返回表示当前元素的js对象
var img1 = document.getElementById("img1");
if( flag ){ //true表示当前为开灯
img1.src = "imgs/off.gif";
flag = false;
}else{ //false表示当前为关灯
//2.通过img的src属性修改图片
img1.src = "imgs/on.gif";
flag = true;
}
}
</script>
</head>
<body>
<input type="button" value="开/关灯"
onclick="changeImg()" /> <br/><br/>
<img id="img1" src="imgs/off.gif"/>
</body>

2.案例:增删改元素

<script type="text/javascript">
/* 1、添加元素：创建一个div添加到body中 */
function addNode(){
//1.创建一个div元素,返回表示div元素的js对象
var newDiv = document.createElement("div");
//>>为div设置内容(innerHTML)
newDiv.innerHTML = "我是一个新来的div~";
//2.获取文档中的body元素
//var body = document.getElementsByTagName("body")[0];
var body = document.body;
//3.通过父元素添加子元素
body.appendChild( newDiv );
}
/* 2、删除元素：删除id为div_2的元素 */
function deleteNode(){
//1.获取将要被删除的元素(div_2)
var div2 = document.getElementById("div_2");
//2.获取被删元素的父元素(body)
var parent = div2.parentNode;
//3.通过父元素删除子元素
parent.removeChild( div2 );
}

/* 3、将div_3的内容更新为当前时间
new Date().toLocaleString(); */
function updateNode(){
//1.获取id为div_3的元素
var div3 = document.getElementById("div_3");
//2.获取表示当前时间的字符串
var dateStr = new Date().toLocaleString();
//3.将字符串设置给div的内容
div3.innerHTML = dateStr;
}
</script>
</head>
<body>
<input type="button" onclick="addNode()"
value="创建一个div添加到body中"/>
<input type="button" onclick="deleteNode()"
value="删除id为div_2的元素"/>
<input type="button" onclick="updateNode()"
value="将div_3的内容更新为当前时间"/><hr/>
<div id="div_1">
div_1
</div>
<div id="div_2">
div_2
</div>
<div id="div_3">
div_3
</div>
<div id="div_4">
div_4
</div>
</body>

3.案例:网页换肤

<script type="text/javascript">
/** 练习1：执行下面的函数，切换字体大小 */
function resize( selector ){ //接收的是选择器的名字
//1.获取id为newstext的元素
var div = document.getElementById("newstext");
//2.为div设置class值
div.className = selector;
}

/** 练习2：执行下面的函数，为页面切换不同的皮肤 */
var arr = ["css/red.css", "css/green.css", "css/blue.css", "css/pink.css"];
var index = 0;
function changeStyle(){
//1.获取id为link的元素(link标签)
var link = document.getElementById("link");
link.href = arr[index];
index++;
if( index == arr.length ){
index = 0;
}
}
</script>
</head>
<body>
<h2>kingkiller</h2>
<div id="change-font" >
<!-- javascript:void(0): 用于阻止超链接跳转 -->
<a href="javascript:void(0)"
onclick="resize('super-min')">超小字体</a>
<a href="javascript:void(0)"
onclick="resize('min')">小字体</a>
<a href="javascript:void(0)"
onclick="resize('middle')">中字体</a>
<a href="javascript:void(0)"
onclick="resize('max')">大字体</a>
<a href="javascript:void(0)"
onclick="resize('super-max')">超大字体</a>
<a href="javascript:void(0)"
onclick="changeStyle()">换肤</a>
</div>
<hr/>

<div id="newstext" class="middle">
...
</div>
</body>

8.总结:

1.JS获取元素

document.getElementById(id值):通过元素的id值,获取一个元素.返回的是表示该元素的js对象

document.getElementsByTagName(元素名):通过元素名获取当前文档中所有指定名称的元素,返回的是一个数组,其中包含了所有指定名称的元素

documen.body:获取当前文档中的body元素

ele.parentNode:获取当前元素的父元素.obj表示当前元素

2.JS增删改元素

document.createElement(元素名):根据元素名称创建指定名称的元素,返回的是表示新创建元素的js对象

parent.appendChild(child):通过父元素添加子元素,其中parent表示父元素,child表示子元素

parent.removeChild(child):通过父元素删除子元素,其中parent表示父元素,child表示子元素

ele.innerHTML:获取当前元素的html内容(从开始标签到结束标签之间的所有内容)

​ 或者还可以设置当前元素的html内容

  • 点赞 1
  • 收藏
  • 分享
  • 文章举报
站内首发文章 KINGmUDER 发布了7 篇原创文章 · 获赞 4 · 访问量 287 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航