JavaScript学习笔记（一）

wsuo

发布于 2020-07-31 15:13:02

3.2K0

发布于 2020-07-31 15:13:02

文章被收录于专栏：技术进阶之路技术进阶之路

wdm，这个寒假越过越长… 寒假在家学习JavaScript的相关知识，写博客作为笔记我是以清华大学出版社的《JavaScript从入门到项目实践》作为学习用书的

一、前几章唠唠叨叨的是最简单的一些语法

毕竟这是一本入门书籍，从最最基础的讲起也不足为奇，但是对于我来说，我已经接触过很多种语言了，而且在校也跟着选课学过，所以大部分的都跳过了，前五章的内容基本就翻一下回顾一下看看有什么值得借鉴的，后来发现，几乎没有，那就pass。

二、第六章——JavaScript开发中表格和表单技术

表单对于前端来说太重要了，所以我打算仔细回顾一下，当做复习，顺便看看有什么是我初学的时候遗漏的。

1、表单

input可选type：submit，reset，一个是提交另一个是重置表单

一般都是form嵌套input

<form method="POST" name="myForm1" action="addInfo.aspx">
  <p>
    <label for="name">请输入姓名: </label>
    <input type="text" name="name" id="name" class="txt" value="姓名" onmouseover="this.focus()" onfocus="this.select()">
  </p>
  <p>
    <label for="passwd">请输入密码: </label>
    <input type="password" name="passwd" id="passwd" class="txt">
  </p>
  <p>
    <input type="submit" name="btnSubmit" id="btnSubmit" class="btn" value="提交">
    <input type="reset" name="btnReset" id="btnReset" class="btn" value="重置">
  </p>
  </form>

上述功能:鼠标移动至姓名栏自动全部选中 label的作用：for属性可以绑定一个input，然后点击label的文字即相当于选中需要注意的是：for属性的值只能是要关联表单元素的id值

2、设置单选按钮

单选按钮用

<input type="radio">表示

但是对于只能选择一个的时候,比如性别,可以设置name属性的值一样他有一个属性checked,是布尔值,如果一组中有一个是true,那么其他的就默认都为false 插播一条快捷键: 由于我一直用的是intellIj公司的IDEA,突然转到vscode不习惯它的快捷键,连自动格式化代码都不知道是啥子

vs code格式化代码的快捷键如下

On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu Ctrl + Shift + I

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <script>
    function getResult() {
      var objRadio = document.form1.jobView;
      for (var i = 0; i < objRadio.length; i++) {
        if (objRadio[i].checked) {
          myView = objRadio[i].value;
          alert("你的评价是: " + myView);
        }
      }
    }
  </script>
</head>

<body>
  <form id="from1" method="POST" action="regInfo.aspx" name="form1">
    <p>
      <input type="radio" name="jobView" id="most" value="非常满意">
      <label for="most">非常满意</label>
    </p>
    <p>
      <input type="radio" name="jobView" id="more" value="比较满意">
      <label for="more">比较满意</label>
    </p>
    <p>
      <input type="radio" name="jobView" id="not" value="不满意">
      <label for="not">不满意</label>
    </p>
    <p>
      <input type="radio" name="jobView" id="badly" value="非常不满意">
      <label for="badly">非常不满意</label>
    </p>
    <p>
      <input type="button" name="btn" value="查看评价结果" onclick="getResult();">
    </p>
  </form>
</body>

这样通过给多个check的input的name的属性赋值一样的,就实现了一次只能选择一个的效果

3、设置复选框

复选框是

<input type="checkbox">

他和单选框差不多,只是它可以同时多选注意的是：我们常常在下面添加全选和全不选和反选等按钮

<script>
    function checkAll(params) {
      var checkBox = document.form1.getFun;
      for (let i = 0; i < checkBox.length; i++) {
        checkBox[i].checked = true;
      }
    }

    function noCheck(params) {
      var checkBox = document.form1.getFun;
      for (let i = 0; i < checkBox.length; i++) {
        checkBox[i].checked = false;
      }
    }

    function switchCheck(params) {
      var checkBox = document.form1.getFun;
      for (let i = 0; i < checkBox.length; i++) {
        if (checkBox[i].checked == true) {
          checkBox[i].checked = false;
        } else {
          checkBox[i].checked = true;
        }
      }
    }
  </script>
</head>

