第三天 Javascript
JavaScript
比较运算符
比较类型javascript
类型相同：直接比较 html
*字符串按照字典顺序比较，按位逐一去比较，直到得出大小。前端
类型不一样：先转换类型再比较java
*===（全等于） 比较的是值和类型，先比较类型是否相同，不相同直接返回false，相同的话再去比较值。正则表达式
*==比较的是值后端
逻辑运算符
&&：与（短路）数组
||或（短路）浏览器
!非app
其余类型转boolean：框架
number：0和NaN为假，其余为真。
string：除了空字符串（“”），其余都为true
undefined&null：都是false
对象：全部对象都为true
三元运算符
格式 ：
var result = 表达式?值1:值2；
若是表达式为true，选择值1，若是表达式为false，选择值2。
特殊语法（不建议使用，了解就行）
一、语句以；结尾，若是是一条语句能够不写；，能够省略（不建议使用）
二、在函数中变量定义可使用var关键字，也能够不使用。（不建议使用）
*使用 就是局部变量
*不使用 就是全局变量
流程控制语句
差很少都和Java基础使用的方式一致。
if....else...
switch
*java中switch()，括号里只能够接收byte、short、int、char、枚举（1.5）、String（1.7）
*javascript中，括号里能够接收任何数据类型。
while
do.....while
for
基本对象
function 函数对象
一、建立
一、 function 方法名（形式参数列表）{方法体}
二、 var 方法名=function（形式参数列表）{方法体}
二、方法
三、属性
length：表明形参的个数
四、特色
一、方法定义时，形参类型不用写，返回值类型也不写。
二、方法是一个对象，若是定义方法名称相同的方法 ，前面的方法会被覆盖。
三、在JS中，方法的调用只与方法的名称有关，与方法的参数列表无关。
四、在方法声明有一个隐藏的内置对象（数组）arguments数组，封装了全部的实际参数。
//获取全部参数的和。
<script>
function run(){
var sum=0 ; //先初始化定义一个
for(var i = 0 ;i<arguments.length;i++){
sum+=arguments[i];
}
document.write(sum);
}
run(3,5,6,9);
</script>
五、调用
方法名称 （实际参数列表）
Array对象
Array对象
一、建立
一、var arr = new Array(元素列表);
二、var arr = new Array(默认长度);
三、var arr = [元素列表];
二、方法
join（参数），将数组的元素按指定的分隔符拼接成字符串。
三、属性
length：数组的长度。
四、特色
在JS中数组的类型可变，长度可变
Date日期对象
一、建立
var date = new Date();
二、方法
toLocaleString() 返回当前对象对应的本地时间本地字符串格式。
getTime() 获取毫秒值，当前时间到1970年1月1日零点的毫秒值。
Regexp正则表达式
正则表达式：定义一个字符串的组成规则
建立
一、var reg = new Regexp("正则表达式");
二、var reg = /正则表达式/;
方法
test（参数）验证参数是否和正则表达式匹配。
DOM简单学习
功能：控制HTML文档的内容
代码：获取页面标签（元素）对象。
*document.getElementById("id");经过元素的id获取对象。
操做Element对象
修改属性值：
*明确获取的对象是哪个
*查看API找其中能够设置的属性
修改标签体内容：
先获取标签的对象
var ele = document.getElementById("id");
再修改内容
经过innerHTML方法：ele.innerHTMl = 要修改为的内容。
事件的简单学习
功能：某些组件执行了某些操做后，触发了某些代码的执行。
如何绑定事件：
一、直接在html标签上，指定事件的属性，属性值就是JS代码
事件：onclick---单击事件
二、经过js代码获取元素对象，指定事件属性，设置一个函数如（function fun01(){}）。
//先获取img标签的对象
var pho = document.getElementById("pho");
//修改指定元素的值,绑定事件
pho.onclick = fun01;
BOM(Browser Object Model)浏览器对象模型
将浏览器的各个组成部分封装成对象。
组成：
Window 窗口对象
Navigator 浏览器对象（不重要）
Screen 显示器屏幕对象（不重要）
History 历史记录对象
Location 地址栏对象
window对象
建立：
方法：
一、与弹出框有关的方法
alert()显示带有一段信息和确认按钮的警告框。
*confirm()显示带有一段信息以及确认按钮和取消按钮的对话框。
*若是点击确认按钮，则方法返回true，
*若是点击取消按钮，则方法返回false；
prompt()显示可提示用户输入的对话框
*返回值是获取用户输入的值。
二、与打开关闭有关的方法。
open()打开一个新的浏览器窗口
属性：
一、获取其余BOM对象。
history 对 History 对象的只读引用
location 用于窗口或框架的 Location 对象
Navigator 对 Navigator 对象的只读引用
screen 对 Screen 对象的只读引用。
二、获取DOM对象
document 对Document对象的只读引用
特色：
window 对象不须要存在能够直接使用。如window.方法名。
window引用能够省略，如方法名（）
location：地址栏对象
建立
一、window.location()
二、location()
方法
reload()从新加载当前页面；刷新
属性
href：设置或返回完整的URL
DOM：
概念：（Document Object Model）
将标记语言文档的各个组成部分，封装成对象，使用这些对象对标记语言进行增删改查的操做
DOM被分为三个不一样的部分
核心DOM-针对任何结构化文档的标准模型。
*Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，其余5个的父对象
XML DOM-针对XML文档的标准模型
HTML DOM-针对HTML文档的标准模型。
核心DOM模型：
Document：文档对象
Element：元素对象
Node：节点对象，其余5个的父对象
Document：文档对象
建立：window.document 和document直接获取
方法
一、获取Element对象
getElementById（id值），根据id属性值获取id对象，id是惟一的
二、获取其余Dom对象
createElement（元素名称）经过指定名称建立一个元素对象
createTextNode（）建立文本节点
属性
Element：元素对象
一、获取/建立 经过document来获取和建立
二、方法
removeAttribute()删除属性
setAttribute()设置属性
Node：节点对象，其余5个的父对象
特色：全部DOm对象均可以认为是一个节点。
方法：CRUD dom树
appendchild() 向节点的子节点列表的末尾添加一个新的子节点
removechild() 删除当前节点指定的子节点
replacechild() 用新节点替换子节点
属性：
parentNode()：返回当前节点的父节点
案例：动态表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid ;
margin: auto;
width: 500px;
}
th,td{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text"id="id"placeholder="请输入编号" />
<input type="text"id="uname"placeholder="请输入名字" />
<input type="text"id="sex"placeholder="请输入性别" />
<input type="button"id="ad"value="添加" />
</div>
<table id="table">
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操做</th>
</tr>
<tr>
<td>001</td>
<td>安林</td>
<td>男</td>
<td><a href="javascript:void(0)"onclick="fun01(this)" >删除</a> </td>
</tr>
<tr>
<td>002</td>
<td>安林林</td>
<td>男</td>
<td><a href="#"onclick="fun01(this)" >删除</a> </td>
</tr>
</table>
<script>
//绑定单击事件
document.getElementById("ad").onclick = function(){
//获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("uname").value;
var sex = document.getElementById("sex").value;
//建立td，设置td的文本为文本框的内容
var td_id = document.createElement("td");//建立td
var text_id = document.createTextNode(id);//将id的文本经过createTextNode文本节点进行赋值 ，而后添加到元素中
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
var td_sex = document.createElement("td");
var text_sex = document.createTextNode(sex);
td_sex.appendChild(text_sex);
//建立a标签的td
var td_a = document.createElement("td");
var aa = document.createElement("a");
aa.setAttribute("href","#");
aa.setAttribute("onclick","fun01(this);");
var text_a = document.createTextNode("删除");
aa.appendChild(text_a);//将元素都添加到标签中
td_a.appendChild(aa);//将标签添加到td中
//建立tr
var tr = document.createElement("tr");
//将td添加到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_sex);
tr.appendChild(td_a);
//获取table，将tr添加到table中。
var table = document.getElementById("table");
table.appendChild(tr);
}
//删除一行
function fun01(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
HTML DOM
标签体的设置和获取：innerHTML。能够进行追加使用+=。
使用html元素对象的属性
控制样式
一、使用元素的style属性来设置
<div id="div1">你们好</div>
<script>
//一、使用style属性来设置样式
//先获取该标签的对象
var div1 = document.getElementById("div1");
//再绑定单击事件
div1.onclick = function(){
div1.style.border ="1px solid red";
div1.style.width = "500px";
div1.style.fontSize = "40px";
}
</script>
二、提早定义好类选择器，经过元素的className的属性来设置其class属性值。
代码以下：
<style> .d1{ border: 1px solid red ; width: 400px; font-size: 50px; } .d2{ border: 3px solid black; width: 200px; font-size: 30px; } </style> <div id="div2"> 你们好我是div2. </div> <script> var div2 = document.getElementById("div2"); div2.onclick = function(){ div2.className = "d2"; } </script>
事件：
概念：某些组件被执行了某些操做后，触发某些代码的执行。
*事件：某些操做。如：单击，双击，键盘按下了，鼠标移动了
*事件源：组件。如：按钮，文本输入框。。。
*监听器：代码。
*注册监听：将事件，事件源，监听器结合在一块儿。当事件源上发生了某个事件，则触发执行某个监听器代码。
常见的事件：
一、点击事件：
onclick：单击事件
ondblclick：双击事件
二、焦点事件：
onblur：失去焦点 通常用于表单的校验
onfocus：元素活动焦点
三、加载事件：
一、onload：一张页面或一张图像完成加载。
四、鼠标事件：
onmousedown 鼠标按钮被按下
*定义方法时，定义一个形参接收event对象
*event对象的button属性能够获取鼠标哪一个按钮被点击了
*左键是0，滚轮是1，右键是2.
document.getElementById("aa").onmousedown = function(num){//num是参数
alert(num.button);//num.button获取那个鼠标按钮对应的值。
}
onmouseup 鼠标按钮被松开
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素上
onmouseout 鼠标从某元素移开
五、键盘事件
onkeydown 键盘被按下
onkeyup 键盘被松开
onkeypress 键盘按下并松开
六、选中和改变事件
onselect 文本被选中
onchange 域的内容被改变时会调用：能够用于省内二级联动。代码以下：
<script>
// 定义二维数组,存储城市信息
var cities = new Array();
cities[0] = new Array("海淀区","昌平区","朝阳区");
cities[1] = new Array("郑州市","开封市","洛阳市","平顶山市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
//改变指定的值
function fun(obj){
//经过obj获取value的值，而后将值传给二维数组获取指定的一维数组
var arr = cities[obj];
//获取city的对象
var city = document.getElementById("city");
city.innerHTML = "<option>----请-选-择-市----</option>";//将每次都进行清空
//遍历获取的一维数组
for(var i = 0 ; i<arr.length;i++){
city.innerHTML += "<option>"+arr[i]+"</option>";//将每个值都添加到city中
}
}
</script>
<body>
<select id="province" onchange="fun(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">河南省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="city" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</body>
七、表单事件
onsubmit 确认按钮被点击
*用于表单 的校验
若是为false表单将不会提交，若是为true，表单将提交
onreset 取消按钮被点击
总结 ：
JavaScript很重要，不管是学前端仍是学后端都要精通它，感受对逻辑没啥要求，主要仍是记标签记方法，
就一句话我一个学后端的还怕前端的这一点东西吗。。。分分钟征服JavaScript！！！
- 1. JavaScript第三天
- 2. JAVASCRIPT第三天
- 3. HTML和javascript 第三天
- 4. javascript基础(第三天)
- 5. vue第三天
- 6. js第三天
- 7. 第十三天
- 8. JavaScript第一天
- 9. 第14天，JavaScript
- 10. JavaScript学习笔记第三天_对象
- 更多相关文章...
- • JavaScript 指南 - 网站建设指南
- • 第一个MyBatis程序 - MyBatis教程
- • RxJava操作符（三）Filtering
- • 三篇文章了解 TiDB 技术内幕——说存储
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JavaScript第三天
- 2. JAVASCRIPT第三天
- 3. HTML和javascript 第三天
- 4. javascript基础(第三天)
- 5. vue第三天
- 6. js第三天
- 7. 第十三天
- 8. JavaScript第一天
- 9. 第14天，JavaScript
- 10. JavaScript学习笔记第三天_对象