JS中度融合入门笔记,的根底学习

By admin in 4858美高梅 on 2019年4月3日

复制上面包车型大巴代码到编辑器里,让编辑器自动排版一下格式,效果会好壹些,自我感觉作者笔记的系统照旧相比较便于回想的

<script
type=”text/javascript”>

JavaScript
的底子学习(一)

/////////////////////////////////////////////////////////////js开端//////////////////////////////////////////////////////////////////////////////

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>JS</title>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
}
body div{
margin-top: 1000px;
}
</style>
</head>
<body onresize=””>

window.alert(“”);
</script>

知识预览

————htnl

<!– 表单 –>
<form action=”” onsubmit=”return on_submit()” onreset=”return
on_reset()”>
<input type=”text” onkeydown=”on_keydown()”>
<input type=”text” onkeypress=”on_keypress()”>
<input type=”text” onkeyup=”on_keyup()”>

<script type=”text/javascript”
src=”myjs.js”></script>

  • BOM对象
  • DOM对象(DHTML)
  • 八实例演习

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

<input type=”text” onfocus=”on_focus()”>
<input type=”text” onblur=”on_blur()”>

有浏览器,就有js
js跨平台 windows linux unix mac

JavaScript概述 

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<!–可以直接在html页面中,在script标签中写相应的js的代码
<script type=”text/javascript”>
alert(“hello world”);
</script>–>
<!–能够引入外部文件,通过src来内定外部文件的任务,越发注意无法省略script的甘休标记–>
<script type=”text/javascript” src=”hello.js”></script>
<!– Date: 2013-01-09 –>
</head>
<body>

<input type=”text” onchange=”on_change()”>

document.write(“”);
window.alert(“<span style=”></span>”);

JavaScript的历史

</body>

<button type=”reset”>重置</button>

document是三个指标,对象有总体性和措施,加括号正是措施,不加括号正是性质。

  • 1991年Nombas开发出C-minus-minus(C–)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)
  • Netscape(网景)接收Nombas的见识,(Brendan Eich)在其Netscape Navigator
    2.0成品中付出出壹套livescript的脚本语言.Sun和Netscape共同达成.后更名称叫Javascript
  • 微软随后模仿在其IE三.0的制品中搭载了3个JavaScript的克隆版叫Jscript.
  • 为了统一3家,ECMA(欧洲计算机成立组织)定义了ECMA-26二规范.国标化组织及国际电工作委员会员会(ISO/IEC)也选取ECMAScript 作为标准(ISO/IEC-1626二)。从此,Web
    浏览器就从头拼命(即便富有差异的水平的中标和失利)将 ECMAScript 作为
    JavaScript 落成的底子。EcmaScript是规范.

</html>

<input value=”重置2″ type=”reset”>

<img src=”a.jpg” onclick=”javascript:window.alert(”)” />
//不需要;号

ECMAScript  

———-js

<button type=”submit”>提交</button>
</form>

js用处:表单验证、横幅广告(动画效果)、tab标签(鼠标键盘动作)等

固然 ECMAScript 是1个首要的规范,但它并不是 JavaScript
唯壹的片段,当然,也不是唯1被规范的1部分。实际上,叁个一体化的
JavaScript 完结是由以下 三 个不一致部分组成的:

alert(“hello world”);

<div style=”width:100px;height: 100px;float: left;margin-left: 10px;
background-color: red” onclick=”on_click()”>单击</div>
<div style=”width:100px;height: 100px;float: left;margin-left: 10px;
background-color: orange”
ondblclick=”on_dbclick()”>双击</div>
<div style=”width:100px;height: 100px;float: left;margin-left: 10px;
background-color: yellow”
onmousemove=”on_mousemove()”>移动</div>
<div style=”width:100px;height: 100px;float: left;margin-left: 10px;
background-color: green”
onmouseout=”on_mouseout()”>移出</div>
<div style=”width:100px;height: 100px;float: left;margin-left: 10px;
background-color: skyblue”
onmouseover=”on_mouseover()”>OVER</div>
<div style=”width:100px;height: 100px;float: left;margin-left: 10px;
background-color: blue”
onmousedown=”on_mousedown()”>鼠标down</div>
<div style=”width:100px;height: 100px;float: left;margin-left: 10px;
background-color: purple”
onmouseup=”on_mouseup()”>鼠标up</div>

<script language=”javascript”>
var num1=1;
var num2=333;
var res=num1+num2;
window.alert(‘结果是:’+res); 【变量和字符串要分手】 js 用 + 连接 php 用 .
连接
window.alert(typeof num1);
alert(res); //可省略 window

  • 核心(ECMAScript) 
  • 文书档案对象模型(DOM) Document object model (整合js,css,html)
  • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
  • Javascript 在支付中多数意况是根据对象的.也是面向对象的. 

 

<button id=”btn”>停止</button>
<button id=”start”>开始</button>
<script type=”text/javascript”>
//基本语法略:创造对象var obj = {};
//能够写JS的几个地方:略
//循环:略
//类型及类型转换
//js有6类别型:数值 布尔 字符 undefined 对象 null
/*数值型*/
var a = 100;
var c = a + ‘b’; //数值和字符相加变成字符拼接。
//转换到数值型
parseInt(‘123’); //123
parseInt(‘123asdf’); //123
Number(‘123’); //123
Number(‘123adf’); //报错
parseFloat(‘123.23’);
//转成字符型
a = a.toString();
console.log(100..toString());
//转成布尔型
var f = 0;
Boolean(0);
Boolean(”);
Boolean(null);
Boolean(undefined);
//特殊的转型布尔方式
var g = 1 ;
console.log(!!g);

变量是内部存款和储蓄器中来储存和平运动作的。
var name,age; //同时定义多个变量
变量区分轻重缓急写

         

///////////////////////////////////////////////////变量、数据类型、成效域//////////////////////////////////////////////////////////////

//函数:略

NaN = not a number
Infinity = 无穷大
var s=”abc”;
alert(parseInt(s)); //NaN //parseInt() 把字符串转成int

不难易行地说,ECMAScript 描述了以下内容:

——————–主意多少个数据类型操作函数

//对象、遍历对象和事件
var obj = {
attr1 : val1,
attr2 : val2,
fun1:function(){},
fun2:function(){}
}
//删除属性或方法应用delete
delete obj.attr1;
//使用对象里面包车型客车始末
obj.attr1;
//或然选用中括号
obj[0];
//调用函数,加中括号,中括号里面函数名急需引号,还要在前边加括号
obj[‘fun1’]();
//遍历对象
for(var i in obj){
if (typeof obj[i] == ‘function’) { obj[i]();}
else{ console.log(obj[i])}
}

var r=7/0; alert(r); //Infinity

  • 语法 
  • 类型 
  • 语句 
  • 关键字 
  • 保留字 
  • 运算符 
  • 目的 (封装 继承 多态) 基于对象的语言.使用对象.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

//数组,数组也是目的,数组下标从0开首
var array = [];

isNaN(判断是否1个数) isIninity
var s=”000.000123″;
if(isNaN(s)){
alert(“不是数”);
}else{
alert(“是数”);
}

JavaScript的引入格局

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
//对于js而言,是未曾数据类型的,全部都以通过var来成功变量的始建
/*var a = 19;
alert(a);
a = “hello”;
alert(a);
*/

//JS内置的片段对象
//一、Number对象
//查看对象的详实内容
console.dir(Number);
var a = 3;
//Number的部分艺术
a.toString();
a.valueOf(); //重临数值对象的原始数值
//二、Boolean对象
Boolean(123);
//三、Math对象
Math.abs();
Math.ceil(); //向上取整
Math.floor(); //向下取整
Math.max(); //取最大
Math.min(); //取最小
Math.pow(a,b); //a的b次方
Math.random(); //再次来到0-1的妄动数
Math.round(); //实行四舍伍入
Math.cos(); //三角函数,使用弧度
Math.sqrt(); //开方
Math.exp();
//4、字符串对象
var str = ‘adsfasdfasgasdf’;
str.length; //获得字符串的长度
str.indexOf(‘s’);
//搜索从第三个参数(可选)开首首先个字符现身的地点,不论从何处找,该字符串第三个成分记为第零个
str.indexOf(‘s’,12);
str.lastIndexOf(‘s’);//与地点的接近,从后往前
//字符串切片
str.slice(伍,八);
//从字符串的率先个参数开头截取到第三个(可选,暗许是字符串尾);
str.slice(-2);
//参数是负数表示右边界从左边开端算起,而且首个参数一定要在率先个参数的左边
//字符分割
str.split(‘s’); //第二个参数可选,表示重返值中数组的最大尺寸
//字符串提取
str.substr(⑤,2); //从第3个参数开首,截取第1个参数要截取的长度
str.substring(三,捌);
//从第一个参数初叶,截取到那些字符串在其次个参数的职责
//字符串拼接
str.concat(‘asdfasf’);
str.concat(‘fasd’,’fasdf’);
//大小写转换
str.toLocaleUpperCase();
str.toUpperCase();
str.toLocaleLowerCase();
str.toLowerCase();
//伍、正则表明式
//由四部分构成
//定界符、原子、元字符、格局革新符
//元字符:未有单身存在的含义,它只可以用来修饰原子,而且修饰的是紧挨它前方的原子
var c = /[23][34]{3,6}/
//- 连接,依据ascii吗表三番五次的内容
c.test(‘asd’); //使用大家的正则来判定个中的字符串
//中括号
var i = /[a-z]/;
var j = /[^abc]/; //表示除中括号内规则以外的始末
var k = /.{1,8}/;
var l = /\w{1,9}/; //\w相当于[a-zA-Z0-9_]
\W相当于[^a-zA-Z0-9_]
var m = /\d{1,8}/; //\d相当于[0-9] \D相当于[^0-9]
var n = /\s{1,8}/; //\s表示任意空白字符
var o = /^[1-9]/; //^表示开首必须符合我们表明式的序幕
var p = /^[1-9]\d{四,玖}/; //$表示最后也不能不符合大家的表明式的末梢
// *相当于{0,},+相当于{1,},?相当于{0,1}
//格局纠正符写在定界符之外
var b = /ah/i; //i表示前边的正则表达式不区分轻重缓急写匹配
var c = /ah/g;
//g表示全局匹配,数十次调用正则会一次将符合规则的结果分外出来
var d = /ah/m; //m代表多行匹配

中央数据类型:字符型(String)、数值型(Number)、布尔型(Boolean)、Undefined(未定义型)、Null(空型)

1

2

3

4

5

6

