Javascript学习总结 - JS基础系列 二

简述

本系列将持续更新Javascript基础部分的知识，谁都想掌握高端大气的技术，但是我觉得没有一个扎实的基础，我认为一切高阶技术对我来讲都是过眼云烟，要成为一名及格的前端工程师，必须把基础打扎实了。我也想展翅高飞，但前提我必须练就一双会飞的翅膀。

JavaScript（DOM）部分

了解 Javascript & DOM

DOM全称：文档对象模型DOM（Document Object Model）是定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
图片描述

  • HTML文档可以说由节点构成的集合，DOM 节点有:

  • 元素节点：html、body、p标签等都是元素节点（标签）。

  • 文本节点:向用户展示的内容，如<li>...</li>中的文本。

  • 属性节点:元素属性，如<a href='http://edu.jobui.com'/>标签所带的超链接属性。

图片描述

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点

  • 每个 HTML 元素是元素节点

  • HTML 元素内的文本是文本节点

  • 每个 HTML 属性是属性节点

  • 注释是注释节点

虽然还是有点乱，但是我是这么理解DOM的：Javascript与Html文档元素的进行业务逻辑交互。

  • 汤姆大叔是这么解释的：DOM（Document Object Model，文档对象模型）是一个通过和JavaScript进行内容交互的API。

  1. window对象作为全局对象，也就是说你可以通过window来访问全局对象。

  2. DOM为web文档创建带有层级的结果，这些层级是通过node节点组成，这里有几种DOM node类型，最重要的是Element, Text, Document。

  3. 每个引擎对DOM标准的实现有一些轻微的不同。例如，Firefox浏览器使用的Gecko引擎有着很好的实现（尽管没有完全遵守W3C规范），但IE浏览器使用的Trident引擎的实现却不完整而且还有bug，给开发人言带来了很多问题。

getElementsById()方法

  • 通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。语法：

<script type="text/javascript" charset="utf-8">var sID = document.getElementsById (sID);</script>

说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。 如果无符合条件的对象，则返回 null 。

注意：
document.getElementById()得到的是一个对象；
用alert显示得到的是object，而不是具体的值；
它有`value`和`length`等属性；
加上`.value`得到的才是具体的值。

注意：在 IE 中 getElementById() 只抓得到第一個出現的ID的事务。

getElementsByName()方法

  • 返回带有指定名称的节点对象的集合。语法：

<script type="text/javascript" charset="utf-8">var nameArr = document.getElementsByName(name);</script>

  • 与getElementById()方法不同的是，通过元素的name属性查询元素，而不是通过id属性。

注：

  1. 因为文档中的name属性可能不唯一，所有getElementsByName()方法返回的是元素的数组，而不是一个元素。

  2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

getElementsByTagName()方法

  • 返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。 语法:

<script type="text/javascript" charset="utf-8">var tagnameArr = getElementsByTagName(Tagname);</script>

图片描述

说明:

  1. Tagname是标签的名称，如p、a、img等标签名。

  2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

区别 getElementByID() , getElementsByName() , getElementsByTagName()

图片描述

以人来举例来说：人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

  1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById()获取的是指定的一个人。

  2. Name 是他的名字，可以重复。所以通过getElementsByName()获取名字相同的人集合。

  3. TagName可看似某类，getElementsByTagName()获取相同类的人集合。如获取小孩这类人:getElementsByTagName("小孩")。

下面有一个html代码片段：

<input type="checkbox" name="hobby" id="hobby1">  音乐<input type="checkbox" name="hobby" id="hobby2">  登山<input type="checkbox" name="hobby" id="hobby3">  游泳<input type="checkbox" name="hobby" id="hobby4">  阅读<input type="checkbox" name="hobby" id="hobby5">  打球<input type="checkbox" name="hobby" id="hobby6">  跑步 <input type="button" value = "全选" id="button1"><input type="button" value = "全不选" id="button1">

