03 前端篇(JS)

参考博客:http://www.cnblogs.com/yuanchenqi/articles/5980312.html

JavaScript包括三部分: ECMAScript、DOM、BOM

Javascript在开发中大多数情况下是基于对象的,也是面向对象的。

ECMAScript:语法、类型、语句、关键字、保留字、运算符、对象

JavaScript 引入方式:

  1. 直接编写:建议放在 body 的最后

<script>

alert(“hello div”)

</script>

2. 导入文件:建议放在 head 里面

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

变量:var

注释方式:1. //     2. /* */

数据类型: 1. Number,包括整型和浮点型  2. String   3. Boolean   4. Null   5. Undefined:undefined

NaN:当字符串转换成数字失败时,就是NaN,属于 Number数据类型

NaN 数据在表达式中结果一定为 false,除了 !=

typeof:数据类型查询,只能检测基本数据类型,对象不能检测

逻辑运算符:

ECMAScript:

native object:

host object: DOM 、BOM

DOM: document.write

BOM:alert(111)

 

 function 创建方式:

  1. function func() {
        alert(123);
        return 8;
    }

    var ret = func()
    alert(ret)

  2. var func2 = new function ("1", "n", "函数体") ;

instanceof:检测对象类型   s instanceof String

字符串:

两种创建方式:1. var s=“hello” 2. var s2=new String(“hello”)

方法:

1. s.length

2. 遍历

3. 编排方法:s.italics()  s.bold() s.anchor()

4.大小写转换: s.toUpperCase()  s.toLowerCase()

5. 获取指定字符: s.charAt(3)//取对应位置的字符

s.charCodeAt(3)//取对应位置字符的ASCII值

6. 查询字符串: s.match(“l”)//返回一个数组,里面是所有匹配结果   s.search(“l”)//得到第一个匹配结果的索引值

7. s.replace(“E”,”e”);  s.split(“E”); s.concat(“ world”)// 进行字符串拼接

8. 截取字符串: s.substr(1, 2)  //从索引 1 开始往后取 2 个元素

s.substring(1,3) //从索引1 取到索引2

s.slice(1, -2)  //后面的位置可以取负数,也是左闭右开

9. 根据元素取索引 s.indexOf(“l”)   s.lastIndexOf(“l”)

数组 Array:

创建方式: 1. var arr=[1,2,3] 2. var arr2=new Array(1,2,3,4)

//如果采用初始化对象方式创建数组,如果里面只有一个值且是一个数字,那么数字表示的是长度,而不是内容  var arr=new Array(3)

//数组是可变长的

数组对象的方法:

  1. [“hello”,”world”].join(“---”)
  2. 栈操作:push、pop(在栈顶部操作)  unshift、shift(在栈底部操作)

arr5.push(13)

var ret = arr5.pop()//删除最后一个元素,返回值是删除元素的值

arr5.unshift(45)

arr5.shift

3. 排序:sort reverse

arr5.reverse() //反转,直接更改数组

arr5.sort()

4. concat: 连接数组   b=a.concat(4,5)

5. toString()         // a.toString() 用 ’,’ 连接数组内的每个元素

Date 对象:

  1. 创建方式: var date_obj=new Date();

正则对象:

 

Math 对象:

 

Window 对象方法:

alert():显示带有一段消息和一个确认按钮的警告框

confirm():显示带有一段消息以及确认按钮和取消按钮的警告框

prompt():显示可提示用户输入的对话框

setInterval():循环的,按照指定的周期(以毫秒计)来调用函数或计算表达式

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

setTimeout():只一次,在指定的毫秒后调用函数或计算表达式

clearTimeout():取消由setTimeout设置的timeout

document.getElementById(“clock”)

document.getElementsByClassName(“div2”)

 

History 对象方法:

history内部三种方法:forward、back、go   history.go(-1|1)

一个属性length:保存的是 history 的历史页面个数

 

location:

onclick=”location.reload()”   刷新

onclick = “location.href=’http://www.baidu.com’”

DOM对象:

HTML中所有内容都是节点(NODE)

整个文档是一个文档节点(Document 对象)

每个HTML元素是元素节点(element对象)

html元素内的文本是文本节点(text 对象)

注释是注释节点(comment对象)

节点(自身属性):

attributes:节点的属性节点

nodeType:节点类型

nodeValue:节点值

nodeName:节点名称

innerHTML:节点(元素)的文本值,即 text 值

导航属性:

parentNode:节点的父节点

firstChild:节点下第一个子元素    #text

lastChild:节点下最后一个子元素

childNodes:节点(元素)的子节点

parentElement:

firstElementChild:

lastElementChild:

children:子节点元素

nextElementSibling:下一个兄弟节点标签

previousElementSibling:上一个兄弟节点标签

访问HTML元素(节点):

getElementById()

getElementsByTagName() :  p、div

getElementsByClassName()

getElementsByName():  <p name=”lily”> hello p </p>

全局查找:

在document下查找:   document.xxx

局部查找:   局部查找不可以通过 id 、name        var ele = document.getElementsByClassName(“div3”)

var ele2 =ele.getElementsByTagName(“p”)

HTML DOM Event:

onclick:点击

ondblclick:双击

onfocus:元素获得焦点   // 练习:输入框

onblr:失去焦点

onchange:域的内容被改变,应用场景

onkeydown:按下键盘某个键

