JavaScript

KINGmUDER

于 2019-12-29 14:07:56 发布

阅读量139

点赞数 1

本文链接：https://blog.csdn.net/weixin_44153058/article/details/103753267

版权

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内容

KINGmUDER

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript

jsJavaScript1.注释格式//单行注释内容/*多行注释*/2.数据类型1基本数据类型一共有五种,分别为数值类型number,字符串类型string,布尔类型boolean,undefined,nullvar n1 = 3.4;var n2 = 6.6;//number类型,不分整型或浮点型var str1 = "helloworld";var str2 = 'he...
复制链接

扫一扫