JavaScript的对象

在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("星期一","星期二","星期三","星期四");
//数组对象

String对象

字符串对象创建

字符串创建(两种方式)① 变量 = “字符串”② 字串对象名称 = new String (字符串)

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

字符串对象的属性和函数

x.length         ----获取字符串的长度x.toLowerCase()        ----转为小写x.toUpperCase()        ----转为大写x.trim()               ----去除字符串两边空格      ----字符串查询方法x.charAt(index)         ----str1.charAt(index);----获取指定位置字符,其中index为要获取的字符索引x.indexOf(findstr,index)----查询字符串位置
x.lastIndexOf(findstr) x.match(regexp)         ----match返回匹配字符串的数组,如果没有匹配则返回null
x.search(regexp)        ----search返回匹配字符串的首字符位置索引

示例:var str1="welcome to the world of JS!";var str2=str1.match("world");var str3=str1.search("world");alert(str2[0]);  // 结果为"world"alert(str3);     // 结果为15

----子字符串处理方法x.substr(start, length) ----start表示开始位置,length表示截取长度
x.substring(start, end) ----end是结束位置x.slice(start, end)     ----切片操作字符串
x.replace(findstr,tostr) ----    字符串替换x.split();                 ----分割字符串x.concat(addstr)         ----    拼接字符串

示例:
var str1="abcdefgh";var str2=str1.slice(2,4);var str3=str1.slice(4);var str4=str1.slice(2,-1);var str5=str1.slice(-3,-1);alert(str2); //结果为"cd"alert(str3); //结果为"efgh"alert(str4); //结果为"cdefg"alert(str5); //结果为"fg"var str1="一,二,三,四,五,六,日";var strArray=str1.split(",");alert(strArray[1]);//结果为"二"

Array对象

数组创建

创建数组的三种方式:

方式一:var arrname = [元素0,元素1,….];var arr1=[1,2,3];console.log(arr1);   //[1, 2, 3]方式二:ar arrname = new Array(元素0,元素1,….);var arr2=new Array("hello",12,"3",true);console.log(arr2);  //["hello", 12, "3", true]方式三:var arrname = new Array(长度); var arr3=new Array(3);arr3[0]="周日";arr3[1]="周六";arr3[2]="周三";console.log(arr3);  //["周日", "周六", "周三"]创建二维数组var week=new Array(3);for(var i=0;i<=2;i++){week[i]=new Array(2);}week[0][0]="周日";week[0][1]="Sunday";week[1][0]="周六";week[1][1]="Saturday";week[2][0]="周三";week[2][1]="Wednesday";console.log(week[0]);   //["周日", "Sunday"]

数组对象的属性和方法

join方法

x.join(bystr) ----将数组元素拼接成字符串var arr= new Array(11,22,33);var arr1=arr.join("-");console.log(arr1);  //11-22-33concat方法var arr=[1,2,3];var b=arr.concat(4,5);console.log(b); //[1, 2, 3, 4, 5]console.log(arr.toString(),typeof(arr.toString()));    //1,2,3 stringconsole.log(b.toString(),typeof(b.toString()));  //1,2,3,4,5 string数组排序-reverse sort:var x=[12,33,43,56];x.reverse();//颠倒数组元素console.log(x);   //[56, 43, 33, 12]var x=[120,33,43,56];x.sort();//排序数组元素console.log(x);     // [120, 33, 43, 56]比较数字大小,而不是根据ASCII码值比较arr=[1,4,2,100];arr.sort();console.log(arr);   //[1, 100, 2, 4]function intSort(a,b){if(a>b){return 1;}else if(a<b){return -1;}else{return 0;}}arr.sort(intSort);  //不懂console.log(arr);function IntSort(a,b){return a-b;}数组切片操作
x.slice(start, end)
//x代表数组对象,start表示开始位置索引,end是结束位置索引//第一个数组元素索引为0,最后一个数组元素索引为-1//start、end可为负数//end省略则相当于从start位置截取以后所有数组元素var arr1=["h","e","l","l","o"];var arr2=arr1.slice(1,3);var arr3=arr1.slice(2);var arr4=arr1.slice(2,-1);console.log(arr2);  //["e", "l"]console.log(arr3);  //["l", "l", "o"]console.log(arr4);  //["l", "l"]删除子数组
x. splice(start, deleteCount, value, ...)