onkeypress:键盘被按下并松开

onkeyup:键盘被松开

onload:一张页面或一幅图像。放在body标签上,当页面记载完成后才会去执行对应函数的内容。

window.onload=function(){ .....}

onmousedown:按下鼠标

onmousemove:移动鼠标

onmouseout:鼠标离开指定区域会触发

onmouseover:鼠标一进入指定区域就会触发

onsubmit:只能绑定在 form 标签上

event.stopPropagation():阻止事件传播

标签的增删改查:

添加: createElement(“p”)    appendChild(son)

删除:removeChild(last_son)

改:ele.innerHTML 、ele.innerText   前者可以解析字符串内的标签

ele.style.fontSize=”30px”

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)

elementNode.className

elementNode.classList.add(“big”)

elementNode.classList.remove(“big”)

DHTML: dynamic html(动态html)

<a href=”javascript:void(0)”>hello</a>,实现的功能和 onclick 一样,javascript 就是一个伪协议

原文地址:https://www.cnblogs.com/mlllily/p/10356950.html

时间: 2024-10-04 09:19:41

03 前端篇(JS)的相关文章

[转]解读2014之前端篇:任性的颠覆式改变

http://www.infoq.com/cn/articles/2014-review-front-end-part 2014年,整个IT领域发生了许多深刻而又复杂的变化,InfoQ策划了“解读2014”年终技术盘点系列文章,希望能够给读者清晰地梳理出技术领域在这一年的发展变化,回顾过去,继续前行. 本篇是解读系列的前端篇,小编邀请到天猫前端团队的三七.铁军.不四.鬼道这四位专家来解读2014年前端领域最引人注目的几大热点. HTML5正式定稿,ECMAScript 6 规范从纸上走到现实 2

web 前端篇:web前端到底是什么?有前途吗 ?

{" web前端开发 "是什么? } {" web前端开发 "有前途吗?}{" web前端开发 "到底怎么学?}这3个对象,是你入[前端]的初恋,对!没错同时和 3个对象谈恋爱. web 前端篇:web前端到底是什么?有前途吗 ?请听:微信jingfeng18分享 NO 1: web前端开发 "是什么? 其实web前端这个职位,并没有一个有效的历史记录可以查询,更没有一个明确的定义,她不像Java 攻城狮.c++开发这种一开始就有明确定

angular2之前端篇—1(node服务器分支)

上一篇.net core和angular2之前端篇-1 使用的是dotnet模板.之所以用它,因为想用他写webapi,但是写道下一篇的时候遇到点问题,所以先写个分支测试一下.这次是用Node作为服务器--webpack-dev-server.感觉这个demo 好简单啊! 一.新建一个项目目录,这里为F:\Visual Studio Code\app1 二.在项目根目录下添加JSON配置文件:package.json.tsconfig.json.typings.json { "name"

jquery前端篇

QQ:1187362408 欢迎技术交流和学习 jquery前端篇(jquery): TODO: 1,jquery:精确控制页面对象,体现了OOP思想(面向对象) 2,jquery:选择器的调用 3,jquery:扩展validate插件,实现自定义验证控件,统一调用 4,jquery:前端获取后台数据,属性调用 5,jquery:each循环遍历json数据 6,字符串转换为json的两种方式:eval('('+string+')'),$.parseJSON(string)[需要引用jquer

根据一篇js日历插件改写的

1 <!-- 2 控件调用示例: 3 --> 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 7 <html xmlns="http://www.w3.org/1999/xhtml"> 8 9 <he

前端页面js与flash交互——js获取flash对象,并传递参数

背景介绍: 最近在搞一个项目,涉及到图片选取,裁剪,上传等,由于浏览器安全性问题,js无法获取到<input type="file">中选取的文件路径,而且对照片的裁剪,抠图等由HTML5实现的功能,对各大浏览器的兼容性,真是不敢太大胆.这个时候就引进了flash,然后所有js做不了的让flash来做,然后由js来控制页面元素.就这样开始了js与as的交互之旅,听做flash的大叔说,flash调js的函数式很好调的,而js调as不大容易.最终的情况是as调js错误层出不穷

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—引用传递

<饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview 1.如何编写一个 json 对象的拷贝函数 function clone(obj){ var result; if (Array.isArray(obj)) { result = []; obj.forEach((item) => { result.push(clone(item)); }); } else if (typeof obj === 'objec

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—作用域

<饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview 作用域从某种意义上来说是个难点,它需要你真真正正的了解JS的分词.词法分析,语法分析,代码生成,LHS查询,RHS查询等深层的东西. 如果不知道可以读一下<你不知道的JavaScript:上卷> let和var的区别 1.let只在声明的代码块中有效,{}中使用let声明变量,外面是访问不到的,这就是块级作用域 2.不存在变量提升问题 3.重复声明会报

C/C++笔试忍法帖03——数据库篇

1.存储过程是什么?有什么用?有什么优点? 存储过程(Stored Procedure)是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库中,用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它. 存储过程用于实现频繁使用的查询.业务规则.被其他过程使用的公共例行程序. 存储过程在创建时即在服务器上进行编译,所以执行起来比单个 SQL 语句快. 2.一般数据库若出现日志满了,会出现什么情况,是否还能使用? 答:只能执行查询等读操作,不能执行更改,备份等写操作,原因是任