javascript知识点详解

目录
  • 一.JavaScript基本介绍
  • 二、Javascript基础语法
  • 三、JavaScript事件
    • 例子2：当点击div标签时，做一件事，如点击后弹出对话框。——用id类
    • 例子3：添加标签p，用class类来
  • 四、 Javascript书写位置（引入方式）
    • 4.1 内嵌js
    • 4.2 外链js
    • 4.3 行内js（禁止使用）
  • 五、 js常见特效（了解）
    • 5.1 导航跟随/电梯导航
    • 5.2 返回顶部
    • 5.3 滚动跟随
    • 5.4 呼吸灯/焦点图（banner图）
    • 5.5 js实现动画效果
    • 5.6 模态窗口
    • 5.7 定时切换
    • 5.8 自定义单选、多选、下拉菜单
  • 总结

一.JavaScript基本介绍

js诞生于1995年，是Javascript的缩写，其与java语言没有关系，当时的主要目的是验证表单的数据是否合法

科普: Javascript的本来应该叫livescript，但是在发布前夕，想搭上媒体超热java的顺风车，临时把名字改为了javascript。(也就是说js跟java没有关系，当时的只是想借助java的名气)

作用:负责控制web前端标准的前两者。结构和样式;

如：箭头切换图片页面，左下角的点也是

​

没有js：没有js的页面，想要准确提交信息，是非常麻烦的事。

​

ANS：js出生时是为了验证表单数据的合法性，js 就是在里面添加验证，输入完成如果对就通过，如果不对就提示错误，js就是解决这个问题。

​

当今，js不仅能做验证，还能做网站特效

二、Javascript基础语法

1.写script标签，放在html页面的最后位置，js代码写在html中的script标签中

2.从script标签的中间，alert("弹窗内容，这里写什么就会弹出什么");

<script>
    alert("弹窗中的显示内容");
</script>

弹出警示框，弹出对话框 ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert();
</script>

​

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert('注意：弹出弹窗');
</script>

​

注意：浏览器 自带的alert对话框，无法统一，这都是浏览器底层自带的，无法修改。

三、JavaScript事件

定义:在什么情况下，执行什么命令

作用:捕获用户的行为(单击、双击、鼠标的移入移出。.. )

例子1：在点击时，进行界面切换，在什么什么情况下，执行的命令。

​

​

事件三要素:

事件的三要素：事件源.事件的类型 = 执行的命令

1.事件源:《解释就是这个事件加给谁)

2.事件类型:(就是指的这个事件是什么时候发生的)

3.执行的指令:固定写法function(H你的命令写在这里}事件源""点事件名=匿名函数（匿名方法)

​

例子2：当点击div标签时，做一件事，如点击后弹出对话框。——用id类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "div1">哈哈哈</div>
	</body>
</html>
<script type = "text/javascript">
	// 点击页面中的div,弹出对话框
	// 第一步：如果想要控制某个标签必须先要找到它，在css中用选择器寻找，js在当前页面的文档找
	//第二步：点击页面的div
	// 第三步：弹出对话框
	document.getElementById('div1').onclick=function()
	{
		alert('点击时，才会弹出');
	}
	//事件的三要素：事件源.事件的类型 = 执行的命令
</script>

​

​

例子3：添加标签p，用class类来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "div1">哈哈哈</div>
		<p class = "p1"> 我是p1标签</p>
		<p class = "p1"> 我是p2标签</p>
	</body>
</html>
<script type = "text/javascript">
	// 点击页面中的div,弹出对话框
	// 第一步：如果想要控制某个标签必须先要找到它，在css中用选择器寻找，js在当前页面的文档找
	//第二步：点击页面的div
	// 第三步：弹出对话框
	document.getElementById('div1').onclick=function()
	{
		alert('点击div时，才会弹出');
	}
	//事件的三要素：事件源.事件的类型 = 执行的命令
	document.getElementsByClassName('p1')[0].ondblclick=function()
	{
		alert('点击p时，才会弹出');
	}
	// getElementsByClassName 通过class来找页面中的元素，而class可以设置多个重复的类名
	// 则在获取时必须要在后面添加[0],从数字0开始计数
</script>

​

​

​

注意：

id是唯一的，即单一

而class是类，是复数，在js中用getElementsByClassName 通过class来找页面中的元素，而class可以设置多个重复的类名，则在获取时必须要在后面添加[0],从数字0开始计数

测试点：

1、未点击弹出对话框

2、点击未弹出对话框

四、 Javascript书写位置（引入方式）

4.1 内嵌js

内嵌js:在html文件中。放在scipt标签里，即写在html中放在script标签里面，叫内嵌式