<body>
  <form id="form1" name="form1" method="POST" action="">
    <p>
      <input type="checkbox" name="getFun" id="TV" value="TV">
      <label for="TV">电视</label>
    </p>
    <p>
      <input type="checkbox" name="getFun" id="internet" value="internet">
      <label for="internet">网络</label>
    </p>
    <p>
      <input type="checkbox" name="getFun" id="newspaper" value="newspaper">
      <label for="newspaper">报纸</label>
    </p>
    <p>
      <input type="checkbox" name="getFun" id="radio" value="radio">
      <label for="radio">电台</label>
    </p>
    <p>
      <input type="checkbox" name="getFun" id="others" value="others">
      <label for="others">其他</label>
    </p>
    <p>
    </p>
    <input type="button" value="全选" onclick="checkAll();">
    <input type="button" value="全不选" onclick="noCheck();">
    <input type="button" value="反选" onclick="switchCheck();">
  </form>
</body>

4、设置下拉菜单

该表单必须由两个标签组成，即select和option

select表示下拉菜单 option表示菜单中的选项

常见的属性

value：指定下拉菜单选项的value值 type：指定下拉菜单的类型是单选还是多选 text：指定下拉菜单选项的文本值 select：声明是否被选中 options：选项数组

a、单选下拉菜单

例子

<style>
    form {
      padding: 0px;
      margin: 0px;
      font: 14px Arial;
    }
  </style>
  <script>
    function checkSingle(params) {
      var form = document.forms["form1"];
      var selectBox = form.selectBox;
      var iChoice = selectBox.selectedIndex;
      alert("您选中了" + selectBox.options[iChoice].text);
    }
  </script>
</head>
<body>
  <form id="form1" name="form1" method="POST">
    <label for="selectBox">请选择您的星座</label>
    <p>
      <select id="selectBox" name="selectBox">
        <option value="Aries" selected="selected">白羊座</option>
        <option value="Taurus" selected="selected">金牛座</option>
        <option value="Gemini" selected="selected">双子座</option>
        <option value="Leo" selected="selected">狮子座</option>
        <option value="Virgo" selected="selected">处女座</option>
      </select>
    </p>
    <p>
      <input type="button" onclick="checkSingle();" value="查看结果">
    </p>
  </form>
</body>

b、多选下拉菜单

几乎不怎么用，这里简单介绍下

function checkMultiple(params) {
      var form = document.forms["form2"];
      var selectBox = form.selectBox;
      var aChoice = new Array();
      //遍历整个下拉菜单
      for (var i = 0; i < selectBox.options.length; i++) {
        if (selectBox.options[i].selected) {
          aChoice.push(selectBox.options[i].text);//压入到数组中
          alert("您选了" + aChoice.join());//输出结果
        }
      }
    }

下面是 第七章——JavaScript表达式与运算符 这部分和其他语言几乎一模一样，就是加减乘除，所以直接跳过。还有 第八章——JavaScript程序控制语句 也直接跳过，就是while、if、switch什么的。

三、JavaScript对象和数组

前面很多基础，跳过。

1、for in 循环语句

相当于java的for each循环

完。

2、with 语句

想一个场景，我们调用一个对象的属性时要这样：

person.name person.age person.sex

无形之中写了很多遍person，有了with之后就可以简化了

with (person) {
	alert(name + age + sex);
}

3、认识对象序列化

使用JSON.stringify()可以序列化对象使用JSON.parse()可以反序列化

JSON：JavaScript Object Notation

是基于JavaScript的一种轻量级的数据交换格式用于与服务器进行数据交换和xml类似

了解一下序列化

<script>
    var str = {"name":"个人博客网址", "site":"https://wsuo.github.io"};
    str_pretty1 = JSON.stringify(str, null, 4);
    document.write("使用4个缩进符");
    document.write("<br>");
    document.write("<pre>" + str_pretty1 +"</pre>")
  </script>

运行一下是酱紫的：

反序列化同理，使用parse();

四、文档对象和对象模型

浏览器载入HTML之后,它就会变成document对象,它使得我们可以从js中对HTML页面中的所有元素进行访问,document对象是window对象的一部分,可以通过window.document访问。

1. document常用方法

wirte()：向页面中写内容
createElement()：动态添加HTML标签：比如添加一个文本框

<script>
    function addText() {
      var text = document.createElement("input");
      text.type="text";
      text.name="text";
      text.value="动态添加文本框";
      document.fm1.appendChild(text);
    }
  </script>

getElementById()：可以获取文本框并修改内容
addEventListener()：向文档添加事件

//添加点击事件
 document.addEventListener("click", myFunction);