//x代表数组对象//splice的主要用途是对数组指定位置进行删除和插入//start表示开始位置索引//deleteCount删除数组元素的个数//value表示在删除位置插入的数组元素//value参数可以省略var arr=[1,"23","hello",true];arr.splice(1,2);console.log(arr);   // [1, true]arr.splice(1,1);console.log(arr);   //[1, "hello", true]var a = [1,2,3,4,5,6,7,8];a.splice(1,0,22,33);alert(a.toString());    //1,22,33,2,3,4,5,6,7,8数组的push和pop
//x代表数组对象
//value可以为字符串、数字、数组等任何值
push是将value值添加到数组x的结尾
pop是将数组x的最后一个元素删除var arr=[1,2,3];arr.push(44,55);console.log(arr);   // [1, 2, 3, 44, 55]arr.pop();console.log(arr);   //[1, 2, 3, 44]数组的shift和unshift
//x代表数组对象
//value可以为字符串、数字、数组等任何值
unshift是将value值插入到数组x的开始
shift是将数组x的第一个元素删除var arr=[3,4,5];arr.unshift(11,22);console.log(arr);   //[11, 22, 3, 4, 5]arr.shift();console.log(arr);   // [22, 3, 4, 5]
js中数组的特性
js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.var arr=["abc",1,1.23,true,null,undefined,new String("hello")];console.log(arr.length);    //7arr[10]=1;console.log(arr.length);    //11

Date对象

创建Date对象

方法一:不指定参数var d1=new Date();console.log(d1);    //Tue Aug 08 2017 17:12:56 GMT+0800 (中国标准时间)console.log(d1.toLocaleString());   //2017-8-8 17:13:44方法二:参数为日期字符串var d2=new Date("2008/05/12 12:00");console.log(d2.toLocaleString());   //2008-5-12 12:00:00var d3=new Date("08-05-12 12:00");console.log(d3.toLocaleString());   //2012-8-5 12:00:00方法三:参数为毫秒数var d4=new Date(5000);console.log(d4.toLocaleString());   //1970-1-1 08:00:05console.log(d4.toUTCString());  //Thu, 01 Jan 1970 00:00:05 GMT方法四:参数为年月日时分秒毫秒var d5=new Date(2012,5,12,12,0,0,5000);console.log(d5.toLocaleString());   //2012-6-12 12:00:05

Date对象的方法—获取日期和时间

function getCurrentDate(){//1.创建Date对象var date=new Date();//2.获取当前年份var year=date.getFullYear();var year2=date.getYear();//3.获取当前月份var month=date.getMonth()+1;//4.获取当前日var day=date.getDate();//5.获取当前时var hour=date.getHours();//6.获取当前分var minute=date.getMinutes();//7.获取当前秒var second=date.getSeconds();//8.获取当前毫秒var millisecond=date.getMilliseconds();//9.获取当前星期var week=date.getDay();//10.获取累计毫秒数(从1970/1/1午夜)var time=date.getTime();return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+minute+":"+second+" "+parseWeek(week);
}console.log(getCurrentDate());  //2017年08月8日 18:35:44 星期二//解决自动补齐成两位数字的方法
function changeNum(num){if(num<10){return "0"+num;}else{return num;}
}//将数字0~6转换成 星期日到星期六
function parseWeek(week){var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];    return arr[week];}

Date对象的方法—设置日期和时间

        设置日期和时间var x=new Date();
//        console.log(x); //Tue Aug 08 2017 18:43:51 GMT+0800 (中国标准时间)x.setFullYear(1997);    //设置年x.setMonth(7);   //设置月x.setDate(1);   //设置日x.setHours(12); //设置时x.setMinutes(38);   //设置分x.setSeconds(54);   //设置秒x.setMilliseconds(300); //设置毫秒(0-999)document.write(x.toLocaleString()+"<br>");x.setTime(8000000000000);   //设置累计毫秒数(从1970/1/1午夜)document.write(x.toLocaleString()+"<br>");1997-8-1 12:38:542223-7-6 22:13:20

Date对象的方法—日期和时间的转换

日期和时间的转换:getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差,以分钟为单位
var x=new Date();console.log(x); //Tue Aug 08 2017 18:58:21 GMT+0800 (中国标准时间)