如果：

  1. 我们使用document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个。

  2. 我们使用document.getElementsByName("hobby")，结果为获取name属性为hobby的元素，共6个。

  3. 我们使用document.getElementById("hobby6")，结果为获取id属性为hobby6的元素，只有一个。

getAttribute()方法

  • 通过元素节点的属性名称获取属性的值。语法：

<script type="text/javascript" charset="utf-8">var name = elementNode.getAttribute(name)；</script>

说明：

  1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

  2. name：要想查询的元素节点的属性名字。

图片描述

上图：实现获取h1标签的属性值。
运行结果：
h1标签的ID ：alink
h1标签的title ：getAttribute()获取标签的属值

  • getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字。

  • 不过，getAttribute()方法不能通过document对象调用，它只能通过一个元素节点对象调用。

setAttribute()方法

  • setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。语法：

<script type="text/javascript" charset="utf-8">elementNode.setAttribute(name,value)；</script>

说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。

注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

  • setAttribute()方法允许我们对属性节点的值做出修改，这是一个很重要的特质。

  • 通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值。

  • 也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。

  • 这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。

DOM 节点有三个重要的属性 ：

  • nodeName : 节点的名称

  • nodeValue ：节点的值

  • nodeType ：节点的类型

1、nodeName 属性: 节点的名称，是只读的。

  • 元素节点的 nodeName 与标签名相同

  • 属性节点的 nodeName 是属性的名称

  • 文本节点的 nodeName 永远是 #text

  • 文档节点的 nodeName 永远是 #document

2、nodeValue 属性：节点的值

  • 元素节点的 nodeValue 是 undefined 或 null

  • 文本节点的 nodeValue 是文本自身

  • 属性节点的 nodeValue 是属性的值

3、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型：节点类型
元素：1
属性：2
文本：3
注释：8
文档：9

访问子结点（childNodes）

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。语法：

<script type="text/javascript" charset="utf-8">var nodeName = elementNode.childNodes;</script>

结合案例说一下：
图片描述

运行结果:
IE:UL子节点个数:3节点类型:1
其它浏览器:UL子节点个数:7节点类型:3

注意:

  1. IE全系列、firefox、chrome、opera、safari兼容问题。

  2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7。

所以它就被看成了：

图片描述

如果把代码改成这样:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

运行结果:（IE和其它浏览器结果是一样的）
UL子节点个数:3
节点类型:1

访问父节点（parentNode）

  • 这个跟上面那个子节点都比较少用到，简单说一下就可以了，获取指定节点的父节点
    语法：

<script type="text/javascript" charset="utf-8">var nodeName = elementNode.parentNode;</script>

  • 注意:父节点只能有一个。

获取 P 节点的父节点的案例：

<div id="text"><p id="con"> parentNode 获取指点节点的父节点</p></div> <script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.nodeName);</script>

运行结果:

parentNode 获取指点节点的父节点
DIV

访问祖节点:

<script type="text/javascript" charset="utf-8">var nodeName = elementNode.parentNode.parentNode;</script>

看看下面的代码:

<div id="text">  <p>parentNode      <span id="con"> 获取指点节点的父节点</span></p></div> <script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.parentNode.nodeName);</script>

运行结果:

parentNode获取指点节点的父节点
DIV

  • 注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

  • 注：其实还有兄弟节点nodeObject.nextSibling，这里就不多说了，确实很少用到。

浏览器窗口可视区域大小

  • 讲述获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法

1、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

  • window.innerHeight - 浏览器窗口的内部高度

  • window.innerWidth - 浏览器窗口的内部宽度

2、对于 IE 8、7、6、5：

  • document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

  • document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者Document对象的body属性对应HTML文档的<body>标签

  • document.body.clientHeight

  • document.body.clientWidth

3、在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth || document.body.clientWidth;var h= document.documentElement.clientHeight || document.body.clientHeight;

网页卷去的距离与偏移量

先看一张图：

图片描述