{#1 直接编写#}

    <script>

        alert(‘hello yuan’)

    </script>

{#2 导入文件#}

    <script src="hello.js"></script>  

//变量的功用域
function fn1() {
var c = 10;
alert(c);
}

//子形式的外在表现一般选取2个小括号包着的1些正是一个子格局
//子情势最两只好有九十六个
//大家能够用$壹……$9玖来调用缓冲区的情节
//6、时间对象
var d = new Date();
d.getFullYear();//显示年份
d.getMonth(); //显示第几月,从0开始
d.getDay(); //呈现星期几,从零(礼拜陆)初叶
d.getDate(); //展现几号

复合数据类型:数组(Array)、对象(Object)、函数(Function)

JavaScript的基础

function fn2() {
//当在函数内部从不动用var来声称变量的时候,这些变量就会作为全局变量注解
//b = 10;
//所以一定留神,在函数中定义变量一定要选取var
var b = 10;
alert(b);
// alert(c);
}

d.getHours(); //突显当前岁月的时辰数
d.getMinutes(); //展现当前时刻的秒钟数
d.getSeconds(); //展现当前时光的秒数
d.getMilliseconds();//展现当前时间的飞秒

var
num1=window.prompt(“请输入2个数”);

2.1 变量

function fn3() {
alert(b);
}

d.get提姆e(); //获取从一玖七零年无射壹号现今的纳秒数
d.getTimezoneOffset();
//东京时间东八区,比格林威治时间早多个时辰,所以值是-480
Date.parse(‘一九7零-01-0二’); //再次回到阿秒数

“+” +=即使它的光景有三个是字符串,则“+”
+=的功效正是“连接”字符串功用;
“+” +=借使它的光景都是数值时,则“+”
+=的成效正是“加法”运算的效应;
Var a = 100;
Var b = “100”;
Var c = a + b; //结果是:“100100”

x=5

//变量的档次,常用的档次有:Number,String,Array,Date
var a = 10.6;
// alert(typeof a);
a = “11”;
//java实行强制类型转换是(Number)a,而js是透过Number(a)
// alert(Number(a)+1);
//假诺强制转换贰个非数字的值为Number会获得四个NaN的值
var b = “abc”;
//alert(Number(b));
b = “12px”;
//使用parseInt能够将字符串开始的多少个数字转换为int,可是只要起先不是数字,那就收获NaN
//alert(parseInt(b));
var as = [“a”,”b”,1,2,3];
//对于数组等目的而言,彰显的结果就是object不会展现Array
//alert(typeof as);
//判断as是或不是是Array的实例,若是是回来true
//alert(as instanceof Array);

d.toTimeSring();
d.toDataString();
d.toLocaleString();
d.toLocaleDateString();
d.toLocaleTimeString();

Var d = 200;
Var result = a + d; //结果为:300

y=6

//布尔档次:true和false,在js中,非0正是true,尤其注意:NaN是false
//当三个变量没有定义值的时候,是undefined类型,undefined类型是false
//越发注意:在js中除了NaN,undefined,0那四个数是false外其他皆是true
var size;
// alert(!!size);

//对时间使用的例子
function getMytime(){
var d = new Date();
var f =
d.getFullYear() + ‘-‘

类型转换
var a=”100″;
a= Number(a); //测试用而已
a=parseInt(a);

z=x+y

for(var i=0;i<as.length;i++) {
alert(as[i]);
}
</script>
</head>
<body>
<input type=”button” value=”运行fn1″ onclick=”fn1()”/>
<input type=”button” value=”运行fn2″ onclick=”fn2()”/>
<input type=”button” value=”运行fn3″ onclick=”fn3()”/>
</body>
</html>

  • addZero(d.getMonth()+1) + ‘-‘
  • addZero(d.getDate()) + ”
  • addZero(d.getHours()) + ‘:’
  • addZero(d.getMinutes()) + ‘:’
  • addZero(d.getSeconds());
    }

parseInt(str):在字符串中,从左到右提取整数,如境遇非数字数据,则甘休提取;
比如:将二个<div>的宽度增添200px
var width = “100px;”
width = parseInt(width); //结果为100
width += 200; // 300
width = width + “px”; //结果为 “300px”
parseFloat(str):在字符串中,从左到右提取浮点数(小数),如境遇非数字数据,则停止提取;
parseFloat(“.3px”); // 0.3
paseFloat(“abc200”); // NaN
parseFloat(“123.09px”); // 123.09
只顾:倘诺要提取的字符串的率先个字符是非数字的,则一贯回到NaN。

在代数中,大家利用假名(比如 x)来保存值(比如 五)。

 /////////////////////////////////////////////////////////简单流程序控制制语句。太简单在此略掉///////////////////////////////////////////////////////////////

//在不到10的日子\时刻前边补多少个零
function addZero(){
x = x >= 10 ? x : ‘0’ + x;
return x;
}

var a=i++ 先赋值给a,i再加1

经过上边的表明式 z=x+y,我们能够计算出 z 的值为 11。

//////////////////////////////////////////////////////////////js面向对象/////////////////////////////////////////////////////////////////

var xxx;

报表隔行变色 【项目相应不是那般】
var str = “<table width=’500′ border=’1′
style=’border-collapse:collapse;’>”;
str +=
“<tr><th>编号</th><th>新闻标题</th><th>发表时间</th></tr>”;
for(var i=1;i<100;i++)
{
str += “<tr”;
//假若是偶数行,则输出bgcolor属性
if(i%二==0) //【这些是重中之重】
{
str += ” bgcolor=’#cccccc'”;
}
str += “>”;
str +=
“<td>”+i+”</td><td> </td><td> </td>”;
str += “</tr>”;
}
str += “</table>”;

在 JavaScript 中,那些字母被叫作变量。

—————————1:主意怎样创立实例

var a = document.getElementById(‘btn’);
var b = document.getElementById(‘start’);

//(叁)输出结果
document.write(str);

0 变量是弱类型的(很随便);

—————————贰:函数的库房模型以及界别 var k =
fn(指向堆中的函数);var k=fn()(调用函数获得再次回到值);

a.onclick = function(){
clearInterval(xxx);
}
b.onclick = function(){
if (confirm(‘确定?’)) {
xxx = setInterval(getMytime,1000);

最大值
var a=1;b=2;
var max=a>b?a:b;

一 注脚变量时不用申明变量类型. 全都使用var关键字;

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

setTimeout( function(){alert(‘这里???’);} , 5000); //未解
}
}
//7、数组对象
var a = [];
var b = [‘a’,’b’];
var c = new Array(四); //那个能够钦定数组的长短
var aa = [1,2,3,543,232,88];
var bb = [‘2’,5];

= 赋值
== 多个数值相等,再次来到true
=== 值和类别同时相等

1

var a;

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
// var x = function() {
// alert(“x”);
// }
// //此时x就是一个function函数
// x();
// function fn() {
// alert(“fn”);
// //对于函数而言,直接写return就等于有再次来到值
// return “100”;
// }
// //此时是将y这些变量指向函数fn,可以由此y()来调用函数
// var y = fn;
// fn();
// //能够调用
// y();
// //将函数fn所执行的再次来到值传给z变量,所以z为100
// var z = fn();
// alert(z);
// alert(y);

aa.concat(bb); //拼接数组
bb.concat(aa);
aa.join(‘-‘);
//join能够钦赐3个划分符号,然后将数组的每种值使用该分隔符一次连接起来,形成一个字符串
aa.toString();
aa.pop(); //从数组的后边删除二个因素
aa.shift(); //从数组的首端删除二个因素
aa.push(); //从数组的尾巴添加八个或多个因素
aa.unshift(); //从数组的首端添加二个或多个成分
aa.reverse(); //将原来的数组实行调转排列
aa.slice(); //那么些跟字符串的slice的如出一辙
//之后李阳搞了个桃子的玩意儿,没写

&& || !与或非
<a href=”javascript:void(0)”>首页</a> 比#好,链接不会变色
<a href=”#”></a>

2 一行能够注明多少个变量.并且能够是不相同类型.

//能够运用function来模拟java的类
function Person(name,age) {
//定义了1个Person的习性为name
this.name = name;
//定义了Person的属性为age
this.age = age;
this.address = “山西平凉”;
//尽管未有用this注明,那几个变量就仅仅只是贰个局地变量,不是类的质量
var x = 10;
//创设了1个作为
this.say = function() {
alert(this.name+”,”+this.age);
}
}
//创立了2个指标p一是Person的对象
var p1 = new Person(“张三”,12);
alert(p1.name+”,”+p1.address+”,”+p1.x);
p1.say();

//JS事件
//壹、鼠标事件
function on_click(){
alert(‘鼠标单击事件触发’);
}
function on_dbclick(){
alert(‘鼠标双击事件触发’);
}
function on_mousemove(){
alert(‘鼠标移动事件触发’)
}
function on_mouseout(){
alert(‘鼠标移出’);
}
function on_mouseover(){
alert(‘鼠标over’);
}
function on_mousedown(){
alert(‘鼠标按下’);
}
function on_mouseup(){
alert(‘鼠标抬起’);
}
//二、键盘事件
function on_keydown(){
alert(‘键盘按下事件触发’);
}
function on_keypress(){
alert(‘键盘按着事件触发’);
}
function on_keyup(){
alert(‘键盘抬起事件触发’);
}
//三、其余事件
function on_focus(){
alert(‘获得主旨事件触发’);
}
function on_blur(){
alert(‘失去核心事件触发’);
}
function on_change(){
alert(‘内容变更事件触发’);
}
function on_submit(){
return confirm(‘你分明提交?’);
}
function on_reset(){
return confirm(‘你明确清空内容呢?’);
}

var a=”abc”;
if(a){ //a 自动转换为true or false

1

var name="yuan", age=20, job="lecturer";

var p2 = new Person(“德华”,22);
p2.address = “香港”;
//能够透过对象[“属性字符串”]形成对质量的调用
alert(p2[“name”]+”,”+p2[“address”]);

//JS的DOM操作
document.getElementsByClassName(‘class_name’);
//使用类名采用成分,注意是Elements
document.getElementsByTagName(‘tab_name’);
//使用标签名选用成分,也是Elements
document.getElementsByName(‘name’); //使用名字属性采取
document.getElementById(‘id_name’);

}

三 (通晓) 评释变量时 能够不用var. 假诺不用var 那么它是大局变量.

alert(typeof p1);
alert(p1 instanceof Person);
//在js中对于目的而言,能够通过for in来变量对象的习性
for(var a in p1) {
//能够拿走对象中的全体显示注脚的质量
alert(a+”:”+p1[a]);
}
</script>
</head>
<body>
<input type=”button” value=”运行fn1″ onclick=”fn1()”/>
<input type=”button” value=”运行fn2″ onclick=”fn2()”/>
<input type=”button” value=”运行fn3″ onclick=”fn3()”/>
</body>
</html>

document.querySelector(‘#id’);
document.querySelector(‘.class_name’);
//querySelector()方法选拔的是复合要求的首先个节点指标
document.querySelectorAll(); //选用全体复合规则的节点目的

switch(变量、表达式){
case 一(变量、表达式的值):
xxx;
break;
}

4 变量命名,首字符只可以是字母,下划线,$韩元符
三选一,且分别轻重缓急写,x与X是七个变量

 ////////////////////////////////////////////////////////////////////js常用的对象///////////////////////////////////////////////////////////////////////////

//有些节点指标的壹部分个性和艺术
var z = document.getElementById(‘z’); //
z.nodeName; //获取当前节点名
z.childNodes;
z.children; //获取子成分节点

while(条件){
循环体
i++;【变量更新!】
}

五 变量还应遵从以下某条闻名的命名规则:

——–日期时间

//上面多少个将收获成分和文书节点
z.firstChild;
z.lastChild;
//上边四个只可以获得成分节点
z.firstElementChild;
z.lastElementChild;
//下(上)3个同级节点
z.nextSibling;
z.previousSibling;
//下(上)七个同级成分节点
z.nextElementSibling;
z.previousElementSibling;
//父级节点
z.parentElement;
z.parentNode;

if和switch的首要不同:if的条件应该是二个限制,switch的原则应该是3个值。

 

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

//当前节点的性质列表
z.attributes;
//使用数字下标获取属性的名称和值(不保险,不引进应用)
z.attributes[0].name;
z.attributes[0].value;
//获取二个节点的属性值
z.getAttribute(‘id’);
z.setAttribute(‘data-ssse’,1234);

//js的数组可动态增进
var a=[1,2];
a[2]=3;
alert(a.length);

Camel 标记法

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
var d = new Date();
//对于js而言,月的下标是从0开端的
document.write(d.getFullYear()+”年”+(d.getMonth()+1)+”月”+d.getDate()+”日”+”星期”+d.getDay());

//在四个节点中插入1个新节点
var a = document.getElementById(‘a_name’);
var c = document.getElementById(‘c_name’);
var b = document.createElement(‘div’);

数组的值可以是即兴数据类型
delete arr[0]; //删除下标为0的数组元素
在意:用delete删除数组成分时,只是将内容清除,但所占空间还留存。

首字母是小写的,接下去的假名都是大写字符起头。例如:

</script>
</head>

//对b进行壹多级的装置,如 b.innerHTML =
‘那里填写想要呈现的字符串’;b.style.color = ‘blue’;
a.insertBefore(b,c);
//c必须是a的子节点,b将被插到c在此之前,参数贰选填,能够使null

Var arr = new Array();
arr[0] = 10;
arr[1] = [10,20,40]
arr[2] = new Array();
//JS从严俊意义上来说只帮忙1维数组,但它可实现数组成分是数组。不有所完全贰维数组的性状,由此必须先创制贰个空的数组,然后再添法郎素
arr[2][0] = “abc”; //要是未有上边1行,在PHP中是支撑的

var myTestValue = 0, mySecondValue = “hi”;

——-字符串

//假诺我们想在有个别子节点的末端插入,其实一定于在该节点的下1个弟兄节点后边插入
var n = c.nextElementSibling;
a.insertBefore(b,n);

//那样回顾点
var arr = [
[1,2,3,4,5],
[10,20,30,40,50],
[100,200,300]
];

Pascal 标记法

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

//删除三个节点
c.remove();
//删除2个节点目的的子节点
document.getElementById(”).removeChild(c);
//克隆三个节点
c.cloneNode();

for in 找出数组中有效数据,无效为undefine
Var arr = [45,44,,,,,,32,,,,,,,,,,,,,,,21,333,,,,,,,,,,,432];
//使用for in遍历数组中央银行之有效个数
for(var i in arr)
{
document.write(arr[i]+” “);
}

首字母是大写的,接下去的字母都以大写字符开始。例如:

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
var str1 = new String(“abc”);
var str2 = “abc”;
alert(str1==str2);
var s = str2.concat(“hello”,”world”);
alert(s);
//包含start不包含end
s = s.slice(2,4);
alert(s);
var str = “hello world”;
//从2开始到5结束
alert(str.substring(2,5));
//从2开始取5个字符
alert(str.substr(2,5));

//检查测试节点目的是还是不是含有有些属性
c.hasAttribute(‘class,title’);

break只好退出当前巡回,不会多层循环。但在PHP中,break能够退出多层循环。
continue语句,结束此次巡回,去开端下1遍巡回。

Var MyTestValue = 0, MySecondValue = “hi”;

str = “abc.txt”;
alert(str.substr(str.lastIndexOf(“.”)+1));
</script>
</head>
<body>
</body>
</html>

//从3个节点列表中获取钦点索引的节点
document.getElementById(”).children.item(0);

举例:循环1-十0间拥有的数,但超出50的就不再输出了。
for(var i=1;i<100;i++)
{
if(i>50)
{
break; //退出循环,直接跳转到for的利落大括号之后
}
document.write(i+”<br>”);
}

匈牙利(Magyarország)类型标记法

—————数组对象

</script>

Var arr = [45,44,,,,,,32,,,,,,,,,,,,,,,21,333,,,,,,,,,,,432];
for(var j=0;j<arr.length;j++){
if(arr[j]== undefined){
continue; //继续,跳过那几个 undefined
跳到for循环开头处,并将i+壹,继续循环
}
}
document.write(arr[i]+” “);

在以 帕斯Carl标记法命名的变量前附加三个小写字母(或小写字母类别),表达该变量的系列。例如,i
表示整数,s 代表字符串,如下所示“

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

</body>
</html>

求任意五个数值的最大值
//定义函数
function getMax(a,b)
{
var max = a>b ? a : b;
document.write(“最大值是:”+max);
}
//调用函数,函数一遍定义能够频繁调用
getMax(10,20);

Var iMyTestValue = 0, sMySecondValue = “hi”;

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
//js的array就是java中的list和stack的集合
var as = new Array();
as.push(11);
as.push(22);
alert(as);

【对其余对象的操作,以及数据库操作,皆以“增加和删除改查”。】
数组也是指标

 

as = new Array(11,22,33,44,55,66,77,”111″,”222″,23);
alert(as);
//一般采取以下方法定义数组
as = [11,12,1,2,3];
//转换为字符串通过—来成功连接
alert(as.join(“—“));
//sort只会经过字符串来排序
alert(as.sort());
//颠倒顺序
alert(as.reverse());

匿名函数,函数未有函数名
(1)将多少个匿名函数定义赋给1个变量
var a = function(a){ return a*a*a; }
document.write( a(十)) ; //调用函数

注意:

as = [1,2,3,4];
//表示在目录为2的先头删除0个因素,并且扩张八个要素3一和3二–>一,贰,3一,32,3,四
//as.splice(2,0,31,32);
//表示在目录为二的前方删除3个因素,并且扩展七个因素3一和3二–>1,贰,3一,3贰
as.splice(2,2,31,32);
alert(as);
</script>
</head>
<body>
</body>
</html>

(二)将3个匿名函数的概念赋给三个数组元素
var arr = new Array();
arr[0] = 100;
arr[1] = 200;
arr[2] = function(a){ return a*a*a; }
//将函数的定义赋给数组成分,那么该因素就是两个函数了
//调用函数
var result = arr[2];
result(10);

 function func1(){

//////////////////////////////////事件处理/////////////////////////////////////

全局变量 版本太多。。。
小心:任啥地点方省略var关键字,定义的变量都是“全局变量”,由此,1般景色下,不要简单var关键字。
【跟php不一样 】
全局变量:全局变量壹般是在函数外定义的。全局变量可以在网页的【任哪个地点方】使用(函数内和函数外)
有个别变量:局地变量一般是在函数钦定义的。局地变量只幸而函数内来利用。函数执行达成,局地就烟消云散。

        

——-一.经过事件来操作document的属性

主题数据类型:基本数据类型是将变量名和变量值存款和储蓄在“飞快内部存款和储蓄器”“栈内部存款和储蓄器”中。
栈:小而快

        var a = 123;

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

修改贰个变量的值,另三个变量的值不会发生变更。

        b=456

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>

复合数据类型:复合数据类型的多少存款和储蓄分八个部分,1是变量名和数量的地点,
留存“火速内部存储器”中;二是将实际的数额存在“慢速内存”“堆内存”中。堆:大而慢
(数组、对象、函数)
将3个引用的变量赋给另贰个变量,它赋的是数码地址,而不是实在的数码。
【数据共享】

    }

function clickD(obj) {
alert(obj.innerHTML);
}
function mouseD(obj) {
//设置这几个目的的水彩,在js中安装文本的体裁均通过xx.style.样式名称
obj.style.color = “#f00”;
//当使用代码来安装样式的时候,假使在css中经过-表示的,都以有驼峰标识,font-size–>fontSize
obj.style.fontSize = “18px”;
}
function outD(obj) {
obj.style.color = “#000”;
obj.style.fontSize = “16px”;
}
</script>
</head>
<body>
<div onclick=”clickD(this)” style=”cursor:
pointer”>点击了试一下</div>
<div onmouseover=”mouseD(this)”
onmouseout=”outD(this)”>鼠标移动上来试试看</div>
</body>
</html>

========================js 对象=======================
js自身是壹种弱类型语言,自身是从未类class和对象那么些定义
,然则本人得以由此js代码去模拟达成那么些进度,所以我们说js也得以说是面向对象的。

 

——-二.主要透过数字变大变小的例子来讲课的

(一)使用new关键字和Object()构造函数来创建
var obj = new Object(); //创制1个空对象
obj.name = “周更生”; //扩张三本质量
obj.school = “新加坡理工科业大学学”; //增加二个属性
//方法便是函数,方法在概念时不须要加括号,给艺术赋的值,一定是三个函数。
obj.showInfo = function(){
var str = obj.name+“毕业于”+obj.school;
document.write( str );
}
//对象的运用
obj.name = “张立峰” //修改内容
obj.edu = “大专”; //扩展一个天性
delete obj.school; //删除四个指标的习性
document.write( obj.name ); //输出一个目的的属性值
obj.showInfo( ); //对象方法的调用,加上小括号

    func1();

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

(二)使用{ }来创立二个指标
var obj = {
name:“周更生”,
school:“日本首都理教育大学”,
showInfo:getInfo //将多个常常函数字传送给对象属性,那里绝对不要带(
)。假若带(),表示将函数的执行结果赋给指标属性,那么些执行结果是“基本数据类型”。
}
//定义一个平淡无奇函数
function getInfo()
{
var str = obj.name+“的毕业于”+obj.school
document.write( str );
}

   

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
var big = true;
function bigger(obj) {
var cs = parseInt(obj.style.fontSize);
if(cs) {
  if(cs>=30) {
  big = false;
  obj.innerHTML = “点击变小”;
}
if(cs<=12) {
  big = true;
  obj.innerHTML = “点击变大”;
}
if(big) {
  cs+=2;
} else {
  cs-=2;
}
obj.style.fontSize = cs+”px”;
} else {
obj.style.fontSize = “14px”;
}
}
</script>
</head>
<body>
<div onclick=”bigger(this)” style=”cursor:
pointer”>点击变大</div>
</body>
</html>

//调用对象的章程
obj.showInfo(); //对象方法
getInfo(); //调用一般函数

//    alert(a);

—————–wtch函数

//(二)将2个见惯不惊函数作为数据传给2个变量
var a = getInfo;
//直接将函数名赋给2个变量,是将函数的地点传递给了另二个变量
a( ); //调用函数

//    alert(b);

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

//(3)将2个平日函数作为数据传给贰个数组成分
JS中度融合入门笔记,的根底学习。var arr = new Array();
arr[0] = 100;
arr[1] = getInfo;
//将2个函数的地址,传给了数组成分,所以arr[1]就成了函数了
arr[1]( ); //调用函数,相当于 getInfo();
=========================js 对象 结束===================
String对象方法

// 不推荐

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
with(document) {
//此时花括号中的全部代码都是遵照document作为根对象,当使用write(xxx)就相当于document.write(xxx);
write(“aaa<br/>”);
write(“bbb<br/>”);
write(“ccc<br/>”);
//使用alert也是同意
alert(“abc”);
}

var str="abcdefg";
var b=str.charAt(3);
document.write(b);

2.2 基础标准

</script>
</head>
<body>
</body>
</html>

charAt(index)     重返字符
indexOf(char)     再次回到字符位置    倘诺未找到,再次回到-一 
lastIndexOf(char)         //   var filename=”xxx.jpg”    找 jpg文件
substr(startIndex[,length])   //截取字符串
substring(startIndex[,lastIndex])   //效用与上类似
split(字符串转数组)           // str.split(“,”);
toLowerCase() 转小写
toUpperCase() 转大写
localeCompare()
使用本地的排序规则(依据所利用的操作系统,简体普通话操作系统)对汉语进行排序

壹 每行停止能够不加分号. 未有分号会以换行符作为每行的利落

—–timeOut函数

str1.localeCompare(str2)

 a=1;b=2;

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

正如的结果:

a=1 b=2;——错误

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
function cd() {
//在3秒现在会执行bigger那个函数,setTimeout的情趣就是距离1段时间来推行有些函数
//setTimeout仅仅只会举行叁遍,若是希望重新执行,必要采用setInterval
setTimeout(“bigger()”,3000);

str1>str2  返回1的值

 

}

str1==str2  返回0的值

a=1

function bigger() {
//获取html中节点的id为txt的节点
var node = document.getElementById(“txt”);
node.style.fontSize = “200px”;
}
</script>
</head>
<body>
<div id=”txt” style=”cursor: pointer”>开始</div>
<div onclick=”cd()”>点击开头操作</div>
</body>
</html>

str1<str2   返回-1的值

b=2

 ———setInterval

 

 

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

Array对象
length
join(数组连成字符串)
shift() 删除数组第一个要素,将数CEO度减一
pop() 删除数组最终个要素,将数CEO度减1
unshift() 在数组的发端扩充3个成分,并将数组的长短加一
push():在数组的终极扩充1个因素,并将数组的长度加1

//推荐

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
var timeId;
function cd() {
//在3秒以往会执行bigger这一个函数,setTimeout的情趣就是距离一段时间来推行有些函数
//setInterval表示每隔壹段时间就调用三回函数
timeId = setInterval(“bigger()”,500);

留意:shift()、pop()、unshift()、push()它们是直接在原数组开始展览操作,由此不须要更创制变量
证实:delete只可以删除数组元素的值,而所占空间还设有;shift()和pop()删除数组元素后,所占空间不设有。

a=1;

}

reverse() 反转数组成分的逐一
sort([sortby]) 数组暗中认可按字母排序
//实例:按拼音的先后顺序排列
var arr = [“安庆市”,”安徽省”,”河南省”,”河北省”,”北京市”];
arr.sort(orderby2);
function orderby2(str1,str2)
{
return str1.localeCompare(str2);
}
document.write(arr);

b=2;

function sd(){
clearInterval(timeId);
}

//数字从小到大排序
function orderby(a,b)
{
return a-b; //对数值大小实行排序
}

 

function bigger() {
//获取html中节点的id为txt的节点
var node = document.getElementById(“txt”);
var size = parseInt(node.style.fontSize);
if(size) {
size+=10;
} else {
size = “14”;
}
node.style.fontSize = size+”px”;
}
</script>
</head>
<body>
<div id=”txt”>开始</div>
<div onclick=”cd()” style=”cursor:
pointer”>点击开端操作</div>
<div onclick=”sd()” style=”cursor: pointer”>结束操作</div>
</body>
</html>

当网页<body>加载成功后调用js函数 <body onload=”test()”>

{

//////////////////////////////浏览器对象模型////////////////////

Date对象

 a=1;

——————–history对象

Math对象
Math.abs(),取相对值
Math.ceil(),向上取整 例如:Math.ceil(四.3) = 5 ,Math.ceil(四.玖)=伍
Math.floor(),向下取整 例如: Math.floor(四.4)=4,Math.floor(四.9)=四
Math.round(),肆舍5入
Math.sqrt(),求平方根
Math.random(),重临0-1之间的即兴小数。0<=X<壹

 b=2;

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

var max=100; min=10;

    //推荐加tab

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
function loc() {
//获取文本框中的值
var href = document.getElementById(“address”).value;
//直接跳转到有个别页面
window.location.href = href;
}
</script>
</head>
<body>
<a href=”#” onclick=”loc()”>test01</a>
<input type=”text” id=”address”/>
</body>
</html>

Math.floor(Math.random()*(max-min)+min);

    a=1;

————-状态栏

window 是甲级对象 ,能够大约
innerWidth:指当前浏览器窗口的涨幅,不含滚动条、菜单栏、地址栏、状态栏等。IE低版本不帮忙。
IE中要运用document.documentElement.clientWidth来代替;

    b=2;

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

value innerHTML区别
给表单成分加值 用 value , 其余如div 用
innerHTML

}

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
function loc() {
var txt = document.getElementById(“address”).value;
window.status = txt;
}
</script>
</head>
<body>
<a href=”#” onclick=”loc()”>test01</a>
<input type=”text” id=”address”/>
</body>
</html>

BOM 对象有 window document screen

DOM 对象有 <html> 全部因素对象

二 注释 帮助多行注释和单行注释. /* */  //

———-得到其余页面属性

=====================节点操作==============

动用{}来封装代码块

=======1.主页面

nodeName:节点的名号
nodeValue:节点的值
firstChild:第壹个头节点(存在包容性难题)
lastChild:尾数子节点(存在包容性难题)
childNodes:子节点列表,是一个数组

2.3 常量和标识符

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

做客<html>节点的法门:
document.documentElement
走访<body>节点的措施:
document.body

常量 :直接在先后中冒出的数据值

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
// setTimeout(“endWelcome()”,5000);
// function endWelcome() {
// document.getElementById(“welcome”).style.display = “none”;
// }
</script>
</head>
<body>
<div id=”welcome”>欢迎举办我们的网站</div>
<a href=”#”
onclick=”window.open(‘test02.html’,’aaa’,’width=300,height=300,resizable=0′)”>test02</a>
<a href=”#”
onclick=”window.open(‘test03.html’,’aaa’,’width=400,height=400,resizable=0′)”>test03</a>
<br/>
<a href=”#”
onclick=”window.open(‘bless.html’,’aaa’,’width=600,height=300′)”>输入你祝福语</a>
<a href=”#”
onclick=”window.open(‘bless.html’,’aaa’,’width=600,height=300′)”>采取性别</a>
<div id=”bless”></div>
</body>
</html>

注意:访问节点的操作,都是以document为起源的。

标识符

=======2.子页面

节点属性的改动
setAttribute(name,value):给八个节点扩张属性,name是属性名,value是属性值
removeAttribute(name):删除节点的天性
getAttribute(name):获取叁个节点属性的值

  1. 由不以数字开头的字母、数字、下划线(_)、美金符号($)组成
  2. 常用于表示函数、变量等的称谓
  3. 例如:_abc,$abc,abc,abc1二3是标识符,而1abc不是
  4. JavaScript语言中代表一定含义的词称为保留字,不允许程序再定义为标识符

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

【js使用节点,html标签必须无空格】

         

<html xmlns=”” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>js01_hello</title>
<meta name=”author” content=”Administrator” />
<script type=”text/javascript”>
function bless() {
//获取输入的祝福语
var mb = document.getElementById(“mb”).value;
//获取父类窗口
var p = window.opener;
//获取父类窗口中的id为bless的div
var pd = p.document.getElementById(“bless”);
//设置pd的值
pd.innerHTML = mb;
//关闭当前窗口
window.close();
}
</script>
</head>
<body>
输入祝福语:<input type=”text” size=”40″ id=”mb”/><input
type=”button” onclick=”bless()” value=”输入” />
</body>
</html>

createElement(tagName):创设贰个点名的标记,如:document.createElement(“img”),注意:标记不加尖括号
createTextNode(text):创造多个文本节点。如:document.createTextNode(“年龄”),注意:那里只好是纯文本
appendChild(node):将四个节点,追加到某些父节点下。追到父节点的终极。
insertBefore(new,current):将三个新节点,追加到当前节点此前。Current当前节点,是早就存在的节点。New是新节点,是刚刚成立的。
removeChild(node):移除3个子节点。

           

 

document.body.removeChild(); 父节点删除子节点

2.4 数据类型

节点的拜访:firstChild、lastChild、childNodes、parentChild(父子节)
能够接纳要素对象的艺术举办代替:getElementById()、getElementsByTagName()

                    

先是个单词全小写,前面包车型大巴单词首字母大写,并且去掉中间的连接线(-)
举例:
background-color 转换后 obj.style.backgroundColor = “#FF0000”
font-size 转换后 obj.style.fontSize = “18px”

数字类型(Number)

day一三 5随便星星跳过 后期再玩

简介

======================dom
简单法=====================
【不用 document.body.childNodes[0] 和 setAttribute() 】
【css dom】
var obj = document.getElementById(“box”);
//给id=box的指标扩充样式
obj.style.width = “400px”;

最基本的数据类型

<body>
<div id=”box”>dfdfdf</div>
</body>

不区分整型数值和浮点型数值

【html dom 】
<div id=”box”></div>
var obj = document.getElementById(“box”); //获取对象
var img = document.createElement(“img”); // 创设节点
img.src = “images/img0一.jpg”; //使用要素对象的属性
obj.appendChild(img); //将img节点,追加到id=box中去

全部数字都接纳67个人浮点格式存款和储蓄,相当于Java和C语言中的double格式

语法结构:var arrObj = document.getElementsByTagName(“li”)
功用描述:取得标记为<li>的二个数组(标记列表)。
举例:取得贰个<ul>标记中的全体的<li>标记
//获取id=ul的对象
var ulObj = document.getElementById(“ul”);
//取得具有的li对象的3个数组
var arrLi = ulObj.getElementsByTagName(“li”);
//修改第二个和第多个li的样式
arrLi[1]4858美高梅,.style = “font-size:24px;color:#ff0000;”; //放两个style
arrLi[3].style.textDecoration = “underline”;

能表示的最大值是±一.7976931348623一伍柒 x 1030八

========节点操作   html dom /css dom

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
 <script type="text/javascript">
function test(){
            var img1=document.createElement("img");   //添加节点
            img1.setAttribute("src","../img/2.jpg");  //设置属性
            document.body.appendChild(img1);          //追加节点
       }
        // html dom
        function test1(){
            var img1=document.createElement("img");
            img1.src="../img/2.jpg";
            var div1=document.getElementById("div1");
            div1.appendChild(img1);
        }
        // css dom
        function test2(){
            var div1=document.getElementById("div1");
            div1.style.border="1px solid #ccc";
            div1.style.width="300px";
            div1.style.height="300px";
            div1.style.backgroundColor="#456aaa";
        }
    </script>
</head>
<body onload="test1()"><div id="div1">123</div>
</body>
</html>

 

innerHTML:指标记对中的HTML文本(含有HTML标记的文本),1般指互相标记;比如:<h贰>二级题目</h二>

overflow:hidden; 超出部分隐藏
overflow:auto; 超出部分加滚动条

要素属性
offsetWidth:指成分的宽度,不含滚动条中的内容;
offsetHeight:指成分的可观,不含滚动条中的内容,【是只读属性;】
scrollWidth:指成分的总宽度,含滚动条中的内容;
scrollHeight:指成分的总中度,含滚动条中的内容;
scrollTop:指内容向上滚动进去的偏离,如果未有滚动条,则值为0;
scrollLeft:指内容向左滚动过去的离开,假使未有滚动条,则值为0;

onscroll事件:当内容滚动时,发生的轩然大波。

鼠标事件
onclick单击事件
ondbclick双击事件
onload网页加载成功,1般用来<body>成分
onchange:当内容产生转移时,1般用于选用上传文件
onscroll:当移动滚动条时(只要恐怕出现滚动都得以)
onmouseover:当鼠标放上时
onmouseout:当鼠标移开时
onsubmit:当单击“提交按钮”时(用于submit按钮)
onreset:当单击“重置按钮”时(用于reset按钮)
onfocus:当文本框得到宗旨(鼠标光标在文本框中式点心击)
onblur:当文本框失去要旨(鼠标光标在文本框之外点击)
onselect:更改下拉列表中的内容时(用于select表单成分)

【第三种不难点】/【第两种能够绑定八个事件,如mouseover mouseout
onclick】
(1)每一种HTML标记都有事件句柄属性。onClick是HTML标记属性,不分大小写。
例如:<img src=“images/01.jpg” onClick=“init()” />
(2)HTML标记对应的要素对象也具有事件句柄属性,那一个天性必须全小写,因JS区分大小写
obj.onclick = init; // init是2个函数的地点,而不能够加小括号
function init(){
window.alert(“OK”);
}
只顾:(一)成分对象绑定事件的名目必须全小写;(二)成分对象的轩然大波必须调用七个函数,能够是家常便饭函数,也得以是匿名函数。

事件重临值,对有些事件,会影响暗许动作的实施。如:onclick和onsubmit

=================== event ======================
DOM中event对象的性质
clientX:获取当前事变距离窗口左侧的相距;
clientY:当前事变产生时距离窗口上方的偏离;
pageX:当前事变所在网页中的x坐标
pageY:当前事件所在网页中的y坐标;
screenX:当前事件所在显示屏中的x坐标;
screenY:当前风浪所在显示屏中的y坐标;
type:当前风云的项目

event事件 ,firefox 须求 event参数,ie不供给,包容性难题

IE模型中,事件指标,选用如下语法:
window.event

在W3C模型中,采取如下语法:
dom对象.事件 = function(event) {
event.
}

=================== event 结束 ==================

obj.className = “box”;

表单提交的三种办法
submit按钮结合onsubmit事件,实现表单提交(最常用)

表单验证
1、常用的性质
Name:成分的称谓
Value:元素的值
Size:文本框的增长幅度
马克斯length:最多存放多少个字符
Readonly:只读
Disabled:禁用
……
2、常用的事件
Onfocus:当获得宗旨时;
Onblur:当失去大旨时;
3、常用方法
Select():选中内容
Focus():定位光标
Blur():让光标从某些成分上移走

Select对象的常用属性
options[]:重返全体option组成的3个数组;
name:名称
value:option的value的值
length:设置或读取option的个数
selectedIndex:当前入选的option的索引号
……
option对象的常用属性

text:指<option></option>中的文本
value:指option对象的value属性
index:指每种option对象的索引号
selected:当前option是或不是选中
……

 

======== javascript(5)+ajax(2)+jquery(3)=========
javascript(5) 扯太有意思了

201四拾0肆(面向对象一) 201四1005(面向对象2) 201四拾07(正则)

//自调用匿名函数
// ( 匿名函数 )();
(function(){alert(‘a’)})();
//自调用匿名函数,可加参数 name
(function(name){alert(‘a ‘+name)})(‘小明’);

this php和js 都表示,谁调用,this就指谁

=========== 事件监听 =================
题材:我们好还是不好对同样对象的如出一辙事件绑定多少个处理程序?
dom.onclick = function fn1() {}
dom.onclick = function fn2() {}

答:能够,选用事件监听的点子

浏览器:
IE
attachEvent
detachEvent
W3C(firefox chrome )
addEventListener
removeEventListener

冒泡模型
1、基本语法
addEventListener(type,callback,capture)
capture:true false
false : 冒泡模型 【私下认可】
ture:捕捉模型
时下IE浏览器只援救冒泡模型

响应式设计(电脑+平板+手提式有线电话机)据说在微信支付里面有介绍。。。
==============jquery===============

jquery 正是 javascript框架 extjs 未来没优势了。。

==================== jquery dom ====================
jQuery对象自小编便是2个数组

dom对象只好调用dom方法
jQuery对象只可以调用jQuery方法

1)jQuery对象转dom对象

语法:

jQuery[0]

jQuery.get(0)

2)dom对象转jQuery对象