2. 使用文档对象

//获取标题
document.write(document.title);

换标题

function title(params) {
        n++;
        if (n==3) {
          n=1;
        } else if (n==2) {
          document.title='魅力四射';
        } else if (n==1) {
          document.title='无人可挡';
        }
        setTimeout("title()", 1000);
      }

展示文档信息：

document.domain
document.readyState
document.cookie

颜色属性:

alinkColor：指页面中点击超链接的颜色

document.alinkColor="colorValue";
//或者加在body的onload属性中
<body onload="document.alinkColor='Red';">

bgColor：指页面的背景颜色

var colorStr = document.bgColor;

fgColor：指页面的前景色，即文档的文字颜色

var fgColorObj = document.fgColor;

linkColor：设置未访问链接的颜色

var colorVal = document.linkColor;	//获取当前文档中链接的颜色
document.linkColor = "colorValue";	//设置当前文档链接的颜色

vlinkColor：设置已访问链接的颜色

综合应用

<script language="JavaScript" type="text/javascript">
//设置文档的颜色显示
function SetColor()
{
  document.bgColor="yellow";
  document.fgColor="green";
  document.linkColor="red";
  document.alinkColor="blue";
  document.vlinkColor="purple";
}
//改变文档的背景色为海蓝色
function ChangeColorOver()
{
  document.bgColor="navy";
  return;
}
//改变文档的背景色为黄色
function ChangeColorOut()
{
  document.bgColor="yellow";
  return;
}
//-->
</script>

1. 输出数据

在文档中输出数据 document.write() document.writeln()
在新窗口中输出数据使用 document.open()与document.close()方法可以在打开的窗口中输入内容,一个是打开一个是关闭.

<script>
function createDoc(){
	var w=window.open();
	w.document.open();
	w.document.write("<h1>Hello JavaScript!</h1>");
	w.document.close();
}
</script>

3. DOM

DOM将整个HTML页面划分成一个树,都是由节点组成的，那么开发者就可以使用DOM方便的对HTML的节点进行一些操作，比如删除或者添加操作。

3. 1 DOM的简单应用

<script type="text/javascript">
function ChangeBackgroundColor()
{
	document.body.bgColor="green";
}
</script>

使用DOM改变body标签内的颜色

3.2 基本的DOM用法

直接引用节点 getElementById（） getElementByTagName（）

<script>
      function start() {
           //1. 获得所有的body元素列表（此处只有一个）
           myDocumentElements=document.getElementsByTagName("body");
           
           //2. body元素是这个列表的第一个元素
           myBody=myDocumentElements.item(0);
           
              //3. 获得body的子元素中所有的p元素
           myBodyElements=myBody.getElementsByTagName("p");
           
              // 4. 获得是这个列表中的第二个单元元素
           myP=myBodyElements.item(1);
       }   
</script>

间接引用节点

element.parentNode：引用父节点 element.childNodes：引用子节点

获取节点信息
- nodeName //获取节点名称
- nodeType
- nodeValue
- hasChildNodes
- tagName
- getAttribute(attributeName)
- setAttribute(attributeName, attributeValue)
文档层次结构相关
- createElement() //创建元素节点
- createTextNode //创建文本节点
- appendChild(childElement) //添加子节点

<script type="text/javascript">
	 function createMessage() {
		 var oP = document.createElement("p");
		 var oText = document.createTextNode("HelloJavaScript!");
		 oP.appendChild(oText);
		 document.body.appendChild(oP);
	 }
</script>

创建节点：createElement（）

<ul id="myList"><li>咖啡</li><li>红茶</li></ul>
<p id="demo">单击按钮将项目添加到列表中，从而创建一个节点</p>
<button onclick="myFunction()">创建节点</button>
<script>
function myFunction(){
	var node=document.createElement("LI");
	var textnode=document.createTextNode("开水");
	node.appendChild(textnode);
	document.getElementById("myList").appendChild(node);
}
</script>

插入节点：insertBefore（）

<body>
<ul id="myList1"><li>咖啡</li><li>红茶</li></ul>
<ul id="myList2"><li>开水</li><li>牛奶</li></ul>
<p id="demo">单击该按钮将一个项目从一个列表移动到另一个列表，从而完成插入节点的操作</p>
<button onclick="myFunction()">插入节点</button>
<script>
function myFunction(){
	var node=document.getElementById("myList2").lastChild;
	var list=document.getElementById("myList1");
	list.insertBefore(node,list.childNodes[0]);
}
</script>
</body>

