JavaScript学习笔记

一:数组

//数组的构造的第一种方法

var arr=[1,2,3]

var arr=[1,"2",true]

//数组的构造的第二种方法

var arr1=new Array(5);//表示创建一个长度为5的数组

alert("arr1:"+arr1.length)//输出数组的长度

//数组的构造的第三种方法

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

二:方法的构造

//方法构造的第一种方法

function 方法名(参数列表){

方法体;

返回值(可有可无)

}

//实例1 无参

function test(){

alert("aaa");

}

//调用

test();

//实例2 有参

function test2(a,b){

var sum=a+b;

alert(sum);

}

//调用

test(2,3);

//方法构造的第二种方法

//匿名函数

var add=function(参数列表){

方法体和返回值;

}

//实例

var add3= function(m,n){

alert(m+n);

}

//调用

add3(5,6);

三:js的全局变量和局部变量

**全局变量:在js页面标签中定义一个变量,这个变量在页面中的js部分都可以使用

- 在方法的外部使用,在方法的内部使用,在另一个Script标签使用

**局部变量:在方法内部定义一个变量,只能在方法内部使用

- 在方法外部调用这个变量会出错

【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。加群:731771211。免费赠送web前端系统的学习资料!!前端学习必备公众号ID:mtbcxx】

四:js的重载

方法名相同,参数列表不同

function add1(a,b){

return (a+b);

}

function add2(a,b,c){

return (a+b+c);

}

add1(2,3);

add2(2,3,4);

五:js的String对象

**创建String对象

***var Str="";

**String属性

*** length 长度

**方法

(1)和html相关的方法

- bold();//加粗

var str1="sss";

document.write(Str1.blid);

- fontcolor();//设置字符串的颜色

document.write(Str1.fontcolor("red"));

- fontsize();//范围数字1-7,设置字体的大小

document.write(Str1.fontsize(2));

- link();//让字符串显示成超链接

document.write(Str1.link("hello.html"));

- sub();//下标

document.write(Str1.sub()); //几次方

- sup();//上标

var str2="sss";

document.write(Str1.sup());

(2)与java相似的方法

var str1="abc";

var str2="def";

- concat();//连接字符串的方法

document.write(Str1.concat(str2));//abcdef

- charAt();//返回指定位置的字符串

document.write(Str1.charAt(0));//a //字符串位置不存在,返回的是一个空的字符串

- indexOf();//返回字符串的位置

document.write(Str1.indexOf("a"));

//字符串不存在返回-1

- split();//切分字符串,切分为数组

var str3="d-e-f";

var arr1=Str3.split("-");

document.write(Str3.length);

- replace();//将指定得字符串替换成你将要换成的字符串

document.write(str1.replace("a","ttt"));

- substr();和subString();

var str4="abcdefghuiop";

document.write(str4.sunstr(5,3));//fgh[5,3]

//从第五位开始向后截取3位

document.write(str4.sunstrng(5,3));//fg

//从第几位开始到第几位结束,但不包含最后一位[5,3)

六,js 的Array对象

**创建数组

-var arr1=[1,2,3];

-var arr2=new Array(3);

-var arr3=new Array(1,32,3);

**方法

-conact();//数组的连接

var arr1=[1,2,3];

var arr2=[4,5,6];

document.write(arr1.concat(arr2));//1,2,3,4,5,6

-join();//根据一个指定的字符进行数组分割

document.write(arr1.join("-"));//1-2-3

-push();//向数组的末尾添加一个或多个元素,返回新的数组长度

document.write(arr1.push("qwe"));//1,2,3,qwe

document.write(arr1.push(arr2));

//把数组arr2添加到arr1之后,新的数组长度为四,因为是把数组arr2整体当成一个元素添加到了arr1中

-pop();//删除最后一个元素并返回

document.write(arr1.pop());//返回3

-reverse();//倒序

document.write(arr1.reverse());

七.js的date对象

** js获取当前时间

var date=new Date();

document.write(date);//未格式化的时间

document.write(date.toLocaleString());//格式化后的时间

-getFullYear();//获取当前的年份

document.write(date.getFullYear());

-getMonth();//获取当前月份,注意,获取的月份是(0-11)