语法:

$(dom) 内置方法 理论上,把字符串 dom 等流传 $()就改为了
jquery对象!牛逼吧!

var a=document.getElementById(“content”);
$(a).html(“123”); //$(a) 转换为 jquery对象

提出:大家在写程序时,对于jQuery对象的变量尽量加$
var $a=$(‘:checkbox’);

json格式
var a={“name”:”小明”,
“age”:”8″};

dom window.onload=function(){} 载入全体 html标签
jquery $(document).ready(function(){}); 载入要求的 html标签就足以了,快

能代表的最小值是±伍 x 10 -3二四

   整数:
           在JavaScript中十进制的整数由数字的队列组成
           精确表明的限定是
-9007一9九伍547409九贰 (-二伍三) 到 9007一九玖一54740992(2五叁)
           超出范围的平头,精确度将受影响
  浮点数:
           使用小数点记录数据
           例如:3.4,5.6
           使用指数记录数据
           例如:4.3e23 = 4.3 x 1023

  1陆进制和八进制数的公布
           1六进制数据前边加上0x,捌进制前边加0
           1陆进制数是由0-玖,A-F等十两个字符组成
           八进制数由0-7等7个数字组合
           1陆进制和八进制与二进制的折算

# 2进制: 1111 0011 1101 0100   <—–> 16进制:0xF3D4
<—–> 10进制:62420