删除节点：removeChild（）

<body>
<ul id="myList"><li>咖啡</li><li>红茶</li><li>牛奶</li></ul>
<p id="demo">单击按钮移除列表的第一项，从而完成删除节点操作</p>
<button onclick="myFunction()">删除节点</button>
<script>
function myFunction(){
	var list=document.getElementById("myList");
	list.removeChild(list.childNodes[0]);
}
</script>
</body>

复制节点：cloneNode（）

<body>
<ul id="myList1"><li>咖啡</li><li>红茶</li></ul>
<ul id="myList2"><li>开水</li><li>牛奶</li></ul>
<p id="demo">单击按钮将项目从一个列表复制到另一个列表中</p>
<button onclick="myFunction()">复制节点</button>
<script>
function myFunction(){
	var itm=document.getElementById("myList2").lastChild;
	var cln=itm.cloneNode(true);
	document.getElementById("myList1").appendChild(cln);
}
</script>	
</body>

如果cloneNode（true），那么就表示将递归的克隆该节点下的所有子节点，如果是false则仅克隆该节点。

替换节点：replaceChild（）

function myFunction(){
	var textnode=document.createTextNode("开水");//创建节点
	var item=document.getElementById("myList").childNodes[0];//获取li数组
	item.replaceChild(textnode,item.childNodes[0]);//将li数组中第一个元素添加
}

replaceChild（newNode，oldNode）；

本例中仅仅将文本节点替换

4.使用 innerHTML属性

innerHTML可以获取节点内的内容，即原生的HTML代码还可以读对里面的内容进行设置

<script language="javascript">
function myDOMInnerHTML(){
	var myDiv=document.getElementById("myTest");
	alert(myDiv.innerHTML);      //直接显示innerHTML的内容
	//修改innerHTML，可直接添加代码
	myDiv.innerHTML="<img src='02.jpg' title='美丽风光'>";
}
</script>
</head>
<body onload="myDOMInnerHTML()">
<div id="myTest">
<span>图库</span>
<p>这是一行用于测试的文字</p>
</div>
</body>

5. DOM与CSS

改变css样式：

function changeStyle()
{
	document.getElementById("p2").style.color="blue";
	document.getElementById("p2").style.fontFamily="Arial";
	document.getElementById("p2").style.fontSize="larger";
}

通过getElementById获取节点，然后style就可以使用它的属性了

使用className属性：

<script language="javascript">
	function changeStyleClassName(){
		var oMy=document.getElementsByTagName("ul")[0];
		oMy.className="myUL2";
	}
	</script>
</head>
<body>
<ul class="myUL1">
	<li>旧时王谢堂前燕</li>
	<li>飞入寻常百姓家</li>
</ul>
</br>
<input type="button" onclick="changeStyleClassName();" value="修改CSS样式" />
</body>

五、案例

制作树形导航菜单

<!DOCTYPE html>
<html >
<head>
<title>制作树形导航菜单</title>
<style type="text/css">
body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;}
ul,li,{margin:0;padding:0;}
ul{list-style:none;}
#menu_zzjs_net{margin:10px;width:200px;overflow:hidden;}
#menu_zzjs_net li{line-height:25px;}
#menu_zzjs_net .rem{padding-left:16px;}
#menu_zzjs_net .add{background:url(/img/tree_20110125zzjs_net.gif) -4px -31px no-repeat;}
#menu_zzjs_net .ren{background:url(/img/tree_20110125zzjs_net.gif) -4px -7px no-repeat;}
#menu_zzjs_net li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());}
#menu_zzjs_net li input{vertical-align:middle;margin-left:5px;}
#menu_zzjs_net .two{padding-left:20px;display:none;}
</style>

</head>
<body>
<ul id="menu_zzjs_net">
 <li>
  <label><a href="javascript:;">果蔬配送中心</a></label>
  <ul class="two">
   <li>
    <label><a href="javascript:;">水果分类</a></label>
    <ul class="two">
     <li>
      <label><input type="checkbox" value="123456"><a href="javascript:;">苹果类</a></label>
      <ul class="two">
       <li><label><input type="checkbox" value="123456"><a href="javascript:;">青苹果</a></label></li>
       <li>
        <label><input type="checkbox" value="123456"><a href="javascript:;">红苹果</a></label>
        <ul class="two">
         <li>
          <label><input type="checkbox" value="123456"><a href="javascript:;">红富士苹果</a></label>
          <ul class="two">
           <li><label><input type="checkbox" value="123456"><a href="javascript:;">水晶红富士苹果</a></label></li>
           <li><label><input type="checkbox" value="123456"><a href="javascript:;">优质红富士苹果</a></label></li>
          </ul>
         </li>
         <li><label><input type="checkbox" value="123456"><a href="javascript:;">冰糖心苹果</a></label></li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
   </li>
   <li>
    <label><a href="javascript:;">蔬菜分类</a></label>
    <ul class="two">
     <li><label><input type="checkbox" value="123456"><a href="javascript:;">西红柿</a></label></li>
     <li><label><input type="checkbox" value="123456"><a href="javascript:;">西兰花</a></label></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>