说明：
scrollLeft : 设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop : 设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft : 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop : 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

注意:

  • 区分大小写

  • offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

总结

  • 最后附上一份福利吧：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>选项卡</title><style type="text/css">/* CSS样式制作 */  *{padding:0px;margin:0px;font:12px;normal "microsoft yahei";}#tabs{width:290px;padding:5px;height:150px;margin:30px;}#tabs ul{list-style:none;display:block;height:30px;line-height:30px;border-bottom:2px;saddlebrown solid;}#tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaa;}#tabs ul li.on{border:2px solid saddlebrown;border-bottom:2px solid #fff;}#tabs div{height:120px; line-height:25px;border:1px solid #336699;border-top:node;padding:5px;}.hide{display:none;}       </style><script type="text/javascript">      // JS实现选项卡切换window.onload = function(){var oTab = document.getElementById("tabs");var oUl = oTab.getElementsByTagName("ul")[0];var oLis = oUl.getElementsByTagName("li");var oDivs = oTab.getElementsByTagName("div");for(var i=0, len=oLis.length; i<len;i++){oLis[i].index = i;oLis[i].onclick = function(){for(var n=0; n<len; n++){oLis[n].className = "";oDivs[n].className = "hide";}this.className = "on";oDivs[this.index].className = "";}};}     </script></head><body><!-- HTML页面布局 --><div id="tabs"><ul><li>房产</li><li>家居</li><li>二手房</li></ul><div>275万购昌平邻铁三居 总价20万买一居<br>200万内购五环三居 140万安家东三环<br>北京首现零首付楼盘 53万购东5环50平<br>京楼盘直降5000 中信府 公园楼王现房<br></div><div>40平出租屋大改造 美少女的混搭小窝<br>经典清新简欧爱家 90平老房焕发新生<br>新中式的酷色温情 66平撞色活泼家居<br>瓷砖就像选好老婆 卫生间烟道的设计<br></div><div>通州豪华3居260万 二环稀缺2居250w甩<br>西3环通透2居290万 130万2居限量抢购<br>黄城根小学学区仅260万 121平70万抛!<br>独家别墅280万 苏州桥2居优惠价248万<br></div></div></body></html>

代码说明：这段代码能实现选项卡切换的效果

1、HTML页面布局

  • 选项卡标题使用ul..li

  • 选项卡内容使用div

2、CSS样式制作

  • 整个选项卡的样式设置

  • 选项卡标题的样式设置

  • 选项卡内容的样式设置

  • 一开始只显示一个选项卡内容，其它选项卡内容隐藏。

3、JS实现选项卡切换

  • 获取选项卡标题和选项卡内容

  • 选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配

  • 通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/399281.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mysql 可逆编码_使用MD5编码实现数据库用户密码字段的加密

mysql 可逆编码_使用MD5编码实现数据库用户密码字段的加密

1 前言 众所周知&#xff0c;MD5是目前应用最多的密码保护方法&#xff0c;该编码传说为不可逆加密编码&#xff1c;也就是说&#xff0c;永运无法倒算原码&#xff1e;。 使用MD5加密用户的操作密码&#xff0c;可以有效防止系统维护人员直接进入数据库时出现系统安全漏洞&…
阅读更多...
Unity3D 与 objective-c 之间数据交互。iOS SDK接口封装Unity3D接口

Unity3D 与 objective-c 之间数据交互。iOS SDK接口封装Unity3D接口

原地址&#xff1a;http://www.cnblogs.com/qingjoin/p/3638915.html Unity 3D 简单工程的创建。与Xcode 导出到iOS 平台请看这 Unity3D 学习 创建简单的按钮、相应事件 Unity C# 代码 using UnityEngine; using System.Collections; using System.Runtime.InteropServices;pu…
阅读更多...
开源代码ViewPageIndicator的使用

开源代码ViewPageIndicator的使用