var month=date.getMonth();

document.write(month+1);

-getDay();//获取当前的星期,注意,获取的星期是(0-6)

-getDate();//获取当前的天

-getHours();//获取 当前的小时

-getMinutes();//获取当前的分钟

-getSeconds();//获取当前的秒

-getTime();//获取毫秒数,返回1970年1月1日至今的毫秒数

//应用场景

//使用毫秒数处理缓存http://www.baidu.com?毫秒数

八,js的Math对象

**数学

var mm=10.4;

-cell(x);//向上舍入

document.write(Math.ceil(mm));//11

-floor(x);//向下舍入

document.write(Math.fllor(mm));//10

-round(x);//四舍五入

document.write(Math.round(mm));//10

-random();//得到随机数(0-1),是伪随机数

document.write(Math.random());//小数0.23131441

document.write(Math.floor(Math.random()*10));//0-9

-Max(x,y);//返回最大值

-pow(x,y);//返回x的y次方

九.js的全局函数

*由于不属于任何一个对象,直接写名称使用

-eval();//执行js代码

var str="alert('1234')";

eval(str);//1234

-encodeURI();// 对字符进行编码

var str="测试中文aaa1234";

var encode1=encodeURI(str);

document.write(enocde1);

-decodeURI();// 对字符进行解码

var encode2=encodeDRI(str);

document.write(enocde2);

-encodeURIComponent();//

-decodeURIComponent();//

-isNaN();//判断当前字符串是否为数字

var str="123";//false

document.write(isNaN(str));//是数字返回false,如果不是数字返回的是true

-parseInt();//类型转换

var str="123";

document.write(parseInt(str)+1);//124

十.js的重载

** js的重载是否存在?不存在

**会调用最近的方法(面试题)

(1)js里面不存在重载

(2)但是可以通过其他方法来模拟重载 arguments数组

十一.js的bom对象

** broswer object model

--对象

**navigater://获取浏览器的名称

document.write(navigater.appName);

**screen:获取屏幕的信息

document.write(screen.height);

document.write(screen.weight);

**location:请求的URL地址   

-href属性:

***获取请求的url地址

document.write(location.href);

***设置URL地址

一个页面中设置一个按钮,连接到另一个页面

鼠标点击事件 onclick="js的方法";

**history:请求URL的历史记录

//

-到访问的上一个页面

function back(){

history.back();

//history.go(-1);//等同于back();方法

}

-到访问的下一个页面

function next(){

history.forward();

//history.go(1);//等同于forward();方法

}

**window(重点)

*窗口对象

*顶层对象(所有的bom对象都是在window里面操作)

**方法

-window.alert();//在窗口弹出一个页面

-window.confirm();//确认提示框

-var flag=window.confirm("是否删除");

alert(flag);//true

-window.prompt();//输入对话框

window.prompt(text,defaulttext);

window.prompt("显示输入提示","默认值");

window.prompt("请输入:","0");

-open();//

window.open("连接到新的地址","","窗口特征,比如高和款等信息");

window.open("hello.html","","heigth=200,weight=300");

-close();//关闭窗口,兼容性比较差

-做定时器

** setInterval("js代码",毫秒数);

window.setInterval("alert('123')",3000);//每三秒就执行一次alert方法

** setTimeout("js代码",毫秒数);//在指定的毫秒数之后去执行,但是只执行一次

window.setTimeout("alert('123')",3000);//在三秒之后执行alert,但是只执行一次

** clearInterval();//清除setInterval的方法

var clear1=window.setInterval("alert('123')",3000);\

function clear1(){

clearInterval(clear1);

}

** clearTimeout();//清除setTimeout的方法

var clear1=window.setTimeout("alert('123')",3000);

function clear2(){

clearTimeout(clear1);

}

十二.js的dom对象

* dom : document object model

** 文档

超文本标记文档 html xml

** 对象 

提供了属性和方法

** 模型

提供属性和方法操作超文本标记性文档

*** 可以使用js里面的dom对象进行操作

*** 想要对标记性超文本文档进行操作,首先需要对标记性超文本型文档里面所有的内容封装成对象

--需要把html里面的标签、属性、文本内容封装成对象

*** 解析过程