<script>
    alert ("弹窗中的显示内容"");
</script>

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert('弹窗 内嵌');
</script>

​

4.2 外链js

外链js:可以在单独的js文件里，通过script标签中的src属性引用到页面中;即写在单独js文件，通过script中的src来链入到html页面的，叫外链式

<script src="js文件的路径>
    此处不要写代码，写什么都不会执行
</script>

例子： 

.html文件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!-- <script type = "text/javascript">
	alert('弹窗 内嵌');
</script> -->
<script type="text/javascript" src="js.js">
</script>
js.js文件：
alert('弹窗 外链');

​

注意：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript" src="js.js">
	//此处如果是外链的语法，这里写什么都不会执行
	alert('111111');
</script>

​

​

4.3 行内js（禁止使用）

行内js:写在标签的属性里，这个属性必须是事件属性。(任何标签都有事件属性)，与行内css一样，不推荐使用! 即写在html标签身上的，叫行内式

<div onclick-alert ( 'heihei');”> 按钮 </div>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick = "alert('弹窗 行内');">不规范范例</div>
	</body>
</html>

​

注意：双引号和单引号的区别在行内，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick = "alert("弹窗 行内");">不规范范例</div>
	</body>
</html>

在行内只能用单引号实现，否则无法执行js行为

注意事项：

行内js和行内css一样，都是不推荐使用 ！内嵌和外链随意使用，还是建议使用外链式，因为能实现js代码和html代码的分离，更方便代码的修改。

五、 js常见特效（了解）

​

需要将专业名词与显示效果对的上。

5.1 导航跟随/电梯导航

导航：点哪去哪

​

5.2 返回顶部

点击后，回到页面最顶部

​

5.3 滚动跟随

​

哪个地方动图，让用户注意点在哪。

5.4 呼吸灯/焦点图（banner图）

图片切换,渐隐渐现效果

5.5 js实现动画效果

测试时一定要多次触发动画，查看动画是否有累积的情况。

注意：若是带动画的效果存在经典bug,js写的,——动画累积bug,移入移出多少次，动画就会自行执行多少次。

只要遇到动画的地方，——怎么测？重复触发的测试，因为所谓的动画，不是点才动。

5.6 模态窗口

模态窗口：弹出两个层，一个负责盖住下面的其他页面内容（背景色是灰色，无法操作底层其他控件），另外一个是让用户操作的层；只允许用户操作弹初的那个层。

目的是：让用户优先解决最上面的那个层

​

5.7 定时切换

5.8 自定义单选、多选、下拉菜单

​

系统自带（原生的）：

​

自定义：

​

只要不是系统浏览器原生的，就算是自定义，这些程序需要js + html + css组合才能实现，肯定比原生的写法浪费时间，但是为了整体页面的美观，必须要求程序员按照设计师的要求实现。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JavaScript知识点总结(十六)之Javascript闭包（Closure）代码详解

    JavaScript知识点总结(十六)之Javascript闭包（Closure）代码详解

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什么,有什么用,今天在网上看到了一篇讲JavaScript闭包的文章(原文链接),讲得非常好,这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了,在此写出来和大家分享一下,希望不理解JavaScript闭包的朋友们看了之后能够理解闭包!以下内容大部分是来自原文,我在原文的基础

  • 详解照片瀑布流效果（js，jquery分别实现与知识点总结）

    看了网上的瀑布流教程,自己跟着写了遍,然后总结了下知识点 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.8.3.min.js"/&g

  • VsCode与Node.js知识点详解

    1.下载及安装node.js 下载:http://nodejs.cn/download/ 安装:指定安装目录,安装即可.环境变量会自动配置 验证: 2.下载及安装VsCode 指定安装目录: 注意 : 环境变量也是自动添加,但是需要重启生效 1.启动后端代码 2.启动VsCode,在File---->打开文件夹---->选择前端代码文件夹----->打开 3.target 4.右键--->命令行--->npm run dev 5.启动成功后,ctrl+url即可访问页面 上面

  • JavaScript知识点总结(四)之逻辑OR运算符详解

    JavaScript知识点总结(四)之逻辑OR运算符详解

    在JavaScript中,逻辑OR运算符用||表示 var bTrue = true; var bFalse = false; var bResult = bTrue || bFalse; 下面的真值表描述了逻辑AND运算符的行为: 在JavaScript中,0,"",false,null,undefined,NaN均表示false, 可以用如下的代码证明: <script type="text/javascript"> var bFalse = fal

  • nodejs中的异步编程知识点详解

    简介 因为javascript默认情况下是单线程的,这意味着代码不能创建新的线程来并行执行.但是对于最开始在浏览器中运行的javascript来说,单线程的同步执行环境显然无法满足页面点击,鼠标移动这些响应用户的功能.于是浏览器实现了一组API,可以让javascript以回调的方式来异步响应页面的请求事件. 更进一步,nodejs引入了非阻塞的 I/O ,从而将异步的概念扩展到了文件访问.网络调用等. 今天,我们将会深入的探讨一下各种异步编程的优缺点和发展趋势. 同步异步和阻塞非阻塞 在讨论n

  • JavaScript知识点总结(十一)之js中的Object类详解

    JavaScript知识点总结(十一)之js中的Object类详解

    JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1

  • JS内置对象和Math对象知识点详解

    Math对象 <script> // Math数学对象 不是一个构造函数 ,所以我们不需要new 来调用 而是直接使用里面的属性和方法即可 console.log(Math.PI); // 一个属性 圆周率 console.log(Math.max(1, 99, 3)); // 99 console.log(Math.max(-1, -10)); // -1 console.log(Math.max(1, 99, 'pink老师')); // NaN console.log(Math.max(

  • nodejs连接mysql数据库及基本知识点详解

    本文实例讲述了nodejs连接mysql数据库及基本知识点.分享给大家供大家参考,具体如下: 一.几个常用的全局变量 1.__filename获取当前文件的路径 2.__dirname获取当前文件的目录 3.process.cwd()获取当前工程的目录 二.文件的引入与导出 1.使用require引入文件 2.使用module.exports导出文件中指定的变量.方法.对象 三.node项目的搭建目录结构 demo package.json 当前项目所依赖的包或者模块     router  存

  • javascript知识点详解

    javascript知识点详解

    目录 一.JavaScript基本介绍 二.Javascript基础语法 三.JavaScript事件 例子2:当点击div标签时,做一件事,如点击后弹出对话框.--用id类 例子3:添加标签p,用class类来 四. Javascript书写位置(引入方式) 4.1 内嵌js 4.2 外链js 4.3 行内js(禁止使用) 五. js常见特效(了解) 5.1 导航跟随/电梯导航 5.2 返回顶部 5.3 滚动跟随 5.4 呼吸灯/焦点图(banner图) 5.5 js实现动画效果 5.6 模态

  • COM组件中调用JavaScript函数详解及实例

    COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

  • 在Node.js中使用Javascript Generators详解

    Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

  • JavaScript cookie详解及简单实例应用

    JavaScript cookie详解 一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活.     二.cookie的基本属性     每个cookie都有四个可

  • 基于java集合中的一些易混淆的知识点(详解)

    (一) collection和collections 这两者均位于java.util包下,不同的是: collection是一个集合接口,有ListSet等常见的子接口,是集合框架图的第一个节点,,提供了对集合对象进行基本操作的一系列方法. 常见的方法有: boolean add(E e) 往容器中添加元素:int size() 返回collection的元素数:boolean isEmpty() 判断此容器是否为空: boolean contains(Object o) 如果此collecti

  • python程序文件扩展名知识点详解

    python程序文件的扩展名称是什么 python程序的扩展名有.py..pyc..pyo和.pyd..py是源文件,.pyc是源文件编译后的文件,.pyo是源文件优化编译后的文件,.pyd是其他语言写的python库. 扩展名 在写Python程序时我们常见的扩展名是py, pyc,其实还有其他几种扩展名.下面是几种扩展名的用法. py:py就是最基本的源码扩展名.windows下直接双击运行会调用python.exe执行. pyw:pyw是另一种源码扩展名,跟py唯一的区别是在windows

  • MySQL模式 Strict Mode知识点详解

    I. Strict Mode阐述 根据 mysql5.0以上版本 strict mode (STRICT_TRANS_TABLES) 的限制: 1).不支持对not null字段插入null值 2).不支持对自增长字段插入''值,可插入null值 3).不支持 text 字段有默认值 看下面代码:(第一个字段为自增字段) Sql代码 $query="insert into demo values('','$firstname','$lastname','$sex')"; 上边代码只在非

  • MySQL使用TEXT/BLOB类型的知识点详解

    一.TEXT和BLOB的区别 TEXT和BLOB家族之间仅有的不同是BLOB类型存储的是二进制数据,没有排序规则或字符集,而TEXT类型有字符集或排序规则.说白了如果要储存中文则选择TEXT. 二.默认值问题 Strict Mode下不能设置默认值,否则会报can't have a default value错: mysql> create table `test`.`text_blob`( -> `a_text` text DEFAULT ' ' , -> `b_blob` blob

  • mysql MGR 单主多主模式切换知识点详解

    主库执行 CREATE DATABASE test CHARACTER SET utf8 COLLATE utf8_general_ci; use test; create table if not exists h1 (id int(10) PRIMARY KEY AUTO_INCREMENT,name varchar(50) NOT NULL); insert into test.h1 values(1,"wang"),(2,"guo"),(3,"ya

随机推荐