# 2进制: 1 111 001 111 010 100 <—–> 8进制:0171724

字符串(String)

 

简介

是由Unicode字符、数字、标点符号组成的系列

字符串常量首尾由单引号或双引号括起

JavaScript中尚无字符类型

常用特殊字符在字符串中的表明

字符串中有的特殊字符必须抬高右划线\

常用的转义字符 \n:换行  \’:单引号   \”:双引号  \\:右划线

 

String数据类型的行使

  • 特殊字符的选用方法和效能
  • Unicode的插入方法

1

2

3

4

<script>

        var str="\u4f60\u597d\n欢迎来到\"JavaScript世界\"";

        alert(str);

</script>

布尔型(Boolean)

 

简介

Boolean类型仅有多个值:true和false,也意味着1和0,实际运算中true=壹,false=0

布尔值也得以看作on/off、yes/no、1/0对应true/false

Boolean值主要用于JavaScript的支配语句,例如

    if (x==1){

    y=y+1;

    }else    {

    y=y-1;

    }

 

Null & Undefined

 

Undefined 类型

Undefined 类型唯有七个值,即
undefined。当证明的变量未初阶化时,该变量的私下认可值是 undefined。

当函数无显然再次来到值时,再次来到的也是值 “undefined”;

Null 类型

另一种只有三个值的类型是 Null,它唯有2个专用值 null,即它的字面量。值
undefined 实际上是从值 null 派生来的,因而 ECMAScript
把它们定义为相等的。

固然那四个值格外,但它们的意义区别。undefined
是声称了变量但未对其发轫化时赋予该变量的值,null
则用来表示没有存在的靶子(在议论 typeof
运算符时,简单地介绍过那或多或少)。借使函数或艺术要回到的是指标,那么找不到该目的时,再次来到的司空见惯是
null。

var person=new Person()

var person=null

 

数据类型转换

 

JavaScript属于松散类型的程序语言

变量在宣称的时候并不要求钦赐数据类型

变量唯有在赋值的时候才会规定数据类型

表达式中涵盖不相同品种数据则在测算进度中会强制实行体系转换

数字 + 字符串:数字转换为字符串

数字 + 布尔值:true转换为1,false转换为0

字符串 + 布尔值:布尔值转换为字符串true或false

 

强制类型转换函数

函数parseInt:   强制转换到整数   例如parseInt(“陆.1二”)=6  ;
parseInt(“1二a”)=12 ; parseInt(“a1二”)=NaN  ;parseInt(“一a二”)=一

 

函数parseFloat: 强制转换到浮点数  parseFloat(“陆.1二”)=六.1贰

 

函数eval:       将字符串强制转换为表达式并赶回结果 eval(“1+壹”)=二 ;
eval(“一<贰”)=true

品种查询函数(typeof)

ECMAScript 提供了 typeof
运算符来判断八个值是还是不是在某种类型的限制内。能够用那种运算符判断贰个值是还是不是代表①种原始类型:如若它是原始类型,还足以判定它象征哪一种原始类型。

函数typeof :查询数值当前项目
 (string / number / boolean / object )

例如typeof(“test”+3)      “string”

例如typeof(null)          “object “

例如typeof(true+1)        “number”

例如typeof(true-false)    “number”

ECMAScript 运算符

ECMAScript 算数运算符

加(+)、 减(-)、 乘(*) 、除(/) 、余数(% ) 
加、减、乘、除、余数和数学中的运算方法一致 
例如:9/2=4.5,四*5=20,9%2=1

-除了足以代表减号还能表示负号  例如:x=-y

+除了可以表示加法运算还是能够用于字符串的连天  例如:”abc”+”def”=”abcdef”

 递增(++) 、递减(--)

 

