JavaScript（js）笔记

时间  2020-06-07
标签 javascript 笔记 栏目 JavaScript 繁體版
原文   原文链接

js注释

JavaScript注释与Java注释相同html

// 单行注释

/* 
    多行注释
*/

js五大基本类型：

  number（数值型）、string（字符串性）、boolean（布尔型）、undefined类型、null类型 number包括：数值类型、包含整型、浮点型、NaN和Infinity（无穷大）。java

关于数组的空间长度问题：

  如何获取数组的空间长度：     经过length属性获取数组的空间长度   数组的length详解：     java：只读属性      js：读写属性jquery

数组元素的默认值：

  java：正则表达式

      一、整数类型（byte、short、int、long）的基本类型变量的默认值为0。数组

      二、浮点型（float、double）的基本类型变量的默认值为0.0。浏览器

      三、字符型（char）的基本类型变量的默认为 “/u0000”。函数

      四、布尔性的基本类型变量的默认值为 false。spa

      五、引用类型的变量是默认值为 null(null就是空对象)。code

   js：undefinedregexp

JavaScript 输出

JavaScript 没有任何打印或者输出的函数。 JavaScript 能够经过不一样的方式来输出数据：   使用 **window.alert() **弹出警告框。   使用 **document.write() **方法将内容写到 HTML 文档中。   使用 **innerHTML 写入到 HTML 元素。   使用console.log() **写入到浏览器的控制台。

js数组排序：

  sort()： 函数按照字符串顺序对值进行升序排序。   数组.sort(function(a, b){return a - b});

//字符串数组（字母顺序对数组进行排序）
var arr_str = ["Banana", "Orange", "Apple", "Mango"];
var arr_str_sort = arr_str.sort();
document.write(arr_str_sort);

//整形数组
var arr = [9,5,1,2,7,6,4,3,0];
var arr_sort = arr.sort(function(a, b){return a - b});
console.log(arr_sort);

解决js代码放在标签前面或<head>内致使js代码无效的解决方案：

使用<script>无效的解决方案：

window.οnlοad = function() {
    //js代码
}

使用jquery无效的解决方案：

$(document).ready(function() {
    //js代码
})

假设法：

  一、定义一个变量，标记该变量的值为true。   二、推翻假设，把标记的值修改成false，而且跳出循环。   三、若是标记的值依旧为true，则证实为真；     若是标记的值修改成false，则证实为假

// 1.经过询问框得到一个正整数
var num = prompt("请输入一个正整数");
// a)假设num就是一个质数
var flag = true; // 设置标记的值为true
// 2.经过循环得到[2, num)之间全部的整数
for(var i = 2; i < num; i++) {
    // b)判断num是否能被i整除。
    if(num % i === 0) {
        // 此处已经证实num不是一个质数，那么推翻假设，修改标记的值
        flag = false;
        // 由于此处已经肯定num不是一个质数，因此后续循环不必进行，那么咱们须要跳出循环
        break;
    }
}
// c)价差flag标记的值，从而肯定num是不是一个质数
if(flag) { // flag == true
    document.write(num + "是一个质数");
} else { // flag == false
    document.write(num + "不是一个质数");
}

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件 描述
onload 窗体加载事件
onclick 鼠标单击事件
ondblclick 鼠标双击事件
onfocus 得到焦点事件
onblur 失去焦点事件
onchange 选项改变事件（一般用在下拉列表框）
onmousemove 当鼠标移动到某个事件源就会触发
onmouseover 当鼠标悬停到某个事件源就会触发
onmouseout 当鼠标离开某个事件源就会触发
onmousedown 当鼠标按下某个事件源就会触发
onmouseup 当鼠标释放某个事件源就会触发
onkeyup 键盘释放触发
onkeydown 键盘按下触发
onkeypress 键盘在按下和释放之间触发

条件语句

  • if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

  • if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其余代码

  • JavaScript三目运算 - 当条件为true 时执行代码，当条件为 false 时执行其余代码

  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

  • switch 语句 - 使用该语句来选择多个代码块之一来执行