x1=x.toLocaleString();  //返回本地格式时间字符串console.log(x1);    //2017-8-8 18:58:58

time1=Date.parse(x1);   //返回累计毫秒数(从1970/1/1午夜到本地时间)console.log(time1); //1502189712000

x2=x.toUTCString();     //返回国际标准时间字符串console.log(x2);    //Tue, 08 Aug 2017 11:00:15 GMT

time2=Date.UTC(2017,8,8);   //返回累计毫秒数(从1970/1/1午夜到国际时间)console.log(time2); //1504828800000

Math对象

//该对象中的属性方法 和数学有关.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 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。

console.log(Math.abs(-4)); //4(返回数的绝对值。)console.log(Math.exp(0));   //1(返回 e 的指数。括号里边表示e的多少次方)console.log(Math.floor(3.9));   //3(对数进行向下取整)console.log(Math.log(1));   //0(返回数的自然对数(底为e))console.log(Math.max(2,3)); //3(返回数中的最高值。)console.log(Math.min(2,3)); //2(返回数中的最低值。)console.log(Math.pow(2,3)); //8(返回 x 的 y 次幂。)console.log(Math.random()); //0.21343409927353818(返回 0 ~ 1 之间的随机数。)console.log(Math.round(3.4));   //3(把数四舍五入为最接近的整数)sin(x)    返回数的正弦。console.log(Math.sqrt(4));  //2(返回数的平方根)tan(x)    返回角的正切。

练习:获取1-100的随机整数,包括1和100var num=Math.random();num=num*100;num=Math.round(num);console.log(num);

Function 对象(重点)

函数

函数就是重复执行的代码片。

函数的定义

function 函数名 (参数){
<br>    函数体;return 返回值;
}

功能说明:

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致,大小写是敏感的
返回值必须使用return
Function 类可以表示开发者定义的任何函数。

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

var 函数名 = new Function("参数1","参数n","function_body");

函数'return'关键字

函数中'return'关键字的作用:

1、返回函数执行的结果

2、结束函数的运行

3、阻止默认行为

函数定义与执行

<scrip>// 函数定义function aa(){alert('hello!');}// 函数执行aa();
</script>

代码示例:<script>function func1(name){alert('hello'+name);return 8}ret=func1("yuan");alert(ret);var func2=new Function("name","alert(\"hello\"+name);");func2("egon")</script>运行结果:
先alert:helloyuan
再alert:8
最后alert:helloegon

注意:js的函数加载执行与python不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或下面都可以:

    <script>function f(){console.log("hello")}f()</script>

    <script>f();function f(){console.log("hello")}</script>

即:上面两段代码都会正常执行,打印正确结果

Function 对象的属性

上面我们用 Function 类直接创建函数的行为有助于我们理解函数只不过是一种引用类型,它们的行为与用 Function 类明确创建的函数行为是相同的。

所以它们也有属性和方法。

比如,ECMAScript 定义的属性 length 声明了函数期望的参数个数。

alert(func1.length)

Function 的调用

    <script>function func1(a,b){alert(a+b);}func1(1,2);    //3func1(1,2,3);    //3func1(1);    //NaNfunc1();    //NaN</script>//发现只要函数名写对即可,参数怎么填都不报错.

    <script>//-------------------面试题-----------function a(a,b){alert(a+b);}var a=1;var b=2;a(a,b);</script>
运行结果:报错
Uncaught TypeError: a is not a functionat test.html?_ijt=hfb5ihhe3hm95n2m512oubh98t:18