若是x=二,那么x++表明式执行后的值为3,x–表明式执行后的值为一
i++相当于i=i+1,i–相当于i=i-1
递增和递减运算符可以放在变量前也能够置身变量后:–i
   
var i=1;
console.log(i++);
console.log(++i);
console.log(i–);
console.log(–i);

 

一元加减法:

 

    var a=1;
    var b=1;
    a=-a;  //a=-1

    var c=”10″;
    alert(typeof (c));
    c=+c;    //类型转换
    alert(typeof (c));
//    ——————-
    var d=”yuan”;
    d=+d;
   
alert(d);//NaN:属于Number类型的1个非凡值,当境遇将字符串转成数字无效时,就会拿走一个NaN数据
    alert(typeof(d));//Number

    //NaN特点:
   
    var n=NaN;
   
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
   
    alert(n!=NaN);//NaN参与的具备的运算都以false,除了!=

 

ECMAScript 逻辑运算符

 

等于 ( == )  、不等于( != ) 、 大于( > ) 、 小于( < )

大于等于(>=) 、小于等于(<=)

与 (&&) 、或(||) 、非(!)

1 && 1 = 1  1 || 1 = 1
1 && 0 = 0  1 || 0 = 1
0 && 0 = 0  0 || 0 = 0

!0=1
!1=0

 

逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数能够是任何项指标,不止是 Boolean 值。

若果某些运算数不是原本的 Boolean 型值,逻辑 AND 运算并不一定重临 Boolean
值:

  • 即便有个别运算数是 null,重回 null。 
  • 假使某些运算数是 NaN,再次回到 NaN。 
  • 若是有个别运算数是 undefined,重返undefined。 

逻辑 OR 运算符(||)

与逻辑 AND 运算符相似,假诺有个别运算数不是 Boolean 值,逻辑 OPRADO运算并不一定再次来到 Boolean 值

ECMAScript 赋值运算符

 

赋值 =

JavaScript中=代表赋值,三个等号==表示判断是或不是等于

例如,x=1表示给x赋值为1

if (x==壹){…}程序表示当x与壹万分时

if(x==“on”){…}程序表示当x与“on”相等时

 同盟其余运算符形成的简化表明式

例如i+=1相当于i=i+1,x&=y相当于x=x&y

 

实例:              

 View Code

ECMAScript等性运算符

履行类型转换的平整如下:

  • 壹旦一个运算数是 Boolean
    值,在检查相等性从前,把它转换来数字值。false 转换来 0,true 为 一。 
  • 假如1个运算数是字符串,另3个是数字,在自笔者批评相等性以前,要品尝把字符串转换来数字。 
  • 假使3个运算数是目的,另三个是字符串,在检查相等性在此以前,要尝试把指标转换到字符串。 
  • 假诺一个运算数是目的,另多少个是数字,在自作者批评相等性在此以前,要品尝把对象转换来数字。 

在可比时,该运算符还遵从下列规则:

  • 值 null 和 undefined 相等。 
  • 在自笔者批评相等性时,不能把 null 和 undefined 转换到其余值。 
  • 设若某些运算数是 NaN,等号将回到 false,非等号将重回 true。 
  • 假定三个运算数都以指标,那么比较的是它们的引用值。假诺七个运算数指向同一对象,那么等号再次回到true,不然五个运算数不等。 

        

ECMAScript 涉及运算符(主要)

1

2

var bResult = "Blue" < "alpha";

alert(bResult); //输出 true  

在上边的事例中,字符串 “Blue” 小于 “阿尔法”,因为字母 B 的字符代码是
6陆,字母 a 的字符代码是 玖七。

正如数字和字符串

另1种棘手的情景爆发在比较多少个字符串格局的数字时,比如:

1

2

var bResult = "25" < "3";

alert(bResult); //输出 "true"

地点那段代码比较的是字符串 “25” 和
“三”。五个运算数都以字符串,所以对比的是它们的字符代码(”2″ 的字符代码是
50,”三” 的字符代码是 5一)。

但是,借使把某部运算数该为数字,那么结果就有趣了:

1

2

var bResult = "25" < 3;

alert(bResult); //输出 "false"

此地,字符串 “二五” 将被转换成数字 二伍,然后与数字 3进行比较,结果情理之中。

总结:

1

2

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.

比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

Boolean运算符(重要)

 

var temp=new Object();// false;[];0; null; undefined;object(new
Object();)

 

    if(temp){

        console.log(“yuan”)

    }else {

        console.log(“alex”)

    }

 

全等号和非全等号

等号和非等号的同类运算符是全等号和非全等号。那三个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不实施类型转换。

支配语句

if 控制语句

 

if-else基本格式

if (表达式){

语句1;

……

}else{

语句2;

…..

}

职能表达

设若表明式的值为true则执行语句一,

不然执行语句2

 

                 

 

var x= (new Date()).getDay();

//获取前天的星期值,0为周四

var y;

 

if ( (x==6) || (x==0) ) {

y=”周末”;

}else{

y=”工作日”;

}

 

alert(y);

 

//等价于

 

y=”工作日”;

if ( (x==6) || (x==0) ) {

y=”周末”;

}

 

if 能够独自使用

 

if语句嵌套格式

if (表达式1) {

    语句1;

}else if (表达式2){

    语句2;

}else if (表达式3){

    语句3;

} else{

    语句4;

}

 

                    

 View Code

switch  分选控制语句

 

switch基本格式

switch (表达式) {

    case 值1:语句1;break;

    case 值2:语句2;break;

    case 值3:语句3;break;

    default:语句4;

}

 

                   

 

switch(x){

case 1:y=”星期一”;    break;

case 2:y=”星期二”;    break;

case 3:y=”星期三”;    break;

case 4:y=”星期四”;    break;

case 5:y=”星期五”;    break;

case 6:y=”星期六”;    break;

case 7:y=”星期日”;    break;

default: y=”未定义”;
}

 

switchelse if组织进一步简汉代晰,使程序可读性更强,功用更高。

 

 

首先要看一个题材,if 语句适用范围相比较广,只倘使 boolean 表明式都得以用
if 判断;而 switch
只可以对骨干类型举办数值比较。两者的可比性就仅限在五个基本类型相比较的限量内。

提及基本项指标数值相比,那本来要有多少个数。然后重要来了——

if 语句每一句都以独自的,看上边包车型大巴语句:

if (a == 1) …

else if (a == 2) …

那般 a 要被读入寄存器一回,一 和 2分别被读入寄存器一遍。于是你是不是发现实际 a
读五次是有点多余的,在你全体比较完在此之前只须要一回读入寄存器就行了,其他都以额外费用。可是if
语句必须每一遍都把内部的七个数从内部存款和储蓄器拿出去读到寄存器,它不了然你其实比较的是同1个a。

于是 switch case 就出来了,把地点的变更 switch case 版本:

switch (a) {

        case 0:

                break;

        case 1:

}

               

总结:

 

一.switch用来遵照一个整型值实行多路支行,并且编写翻译器能够对多路分支实行优化

2.switch-case只将表明式计算3次,然后将表达式的值与各种case的值比较,进而选

  择执行哪叁个case的语句块

三.if..else
的度量规范限制较广,每条语句基本上独立的,每一回判断时都要规范加载

  一次。

为此在多路支行时用switch比if..else if .. else结构要功能高。

 

for  循环控制语句

 

for循环基本格式

for (初始化;条件;增量){

    语句1;

    …

}

职能表明

完成标准化循环,当条件建马上,执行语句1,不然跳出循环体

 

                    

 

for (var i=1;i<=7;i++){

    document.write(“<H”+i+”>hello</H “+i+”> “);

    document.write(“<br>”);

}


    var arr=[1,”hello”,true]//var dic={“1″:”111”}

    for (var i in arr){

        console.log(i)

        console.log(arr[i])

    }

 

注意:

 

 

    doms=document.getElementsByTagName(“p”);

 

    for (var i in doms){

       console.log(i); // 0 1 2 length item namedItem

       //console.log(doms[i])

    }

 

//循环的是你取得的th一个DOM成分集,for
in用来循环对象的兼具属性,dom成分集带有了你上边输出的脾气。

//即便您只要循环dom对象的话,能够用for循环:

 

    for (var i=0;i<doms.length;i++){

        console.log(i) ; // 0 1 2

        //console.log(doms[i])

    }

 

敲定:for i in 不引进使用.

while  巡回控制语句

 

while循环基本格式

while (条件){

语句1;

}

功用表达

运维效果和for类似,当条件建立循环执行语句花括号{}内的话语,不然跳出循环

 

               

 

var i=1;

while (i<=7) {

    document.write(“<H”+i+”>hello</H “+i+”> “);

    document.write(“<br>”);

    i++;

}

//循环输出H壹到H七的字体大小

 

 

 

<script language=”JavaScript”>

/* sayhello是概念的函数名,前边必须抬高function和空格*/

function sayHello(){

    var hellostr;

    var myname=prompt(“请问你贵姓?”,”苑”);

    hellostr=”您好,”+myname+’先生,欢迎进入”探索之旅”!’;

    alert(hellostr);

    document.write(hellostr);

}

 //那里是对前方定义的函数进行调用

sayHello();

</script>

 

练习:分别用for循环和while循环计算出壹-100的和?

丰富处理

1

2

3

4

5

6

7

8

9

10

try {

    //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行

}

catch (e) {

    // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。

    //e是一个局部变量,用来指向Error对象或者其他抛出的对象

}

finally {

     //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。

}

注:主动抛出11分 throw Error(‘xxxx’)  

ECMA对象

从古板意义上的话,ECMAScript
并不着实享有类。事实上,除了说明不存在类,在 ECMA-26第22中学根本未有出现“类”那几个词。ECMAScript
定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。

var o = new Object();

对象的概念与分类:

  • 由ECMAScript定义的本土对象.独立于宿主环境的 ECMAScript
    实现提供的对象.(native object)
  • ECMAScript 完毕提供的、独立于宿主环境的有所目的,在 ECMAScript
    程序初阶实施时出现.那意味着开发者不必显明实例化内置对象,它已被实例化了。ECMA-贰陆拾3只定义了三个放置对象,即 Global 和 Math
    (它们也是当地对象,依据定义,每一个内置对象都以位置对象)。(built-in
    object)
  • 装有非本土对象都是宿主对象(host object),即由 ECMAScript
    完毕的宿主环境提供的指标。全部 BOM 和 DOM 对象都以宿主对象。

object对象:ECMAScript 中的全数指标都由那一个指标继承而来;Object
对象中的全体属性和方法都会出现在别的对象中

ToString() :  重临对象的原始字符串表示。
ValueOf()  : 再次来到最契合该对象的原始值。对于众多对象,该办法重返的值都与
ToString() 的再次回到值相同。

1一种内置对象

包括:

Array ,String , Date, Math, Boolean, Number  Function, Global, Error,
RegExp , Object

简介:

在JavaScript中除去null和undefined以外别的的数据类型都被定义成了目的,也足以用创设对象的点子定义变量,String、Math、Array、Date、RegExp都以JavaScript中最首要的内置对象,在JavaScript程序大多数功力都是因而对象实现的

 

<script language=”javascript”>

var aa=Number.MAX_VALUE;

//利用数字对象获得可代表最大数

var bb=new String(“hello JavaScript”);

//创制字符串对象

var cc=new Date();

//成立日期对象

var dd=new Array(“星期一”,”星期二”,”星期三”,”星期四”);

//数组对象

</script>

 

                     

String对象

自动成立字符串对象:

1

2

3

var str1="hello world";

alert(str1.length);

alert(str1.substr(1,5));

调用字符串的靶子属性或措施时自动创建对象,用完就屏弃

手工创造字符串对象

1

2

3

var str1= new String("hello word");

alert(str1.length);

alert(str1.substr(1,3));

行使new成立字符串对象str一,全局有效

String对象的属性

1

2

获取字符串长度

length

var str1=”String对象”;

var str2=””;

alert(“str1长度 “+str1.length);

alert(“str2长度 “+str2.length);

                        

 

String对象的法门(一) —— 格式编排方式

格式编排格局重回值列表

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

String对象的点子(贰)——  大小写转换

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

String对象的不二等秘书籍(三) —— 获取内定字符

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

String对象的主意(四)——  查询字符串

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

String对象的格局(伍) ——子字符串处理

截取子字符串

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

轮换子字符串

 

//x.replace(findstr,tostr)

 

var str1=”abcdefgh”;

var str2=str1.replace(“cd”,”aaa”);

alert(str2);

//结果为”abaaaefgh”

分割字符串

 

var str1=”一,二,三,四,五,六,日”;

 

var strArray=str1.split(“,”);

 

alert(strArray[1]);

//结果为”二”

接连字符串

 

 

//y=x.concat(addstr)

//

//使用注脚

//

//x代表字符串对象

//addstr为添加字符串

//返回x+addstr字符串

   

var str1=”abcd”;

var str2=str1.concat(“efgh”);

 

alert(str2);

//结果为”abcdefgh”

 

Array对象

制造数组对象

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

创办二维数组

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

Array对象的性情

获取数组成分的个数:length

 View Code

Array对象的法门

 

连接数组-join方法

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

总是数组-concat方法

 

 

//连接数组-concat方法

//

//x.concat(value,…)

 

 

var a = [1,2,3];

var a = new Array(1,2,3);

var b=a.concat(4,5) ;

 

 

alert(a.toString());

//再次来到结果为1,2,3

alert(b.toString());

//重返结果为1,2,三,四,伍

 

数组排序-reverse sort

 

 

//x.reverse()

//x.sort()

 

var arr1=[32, 12, 111, 444];

//var arr1=[“a”,”d”,”f”,”c”];

 

