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>
京公网安备 11010502036488号