函数的内置对象arguments

    <script>function add(a,b){console.log(a+b);  //3console.log(arguments.length);  //2console.log(arguments);  //(2) [1, 2, callee: function, Symbol(Symbol.iterator): function]}add(1,2)</script>

    <script>//------------------arguments的用处1 ------------------function add(){var result=0;for(var num in arguments){result+=arguments[num]}alert(result)}add(1,2,3,4,5)</script>
运行结果:15(统计函数所有参数的和)

<script>//------------------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("参数个数刚好")}}f(1,2,3,4,5)</script>
运行结果:
Uncaught Error: function f called with 5 arguments,but it just need 3 argumentsat f (test.html?_ijt=hfb5ihhe3hm95n2m512oubh98t:15)at test.html?_ijt=hfb5ihhe3hm95n2m512oubh98t:21

匿名函数

定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

    <script>var ele_btn=document.getElementById("btn1");ele_btn.οnclick=myalert;function myalert() {alert("ok")}</script>

    <script>var ele_btn=document.getElementById("btn1");// 直接将匿名函数赋值给绑定的事件ele_btn.οnclick=function (){alert("ok")}</script>

    <script>// 匿名函数的应用(function(){alert("tony");})();(function (arg) {console.log(arg);})("123")</script>
运行结果:
alert:tony
显示123

BOM对象

window对象

所有浏览器都支持 window 对象。

概念上讲.一个html文档对应一个window对象.

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

使用上讲: window对象不需要创建对象,直接使用即可.

Window 对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。scrollTo()         把内容滚动到指定的坐标。

定时器:
setTimeout()  只执行一次的定时器
clearTimeout() 关闭只执行一次的定时器
setInterval()  反复执行的定时器
clearInterval() 关闭反复执行的定时器

方法使用

1、alert confirm prompt以及open函数

    <script>alert("hello kaylee");
//var result1=confirm("确认删除吗?");alert(result1); //true或者false(确认是true,取消是false)
//
//prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.var result2=prompt("请输入一个数字","haha");alert(result2);     //输入的内容//open方法 打开一个新的窗口 并进入指定网址.参数1 : 网址.open("http://www.baidu.com");//参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.open("","","width=400,resizable=no,height=400");//close方法  将当前文档窗口关闭.close();</script>

猜数字:

<script>var num=Math.round(Math.random()*100);function foo(){var userNum=prompt("请输入一个0~100的数字","0");if(isNaN(+num)){alert("请输入有效数字");foo();}else if(userNum>num){alert("输入的数字大了");foo();}else if(userNum<num){alert("输入的数字小了");foo();}else{var result=confirm("恭喜答对,是否继续?")if(result){num=Math.round(Math.random()*100);foo()}else{close()}}}foo();</script>

2、setInterval,clearInterval

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:<br>     setInterval(code,millisec)
其中,code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔,以毫秒计。

定时器案例:

<input type="text" id="ID1"><button οnclick="start()">开始</button><button οnclick="stop()">停止</button><script>function showTime(){var nowd=new Date().toLocaleString();var temp=document.getElementById("ID1");temp.value=nowd;}var ID;function start() {if(ID==undefined){showTime();ID=setInterval(showTime,1000);console.log(ID);}}function stop(){clearInterval(ID);ID=undefined;}</script>

DOM对象

什么是HTML  DOM

  •  HTML  Document Object Model(文档对象模型)
  • HTML DOM 定义了访问和操作HTML文档的标准方法
  • HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)

DOM树  

    

画dom树是为了展示文档中各个对象之间的关系,用于对象的导航。

DOM节点

节点类型

HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的:
    整个文档是一个文档节点
    每个 HTML 标签是一个元素节点
    包含在 HTML 元素中的文本是文本节点
    每一个 HTML 属性是一个属性节点

其中,document与element节点是重点。

节点关系

节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称为根(root)
  • 每个节点都有父节点、除了根(它没有父节点)
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素。

节点查找

直接查找节点

document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)  //获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的dom元素。
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)

 

局部查找

    <script>var div1=document.getElementById("div1");var ele=div1.getElementsByTagName("p");console.log(ele.length);    //1
     console.log(ele[0]);    //<p>hello p</p>
var ele2=div1.getElementsByClassName("div2");console.log(ele2.length);    //1
     console.log(ele2[0]);   //<div class="div2">i am div2</div>
var ele3=document.getElementById("div4");console.log(ele3);    //<div id="div4">i am kaylee</div>var ele4=document.getElementsByName("div3");console.log(ele4.length);    //1
     console.log(ele4[0]);   //<div name="div3">i am div3</div>
    </script>

注意:涉及到寻找元素,注意<script>标签的位置!

<script>var ele_div=document.getElementById("div1");ele_div.οnclick=function(){alert(123)}</script><div id="div1">这是一个div元素</div>
运行结果:报错
Uncaught TypeError: Cannot set property 'onclick' of nullat test.html?_ijt=hfb5ihhe3hm95n2m512oubh98t:12

上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:

