JavaScript
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
- 收藏
- 分享
- 文章举报
- JavaScript实现左侧菜单效果
- Java学习---JavaScript
- javascript 贪吃蛇实现代码
- redpwnctf-web-blueprint-javascript 原型链污染学习总结
- 一张图让你看懂JavaScript各类型的关系
- javascript中日期转换成时间戳
- 悟透JavaScript
- 加速编码的 JavaScript 库和工具
- javascript显示时钟
- Javascript在页面加载时的执行顺序
- javascript包装对象
- javaScript-对象
- javascript基础八(知识点类闭包)
- javascript 异步模块加载 简易实现
- JavaScript实现复制功能各浏览器支持情况实测
- JavaScript深度复制(deep clone)的实现方法
- [轉]9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架
- JavaScript:isPrototypeOf和hasOwnProperty
- JavaScript 无缝上下滚动加定高停顿效果
- [JavaScript]实现“查看选中部分的源代码”功能