1. 导入Android studio 使用SlidingMenu的方式导入Android studio不行&#xff0c;不知道为何&#xff0c;过会懂了再写上 2. 代码 activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.…
阅读更多...
[unity3d]手游资源热更新策略探讨

[unity3d]手游资源热更新策略探讨

原地址&#xff1a;http://blog.csdn.net/dingxiaowei2013/article/details/20079683 我们学习了如何将资源进行打包。这次就可以用上场了&#xff0c;我们来探讨一下手游资源的增量更新策略。注意哦&#xff0c;只是资源哦。关于代码的更新&#xff0c;我们稍后再来研究。理论…
阅读更多...
PostgreSQL学习手册(二) 模式(Schema)

PostgreSQL学习手册(二) 模式(Schema)

2019独角兽企业重金招聘Python工程师标准>>> 一个数据库包含一个或多个命名的模式&#xff0c;模式又包含表。模式还包含其它命名的对象&#xff0c;包括数据类型、函数&#xff0c;以及操作符。同一个对象名可以在不同的模式里使用而不会导致冲突&#xff1b; 比如…
阅读更多...
软件工作第4次作业

软件工作第4次作业

软件工作第4次作业 信管141 宋乃佳 1425052010 基于我们列出的 7 条UX评价准则&#xff0c;分析“师路南通” 在用户体验设计方面让你觉得满意的地方&#xff08;不少于2点&#xff09;&#xff1b;&#xff08;20分&#xff09;&#xff0c;请陈述理由。 同样&#xff0c;分析…
阅读更多...
phoneGap2.9+eclipse开发环境和helloword案例

phoneGap2.9+eclipse开发环境和helloword案例

不同机器安装和使用各不相同&#xff0c;这里也只是记录一下自己机器上面的使用过程。 android安装环境前面的文章有些&#xff0c;这里不再说&#xff0c;直接上phoneGap的过程。因为phoneGap2.9.1需要安装nodejs和Git&#xff0c;比较复杂&#xff0c;没有太多精力去折腾&…
阅读更多...
Ubuntu14.04下搭建Bochs仿真平台，同时用该平台安装Linux0.11内核

Ubuntu14.04下搭建Bochs仿真平台，同时用该平台安装Linux0.11内核

因为Linux0.11内核需要在80X86硬件平台上运行&#xff0c;现在已经没有该硬件系统了&#xff0c;所以需要搭建Bochs这个仿真平台。Bochs是一个X86硬件平台的开源模拟器。 安装步骤参考的是如下一篇文章&#xff1a;http://os.51cto.com/art/201407/446838_all.htm&#xff0c;非…
阅读更多...
java web与android互通的aes算法

java web与android互通的aes算法

2019独角兽企业重金招聘Python工程师标准>>> ####Java实现代码 //可自定义保证16btye即可private static final byte[] IV {16, 26, -35, 23, 34, 125, -5, -4, -8, -9, -15, -78, 90, -8, -99, 100};public static byte[] encrypt(String content, String passwor…
阅读更多...
mysql第三方工具binlog_mysql 开发进阶篇系列 33 工具篇(mysqlbinlog日志管理工具)

mysql第三方工具binlog_mysql 开发进阶篇系列 33 工具篇(mysqlbinlog日志管理工具)

一.概述由于服务器生成的二进制日志文件以二进制格式保存&#xff0c;所以如果要想检查这些文件的文本格式&#xff0c;就会用到mysqlbinlog日志管理工具。mysqlbinlog的语法如下:mysqlbinlog [options] log-files log-files2...其中options有很多选项&#xff0c;常用如下&…
阅读更多...
JMeter部分功能详解

JMeter部分功能详解

JMeter 介绍&#xff1a; 一个非常优秀的开源免费的性能测试工具。 优点&#xff1a;你用着用着就会发现它的重多优点&#xff0c;当然不足点也会呈现出来。 从性能工具的原理划分&#xff1a; Jmeter工具和其他性能工具在原理上完全一致&#xff0c;工具包含4个部分&#xff1…
阅读更多...
登录时记住用户名和密码及cookie案例应用