第一种方法:将javascript放到页面最下边

    <div id="div1">这是一个div元素</div><script>var ele_div=document.getElementById("div1");ele_div.οnclick=function(){alert(123)}</script>

第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了。

    <script>window.οnlοad=function(){var ele_div=document.getElementById("div1");ele_div.οnclick=function(){alert(123)}}</script><div id="div1">这是一个div元素</div>

导航节点属性

parentElement           // 父节点标签元素children                // 所有子标签firstElementChild       // 第一个子标签元素lastElementChild        // 最后一个子标签元素nextElementtSibling     // 下一个兄弟标签元素previousElementSibling  // 上一个兄弟标签元素

注意,js中没有办法找到所有的兄弟标签!

节点操作

创建节点:

createElement(标签名) :创建一个指定名称的元素。

例如:
<script>var tag=document.createElement("input");tag.setAttribute("type","text");console.log(tag);   //<input type="text"></script>

添加节点:

追加一个子节点(作为最后的子节点)
父节点.appendChild(被追加的子节点)把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

删除节点:

父节点.removeChild(要被删除的子节点)

替换节点:

父节点.replaceChild(新节点, 被替换的旧节点);

节点属性操作:

1、获取文本节点的值:innerText    innerHTML

innerHTML可以读取、写入标签或者文本,例如:  tag.innerHTML = “<p>要显示内容</p>”;

iinnerText只可以读取或者写入文本

2、attribute操作

    elementNode.setAttribute(name,value)   建议使用:element.属性名=属性值 elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)elementNode.removeAttribute(“属性名”);

3、value获取当前选中的value值

  1.input   
        2.select (selectedIndex)
        3.textarea