arr1.reverse(); //颠倒数组元素

alert(arr1.toString());

//结果为444,111,12,32

 

arr一.sort();    //排序数组成分

alert(arr1.toString());

//结果为111,12,32,444

 

//——————————

arr=[1,5,2,100];

 

//arr.sort();

//alert(arr);

//即便就想按着数字相比较呢?

 

function intSort(a,b){

    if (a>b){

        return 1;//-1

    }

    else if(a<b){

        return -1;//1

    }

    else {

        return 0

    }

}

 

arr.sort(intSort);

 

alert(arr);

 

function IntSort(a,b){

    return a-b;

}

 

数组切片-slice

 

 

//x.slice(start, end)

//

//使用表明

//

//x代表数组对象

//start代表伊始地方索引

//end是截止地点下1数组成分索引编号

//第二个数组元素索引为0

//start、end可为负数,-一意味最后二个数组成分

//end省略则一定于从start地方截取今后全数数组成分

 

var arr1=[‘a’,’b’,’c’,’d’,’e’,’f’,’g’,’h’];

var arr2=arr1.slice(2,4);

var arr3=arr1.slice(4);

var arr4=arr1.slice(2,-1);

 

alert(arr2.toString());

//结果为”c,d”

alert(arr3.toString());

//结果为”e,f,g,h”

alert(arr4.toString());

//结果为”c,d,e,f,g”

 

删去子数组

 

 

//x. splice(start, deleteCount, value, …)

//

//使用证明

//

//x代表数组对象

//splice的重要用途是对数组钦命地点展开删减和插入

//start代表开始地方索引

//deleteCount删除数组成分的个数

//value代表在剔除地点插入的数组成分

//value参数可以大约

 

 

var a = [1,2,3,4,5,6,7,8];

a.splice(1,2);

//a变为 [1,4,5,6,7,8]

alert(a.toString());

a.splice(1,1);

 //a变为[1,5,6,7,8]

alert(a.toString());

a.splice(1,0,2,3);

 //a变为[1,2,3,5,6,7,8]

alert(a.toString());

 

数组的进出栈操作(一)

 

 

//push pop那多少个措施模拟的是二个栈操作

 

//x.push(value, …)  压栈

//x.pop()             弹栈     

//使用申明

//

//x代表数组对象

//value能够为字符串、数字、数组等此外值

//push是将value值添加到数组x的末梢

//pop是将数组x的尾声1个要素删除

 

 

var arr1=[1,2,3];

arr1.push(4,5);

alert(arr1);

//结果为”1,2,3,4,5″

arr1.push([6,7]);

alert(arr1)

//结果为”1,2,3,4,5,6,7″

arr1.pop();

alert(arr1);

//结果为”1,2,3,4,5″

 

数组的进出栈操作(二)

 

 

// unshift shift

//x.unshift(value,…)

//x.shift()

//使用注脚

//

//x代表数组对象

//value能够为字符串、数字、数组等别的值

//unshift是将value值插入到数组x的启幕

//shift是将数组x的率先个要素删除

 

var arr1=[1,2,3];

arr1.unshift(4,5);

alert(arr1);

//结果为”4,5,1,2,3″

arr1. unshift([6,7]);

alert(arr1);

//结果为”6,7,4,5,1,2,3″

arr1.shift();

alert(arr1);

//结果为”4,5,1,2,3″

 

小结js的数组个性:

 

 

//  js中数组的特色

         //java中数组的性状, 
规定是什么样品种的数组,就只能装什么样类型.唯有一体系型.

         //js中的数组性子1: js中的数组能够装任意类型,未有别的限制.

         //js中的数组性情贰:
js中的数组,长度是随着下标变化的.用到多少长度就有多少长度.

         var arr5 = [‘abc’,123,1.14,true,null,undefined,new
String(‘1213’),new Function(‘a’,’b’,’alert(a+b)’)];

        /*  alert(arr5.length);//8

         arr5[10] = “hahaha”;

         alert(arr5.length); //11

         alert(arr5[9]);// undefined */

 

Date对象

创建Date对象

 

 

//方法1:不点名参数

var nowd1=new Date();

alert(nowd1.toLocaleString( ));

//方法贰:参数为日期字符串

var nowd2=new Date(“2004/3/20 11:12”);

alert(nowd2.toLocaleString( ));

var nowd3=new Date(“04/03/20 11:12”);

alert(nowd3.toLocaleString( ));

//方法三:参数为皮秒数

var nowd3=new Date(5000);

alert(nowd3.toLocaleString( ));

alert(nowd3.toUTCString());

 

//方法四:参数为年月日小时分钟秒飞秒

var nowd4=new Date(2004,2,20,11,12,0,300);

alert(nowd4.toLocaleString( ));

//飞秒并不直接显示

 

Date对象的秘诀—获取日期和岁月

 

 

获取日期和时间

getDate()                 获取日

getDay ()                 获取星期

getMonth ()               获取月(0-11)

getFullYear ()            获取完整年份

getYear ()                获取年

getHours ()               获取时辰

getMinutes ()             获取分钟

getSeconds ()             获取秒

getMilliseconds ()        获取皮秒

getTime ()                再次回到累计飞秒数(从一九陆9/1/1中午)

 

演练实例:

 

 

function getCurrentDate(){

        //1. 创建Date对象

        var date = new Date(); //未有填写任何参数那么便是当下时刻

        //2. 得到当二零壹柒年度

        var year = date.getFullYear();

        //3. 拿到当前月份 js中月份是从0到11.

        var month = date.getMonth()+1;

        //4. 获得当明天

        var day = date.getDate();

        //伍. 得到当前小时

        var hour = date.getHours();

        //⑥. 获得当前分钟

        var min = date.getMinutes();

        //七. 得到当前秒

        var sec = date.getSeconds();

        //8. 获得当前礼拜

        var week = date.getDay(); //没有getWeek

        // 2014年06月18日 15:40:30 星期三

        return year+”年”+changeNum(month)+”月”+day+”日
“+hour+”:”+min+”:”+sec+” “+parseWeek(week);

    }

 

alert(getCurrentDate());

 

//消除 自动补齐成两位数字的法子

    function changeNum(num){

    if(num < 10){

        return “0”+num;

    }else{

        return num;

    }

 

}

//将数字 0~6 转换成 周天到礼拜五

    function parseWeek(week){

    var arr =
[“星期日”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”];

    //             0      1      2      3 ………….

    return arr[week];

}

 

Date对象的诀要—设置日期和岁月

 

 

//设置日期和岁月

//setDate(day_of_month)       设置日

//setMonth (month)                 设置月

//setFullYear (year)               设置年

//setHours (hour)         设置小时

//setMinutes (minute)     设置分钟

//setSeconds (second)     设置秒

//setMillliseconds (ms)       设置纳秒(0-99九)

//setTime (allms)     设置累计纳秒(从一九陆陆/1/1深夜)

   

var x=new Date();

x.setFullYear (1997);    //设置年1997

x.setMonth(7);        //设置月7

x.setDate(1);        //设置日1

x.setHours(5);        //设置小时伍

x.setMinutes(1贰);    //设置分钟1二

x.setSeconds(54);    //设置秒54

x.setMilliseconds(230);        //设置皮秒230

document.write(x.toLocaleString( )+”<br>”);

//返回1997年8月1日5点12分54秒

 

x.setTime(87040玖四20000); //设置累计飞秒数

document.write(x.toLocaleString( )+”<br>”);

//返回1997年8月1日12点23分50秒 

 

Date对象的艺术—日期和岁月的转移

 

 

日子和岁月的变换:

 

getTimezoneOffset():8个时区×15度×4分/度=480;

回去本地时间与达托霉素T的时日差,以分钟为单位

toUTCString()

归来国际标准时间字符串

toLocalString()

回去本地格式时间字符串

Date.parse(x)

再次回到累计微秒数(从19陆陆/1/1中午到本地时间)

Date.UTC(x)

回去累计皮秒数(从一九七零/1/一晚上到国际时间)

 

RegExp对象

 

 

//RegExp对象

    // 在表单验证时利用该目的验证用户填入的字符串是不是相符规则.

    //创设正则对象格局一  参数一 正则说明式  参数贰 证实形式  g global / i
忽略大小写. //参数2貌似填写g就能够,也有“gi”.

    // 用户名 首字母必须是英文, 除了第叁人别的只好是英文数字和_ .
长度最短不能够不难六人 最长无法超过11人

    //—————————-创建情势一

    /* var reg1 = new RegExp(“^[a-zA-Z][a-zA-Z0-9_]{5,11}$”,”g”);

    //

    //验证字符串

    var str = “bc123”;

    alert(reg1.test(str));// true

   

    //—————————-创设格局贰  /填写正则表明式/匹配方式;

    var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;

   

    alert(reg2.test(str));// true

     */

    //——————————-正则对象的点子——————-

        //test方法  ==>  测试二个字符串是不是复合 正则规则.
再次来到值是true 和false.

   

    //————————-String
中与正则结合的5个点子——————.

    // macth search split replace

    var str = “hello world”;

   

    //alert(str.match(/o/g)); //查找字符串中 复合正则的 内容.

    //alert(str.search(/h/g));// 0  查找字符串中符合正则表明式的内容地点

    //alert(str.split(/o/g)); // 依照正则表达式对字符串实行切割.
再次来到数组;

    alert(str.replace(/o/g, “s”)); // hells wsrld
 对字符串按照正则进行替换.

 

Math对象

 

 

    //Math对象

    //该对象中的属性方法 和数学有关.

    //Math是放到对象 , 与Global的分裂之处是, 在调用时 须求打出
“Math.”前缀.

    //属性学习:

    //alert(Math.PI);

    //方法学习:

        //alert(Math.random()); // 得到自由数 0~1 不包括1.

        //alert(Math.round(1.5)); // 四舍5入

        //练习:获取一-100的人身自由整数,包涵1和100

             //var num=Math.random();

            //num=num*10;

            //num=Math.round(num);

            // alert(num)

        //============max  min=========================

        /* alert(Math.max(1,2));// 2

        alert(Math.min(1,2));// 1 */

        //————-pow——————————–

        alert(Math.pow(二,四));// pow 总结参数壹 的参数2 次方.

       

 

 

 

abs(x)    重回数的相对值。

exp(x)    返回 e 的指数。

floor(x)对数实行下舍入。

log(x)    重回数的自然对数(底为e)。

max(x,y)    重临 x 和 y 中的最高值。

min(x,y)    重临 x 和 y 中的最低值。

pow(x,y)    返回 x 的 y 次幂。

random()    返回 0 ~ 壹 以内的随机数。

round(x)    把数肆舍5入为最接近的平头。

sin(x)    再次回到数的正弦。

sqrt(x)    再次来到数的平方根。

tan(x)    重回角的正切。

 

Function 对象(重点)

函数的概念:

1

2

3

function 函数名 (参数){
函数体;

    return 返回值;

}

效果表达:

  • 能够使用变量、常量或表达式作为函数调用的参数
  • 函数由首要字function定义
  • 函数名的概念规则与标识符一致,大小写是乖巧的
  • 重临值必须利用return

Function 类能够象征开发者定义的其余函数。

用 Function 类间接创建函数的语法如下:

function 函数名 (参数){
    
函数体;
   return 返回值;
}
//another way:
var 函数名 = new Function(“参数1″,”参数n”,”function_body”);

纵然由于字符串的关联,第一种情势写起来有个别不便,但有助于掌握函数只但是是1种引用类型,它们的作为与用 Function 类显明创立的函数行为是一模一样的。

实例:

1

2

3

4

5

6

7

8

9

10

11

12

alert(1);

function func1(){

    alert(‘hello yuan!’);

    return 8

}

 

    ret=func1();

    alert(ret)

----------------

 

var func1=new Function("name","alert(\"hello\"+name);")

func1("yuan")

注意:js的函数加载执行与python区别,它是完好加载完才会履行,所以进行函数放在函数证明上边或上边都足以:

 

 

<script>

    //f(); —>OK

 

    function f(){

        console.log(“hello”)

 

    }

 

    f() //—–>OK

</script>

 

Function 对象的 length 属性

如前所述,函数属于引用类型,所以它们也有质量和方法。

诸如,ECMAScript 定义的习性 length 注脚了函数期望的参数个数。

1

alert(func1.length)

Function 对象的格局

Function 对象也有与富有目的共享的 valueOf() 方法和 toString() 方法。那七个情势重返的都以函数的源代码,在调节时进一步有用。

1

alert(void(fun1(1,2)))

运算符void()成效:拦截方法的归来值 

函数的调用

 

 

function func1(a,b){

 

    alert(a+b);

}

 

    func1(1,2);  //3

    func1(1,2,3);//3

    func1(1);    //NaN

    func1();     //NaN

 

    //只要函数名写对即可,参数怎么填都不报错.

 

——————-面试题———–

 function a(a,b){

    alert(a+b);

}

 

   var a=1;

   var b=2;

   a(a,b)

 

函数的放置对象arguments

 

 

function add(a,b){

 

        console.log(a+b);//3

        console.log(arguments.length);//2

        console.log(arguments);//[1,2]

 

    }

    add(1,2)

 

    ——————arguments的用处1 ——————

    function nxAdd(){

        var result=0;

        for (var num in arguments){

            result+=arguments[num]

        }

        alert(result)

 

    }

 

    nxAdd(1,2,3,4,5)

 

//     ——————arguments的用处2 ——————

 

    function f(a,b,c){

        if (arguments.length!=3){

            throw new Error(“function f called with “+arguments.length+”
arguments,but it just need 3 arguments”)

        }

        else {

            alert(“success!”)

        }

    }

 

    f(1,2,3,4,5)

 