登录时记住用户名和密码及cookie案例应用

文章原址&#xff1a;http://www.jb51.net/article/33588.htm 登录样子&#xff0c;可以参考某一论坛的登录介面&#xff1a; 记住这些信息&#xff0c;可以使用Cookie来实现&#xff0c;更多Cookie应用&#xff0c;可参考 http://jb51.net/article/33590.htm http://jb51.net…
阅读更多...
退出登录后点返回键 是登录状态_看了这50条登录的测试点，你还敢说测试很容易吗...

退出登录后点返回键 是登录状态_看了这50条登录的测试点，你还敢说测试很容易吗...

条件&#xff1a;一个用户名输入框 (要求15个字符以内)一个密码输入框 (要求8个字符以内)一个登录按钮针对以上条件进行测试用例的设计先回顾一下测试用例的设计方法&#xff1a;等价类&#xff0c;边界值&#xff0c;错误猜测法&#xff0c;因果图&#xff0c;场景法测试功能点…
阅读更多...
HTML5原生拖拽/拖放(drag drop)详解

HTML5原生拖拽/拖放(drag drop)详解

前言 拖放&#xff08;drap && drop&#xff09;在我们平时的工作中&#xff0c;经常遇到。它表示&#xff1a;抓取对象以后拖放到另一个位置。目前&#xff0c;它是HTML5标准的一部分。我从几个方面学习并实践这个功能。 拖放的流程对应的事件 我们先看下拖放的流程&a…
阅读更多...
Linux vmstat命令详解

Linux vmstat命令详解

vmstat命令是最常见的Linux/Unix监控工具&#xff0c;可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率&#xff0c;内存使用&#xff0c;虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令&#xff0c;一个是Linux/Unix都支持&#xff0c;二是…
阅读更多...
python中如何比较两个列表_python中如何比较两个列表

python中如何比较两个列表_python中如何比较两个列表

cmp() 方法用于比较两个列表的元素。cmp()方法语法&#xff1a;cmp(list1, list2)参数&#xff1a;list1 -- 比较的列表。list2 -- 比较的列表。返回值&#xff1a;如果比较的元素是同类型的,则比较其值,返回结果。如果两个元素不是同一种类型,则检查它们是否是数字。如果是数字…
阅读更多...
What to call your Academic Event

What to call your Academic Event

阅读更多...
rc mysql common_RR与RC隔离级别下MySQL不同的加锁解锁方式

rc mysql common_RR与RC隔离级别下MySQL不同的加锁解锁方式

作者 韩杰沃趣科技MySQL数据库工程师出品 沃趣科技| RC与RR隔离级别下MySQL不同的加锁解锁方式MySQL5.7.21数据准备rootlocalhost : pxs 05:26:27> show create table dots\G*************************** 1. row ***************************Table: dotsCreate Table: …
阅读更多...
[Javascript_库编写]创建自己的“JavaScript库”

[Javascript_库编写]创建自己的“JavaScript库”

一.编写JavaScript库要注意的问题 为了让自己的JS库构建的更加优雅、合理&#xff0c;我们编写JS库时要注意两方面的内容&#xff1a; 1.不要使用版本检测&#xff0c;而要使用能力检测 由于浏览器的类型和版本太多&#xff0c;以及不断的新的浏览器出现&#xff0c;我们不可能…
阅读更多...
mysql5.6.24怎么打开_mysql 5.6.24 安装配置方法图文教程

mysql5.6.24怎么打开_mysql 5.6.24 安装配置方法图文教程

由于工作需要&#xff0c;开始使用mysql数据库&#xff0c;已经好久没有使用了。基本已经忘了差不多。今天重新安装配置了一下&#xff0c;写个随笔记录一下&#xff0c;以免自己以后需要的时候翻看&#xff0c;如有不正确或需要补充的&#xff0c;希望大家多多留言。首先下载m…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023