JavaScript知识概要
JavaScript
1.简介
JavaScript简介:
JS是运行在浏览器端的一门脚本语言,一开始主要用来做浏览器验证,但现在功能已经不止于此。
所谓脚本语言就是指,代码不需要编译,直接运行,并且读入一行运行一行
JavaScript目前应用非常广泛,例如:浏览器端的验证,Ajax,客户端等,甚至也有服务器端的JavaScript--node.js
2.编写位置
(1)网页内部
<script type="text/javascript">
alert("这是啥");
</script>
(2)外部的.js文件
JavaScript一般单独写在一个.js文件中,通过以下方法来引用
<script type="text/javascript" src="script.js"></script>
(3)基本语法
①注释
单行注释 //
多行注释 /**/
②变量
Ⅰ声明:JS是一门弱类型语言,声明变量时不需要指定变量的类型,只需要使用var关键字
例如:var a;
Ⅱ赋值:
JS是一门动态类型的语言,可以给一个变量赋任意类型的值,同时在使用过程中可以任意修改变量
变量的类型
a=123;
a="hello";
Ⅲ声明和赋值同时进行
var b=123;
var c="hello";
var d=true;
③函数
在JS中函数也是一个对象,也可以将一个函数的引用赋值给一个变量
1)声明函数使用function关键字
第一种方式:
var sum=function(a,b){
return a+b;
};
第二种方式:
function sum2(a,b,c){
return a+b+c;
};
sum2(2,3,4);
2)函数的调用:
-函数的引用+();
-sum(123,234)
-sum2(123,"abc",true)
调用函数不会检查参数类型和个数,所以在js中不存在重载这回事
例如:
④对象
Ⅰ对象的创建
(1)var obj=new Object();
(2)var obj ={}
Ⅱ动态的为对象添加属性
对象.属性名=属性值
例:obj.name="张三";
obj.age=16;
obj.fun=function(){
alert("hello");
};
Ⅲ在创建对象时,直接添加属性
注意:键值对之间使用 “ :”隔开。
3.事件
(1)用户操作网页或者浏览器所发生的交互行为称为事件。比如:点击按钮,最小化窗口,修改文本框内容等。
(2)JS为我们定义许多浏览器中的事件。比如:单击、双击、移动 等。
(3)我们可以通过为事件设置一个响应函数来对事件进行响应。可以通过两种方式为元素绑定响应函数:
1)直接通过标签的属性来设置,这种方式是结构与行为耦合,不推荐使用
<button οnclick="alert('hello')">按钮</button>
-这种方式叫做结构与行为耦合,不推荐使用这种方式
2)在<script>标签来设置
<button id="btn">按钮</button>
<script>
//获取到按钮的对象
var btn =document.getElementById("btn");
//为btn绑定一个单击响应函数
btn.οnclick=function(){
alert("hello");
}
</script>
3)几种鼠标事件
//鼠标单击事件
<button id="btn" οnclick="alert('你点我干嘛')">点我</button>
鼠标单击按钮事件触发
//鼠标双击事件
<button id="btn" οndblclick="alert('你点我干嘛')">点我</button>
//鼠标移到按钮上事件触发
<button id="btn" οnmοuseοver="alert('鼠标移动上来了!')">点我</button>
//鼠标从按钮上移走事件触发
<button id="btn" οnmοuseοut="alert('鼠标移走!')">点我</button>
4.加载方式
(1)浏览器加载网页代码时是由上到下依次加载的。
(2)如果我们在浏览器还尚未加载网页中的元素,那么将无法确定,控制台将会报错。
解决该问题有两种方式:
1)将JS代码编写到body标签的下边。但是我们习惯上将JS、CSS等代码都编写在head标签中,
这种形式不符合使用规则
2)将js代码编写到window.οnlοad=function(){}中,推荐使用方式
注意:编写js时,上来就把window.οnlοad=function(){}写上
程序是一行一行执行的,如果var btn=document.getElementById("btn1");代码之前没有写window.οnlοad=function(){}
那么在执行的时候是找不到body里面的id="btn1",因此window.οnlοad=function(){}作用就是加载完整个页面之后再执行里面的内容。
但是如果将javascript写在body里面,之前已经加载完了id="btn1",所以var btn=document.getElementById("btn1");再运行就没有问题了。
注意:<button>标签只能写在body里面。
5.DOM编程
DOM全称:Document Object Model
DOM编程是JavaScript中非常重要的一部分内容 。
DOM主要是通过JavaScript来控制网页中的各种元素,从而达到使网页可以和用户进行动态交互的作用。
DOM的操作主要分为四部分:增、删、改、查。
(1)document对象:
document是一个文档节点,代表整个文档,所有节点都是它的后代节点。
document也是window的对象的属性,可以直接使用。
(2)节点类型:
① 元素节点:HTML文档中的HTML标签
②文本节点:元素的属性
③ 属性节点:HTML标签中的文本内容
(3)节点属性
(4)元素节点的属性:
1.获取元素对象.属性名
例:element.value
element.id
element.className
2.设置元素对象.属性名=新的值
例:element.value="hello"
element.id="id01"
element.className="newClass"
其它属性:
innerHTML:元素节点通过该属性获取和设置标签内部的html代码
nodeValue:文本节点可以通过nodeValue属性获取和设置文本节点的内容
(5)***DOM查询
通过document对象查询:
document.getElementById()
-通过id属性获取一个元素节点对象
document.getElementsByTagName()
-通过标签名获取一组元素节点对象
document.getElementByName()
-通过name属性获取一组元素节点对象,一般用来获取表单项
通过具体的元素对象查询:
element.getElementsByTagName
-查找当前元素节点内指定标签名的子节点
element.childNodes
-查找当前节点的所有子节点
element.firstChild
-查找当前节点的第一个子节点
element.lastChild
-查找当前节点的最后一个子节点
element.parentNode
-查找当前节点的父节点
element.previousSibling
-查找当前节点的前一个兄弟节点
element.nextSibling
-查找当前节点的后一个兄弟节点
例:
注意:1.function myQuery(idStr,func){
var btn=document.getElementById(idStr);
btn.οnclick=func;
}
这段代码为4个查询中共有的内容,所以封装成一个方法,下面直接调用就可以了,避免写重复代码,起到了简化代码的作用。
2.在查询 “#city的所有子节点” 的时候,其实只有四个--北京,上海,东京,首尔;但是在用火狐浏览器和谷歌浏览器运行时会把
节点与节点之间的空格也当作了一个节点,所有此时应该根据元素节点的属性,用if语句判断一下if(liEle5[i].nodeType==1){} ,当nodeType==1时才是元素节点。
(6)***DOM增删改
①创建元素节点
document.createElement(标签名)
②添加子节点
父节点.appendChild(子节点)
③插入节点
父节点.insertBefore(新节点,旧节点)
④替换节点
父节点.replaceChild(新节点,旧节点)
⑤删除节点
父节点.removeChild(子节点)
子节点.parentNode.removeChild(子节点) *****
⑥读写元素内部HTML代码
读取
元素.innerHTML
设置
元素.innerHTML = 新值
需要注意点:在设置元素节点时有以下两种方式:
1.document.getElementById("bj").innerHTML = "天津";
2.document.getElementById("bj").firstChild.nodeValue="天津";
请参照以上(4)元素节点的属性中其他属性部分。
转载于:https://www.cnblogs.com/double-s/p/7801886.html
JavaScript知识概要相关推荐
- Javascript知识——事件
O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...
- JavaScript知识(二)
JavaScript知识(二) 原文:JavaScript知识(二) 你要保守你心,胜过保守一切,因为一生的果效,是由心发出的.----O(∩_∩)O... ...O(∩_∩)O...老师因有事下午没 ...
- 【思维导图】巩固你的JavaScript知识体系
[思维导图]前端开发JavaScript-巩固你的JavaScript知识体系 版权声明:转载自CSDN博主「达达前端」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本 ...
- HTML基础知识概要面试必备
一.HTML的概述 HTML的概念 HTML 全称为 HyperText Markup Language,译为超文本标记语言. HTML 不是一种编程语言,是一种描述性的标记语言. 作用:HTML是负 ...
- 最新的JavaScript知识总结,欢迎各位大佬指正,需要的留下邮箱,给你们发原稿(PDF版)...
小编整理javascript用的是有道云笔记,导出的word版本,但是代码块显示格式是乱的,不便于阅读 所以,各位有需要的话,小编可以将导出的pdf版发给大家!pdf版跟word没有什么区别,知识没法 ...
- 【JavaWeb】前置知识:CSS与JavaScript知识汇总
本文被 系统学习JavaWeb 收录,点击订阅 写在前面 大家好,我是黄小黄!经过上一篇 从Html入门JavaWeb 的学习,想必大家对标签都有了一定的认识.本文将通过案例,讲解CSS与JavaS ...
- 呕血整理JavaScript知识重点(面试复习必备)
ECMAScript JavaScript 官方名称是 ECMAScript 是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果 ...
- 小米官网项目制作——javascript知识分享上
目录 前言 一.整体架构 二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节 三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子 四.轮播图 1.本体的部件 ...
- 小米官网项目制作——javascript知识分享下
目录 前言 一.观察页面内容 二.切换界面 三.登录表单界面 1.选中的效果 2.错误提示 3.不选中的效果 4.密码框 四.注册界面 五.链接跳转 总结 前言 之前我分享了关于小米官网主页的java ...
最新文章
- OptiTrack专为VR主题公园推出了主动追踪方案,可降低40%成本
- OpenCV文件输入输出的序列化功能的实例(附完整代码)
- shell脚本常用参数与格式
- 使用ABAP操作Excel的几种方法
- AI开发者福音!阿里云推出国内首个基于英伟达NGC的GPU优化容器
- [Leetcode]字符串转换整数 (ATOI)
- OpenGL开发之旅基础知识介绍
- android 音效均衡器,App+1 | 不懂均衡器调校也能量身定制,无需折腾的 Android 音效提升工具...
- Sql Server :Could not write value to key \Software\Classes\CLSID\...., Verify that you have....
- 高数复习(1)--曲线切向与曲面法向的理解
- 本机 ip 地址和本地ip地址的区别?
- 关于Tween的几个注意事项
- 截取音乐片段的计算机软件,电脑上剪辑音乐的软件
- 易基因|3文一览:简化甲基化测序(RRBS)技术优势及研究成果(医学+物种保护+农学)
- C语言中什么叫做左值?右值?
- 算法篇:神奇的卡塔兰数Catalan
- 关于字符串旋转问题的一些心得
- Spooling技术简单熟悉
- 二进制部署Prometheus及监控服务
- 程序员想要兼职,推荐些给大家(加班996,更应该兼职)
热门文章
- Android入门(15)| 网络
- leetcode647 回文子串
- C/C++中static的用法全局变量与局部变量
- cppcheck的安装和使用
- PaperNotes(9)-Learning deep energy model: contrastive divergence vs. Amortized MLE
- 如何使用github中的pull request功能?
- listview bcb 行的颜色_文明交通安全行手抄报简单又漂亮
- 解决ipfs 出现Error: can‘t publish while offline: pass `--allow-offline` to override的问题
- Linux 的 chmod 命令,对一个目录及其子目录所有文件添加权限
- Springboot:监控与管理 Actuator