JS基础(上)

JS与DOM的关系

浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象

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

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>里的内容JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

BOM对象(把浏览器的地址栏,历史记录,DOM等装在一个对象)

浏览器内部有JS解释器/引擎;在html里的JS代码会被引擎所执行,执行的结果是对DOM对象的操作(即是对节点树内的标签进行操作)

JS添加特效 : 无非就是用JS操作DOM对象而已

JS的引入方式

JS代码可在html中任意位置编写,但浏览器解析代码是从上到下的,需注意此时html是否已经解析该标签,能让JS能否获取该DOM对象,所以有时会把代码放到html的结束前,即是</html>前

直接在html中编写 :<script type="text/javascript">代码</script>

通过外部引用进来 : <script type=text/javascript src=””></script>

为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部

变量的声明

var 变量名;变量名区分大小写;不用var声明会污染全局变量;变量名以字母、下划线、美元符号开头,后面部分可数字

函数 即 完成特定功能的代码段;

常用方法

输出语句到html中,使用document.write(“”)

Confire() :消息确认对话框;点击确认返回true

运算符问题

拼接运算符:+ , 如果是数字则相加,是字符则连接 ; 如2+3+‘love’+4+5 //输出5love45

和PHP不同,一般用.

逻辑运算符或 :返回为true的值 ; 如 :

var a = 1;

var b = false;

var d = (a || b); //d为1

逻辑运算符与 : 返回最后面的变量值

var a = 22;

var b=33;

alert(a && b); //输出33

数组与对象的操作

JS中数组的数字键值只能从0开始递增

注意 : 数组中括号,JS中length ; 对象用大括号

Js的内置对象的使用

window对象

window对象和JS没关系;是浏览的一个数组对象,供JS来操作。

Window.open()

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes') </script>

作用域

情况1:函数内没找到该参数,会一直外部继续找,直到全局空间(函数外)寻找window属性

情况2:var声明变量;在函数内声明仅属于该函数内的局部变量。如果直接赋值,不加var(如:a=10)就会一直往外找该变量,找到则赋值给它,否则默认赋给window.变量名

找表标签对象

不会的方法到h3c查找HTML DOM 手册

方法名如果返回是集合则getElements ,如class,P等标签都不是唯一的所以s

id唯一返回对象,P等不唯一返回集合

根据id获取

根据标签找对象

对于表单元素,可以使用name寻找

按照类名查找

根据结点查找

对象的操作

img对象 下还有多个属性

img.src img.style.width

注意 :

<div class="ch"> 中操作div对象的修改class名字属性用div.className =

CSS样式与DOM : obj.style.width

CSS属性带横线则 去之首字大写 : border-top à obj.style.borderTop

注意 :此处获取宽高是把CSS内嵌,比较方便;并且返回的是字符串形式

实战 每次点击变颜色并且边框增大10像素

Object.style.display = none/block 实现隐藏和显示

Object.className = name 实现修改类名

获取内联样式属性

获取内存中在渲染的style的值,使用obj.currrentStyle() 和 window.getComputedStyle()获取

window.getComputedStyle(obj,伪元素)[arrt] :

obj获取运算后的样式目标元素 ;

伪元素 : 一般为null,可以修改为鼠标放上去的状态‘:active’

获取的值只读即是只能获取,不能直接修改,要修改还是要通过obj.style.属性 修改

内联样式一开始不能够获取是因为一开始没有定义内联定义,但是能够初始化赋值

获取的颜色返回是RGB形式的

注意:只有IE和Opera支持使用currentStyle获取HTMLElement的计算后的样式

标准浏览器使用getComputedStyle(),对此兼容性问题,使用封装进方法中进行判断使用哪个。obj即是对象名,arrt是获取属性名

对象的创建和删除 node.html

暴力结点 nodein.html

innerHTML 是结点的一个属性值,代表结点内的内容,即是某标签内的内容

级联菜单的制作 jilianorder.html

定时器的使用

不是js的内容属于浏览器的

setTimeout (表达式,延时时间) : 设置在延迟多少时间执行一次一个表达式

clearTimeout(名); 设置清除这个延迟器

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式;多次执行

clearInterval() 方法取消 setInterval() 的设置

本文分享自微信公众号 - Golang语言社区(Golangweb)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-06-06

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • io.Reader 解析

    简介 io.Reader 是一个 Interface 类型,功能非常强大,在任何需要读的地方我们都尽量使用它。先来看下它的原型: type Reader int...

    李海彬
  • Golang RPC 之 gRPC

    gRPC 简介: gRPC 是一款高性能、开源的 RPC 框架,产自 Google,基于 ProtoBuf 序列化协议进行开发,支持多种语言(Golang、Py...

    李海彬
  • [基础篇]Go语言变量

    变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念。变量可以通过变量名访问。 Go 语言变量名由字母、数字、下划线组成,其中首个字母不能为数字。 声...

    李海彬
  • js中原型(prototype)

    * 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)

    李才哥
  • 安卓推送技术手册——使用透传消息的正确姿势

    目前的消息推送方式主要有两种:通知和透传。 什么是透传?透传即是透明传送,即传送网络无论传输业务如何,只负责将需要传送的业务传送到目的节点,同时保证传输的质量即...

    个推君
  • 如何在微信群里发通知?这个方法特别好用

    今天,「知晓程序」推荐的小程序「群里有事」,也许能解决这个问题。在这里,你不仅可以发布通知、活动,而且它有一种强大的魔力,吸引大家去查看。

    知晓君
  • Java关键字new-----对象的内存分配原理

    Tanyboye
  • rm -rf /* 到底会发生什么,硬核删库

    可以看到满屏的cannot remove报错,由于是个刚装完的系统,都是系统本身的文件,没有引入外界的文件,很快命令执行完毕。

    震八方紫面昆仑侠
  • js的深拷贝,浅拷贝

    对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没 有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性...

    山河木马
  • Javascript 原型链之原型对象、实例和构造函数三者之间的关系

    首先来说一下名词解释,首先说一下prototype,每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数...

    无邪Z

扫码关注云+社区

领取腾讯云代金券