JavaScript相关 (含JQuery)

JavaScript相关 (含JQuery)
201901 Chenxin
JavaScript参考: http://www.runoob.com/js/js-tutorial.html
JQuery参考: http://www.runoob.com/js/js-tutorial.html

以下是一个HTML页面,内部含有多种JS的使用方法和说明

<head> <meta charset="UTF-8"> <title>CMDB</title> <script> function dispalyDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <p>每一段都以分割线的方式来显示</p>

JavaScript

这是一行,就是个段落


JavaScript 能够直接写入HTML输出流中:

您只能在HTML输出流中使用 document.write . 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档.



这里是个demo

改变HTML的样式


待修改段落


直接通过js输出时间



浏览器控制台输出11


输出一个字面量(常量,数值)


输出一个字面量(常量,字符)


输出由var定义的变量计算得来的结果


数组Array的使用


对象(其中的属性,值,类似python字典.另外,JS对象还可以有自己的方法.这个就类似于类的概念了)


创建JS对象

使用对象方法.对象方法是一个函数定义,并作为一个属性值存储.


带参数的函数


事件 event


这个例子演示了 if..else if...else 语句

点击下面的按钮,会显示出基于今日日期的消息:switch用法


JavaScript 验证输入

请输入 1 到 10 之间的数字:


表单验证(必填或必选项目).输入空值,则弹窗.输入正确的值,则交给后端程序进行处理

名字:

E-MAIL验证(输入的数据必须包含 @ 符号和点号(.)同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号)

Email:

JavaScript标准.ECMAScript5(ES5,2009 年发布),是JS最新版本.所有的现代浏览器已经完全支持 ES5.


ECMAScript 2015(ECMAScript 6).ES2015(ES6) 新增两个重要关键字: let 和 const.在 ES6 之前,JS只有两种作用域:全局变量与函数内的局部变量.


什么是 JSON? JSON 英文全称 JavaScript Object Notation.JSON 是一种轻量级的数据交换格式。 JSON 语法规则.数据为 键/值 对.数据由逗号分隔.大括号保存对象.方括号保存数组.


JavaScript 闭包

局部变量计数。

0


以下是改变 HTML 内容

修改HTML内容最简单的办法是使用innerHTML属性

Hello World!

以上段落通过脚本修改文本。


以下是改变 HTML 属性

如需改变 HTML 元素的属性,使用这个语法:document.getElementById(id).attribute=新属性值


以下是改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:document.getElementById(id).style.property=新样式

Hello World!

Hello World!

以上段落通过脚本修改。


使用事件.HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件:元素被点击,页面加载完成,输入框被修改......

我的标题 1

点击文本!

点击文本!


该实例使用 addEventListener() 方法在按钮中添加点击事件。


jQuery 描述:.主要的 jQuery 函数是 $() 函数(jQuery 函数)。如果您向该函数传递 DOM 对象,它会返回 jQuery 对象,带有向其添加的 jQuery 功能。jQuery 允许您通过 CSS 选择器来选取元素。

HTML DOM 文档对象被传递到 jQuery :$(document)。当您向 jQuery 传递 DOM 对象时,jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。

jQuery 函数会返回新的 jQuery 对象,其中的 ready() 是一个方法。由于在 JavaScript 中函数就是变量,因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。


结束


posted @ 2020-04-20 14:55  ChanixChen  阅读(155)  评论(0编辑  收藏  举报