<script type="text/javascript" >
 function addEvent(el,name,fn){//绑定事件
  if(el.addEventListener) return el.addEventListener(name,fn,false);
  return el.attachEvent('on'+name,fn);
 }
 function nextnode(node){//寻找下一个兄弟并剔除空的文本节点
  if(!node)return ;
  if(node.nodeType == 1)
   return node;
  if(node.nextSibling)
   return nextnode(node.nextSibling);
 }
 function prevnode(node){//寻找上一个兄弟并剔除空的文本节点
  if(!node)return ;
  if(node.nodeType == 1)
   return node;
  if(node.previousSibling)
   return prevnode(node.previousSibling);
 }
 function parcheck(self,checked){//递归寻找父亲元素，并找到input元素进行操作
  var par =  prevnode(self.parentNode.parentNode.parentNode.previousSibling),parspar;
  if(par&&par.getElementsByTagName('input')[0]){
   par.getElementsByTagName('input')[0].checked = checked;
   parcheck(par.getElementsByTagName('input')[0],sibcheck(par.getElementsByTagName('input')[0]));
  }
 }
 function sibcheck(self){//判断兄弟节点是否已经全部选中
  var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0;
  for(var i=0;i<sbi.length;i++){
   if(sbi[i].nodeType != 1)//由于孩子结点中包括空的文本节点，所以这里累计长度的时候也要算上去
    n++;
   else if(sbi[i].getElementsByTagName('input')[0].checked)
    n++;
  }
  return n==sbi.length?true:false;
 }
 addEvent(document.getElementById('menu_zzjs_net'),'click',function(e){//绑定input点击事件，使用menu_zzjs_net根元素代理
  e = e||window.event;
  var target = e.target||e.srcElement;
  var tp = nextnode(target.parentNode.nextSibling);
  switch(target.nodeName){
   case 'A'://点击A标签展开和收缩树形目录，并改变其样式会选中checkbox
    if(tp&&tp.nodeName == 'UL'){
     if(tp.style.display != 'block' ){
      tp.style.display = 'block';
      prevnode(target.parentNode.previousSibling).className = 'ren'
     }else{
      tp.style.display = 'none';
      prevnode(target.parentNode.previousSibling).className = 'add'
     }
    }
    break;
   case 'SPAN'://点击图标只展开或者收缩
    var ap = nextnode(nextnode(target.nextSibling).nextSibling);
    if(ap.style.display != 'block' ){
     ap.style.display = 'block';
     target.className = 'ren'
    }else{
     ap.style.display = 'none';
     target.className = 'add'
    }
    break;
   case 'INPUT'://点击checkbox，父亲元素选中，则孩子节点中的checkbox也同时选中，孩子结点取消父元素随之取消
    if(target.checked){
     if(tp){
      var checkbox = tp.getElementsByTagName('input');
      for(var i=0;i<checkbox.length;i++)
       checkbox[i].checked = true;
     }
    }else{
     if(tp){
      var checkbox = tp.getElementsByTagName('input');
      for(var i=0;i<checkbox.length;i++)
       checkbox[i].checked = false;
     }
    }
    parcheck(target,sibcheck(target));//当孩子结点取消选中的时候调用该方法递归其父节点的checkbox逐一取消选中
    break;
  }
 });
 window.onload = function(){//页面加载时给有孩子结点的元素动态添加图标
  var labels = document.getElementById('menu_zzjs_net').getElementsByTagName('label');
  for(var i=0;i<labels.length;i++){
   var span = document.createElement('span');
   span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;';
   span.innerHTML = ' '
   span.className = 'add';
   if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName == 'UL')
    labels[i].parentNode.insertBefore(span,labels[i]);
   else
    labels[i].className = 'rem'
  }
 }
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-02-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html