匿名函数

 

 

// 匿名函数

    var func = function(arg){

        return “tony”;

    }

 

// 匿名函数的使用

    (function(){

        alert(“tony”);

    } )()

 

    (function(arg){

        console.log(arg);

    })(‘123’)

 

函数的功能域链和闭包

作用域

js的功能域和py相似,if
while等决定语句并不曾协调作用域;而函数是有和好的成效域的;

 

if(1==1){

        var s=12;

    }

    console.log(s);//12

 

   // ———————-

    function f(){

        var temp=666;

    }

    f();

    console.log(temp);//Uncaught ReferenceError: temp is not defined

 

嵌套函数的成效域:

例1:

 

var city = ‘beijing’;

 

    function func(){

        var city = ‘shanghai’;

        function inner(){

            var city = ‘shenzhen’;

            console.log(city);

        }

        inner();

    }

    func();

 

例2:

 

var city = ‘beijing’;

function Bar(){

    console.log(city);

}

function func(){

 

    var city = ‘shanghai’;

    return Bar;

}

var ret = func();

ret();    //beijing

 

闭包:

 

var city = ‘beijing’;

 

function func(){

    var city = “shanghai”;

    function inner(){

        // var city = “langfang”;

        console.log(city);

    }

    return inner;

}

var ret = func();

ret();

 

思考题1:

 

 

var city = ‘beijing’;

 

function func(){

    var city = “shanghai”;

 

    function inner(){

        // var city = “langfang”;

        console.log(city);

    }

 

    return inner;

}

 

var ret = func();

ret();

 

 

var city = ‘beijing’;

 

function Bar(){

    console.log(city);

}

 

function func(){

 

    var city = ‘shanghai’;

    return Bar;

}

 

var ret = func();

ret();    //beijing

 

职能域链(Scope Chain):

     
在JavaScript中,函数也是目的,实际上,JavaScript里一切都以对象。函数对象和任何对象1样,拥有可以通过代码访问的性质和一一日千里仅供JavaScript引擎访问的中间属性。当中三个里边属性是[[Scope]],由ECMA-26二业内第2版定义,该内部属性包罗了函数被成立的成效域中目的的集纳,那一个集合被称作函数的效果域链,它控制了何等数据能被函数访问。

 

var x=1;

function foo() {

    var y = 2;

   

    function bar() {

        var z = 3;

    }

}

 

#bar的效益域链: barScopeChain=[bar.AO, foo.AO, global.VO];

#foo的法力域链: fooScopeChain=[foo.Ao, global.VO];

 

 

 

什么是AO,VO?

       在函数创制时,每一种函数都会创立多个移动对象Active
Object(AO),全局对象为Global
Object(VO),创设函数的进程也正是为这一个目的添加属性的经过,效能域链就是由那个绑定了品质的位移指标构成的。

       
例如:找x变量;bar函数在检索变量x的长河中,先从自个儿AO对象上找,要是bar.AO存在那脾本性,那么会平昔利用那本本性的值,借使不存在,则会转到父级函数的AO对象,也便是foo.AO

        若是找到x属性则采取,找不到后续
在global.VO对象查找,找到x的质量,重回属性值。假若在global.VO中平素不找到,则会抛出分外ReferenceError

 

举办上下文。

       函数在执行时会创造1个号称“执行上下文(execution
context)”的内部对象,执行上下文定义了函数

      
执行时的条件。各样执行上下文都有和好的职能域链,用于标识符解析,当执行上下文被创建时,而它的功效

       域链初始化为近日运营函数的[[Scope]]所包含的指标。

函数执行

      
在函数执行进度中,每遇到贰个变量,都会招来从什么地方获得和仓库储存数据,该进度从功用域链底部,也正是从活

      
动对象开首物色,查找同名的标识符,若是找到了就动用这一个标识符对应的变量,假若未有则持续查找作用域

      
链中的下一个指标,倘若搜索完全部目的都未找到,则以为该标识符未定义,函数执行过程中,每一种标识符都

       要经历如此的搜索进程。

 

创制效用域链的经过

 

 

      函数进入全局,创造VO对象,绑定x属性<入栈>

        global.VO={x=underfind; foo:reference of
function}(那里只是预解析,为AO对象绑定注脚的性质,函数执行时才会执行赋值语句,所以值是underfind)

     遇到foo函数,创建foo.AO,绑定y属性<入栈>

     foo.AO={y=underfind, bar:reference of function}

     遇到bar函数,创建bar.AO,绑定z属性<入栈>

      bar.AO={z:underfind}

    成效域链和执行上下文都会保存在堆栈中,所以:

    bar函数的scope
chain为:[0]bar.AO–>[1]foo.AO–>[2]global.VO

 

          foo函数的scope chain为:[0]foo.AO–>[1]global.Vo

    //提出:少定义全局变量

   
//理由:因为效益域链是栈的构造,全局变量在栈底,每回访问全局变量都会遍历2遍栈,//这样会影响效能

 

函数的scope等于笔者的AO对象加上父级的scope,也得以精晓为一个函数的成效域等于笔者运动指标加上父级功能域.

函数执行前后的法力域链:

        

留意:效率域链的非自身有个别在函数对象被确立(函数表明、函数表明式)的时候创造,而不需求等到执行

思考题2:                                                                                                              

 

 

 for (var i=1; i<=9; i++) {

     setTimeout( function timer(){

     console.log( i );

     },1000 );

 }

 

//==================

 