经常使用的正则表达式及使用方法：

在 JavaScript 中，正则表达式一般用于两个字符串方法 : search() 和 replace()。

  search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。

  replace() 方法 用于在字符串中用一些字符替换另外一些字符，或替换一个与正则表达式匹配的子字符串。

    （详情参照：https://www.runoob.com/js/js-regexp.html）

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}

操做DOM元素的属性

innerHTML：改变DOM树的结构

innerText：不会改变，只会在元素里面添加文本信息

$("div1").innerHTML="<a href='#'>点击我</a>";
$("div2").innerText="<a href='#'>点击我</a>";

setAttribute(属性名,属性值);

getAttrribute(属性名);

removeAttribute(属性名);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img{
				width:200px;
				height:200px;
				border:1px solid red;
			}
		</style>
		<script>
			window.onload=function(){
                function $(id){
					return document.getElementById(id);
				}
                
				$("btn").onclick=function(){
					// 设置操做：将字符串../img/photo.jpg，赋值给img元素的src属性
					$("myImg").setAttribute("src","../img/photo.jpg");
				}
				$("btn2").onclick=function(){
					var imgPath=$("myImg").getAttribute("src");
					alert(imgPath);
				}
				$("btn3").onclick=function(){
					$("myImg").removeAttribute("src");
				}
			}
		</script>
	</head>
	<body>
		<img src=""  id="myImg"/><br />
		<input type="button" id="btn" value="显示图像" />
		<input type="button" id="btn2" value="获取图像路径" />
		<input type="button" id="btn3" value="删除图像路径" />
	</body>
</html>

节点操做

parentNode：访问子节点的父节点

children：访问父节点的子节点

建立和插入子节点

  createElement： 创建子节点

  insertBefore：插入子节点

removeChild：删除父节点的子节点

cloneNode：克隆子节点

全选、全否、反选案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选、全否、反选</title>
		<script>
			window.onload=function (){
				function $(id){
					return document.getElementById(id);
				}
				/**
				 * 1.定义变量hobbys：存储全部选择的爱好
				 * 2.遍历全部的复选框，取出复选框的值，追加到hobbys变量中
				 * 3.将hobbys变量的值，设置到文本框
				 * */
				// 获取全部的爱好
				var hobbyList =document.getElementsByName("hobby");
				var hobbys="";
				$("btn1").onclick=function(){
					for(var i=0;i<hobbyList.length;i++){
						hobbyList[i].checked=true;
						hobbys+=hobbyList[i].value+"-";
					}
					$("txtResult").value=hobbys;
				}
				// 全否
				$("btn2").onclick=function(){
					for(var i=0;i<hobbyList.length;i++){
						hobbyList[i].checked=false;
					}
					// 清空以前全选的数据
					hobbys="";
					$("txtResult").value="";
				}
				// 反选：获取全部的爱好集合，遍历每一个元素，进行取反操做(true->false, false->true)
				$("btn3").onclick=function(){
					hobbys="";
					for(var i=0;i<hobbyList.length;i++){
						//条件成立表示以前已经选中了，true改成false
						if(hobbyList[i].checked){
							hobbyList[i].checked=false;
						}else{
							hobbyList[i].checked=true;
							//一旦选中将复选框的值追加到hobbys变量
							hobbys+=hobbyList[i].value+"-";
						}
					}
					// 将复选框选中的值设置到文本框
					$("txtResult").value=hobbys;
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="football" />足球
		<input type="checkbox" name="hobby" value="basketball" />篮球
		<input type="checkbox" name="hobby" value="pingpong" />乒乓球
		<input type="checkbox" name="hobby" value="tennis" />网球
		<input type="checkbox" name="hobby" value="swimming" />游泳
		<br />
		<input type="button" id="btn1" value="全选" />
		<input type="button" id="btn2" value="全否" />
		<input type="button" id="btn3" value="反选" />
		<br />
		<input type="text" id="txtResult" size="50px"  placeholder="展现全部爱好"/>
	</body>
</html>

js中Window方法

一些其余方法：

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程