根据html的成绩结构,在内存中分配一个树形结构,需要把html中的每一个部分都封装成一个对象

-document对象:整个文档

-element对象:标签对象

-属性对象

-文本对象

--Node节点对象:这个对象时这些对象的父对象

*** 如果在这些对象里面找不到相对应的方法,这个时候需要到Node对象里面去找

* DHTML:是很多技术的简称

** html:封装数据

** css:使用属性和属性值设置样式

** dom:操作html文档(标记性文档)

** JavaScript:专门指的是js的语法语句

十三.document对象:整个文档

* 表示整个文档

** 常用方法

- write方法

(1)向页面输出变量值

document.write(str1);

(2)向页面输出html代码

document.write("


");

- getElementById();//通过id得到标签,返回的是一个对象

var input=document.getElementById("nameid");//获取的是标签中的id值

//得到input里面的value值

alert(input.value);

//向input里面设置一个value值

input.value="bbbb";

- getElementsByName();//通过标签的name属性值来得到标签,返回的是一个数组

var input=document.getElementsByName("name1");

alert(input.length);

//遍历数组

for(var i=0;i

var in=nput[i];//每次循环得到的是input的对象

alert(in.value);//得到每个input标签的value值

}

- getElementsByTagName(“标签名称”);//返回的是一个数组

var in=document.getElementsByTagName("input");//传递的参数是标签名称

alert(in.length);

//遍历集合,每次得一个input标签

for(var i=0;i

var ip=in[i];

alert(ip.value);

}

*** 注意地方

//只有一个标签,这个标签智能通过name获取到,这个使用getElementByName返回的是一个数组

var in=document.getElementsByName("name1")[0];

alert(in.value);

//通过input标签获取

var in=document.getElementsByName("input")[0];

alert(in.value);

十四.window弹窗案例

//实现s1的方法

//需要把num1和num2赋值到window页面

//跨页面操作  opener:创建这个窗口的窗口  得到window页面

function s1(num1,num2){

var pwin=window.opener;//得到window的页面

pwin.document.getElementById("nameId").value=num1;

pwin.document.getElementById("pwdId").value=num2;

window.close();

}

十五:元素对象(element)

** 要操作element对象,首先要获取element

** 方法

获取值

var input=document.getElementById("inid");

alert(input.getAttribute("value"));

设置值

input.setAttribute("参数名","haha");

input.setAttribute("class","haha");

删除属性,但是不能删除value属性

input.removeAttribute("name");

** 获取标签下面的子标签 childNodes()(兼容性差),getElementsByTagName()(兼容性高)

111

222

333

//获取ul标签

var ul1=document.getElementById("ulid");

//返回的是一个集合

//获取ul下面的子标签,兼容性差

var lis=ulid.childNodes;

alert(lis.length);

//获取ul下面的子标签,兼容性高

var lis1=ulid.getElementsByTagName("li")

alert(lis.length);

** Node对象属性1

***nodeName 节点名称

***nodeType 节点类型

***nodeValue 节点值

**标签节点对应的值

haha

var span1=document.getElementById("spanid");

alert(span1.nodeName); // SPAN 大写标签名称

alert(span1.nodeType); // 1

alert(span1.nodeValue); // null

//属性节点对应的值

var id1=spqn1.getAttributeNode("id");

alert(id1.nodeName); // id

alert(id1.nodeType); // 2

alert(id1.nodeValue); // spanid

//获取文本对象

var test1=span1.firstChild;

//文本节点对应的值

alert(test1.nodeType); // 3

alert(test1.nodeName); // #text

alert(test1.nodeValue); // haha

** Node对象属性2

111

222

333

var li1=document.getElementById("li1");

* 父节点 ul是li的父节点

parentNode:父节点

var ul1=li1.parentNode;

//得到ul

alert(ul1.id);

* 子节点 li是ul的子节点

childNodes:得到所有的子节点,但是兼容性差

firstChild:第一个子节点

//获取ul的第一个子节点

//得到ul

var ul1=document.getElementById("ulid");

var li1=ul1.firstChild;

alert(li1.id); // li1

lastChild:最后一个子节点

//获取ul的最后一个子节点

//得到ul

var ul1=document.getElementById("ulid");

var li4=ul1.lastChild;

alert(li4.id); // li4

* 同辈对象

nextSibling:下一个兄弟节点

previousSibling:上一个兄弟节点

//获取li的id是li3的上个和先一个兄弟节点

var li=document.getElementById("li3");

alert(li.nextSibling.id); // li4

alert(li.previousSibling.id); // li2

十六.操作dom树

111

222

333

**apendChild方法

- 添加子节点到末尾,类似于剪切

//获取div2id的id

var div2=document.getElementById("div2id");

//获取ulid的id

var ul1=document.getElementById("ulid");

//把ulid中的li标签添加到div2中

ulid.apendChild(div2id);

** insertBefore(newNode,oldNode)方法

- 在么某个节点之前插入一个新的节点

//在

333

之前添加一个

000

111

222

333

function insert1(){

//获取li3的标签

var li3=document.getElementById("li3");

//获取ulid的标签

var ulid=document.getElementById("ulid");

//创建li标签

var li4=document.createElement("li");

//创建文本

var text4=document.createTextNode("000");

//把文本添加到ul标签里面(在

333

之前添加一个

000

ulid.insertBefore(li4,li3);

}

** 不存在 insertAfter();方法

** removeChild(); 删除节点

//删除li id="li3">333

//获取里标签

var li3=document.getElementById("li3");

//获取父节点  通过id获取或者是通过parentNode获取

var ulid=document.getElementById("ulid");

ulid.remove(li3);

** replaceChild(newNode,oldNode);//替换节点,通过父节点进行替换

//替换

333

444

111

222

333

function replace1(){

//获取li3的标签

var li3=document.getElementById("li3");

//创建新的标签

var li4=document.createElement("li");

//创建新的标签文本

var text4=document.createTextNode("444");

//把文本添加到标签

li4.apendChild(text4);

//获取ulid标签

var uid=document.getElementById("ulid");

//执行替换方法

uid.replaceChild(li4,li3);

}

** 赋值节点

***cloneNode(boolean);

111

222

333

function cloneNode1(){

//复制

333

到div中

//获取ulid标签

var ulid=document.getElementById("ulid");

//执行复制方法

var copyul=ulid.cloneNode(true);

//获取divv的标签

var divv=document.getElementById("divv");

//把复制的ul标签放在新的div里面

divv.apendChild(copyul);

}

** 操作dom树的总结

* 获取节点使用方法

getElementById();//通过节点的id属性,查找相应的节点

getElementsByName();//通过节点的name属性,查找相应的节点

getElementsByTagName();//通过节点名称,查找相应的节点

*插入节点的方法

insertBefore方法:

appendChild方法:添加到末尾

*删除方法

removeChild方法:通过父节点删除

* 替换节点的方法

replaceChild方法:通过父节点进行替换

十七.innerHTML属性

* 这个属性不是dom树的组成部分,但是大多数浏览器都支持的属性

第一个作用:获取文本的内容

haha

//获取span标签

var span1=document.getElementById("spanid");

//获取标签的文本内容

alert(span1.innerHTML);

第二个作用:向标签里面设置内容(可以是HTML代码)

haha

//获取span标签

var span1=document.getElementById("spanid");

//获取div的标签

var div1=document.getElementById("divid");

//向div1标签里面设置内容(可以是HTML代码)

div1.innerHTML="

hehehe

";

* 案例

* 得到当前时间

var date =new date();

var d1= date.toLocaleString();

*需要每一秒获取时间

setInterval方法,定时器

*显示到页面上

每一秒向div写一次时间

* 使用innerHTML属性

function getd1(){

//获取当前时间

var date = new date();

//格式化当前时间

var d1 = date.toLocaleString();

//获取div的id

var divv = document.getElementById("divid");

//添加到div中

divv.innerHTML = d1;

}

//使用定时器实现每一秒写一次时间

setInterval("getd1();",1000);

如果对你有帮助的话,可以点赞收藏哟!

【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。加群:731771211。免费赠送web前端系统的学习资料!!前端学习必备公众号ID:mtbcxx】

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人
  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 天干地支五行八卦的对应关系

    一石匠人

扫码关注云+社区

领取腾讯云代金券