for (var i=1; i<=9; i++) {

    (function(){

      var j = i;

      setTimeout( function timer(){

           console.log( j );

      }, 1000 );

     })();

 

回来顶部

BOM对象

BOM(浏览器对象模型),能够对浏览器窗口实行访问和操作。使用
BOM,开发者能够移动窗口、改变状态栏中的文本以及履行此外与页面内容不直接相关的动作。

使 JavaScript 有力量与浏览器“对话”。 

window对象

window对象

    全部浏览器都帮衬 window 对象。

    概念上讲.三个html文书档案对应叁个window对象.

    功用上讲: 控制浏览器窗口的.

    使用上讲: window对象不必要创立对象,间接利用即可.

Window 对象方法

 

 

alert()            展现带有①段新闻和一个承认按钮的警告框。

confirm()          显示带有一段音讯以及确认按钮和撤回按钮的对话框。

prompt()           展现可提醒用户输入的对话框。

 

open()             打开1个新的浏览器窗口或探寻一个已命名的窗口。

close()            关闭浏览器窗口。

setInterval()      根据内定的周期(以飞秒计)来调用函数或总括表达式。

clearInterval()    取消由 setInterval() 设置的 timeout。

setTimeout()       在内定的微秒数后调用函数或计算表明式。

clearTimeout()     撤废由 setTimeout() 方法设置的 timeout。

scrollTo()         把内容滚动到内定的坐标。

 

互动方式:

 

 

方法讲解:   

        //———-alert confirm prompt—————————-

    //alert(‘aaa’);

   

   

    /* var result = confirm(“您分明要删减吗?”);

    alert(result); */

 

    //prompt 参数一 : 提醒音信.   参数2:输入框的默许值.
重返值是用户输入的内容.

 

    // var result = prompt(“请输入2个数字!”,”haha”);

    // alert(result);

 

 

 

    方法讲解:   

        //open方法 打开和2个新的窗口 并 进入钦赐网站.参数一 : 网站.

        //调用艺术壹

            //open(“”);

        //参数一 什么都不填 正是开辟两个新窗口. 
参数二.填入新窗口的名字(一般能够不填). 参数三: 新开拓窗口的参数.

            open(”,”,’width=200,resizable=no,height=100′); //
新开辟四个宽为200 高为100的窗口

        //close方法  将日前文书档案窗口关闭.

            //close();

 

练习:

 

 

var num = Math.round(Math.random()*100);

function acceptInput(){

//2.让用户输入(prompt)    并收受 用户输入结果

var userNum = prompt(“请输入三个0~拾0里面包车型客车数字!”,”0″);

//叁.将用户输入的值与 随机数实行相比较

        if(isNaN(+userNum)){

            //用户输入的不算(重复2,三手续)

            alert(“请输入有效数字!”);

            acceptInput();

        }

        else if(userNum > num){

        //大了==> 提醒用户大了,让用户重新输入(重复贰,3步骤)

            alert(“您输入的大了!”);

            acceptInput();

        }else if(userNum < num){

        //小了==> 提示用户小了,让用户重新输入(重复二,三步骤)

            alert(“您输入的小了!”);

            acceptInput();

        }else{

        //答对了==>提醒用户作答了 , 询问用户是或不是持续玩乐(confirm).

            var result = confirm(“恭喜您!答对了,是不是持续玩乐?”);

            if(result){

                //是 ==> 重复123步骤.

                num = Math.round(Math.random()*100);

                acceptInput();

            }else{

                //否==> 关闭窗口(close方法).

                close();

            }

        }

       

 

setInterval clearInterval

 

 

<input id=”ID1″ type=”text” onclick=”begin()”>

<button onclick=”end()”>停止</button>

 

<script>

 

 

    function showTime(){

           var nowd2=new Date().toLocaleString();

           var temp=document.getElementById(“ID1”);

           temp.value=nowd2;

 

    }

 

    var clock;

 

    function begin(){

 

        if (clock==undefined){

 

             showTime();

             clock=setInterval(showTime,1000);

 

        }

 

    }

 

    function end(){

 

        clearInterval(clock);

    }

 

</script>

 

setTimeout clearTimeout

 

var ID = set提姆eout(abc,三千); // 只调用1次对应函数.

            clearTimeout(ID);

    function abc(){

        alert(‘aaa’);

    }

History 对象

History 对象属性

History 对象涵盖用户(在浏览器窗口中)访问过的 UCR-VL。

History 对象是 window 对象的1部分,可由此 window.history
属性对其举办访问。

1

length  返回浏览器历史列表中的 URL 数量。

History 对象方法

back()    加载 history 列表中的前二个 UKoleosL。

forward()    加载 history 列表中的下贰个 U福特ExplorerL。

go()    加载 history 列表中的有个别具体页面。

 

<a href=”rrr.html”>click</a>

<button onclick=” history.forward()”>>>></button>

<button onclick=”history.back()”>back</button>

<button onclick=”history.go()”>back</button>

Location 对象

Location 对象涵盖关于当前 U福特ExplorerL 的音信。

Location 对象是 Window 对象的二个有个别,可通过 window.location
属性来访问。

Location 对象方法

location.assign(URL)

location.reload()

location.replace(newURL)//注意与assign的区别

重临顶部

DOM对象(DHTML)

7.1 什么是 DOM?

DOM 是 W3C(万维网联盟)的标准。DOM 定义了走访 HTML 和 XML 文档的专业:

“W3C
文书档案对象模型(DOM)是中立于阳台和言语的接口,它同意程序新昌肩膀戏本动态地走访和更新文书档案的内容、结构和体裁。”

W3C DOM 标准被分成 三 个不相同的有些:

  • 核心 DOM – 针对任何结构化文书档案的科班模型
  • XML DOM – 针对 XML 文书档案的行业内部模型
  • HTML DOM – 针对 HTML 文书档案的正式模型

 

  • 什么是 XML DOM?  ---->XML DOM 定义了有着 XML
    元素的对象和性子,以及走访它们的章程。
  • 怎么着是 HTML DOM?---->HTML DOM 定义了全部 HTML
    成分的靶子和性质,以及走访它们的方法。

7.2 DOM 节点 

依照 W3C 的 HTML DOM 标准,HTML 文书档案中的全体剧情都以节点(NODE):

  • 一切文书档案是1个文书档案节点(document对象)
  • 各类 HTML 成分是因秋日点(element 对象)
  • HTML 成分内的文书是文本节点(text对象)
  • 每一种 HTML 属性是性质节点(attribute对象)
  • 注脚是注释节点(comment对象)

画dom树是为着彰显文书档案中逐一对象之间的关联,用于对象的领航。

 

节点(自身)属性:

  • attributes – 节点(成分)的属性节点
  • nodeType – 节点类型
  • nodeValue – 节点值
  • nodeName – 节点名称
  • innerHTML – 节点(成分)的文本值

导航属性:

  • parentNode – 节点(成分)的父节点 (推荐)
  • firstChild – 节点下第5个子元素
  • lastChild – 节点下最后叁个子成分
  • childNodes – 节点(成分)的子节点 

注意:

 

 

<div id=”div1″>

    <div id=”div2″></div>

    <p>hello yuan</p>

</div>

 

<script>

    var div=document.getElementById(“div2”);

 

    console.log(div.nextSibling.nodeName);  //思索:为啥不是P?

</script>

 

推荐介绍导航属性:

 

 

parentElement              // 父节点标签成分

 

children                        // 全部子标签

 

firstElementChild          // 第叁身长标签成分

 

lastElementChild           // 最终二个子标签成分

 

nextElementtSibling       // 下1个汉子标签成分

 

previousElementSibling  // 上一个弟兄标签元素

 

节点树中的节点相互拥有层级关系。

父(parent),子(child)和亲生(sibling)等术语用于描述那些涉及。父节点拥有子节点。同级的子节点被称作同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称之为根(root)
  • 每一种节点都有父节点、除了根(它并未有父节点)
  • 1个节点可具有自由数量的子
  • 亲生是有着相同父节点的节点

上边包车型地铁图形显示了节点树的一部分,以及节点之间的关系:

         

访问 HTML 成分(节点),访问 HTML
成分等同于访问节点,大家能够以不一致的艺术来拜会 HTML 元素:

页面查找:

  • 因此接纳 getElementById() 方法 
  • 经过动用 getElementsByTagName() 方法 
  • 由此使用 getElementsByClassName() 方法 
  • 透过利用 getElementsByName() 方法 

一部分查找:

 

 

<div id=”div1″>

 

    <div class=”div2″>i am div2</div>

    <div name=”yuan”>i am div2</div>

    <div id=”div3″>i am div2</div>

    <p>hello p</p>

</div>

 

<script>

 

   var div1=document.getElementById(“div1”);

 

////支持;

//   var ele= div1.getElementsByTagName(“p”);

//   alert(ele.length);

////支持

//   var ele2=div1.getElementsByClassName(“div2”);

//   alert(ele2.length);

////不支持

//   var ele3=div1.getElementById(“div3”);

//   alert(ele3.length);

////不支持

//   var ele4=div1.getElementsByName(“yuan”);

//   alert(ele4.length)

 

</script>

 

7.3 HTML DOM Event(事件)

HTML 四.0 的新特征之1是有能力使 HTML
事件触发浏览器中的动作(action),比如当用户点击有些 HTML 成分时起步1段
JavaScript。上面是3本质量列表,那一个属性可插入 HTML 标签来定义事件动作。

 

onclick        当用户点击某些对象时调用的轩然大波句柄。

ondblclick     当用户双击有个别对象时调用的事件句柄。

 

onfocus        成分别获得得核心。               //演习:输入框

onblur         成分失去大旨。              
应用场景:用于表单验证,用户距离某些输入框时,代表曾经输入完了,大家得以对它举办验证.

onchange       域的始末被改变。            
应用场景:日常用于表单成分,当成分内容被改成时触发.(三级联合浮动)

 

onkeydown      有些键盘按键被按下。          应用场景:
当用户在终极三个输入框按下回车按键时,表单提交.

onkeypress     有个别键盘按键被按下并甩手。

onkeyup        有些键盘按键被甩手。

onload         一张页面或一幅图像实现加载。

onmousedown    鼠标按钮被按下。

onmousemove    鼠标被活动。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某成分之上。
onmouseleave   鼠标从要素离开

 

onselect      文本被入选。

onsubmit      确认按钮被点击。

 

二种为元素附加事件性质的方法

 

 

<div onclick=”alert(123)”>点我呀</div>

<p id=”abc”>试一试!</p>

 

<script>

    var ele=document.getElementById(“abc”);

 

 

    ele.onclick=function(){

        alert(“hi”);

    };

 

</script>

 

注意:

 

 

<div id=”abc” onclick=”func一(this)”>事件绑定格局一</div>

<div id=”id1二三”>事件绑定情势二</div>

<script>

    function func1(self){

        console.log(self.id)

    }

 

    //jquery下是$(self), 那种方法this参数必须填写;

 

//——————————————

    var ele=document.getElementById(“id123”).onclick=function(){

         console.log(this.id);

        //jquery下是$(this), 那种格局不须要this参数;

    }

   

</script>

 

onload:

onload 属性开发中 只给 body成分加.
其1天性的触发 标志着 页面内容被加载达成.
行使场景: 当有个别业务大家期望页面加载完即刻执行,那么能够接纳该事件属性.

 

 

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>Title</title>

 

    <script>

//          window.onload=function(){

//               var ele=document.getElementById(“ppp”);

//               ele.onclick=function(){

//                alert(123)

//            };

//          };

 

 

 

          function fun1() {

              var ele=document.getElementById(“ppp”);

               ele.onclick=function(){

                alert(123)

            };

          }

 

    </script>

</head>

<body onload=”fun1()”>

 

<p id=”ppp”>hello p</p>

 

</body>

</html>

 

onsubmit:

是当表单在付给时触发. 该属性也只可以给form成分使用.应用场景:
在表单提交前验证用户输入是不是正确.若是证实战败.在该办法中我们理应阻碍表单的提交.

 

 

<form id=”form”>

            <input type=”text”/>

            <input type=”submit” value=”点我!” />

</form>

 

<script type=”text/javascript”>

            //阻止表单提交格局1().

            //onsubmit 命名的风云函数,可以承受重临值.
在那之中再次来到false表示拦截表单提交.别的为放行.

 

            var ele=document.getElementById(“form”);

            ele.onsubmit=function(event) {

//                alert(“验证退步 表单不会付出!”);

//                return false;

               

            // 阻止表单提交格局二 event.preventDefault();
==>通告浏览器不要执行与事件涉及的暗许动作。

             alert(“验证战败 表单不会付出!”);

             event.preventDefault();

 

    }

 

Event 对象

伊芙nt
对象表示事件的状态,比如事件在个中产生的因素、键盘按键的情景、鼠标的岗位、鼠标按钮的场合。

事件不以为奇与函数结合使用,函数不会在事件产生前被实施!event对象在事变时有产生时系统现已创设好了,并且会在事件函数被调用时传给事件函数.大家获得唯有须要接受一下即可.

比如onkeydown,大家想掌握哪个键被按下了,需求问下event对象的性质,那里就时KeyCode;

怀想:onclick=function(event){};那个方式是什么人调用的?

事件传播:

 

 

<div id=”abc_1″ style=”border:1px solid
red;width:300px;height:300px;”>

        <div id=”abc_2″ style=”border:1px solid
red;width:200px;height:200px;”>

       

        </div>

    </div>

    <script type=”text/javascript”>

    document.getElementById(“abc_1”).onclick=function(){

        alert(‘111’);

    }

    document.getElementById(“abc_2”).onclick=function(event){

        alert(‘222’);

        event.stopPropagation(); //阻止事件向外围div传播.

    }

   

</script>

 

7.4 增加和删除改查演示

7.4.1 node的CURD:

增:

1

2

createElement(name)创建元素

appendChild();将元素添加

:

1

2

3

获得要删除的元素

获得它的父元素

使用removeChild()方法删除

:

先是种方式:

      使用方面增和删结合达成修改

其次中艺术:

行使setAttribute();方法修改属性          

接纳innerHTML属性修改成分的始末

:  使用在此以前介绍的方法.

 

 

<script type=”text/javascript”>

//在首先个div中动态扩大3个a标签. 该a标签点击之后跳转到百度首页.

    function addNode(){

        //1.获得 第一个div

        var div = document.getElementById(“div_1”);

        //二.成立a标签  createElement==>创制贰个a标签  
<a></a>

        var eleA =  document.createElement(“a”);

        //3.为a标签添加属性 <a
href=”;

        eleA.setAttribute(“href”, “”);

        //四.为a标签添加内容 <a
href=”;

        eleA.innerHTML = “百度”;   

        //五.将a标签添加到div中

        div.appendChild(eleA);

    }

    //点击后 删除div区域2

    function deleteNode(){

        //1 获得要去除的div区域

            var div = document.getElementById(“div_2”);

        //贰.获得阿爹

            var parent = div.parentNode;

        //三 由阿爹操刀

            parent.removeChild(div);

    }

    //点击后 替换div区域3 为1个玉女

    function updateNode(){

        //一 获得要替换的div区域3

        var div = document.getElementById(“div_3”);

        //二创设img标签对象 <img />

        var img = document.createElement(“img”);

        //三添加属性 <img src=”00一.jpg” />

        img.setAttribute(“src”, “001.JPG”);

        //肆.获得父节点

        var parent = div.parentNode;

        //5.替换

        parent.replaceChild(img, div);

    }

    //点击后 将div区域四 克隆1份 添加到页面尾部

   

    function copyNode(){

        //一.获取要克隆的div

        var div = document.getElementById(“div_4”);

        //贰.克隆 参数为true 那么克隆时克隆全数子成分. false 只克隆自身

        var div_copy = div.cloneNode(true);

        //三.得到父亲

        var parent = div.parentNode;

        //4.添加

        parent.appendChild(div_copy);

    }

   

   

</script>

 

7.4.2  修改 HTML DOM 

  • 改变 HTML 内容 

        改变元素内容的最简答的秘籍是接纳 innerHTML ,innerText。

  • 改变 CSS 样式 

1

2

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";<br>                             .style.fontSize=48px

  • 改变 HTML 属性 

        elementNode.setAttribute(name,value)

       
elementNode.getAttribute(name)<————–>elementNode.value(DHTML)

  • 开立异的 HTML 成分 

        createElement(name)

  • 去除已部分 HTML 成分 

        elementNode.removeChild(node)

  • 关于class的操作 

        elementNode.className

        elementNode.classList.add

        elementNode.classList.remove

回到顶部

8 实例练习

1 搜索框

 

 

<input id=”ID壹” type=”text” value=”请输入用户名” onblur=”Blurs()”
onfocus=”Focus()”>

 

 

<script>

 

function Focus(){

 

    var input=document.getElementById(“ID1”);

    if (input.value==”请输入用户名”){

        input.value=””;

    }

 

};

 

function Blurs(){

 

    var ele=document.getElementById(“ID1”);

    var val=ele.value;

    if(!val.trim()){

 

        ele.value=”请输入用户名”;

    }

}

 

</script>

 

2 模态对话框

 

 

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>Title</title>

    <style>

        .back{

            background-color: rebeccapurple;

            height: 2000px;

        }

 

        .shade{

            position: fixed;

            top: 0;

            bottom: 0;

            left:0;

            right: 0;

            background-color: coral;

            opacity: 0.4;

        }

 

        .hide{

            display: none;

        }

 

        .models{

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -100px;

            margin-top: -100px;

            height: 200px;

            width: 200px;

            background-color: gold;

 

        }

    </style>

</head>

<body>

<div class=”back”>

    <input id=”ID1″ type=”button” value=”click”
onclick=”action(‘show’)”>

</div>

 

<div class=”shade hide”></div>

<div class=”models hide”>

    <input id=”ID2″ type=”button” value=”cancel”
onclick=”action(‘hide’)”>

</div>

 

<script>

 

    function action(act){

        var ele=document.getElementsByClassName(“shade”)[0];

        var ele2=document.getElementsByClassName(“models”)[0];

        if(act==”show”){

              ele.classList.remove(“hide”);

              ele2.classList.remove(“hide”);

        }else {

              ele.classList.add(“hide”);

              ele2.classList.add(“hide”);

        }

 

    }

</script>

</body>

</html>

 

3 全选反选用消

 

 

 <button onclick=”select(‘all’);”>全选</button>

     <button onclick=”select(‘cancel’);”>取消</button>

     <button onclick=”select(‘reverse’);”>反选</button>

 

     <table border=”1″ id=”Table”>

         <tr>

             <td><input type=”checkbox”></td>

             <td>111</td>

         </tr>

         <tr>

             <td><input type=”checkbox”></td>

             <td>222</td>

         </tr>

         <tr>

             <td><input type=”checkbox”></td>

             <td>333</td>

         </tr>

         <tr>

             <td><input type=”checkbox”></td>

             <td>444</td>

         </tr>

     </table>

 

 

<script>

    function select(choice){

        var ele=document.getElementById(“Table”);

 

        var inputs=ele.getElementsByTagName(“input”);

        for (var i=0;i<inputs.length;i=i+1){

 

                   var ele2=inputs[i];

            if (choice==”all”){

                ele2.checked=true;

 

            }else if(choice==”cancel”){

                ele2.checked=false;

            }

            else {

 

                if (ele2.checked){

                    ele2.checked=false;

                }else {

                    ele2.checked=true;

                }

            }

 

            }

    }

</script>

 

4 两级联合浮动

 

 

<select id=”province”>

    <option>请选拔省:</option>

</select>

 

<select id=”city”>

    <option>请选用市:</option>

</select>

 

 

<script>

    data={“河北省”:[“廊坊”,”邯郸”],”北京”:[“朝阳区”,”海淀区”]};

 

 

      var p=document.getElementById(“province”);

      var c=document.getElementById(“city”);

   

    for(var i in data){

        var option_pro=document.createElement(“option”);

 

        option_pro.innerHTML=i;

 

        p.appendChild(option_pro);

    }

     p.onchange=function(){

 

            pro=(this.options[this.selectedIndex]).innerHTML;

            citys=data[pro];

 

         c.options.length=0;

 

         for (var i in citys){

             var option_city=document.createElement(“option”);

             option_city.innerHTML=citys[i];

             c.appendChild(option_city);

         }

 

        }

</script>

 

5 select左右移

 

 

<div id=”box1″>

    <select multiple=”multiple” size=”10″ id=”left”>

        <option>book</option>

        <option>book2</option>

        <option>book3</option>

        <option>book4</option>

        <option>book5</option>

        <option>book6</option>

    </select>

</div>

 

 

<div id=”choice”>

    <input class=”add”     type=”button” value=”—>”
onclick=”add()”><br>

    <input class=”remove”  type=”button” value=”<—”
onclick=”remove();”><br>

    <input class=”add-all” type=”button” value=”====>”
onclick=”ADDall()”><br>

    <input class=”remove-all” type=”button” value=”<===”
onclick=”remall()”>

</div>

 

 

<div>

    <select multiple=”multiple” size=”10″ id=”right”>

        <option>book9</option>

    </select>

</div>

 

<script>

 

     function add(){

         var right=document.getElementById(“right”);

         var
options=document.getElementById(“left”).getElementsByTagName(“option”);

 

         for (var i=0; i<options.length;i++){

 

             var option=options[i];

 

             if(option.selected==true){

                   right.appendChild(option);

                 i–;

             }

 

         }

 

     }

 

    function ADDall(){

         var right=document.getElementById(“right”);

         var
options=document.getElementById(“left”).getElementsByTagName(“option”);

         for (var i=0; i<options.length;i++){

             var option=options[i];

             right.appendChild(option);

             i–;

 

         }

 

     }

 

</script>

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有