<select id="sel"><option>山西省</option><option>河北省</option><option>河南省</option><option>山东省</option><option>江苏省</option></select><script>var ele_select=document.getElementById("sel");ele_select.options.length=0;    //清空操作console.log(ele_select);</script>

    <select id="sel" type="checkbox"><option>山西省</option><option>河北省</option><option>河南省</option><option>山东省</option><option>江苏省</option></select><script>var ele_select=document.getElementById("sel");ele_select.οnchange=function () {console.log(this.selectedIndex);  //选中option的索引值}</script>

4.关于class的操作:

elementNode.className
elementNode.classList.add("class值")  
elementNode.classList.remove("class值")  

 

5.改变css样式:

    <p id="p1">hello world</p><script>var ele_p=document.getElementById("p1"); p1.style.color="red";p1.style.fontSize="48px";</script>

DOM Event(事件)

事件类型

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。onfocus        元素获得焦点。               练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击。

绑定事件方式

方式1:

    <div class="div" οnclick="foo(this)">点我呀</div><script>function foo(self){  // 形参不能是this;console.log(self);  //<div class="div" οnclick="foo(this)">点我呀</div>self.style.color="green";self.style.fontSize="48px";}</script>

方式2:

    <div class="div">点我呀</div><script>var ele_div=document.getElementsByClassName("div")[0];ele_div.οnclick=function(){console.log("ok");console.log(this);  //<div class="div">点我呀</div>  // this直接用};</script>

事件介绍

1、onload:

onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

2、onsubmit:

当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

    <form id="form"><input type="text"/><input type="submit" value="点我"></form><script>//阻止表单提交方式1.//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.var ele=document.getElementById("form");ele.οnsubmit=function(event){alert("验证失败,表单不会提交");return false;}</script>

    <form id="form"><input type="text"/><input type="submit" value="点我"></form><script> // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。var ele=document.getElementById("form");ele.οnsubmit=function(event){alert("验证失败,表单不会提交");event.preventDefault();}</script>

3、事件传播:

    <div id="abc1"><div id="abc2"></div></div><script type="text/javascript">var ele_one=document.getElementById("abc1");ele_one.οnclick=function () {alert("111")};var ele_two=document.getElementById("abc2");ele_two.οnclick=function () {alert("222");event.stopPropagation();    //阻止事件向外层div传播.}</script>

4、onselect:

    <input type="text" /><script type="text/javascript">var ele=document.getElementsByTagName("input")[0];ele.οnselect=function () {alert(123);}</script>

5、onchange:

    <select name="" id=""><option value="">111</option><option value="">222</option><option value="">333</option></select><script type="text/javascript">var ele=document.getElementsByTagName("select")[0];ele.οnchange=function () {alert(123);}</script>

6、onkeydown:

Event 对象:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.

比如onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就时KeyCode.

    <input type="text" id="t1"><script type="text/javascript">var ele=document.getElementById("t1");ele.οnkeydοwn=function (e) {e=e||window.event;var keynum=e.keyCode;var keychar=String.fromCharCode(keynum);alert(keynum+'---------->'+keychar);}</script>

String.fromCharCode()函数用于从一些Unicode字符值中返回一个字符串。该函数属于String对象,所有主流浏览器均支持该函数。

7、onmouseout与onmouseleave事件的区别:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><style>#container{width:300px;}#title{cursor:pointer;background-color: #ccc;}#list{display:none;background-color: #fff;}#list div{line-height:50px;}#list .item1{background-color: green;}#list .item2{background-color: rebeccapurple;}#list .item3{background-color: lemonchiffon;}</style></head><body><div id="container"><div id="title">hello</div><div id="list"><div class="item1">第一行</div><div class="item2">第二行</div><div class="item3">第三行</div></div></div><script type="text/javascript">var ele_container=document.getElementById("container");var ele_title=document.getElementById("title");var ele_list=document.getElementById("list");title.οnmοuseοver=function(){ele_list.style.display="block";};ele_container.onmouseout=function () {    // 1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
                                // 2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
     ele_list.style.display="none"; }   </script> </body> </html>

js的作用域

简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

1、全局变量:在函数之外定义的变量,为整个页面公用,函数内部外部都可以访问。
2、局部变量:在函数内部定义的变量,只能在定义该变量的函数内部访问,外部无法访问。

一般来说一下几种情形拥有全局作用域:

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域

<script>var name="yuan";function foo() {var age=23;function inner() {console.log(age);}inner();}console.log(name);  //yuan
//    console.log(age);   //Uncaught ReferenceError: age is not definedfoo();  //23inner();    //Uncaught ReferenceError: inner is not defined
</script>

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

<script>var name="yuan";function foo() {age=23;var sex="male"}console.log(name);  //yuanfoo();console.log(age);   //23console.log(sex);   //Uncaught ReferenceError: sex is not defined
</script>

(3)所有window对象的属性拥有全局作用域

一般情况下,window对象的内置属性都都拥有全局作用域,例如window.alert()、window.location、window.top等等。

作用域链(Scope Chain)

在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

示例

<script>var s=12;function f() {console.log(s);    //12}f();
</script>

<script>var s=12;function f() {console.log(s); //undefinedvar s=12;console.log(s); //12}f();
</script>

<script>var s=10;function foo() {console.log(s); //function s() {console.log("ok");}var s=5;console.log(s); //5function s() {  // 函数的定义或声明是在词法分析时完成的,执行时已不再有任何操作console.log("ok");   //5}console.log(s);}foo();
</script>

<script>function bar(age) {console.log(age);   //fnvar age=99;var sex="male";console.log(age);   //99function age() {alert(123)}console.log(age);   //99return 100;}result=bar(5);console.log(result);    //100
</script>

补充:

变量与函数预解析

JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。

结果分析

以最复杂的例3来分析整个过程。

当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图所示:

解析到函数调用时,即bar(5),会生成一个active object的对象,该对象包含了函数的所有局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图所示:

过程解析:

function bar(age) {console.log(age);var age = 99;var sex="male";console.log(age);function age(){alert(123);} ;console.log(age);return 100;
}result=bar(5);一 词法分析过程(涉及参数,局部变量声明,函数声明表达式):1-1 、分析参数,有一个参数,形成一个 AO.age=undefined;1-2 、接收参数 AO.age=5;1-3 、分析变量声明,有一个 var age, 发现 AO 上面有一个 AO.age ,则不做任何处理1-4 、分析变量声明,有一个 var sex,形成一个 AO.sex=undefined;1-5 、分析函数声明,有一个 function age(){} 声明, 则把原有的 age 覆盖成 AO.age=function(){};
二 执行过程:2-1 、执行第一个 console.log(age) 时,当前的 AO.age 是一个函数,所以输出的一个函数2-2 、这句 var age=99; 是对不 AO.age 的属性赋值, AO.age=99 ,所以在第二个输出的age是 99;2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。注意:执行阶段:function age(){alert(123)} ;不进行任何操作,将执行语句复制给age这部操作是在词法分析时,即运行前完成的。

转载于:https://www.cnblogs.com/metianzing/p/7342141.html

Python--JavaScript的对象相关推荐

  1. python怎样给对象赋值_Python对象赋值、浅拷贝和深拷贝

    总结: 1.copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象 2.copy.deepcopy 深拷贝 拷贝对象及其子对象 1.对象赋值 will = ["Will&quo ...

  2. JavaScript基于对象编程

    2019独角兽企业重金招聘Python工程师标准>>> JavaScript基于对象编程 1.JavaScript变量/函数声明在代码执行之前被解析,并且变量声明优先级高于函数声明. ...

  3. python之⾯向对象-多态

    python之⾯向对象-多态 ⼀. ⾯向对象三⼤特性 封装 将属性和⽅法书写到类的⾥⾯的操作即为封装 封装可以为属性和⽅法添加私有权限 继承 ⼦类默认继承⽗类的所有属性和⽅法 ⼦类可以重写⽗类属性和⽅ ...

  4. python之⾯向对象-继承

    python之⾯向对象-继承 ⼀. 继承的概念 ⽣活中的继承,⼀般指的是⼦⼥继承⽗辈的财产. 拓展1:经典类或旧式类 不由任意内置类型派⽣出的类,称之为经典类. class 类名:代码...... 拓 ...

  5. python之⾯向对象基础

    python之⾯向对象基础 ⼀. 理解⾯向对象 ⾯向对象是⼀种抽象化的编程思想,很多编程语⾔中都有的⼀种思想. 例如:洗⾐服 思考:⼏种途径可以完成洗⾐服? 答: ⼿洗 和 机洗. ⼿洗:找盆 - 放 ...

  6. JavaScript 复制对象与Object.assign方法无法实现深复制

    在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...

  7. javascript 遍历对象

    javascript 遍历对象 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...

  8. python做bi系统_如何使用Python创建可视化对象

    早前,Power BI就已经支持使用Python创建可视化对象了,当你遇到自定义程度较高的可视化对象时,Python就大大的派上了用场:那么我们如何使用呢?接下来小悦就为各位伙伴们介绍一下吧~ 首先, ...

  9. javascript定义对象写法(个人整理)

    javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义 优点:动态的传递参数 缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...

  10. javascript笔记:深入分析javascript里对象的创建(上)续篇

    今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里j ...

最新文章

  1. 搭建JAVA可视化开发环境
  2. 【数据竞赛】从0梳理1场时间序列赛事!
  3. stm32中断优先级_关于STM32 (Cortex-M3) 中NVIC的分析(转)
  4. CSS属性之attr()
  5. mysql 5.7.14-winx64_mysql-5.7.14-winx64 解压版本安装
  6. jsp文件放在WebRoot下还是WebInfo下
  7. 机器学习---人脸对齐的基于形状模型的训练
  8. NLP(自然语言处理技术)
  9. 浏览器端技术体系概览 -- 前端开发的七种武器
  10. 67. 把字符串转换成整数
  11. 服务器控件与客户端控件
  12. ES7和 ES8 一览
  13. 卷积与反卷积(转置卷积)关系的公式推导 及其各自的形式
  14. 使用turtle绘制心心相印(动态)python
  15. 【题目】动态规划:小朋友过桥问题
  16. Q5 波士顿市场成长-分额矩阵
  17. Centos7下mysql安装详解
  18. 计算机一级ps模拟考试软件,计算机一级photoshop模拟试题
  19. 输入框调用手机键盘的确认按钮
  20. python下载漫画

热门文章

  1. 如何在 Mac 上修复丢失的鼠标光标?
  2. macOS Big Sur Beta4 无法收到更新通知解决办法
  3. 安全SaaS调查品牌认知
  4. 36家健康类公益组织联名举报百度
  5. JS版日期格式化和解析工具类
  6. vs 下 opengl 配置问题
  7. 将重复数据删除技术应用于数据复制过程 分享修改删除
  8. Spark取出(Key,Value)型数据中Value值为前n条数据
  9. 【没有assembly目录】spark2.0.0启动时无法访问spark-assembly-*.jar的解决办法
  10. 移动端webview canvas bug