关于html5:HTMLCSSJSJQuery学习笔记

2次阅读

共计 21370 个字符，预计需要花费 54 分钟才能阅读完成。

一.HTML 概述

1.1 HTML 是什么?

HTML(Hyper Text Markup Language): 超文本标记语言

    超文本：超级文本（文本、图片、视频、音频等）标记(标签 / 元素 / 节点)：就是由尖括号括起来的一组内容
        <html> <div> <img> 等
    就是用于开发网页的最根底的语言

对于 HTML 须要留神的是:

    1) 通过 HTML 开发的网页文件通常是以 .htm 或 .html 为后缀
    2) 通过 HTML 开发的网页文件由浏览器负责解析并显示
    3) HTML 实质就是一个文档(txt,word,html,ppt)

1.2 HTML 的构造

1.2.1. 例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 网页 </title>
    </head>
    <body>
   </body>
</html>

1.2.2.HTML 构造详解

(1)<!DOCTYPE html> 文档申明, 用来申明 HTML 文档所遵循的 HTML 标准和版本 下面是 html5.0 的申明, 也是目前最罕用的版本 

(2) <html></html> 根标签, 用于包裹所有的网页内容(除了文档申明)

 (2)<head></head> 头局部, 用来寄存 HTML 文档的根本属性信息, 比方网页的题目, 文档应用的编码等, 这部分信息会被浏览器优先加载.

 (3) <body></body> 体局部, 用来寄存可视化的网页内容. 即真正的网页数据

 (4)<title> </title> 申明网页的题目 

(5) <meta charset="utf-8"> 用来告诉浏览器应用哪一个编码来关上 HTML 文档, 这个编码肯定要和文件保留时的编码保持一致, 才不会呈现中文乱码问题.

1.3 HTML 语法(理解)

1.3.1、html 标签
标签：也叫做标记、元素等，标签分为开始标签，例如：

<head>、<body>

和完结标签，例如:

</head>、</body>

开始标签和完结标签之间还能够蕴含其余内容。

<head>
    <titile> 申明网页的题目 </title>
    <meta charset="utf-8">
</head>

有些标签开始标签和完结标签之间没有内容要包裹，通常能够写成自闭标签，例如：

<br/> <hr/> <input/> <img/> <link/> 等

1.3.2、html 属性
在标签上能够申明属性(属性不能独立存在, 必须申明在标签上)

<div id="d1" class="c1" style="color:red;"> 这是一个 div 元素 </div>

标签上能够申明多个属性，多个属性之间用空格分隔

标签上的属性的值能够应用单引号或者双引号引起来

<meta charset="UTF-8" id="m1">
<meta charset='UTF-8' id='m1'>

1.3.3、html 正文
格局: <!-- 正文内容 -->

正文的作用:
(1)为代码增加解释阐明

(2)将一些临时不须要执行的代码正文

浏览器对于 html 正文中的内容不会解析，也不会显示！
1.3.4、html 空格和换行
在浏览器中，多个间断的空白字符（空格、制表符 tab、换行）会被浏览器显示为一个空格。那么：

如何在网页中做一个换行：能够应用 <br/> 标签做换行

如何在网页中做一个空格：能够应用 &nbsp; 或&emsp;做空格

补充: HTML 中是不辨别大小写的！

HTML 中对语法要求十分不严格！（比方大小写混用，或者标签只有开始没有完结，或者标签的不合理嵌套），然而咱们在书写 HTML 时要依照标准来写。

2.HTML 标签

2.1. 图像标签:

<img src="指定图片的地址" alt="代替图片显示的文本"  width="图片的宽度" height="图片的高度"/>

留神:  不举荐写带盘符的绝对路径, 因为未来我的项目公布, 地位会扭转, 到时还要批改图片的门路

./  示意当前目录(以后文件所在的目录)(可省略)

../  示意当前目录的上一级目录里(也就是当前目录的父目录)

../../  示意当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目 录)

2.2. 超链接标签:

超链接就是 a 标签，通过 a 标签能够在网页中创立指向另外一个文档的超链接 点击超链接能够跳转到另外一个网页(图片 / 下载门路等)

<a href="指定点击超链接后将会跳转到的地址" target="_self|_blank"> 这里能够包裹文本或图片 </a>

其中 href 属性用于指定点击超链接后将要跳转到的 URL 地址

target属性用于指定以何种形式关上超链接

_self：默认值, 示意在以后窗口中关上超链接

_blank：示意在新的窗口中关上超链接

2.3. 表格标签:

table: 定义一个表格

tr(table(表格) row(行)): 定义表格中的行

td(table data cell): 定义表格中的单元格

th(table header cell): 用于定义表头中的单元格, 其中的文本默认加粗并居中

2.4. 表单标签

表单的作用:
用于向服务器提交数据, 此外在超链接或者 url 地址的前面拼接参数也能够向服务器提交数据!

向服务器提交数据的两种形式：

(1)通过表单向服务器提交数据

<form action="url 地址" method="提交形式"></form>

action 属性: 指定表单的提交地址
method(办法)属性: 指定提交办法, 罕用的提交形式为 GET 和 POST, 若不指定提交形式, 默认为 GET 形式.

(2)通过超链接向服务器提交数据

http://www.baidu.com?username= 张三 &pwd=123&like= 篮球

<a href="http://www.baidu.com?username= 张三 &pwd=123&like= 篮球" target="_blank"> 百度一下, 你就不晓得!</a>

在地址栏 URL 地址的前面通过问号 (?) 能够拼接参数，参数能够有多个，多个参数之间用 & 分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如: 张三 /123/ 篮球)，在回车后拜访百度服务器的同时，就能够将问号前面拼接的参数一并带给百度服务器。

2.5. 表单项标签

1、input元素：
(1)一般文本输入框(比方: 用户名 / 昵称 / 邮箱 / 验证码等)

<input type="text" name="username"/>

(2)明码输入框(比方: 明码 / 确认明码等)

input type="password" name="pwd"/>

(3)单选框(比方: 性别 / 部门等)

<input type="radio" name="gender"/> 男

(4)复选框 / 多选框(比方: 喜好 / 岗位等)

<input type="checkbox" name="like"/>

(5)一般按钮(比方: 换一张图片)

<input type="button" value="换一张"/>
一般按钮自身没有性能, 但咱们能够通过 js 为按钮增加性能或增加行为~~~~

(6)提交按钮(比方: 提交 / 注册 / 登录)

<input type="submit" value="提交 / 注册 / 登录"/>
提交按钮用于提交表单中的数据到服务器中!

2、select、option标签：

<select name="city">
    <option value="beijing"> 北京 </option>
    <option value="shanghai"> 上海 </option>
    <option selected="selected"> 广州 </option>
    <option> 深圳 </option>
</select>

select用于定义一个下拉选框

option用于定义下拉选框上的选项

selected设置以后 option 选项默认被选中

3、textarea多行文本输出区域：

<textarea name="description" cols="30" rows="5"
placeholder="请输出形容信息..."></textarea>

cols 属性: 用于设置文本输入框的列数(宽度)

rows 属性: 用于设置文本输入框的行数(高度)

placeholder 属性: 设置输入框中的提醒音讯!

3. 表单细节问题

3.1、提交表单时，表单中的数据为什么没有被提交？
对于表单中的表单项标签，只有是须要向服务器提交数据，该表单项上必须增加 name 属性；如果表单项标签上没有 name 属性，在表单提交时，该项将会被疏忽。例如：

<input type="text" name="username"/>
<input type="password" name="psw"/>

3.2、如何让多个单选框只能有一个被选中？
要求多个单选框必须具备雷同的 name 属性值，如果多个单选框 name 属性值雷同，则阐明是一个组的内容，一个组中的单选框只能抉择其中的一个！

<td> 性别:</td>
<td>
    <input type="radio" name="gender"/> 男
    <input type="radio" name="gender"/> 女
</td>

3.3、为什么单选框、复选框抉择某一项后提交的值都是 on?
因为单选框、复选框只能抉择，不同于用户名、明码输入框，能够输出内容。

因而咱们须要通过 value 属性为单选框或复选框设置提交的值(如果不设置默认值都是 on)，例如：

<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女

3.4、如何设置单选框或复选框默认选中某一项?
能够在单选框或复选框标签上增加一个 checked=”checked” 属性，就能够让以后单选框或复选框默认被选中。例如：

<input type="radio" checked="checked" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
<!-- 喜好复选框 / 多选框 -->
<input type="checkbox" name="like" value="basketball"/> 篮球
<input type="checkbox" checked="checked" name="like" value="football"/> 足球
<input type="checkbox" name="like" value="volleyball"/> 排球

3.5、如何设置下拉选框默认选中某一项?
在 option 标签上增加一个 selected=”selected” 属性，能够让以后 option 选项默认被选中，例：

<select name="city">
    <option> 北京 </option>
    <option> 上海 </option>
    <option selected="selected"> 广州 </option>
    <option> 深圳 </option>
</select>

3.6、下拉选框中 option 选项上的 value 属性的作用是什么？
如果某一个选项被选中，并且该选项上增加了 value 属性，在提交表单时，将会提交 value 属性的值。

如果某一个选项被选中，该选项上没有增加 value 属性，在提交表单时，将会提交标签中的内容

<select name="city">
    <option value="beijing"> 北京 </option>
    <option value="shanghai"> 上海 </option>
    <option selected="selected"> 广州 </option>
    <option> 深圳 </option>
</select>

3.7、音频, 视频标签
音频标签:

audio{border-radius: 20px;  设置圆角边框}
audio:focus{ /* 获取焦点 audio 元素 _/
/_ 设置元素的外围(包在边框外的线) */ 
outline: none; 
}

<audio autoplay="autoplay" controls="controls" src="音频文件 url 地址"></audio>

autoplay="autoplay"    页面加载结束后自动播放
controls 属性: 为用户增加播放, 暂停, 音量控制等插件

视频标签:

audio{border-radius: 20px;  设置圆角边框}
video:focus{  /* 获取焦点 audio 元素 _/
/_ 设置元素的外围(包在边框外的线) */ 
    outline: none;
}

<video controls="controls" src="视频文件"></video>

autoplay="autoplay"    页面加载结束后自动播放
controls 属性: 为用户增加播放, 暂停, 音量控制等插件

4. 元素类型

div/span/p 都是一个容器标签，用于包裹其余内容（这些元素自身不具备太多的款式！）

p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于 p 标签包裹每一段内容）

div: 块级元素，默认独占一行，用于包裹其余内容，将款式设置在 div 上，就能够作用在 div 的内容上。

span：行内元素，默认能够和其余元素显示在同一行。同是行内元素的还有:b,i,u,input,img(这两个能够设置宽高)

(1)块级元素（block）
默认状况下，块级元素独占一行

能够设置宽和高，如果设置了就是设置的宽和高

如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容撑持)

比方: div/p/h1~h6/form/table/div/p 等元素都是块级元素

(2)行内元素（inline）
默认状况下，多个行内元素能够处在同一行

不能设置宽和高

比方: span/input/img/i/b 等元素都是行内元素

(3)行内块元素（inline-block）

既具备行内元素的特色(能够同行显示)，还具备块级元素的特色(能够设置宽和高)

二.CSS

1.css 概述?

CSS: 层叠样式表, 是用于丑化, 渲染网页的一门语言和传统的 html 标签属性设置款式相比, 应用 CSS 设置款式能够实线: 将展现数据的 html 代码和设置款式的 CSS 代码进行拆散, 能够加强网页的展现能力.

2.CSS 的三大个性

2.1. 层叠性

是指多种 CSS 款式的叠加, 是浏览器解决抵触的一个能力, 如果一个属性通过两个雷同选择器设置到同一个元素上, 那么这个时候一个属性就会将另一个属性层叠掉.

个别状况下, 如果呈现款式抵触, 则会依照 CSS 书写的程序, 以最初的款式为准.
1. 款式抵触, 遵循的准则是就近准则. 那个款式离构造近, 就执行那个款式.
2. 款式不抵触, 不会层叠

2.2. 继承性

所谓的继承性是指书写 CSS 样式表时, 子标签会集成父标签的某些款式.

留神: 失当的应用继承能够简化代码, 升高 CSS 款式的复杂性. 子元素能够继承父元素的款式(text- , font- , line- 这些元素结尾的都能够继承, 以及 color 属性)

2.3. 优先级关系

定义 CSS 款式时, 经常出现两个或更多规定利用在批准元素上, 这时就会呈现优先级的问题.

优先级: !important> 内联款式 (1000)> id 选择器(100)>class 选择器(10)> 元素名选择器(1)> 通用选择器 > 继承(0)> 默认 如果一个选择器中蕴含多个选择器类别, 能够通过权重值相加, 权重值大的优先级高如果权重值雷同, 书写在前面的会笼罩后面的.

权重形同时,CSS 遵循就近准则. 也就是说凑近元素的款式具备最大的优先级, 或者说排在最初面的款式优先级最大.

3. 引入 CSS

3.1. 引入 CSS 形式一

在标签上增加一个 style 属性, 在 style 属性外部, 能够设置 css 款式, 例如:

<div style="border:2px solid red;font-size:26px;background:pink;">
        这是一个 div...
</div>

当 css 代码特地多时, 容易造成页面构造的凌乱, 而且代码无奈复用，不利于前期的扩大和保护。这种形式不举荐应用!

3.2. 引入 CSS 形式二

在 head 标签外部增加一个 style 标签, 在 style 标签外部能够增加 CSS 款式.

<head>
    <style>
        /* ****** CSS 款式 ****** */
        span{ /* 选中所有的 span 元素 */
            border: 2px solid green;
            font-size: 30px;
            font-weight: bolder;
        }
    <style>
</head>

这种形式没有把 css 款式代码间接写在标签上, 而是写在一个 style 标签外部统 一治理, 不会造成页面代码的凌乱. 而且这种形式实现了代码的复用!
​ 不举荐大量应用!

3.3. 引入 CSS 形式三

将所有的 CSS 代码写在一个 xxx.css 文件中, 在须要应用这些款式的 html 中, 引入这个 css 文件即可!

<link rel="stylesheet" href="demo.css"/>

这种形式是将所有的 css 代码放在一个 css 文件中对立进行治理, 没有造成页面构造的凌乱, 也实现了代码的复用. 真正的实现了将 css 代码和 html 代码进行拆散!

4.CSS 选择器

所谓的选择器, 就是能够帮咱们在 HTML 中选中指定元素

4.1. 元素名 / 标签名选择器

div{ } -- 选中所有的 div 元素并设置款式
​span{} -- 选中所有的 span 元素并设置款式

4.2.class/ 类选择器

.c1{} — 选中所有 class 值为 c1 的元素并为这些元素设置款式

<div class="c1 c2"></div>
<span class="c1"></span>
<p class="c1"></p>

另外, 一个标签能够设置多个 class 属性值(class=”c1 c2″), 多个 class 值之间用空格隔开示意以后标签同时属于多个分组, 多个分组设置的款式也会同时作用在这个标签上.

4.3.id 选择器

id 值在整个 html 中应该是举世无双的!

#div1{ } -- 选中 id 值为 div1 的元素

<div id="div1"></div>

4.4. 后辈选择器

span{ } -- 选中以后 html 中的所有 span 元素
​div span{ } -- 选中 div 外部的所有 span 元素
​div,span{ } -- 选中以后 html 中的所有的 div 元素以及所有的 span 元素

<div>
    <span></span>
</div>
<span></span>

4.5. 属性选择器 — 依据元素的属性条件筛选 / 过滤元素

input[type='text']{ } -- 选中所有 type='text' 的 input 元素, 也就是文本输入框
​input[type='checkbox']{ } -- 选中所有 type='checkbox' 的 input 元素, 也就是复选框
​input[type='radio']{ } -- 选中所有 type='checkbox' 的 input 元素, 也就是单选框
​div[id]{} -- 选中所有具备 id 属性的 div 元素

5. 罕用属性总结：

5.1、文本 / 字体相干属性

1.text-align: 设置元素外部的文本程度排列形式

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2.text-indent: 5px 设置元素外部文本首行缩进, 单位: 像素 / 百分比

3.text-decoration：设置文本的下划线款式，其罕用取值为:

underline: 有下划线
none: 没有下划线

4.letter-spacing：设置字符距离 / 间距，其罕用取值为:

normal: 像素值

5.text-shadow：设置字体暗影，其取值为:

text-shadow: 设置文本的暗影
    5px 5px 5px #000;
    第 1 个值: 设置暗影的程度偏移地位(值越大向右)
    第 2 个值: 设置暗影的垂直偏移地位(值越大向下)
    第 3 个值: 设置暗影的扩散水平(值越大越含糊)
    第 4 个值: 设置暗影的色彩

6. 字体属性

font-size: 5px 设置字体大小
font-weight: 设置字体粗细(100~900), 默认是 300,normal、bold、bolder 
font-family: 设置字体款式 微软雅黑, 宋体, 黑体...
color: 设置字体色彩
line-height: 设置行高

5.2、背景相干属性

background-color: 设置背景色彩 ​

background-image: 设置背景图片 ​

background-repeat: 设置背景图片是否以及如何反复排列,
repeat: 横向反复排列, 纵向也反复排列(默认)
repeat-x: 横向反复排列, 纵向不反复排列
repeat-y: 纵向反复排列, 横向不反复排列
no-repeat: 横向不反复排列, 纵向也不反复排列

background-position：15px 15px 设置或检索对象的背景图片地位 ​ 
background-size: 80px 60px; 设置背景图片大小 ​ 
background: 背景色彩 背景图片 背景图片是否反复 背景图片的地位 ​ 
如:background: #FFF url(图片门路) no-repeat 14px(X 轴: 右) 14px(Y 轴: 下);

5.3、边框属性(border)

border:2px solid red; — 设置元素的边框(能够同时设置边框的宽度、款式、色彩) border 属性能够拆分为如下设置:

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的款式
border-color: red; -- 设置元素边框的色彩

其中 border-width、border-style、border-color 也能够依照上右下左方向进行拆分，以 border-width 为例：

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置左边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

border-radius: 5px 设置圆角边框

5.4、其它属性

​ width: 设置元素的宽度

​ height: 设置元素的高度

​ margin: 设置元素的外边距

margin-top: 10px; -- 设置元素的上外边距为 10px;
margin-right: 20px; -- 设置元素的右外边距为 20px;
margin-bottom: 30px; -- 设置元素的下外边距为 30px;
margin-left: 40px; -- 设置元素的左外边距是 40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 高低 左右
margin: 10px; -- 上下左右都是 10px;

display: block/inline/inline-block 设置元素为块元素或者行内元素

1) block: 块级元素的默认值, 比方: div,p,h1~h6,form,table,tr 等都是块级元素. 块级元素默认独占一行(即不能和其它元素显示在同一行)
2) inline: 行内元素的默认值, 比方: span,img,input,b,i,u 等. 多个行内元素能够显示在同一行(但行内元素不能够设置宽高)
3) inline-block: 行内块元素, 特点是: 即能够设置宽高, 有能够同一行显示.
vertical-align: middle;    /* 让同行内的元素中线对齐 */
vertical-align: top;          让以后元素和行内最高元素的顶部对齐

5.5、色彩设置

色彩取值形式常见的形式有三种:

形式一：设置色彩名，例如：red、green、blue、yellow、cyan、pink、white、black 等

形式二：设置 #加上六位的十六进制数值
#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等

形式三：设置 rgb 色彩值 
rgb(255,0,0)、rgb(0,255,0)、rgb(0,0,255)、rgb(255,255,0)、rgb(0,255,255) 等（red）（green）（blue）（yellow）（cyan: 青色）

6. 浏览器中的谬误

unknown property name  属性名写错
invalid property value       像素写错

三.JavaScript 概述

1、什么是 JS

全称 JavaScript，简称 JS
​JS 是由 NetScape(网景)公司提供的一门嵌入在浏览器中执行的脚本语言。
​次要作用是: 用于实现网页中的动画成果，或者实现表单校验等性能
​JS 能够运行在服务器端(Node.js)

2、JS 的特点

（1）JS 是一门直译式的语言（JS 不须要编译，间接执行的就是源代码）
（2）JS 是一门基于对象的语言(JS 能够通过某些机制模仿面向对象)
（3）JS 是一门弱类型的语言（JS 中的变量不辨别类型，能够指向任意的数据）

3、JS 的劣势

（1）良好的交互性（JS 的呈现就会为了嵌入在浏览器中运行，能够用户进行交互，进步用户体验）
（2）肯定的安全性（JS 只能在浏览器外部运行，不能拜访浏览器意外的资源）
（3）跨平台性（只有有浏览器，就能运行 JS）

    ( JS 语言是跨平台的，是因为有浏览器，但浏览器不跨平台

​ Java 语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )

4、JS 的引入

4.1 间接写在 html 中的 script 标签外部

script 标签能够放在 head 或 body 中

<script>
        console.log("引入 JS 的形式一");
        alert("引入 JS 的形式一");
        document.write("引入 JS 的形式一 <br />");
</script>

4.2 通过 script 标签引入内部的 JS 文件

<script src="./js/demo.js"></script>

须要留神的是: (1)在引入 js 文件的 script 标签外部, 不要书写 JS 代码, 因为无奈执行

<script src="demo.js">
 alert(111); // 这里的代码不会执行
</script>

(2)引入 js 文件的 script 标签最好不要自闭, 可能会导致 js 文件引入失败

<script src="demo.js" />

4.3 间接将 js 代码写在 html 标签上

<button type="button" onclick="console.log(' 引入 JS 的办法三 ')">666</button>
<input type="button" value="6666" ondblclick="document.write(' 引入 JS 的办法三 ')"/>

5.JS 的语法

5.1. 正文格局

// 单行正文内容
/* 多行正文内容 */

5.2. 数据类型

5.2.1 根本数据类型

（1）数值类型（number）：JS 中所有的数值在底层都是浮点型 只不过在须要时，会主动的在整型和浮点型之间进行转换 .
NaN(Not a Number)非数值
Infinity(正无穷大)
-Infinity(负无穷大)
（2）字符串类型（string）：JS 中字符串是根本数据类型，但 JS 中也提供的对应的包装对象 JS 中的字符串能够应用单引号或者双引号引起来!

例如:
        var str1 = "Hello JS";
        var str2 = 'Hello JS';
        console.log(typeof str1); // string
        console.log(typeof str2); // string
    JS 中提供了字符串的包装对象 --String
        var str3 = new String("Hello JS");
        console.log(typeof str3); // object
    str1 和 str2 也能够当做对象应用, 在应用时, 和 str3 没有什么区别

（4）undefined 类型：申明了变量但没有为变量赋值，此时变量的值是 undefined

如在 console 控制台中书写
var x;
alert(x);  // x 的值为 undefined

（5）null 类型 ：示意空值，能够作为函数的返回值，示意函数返回的是一个空的对象
留神:undefined 和 null 都不能调用属性, 办法, 否则会报错!!!

5.3. 简单数据类型

次要指对象（JS 内置对象、自定义对象、数组、函数）
5.4. 变量的申明

JS 中是严格辨别大小写的

JS 中通过 var 关键字申明变量，申明的变量不辨别类型，能够指向任意的数据
    var s1 = "Hello World";
    s1 = 123;
    s1 = false;
    s1 = [];
    s1 = function(){} // 函数
JS 有主动断句的性能，即便在一行代码之后，没有加分号，也不会报错, 但倡议加上分号;
JS 中如果反复申明变量, 也不会报错, 因为 JS 中申明一个已存在的变量不会失效;
var x = "abc"; //var x; x = "abc";
var x = 123; //var x; x = 123;
alert(x);  // x 的值为 123, 仅仅更改了 x 的值
5.5.JS 的运算符

JS 中的运算符和 Java 中的运算符大致相同

算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比拟运算符: ==，!=，>，>=，<，<=
位运算符: &，|
逻辑运算符: &&，||   (false && 表达式, true || 表达式)
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 1 : 表达式 2
5.6.JS 中的语句

JS 中的语句和 Java 中的语句大致相同

5.6.1.if 分支
if (条件 1){当条件 1 为 true 时执行的代码}else if (条件 2){当条件 2 为 true 时执行的代码}else{当条件 1 和 条件 2 都不为 true 时执行的代码}
5.6.2.switch 分支

应用 switch 语句来抉择要执行的多个代码块之一。语法结构如下：

switch(n){
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    ...
    default:
        与 case 1 和 case 2 不同时执行的代码
}

执行原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与构造中的每个 case 的值做比拟。如果存在匹配，则与该 case 关联的代码块会被执行。请应用 break 来阻止代码主动地向下一个 case 运行。

5.6.3. 循环构造

for 循环的语法结构如下：

for (语句 1; 语句 2; 语句 3){被执行的代码块}

while 循环 – 在指定条件为真时循环执行代码块

while (条件){须要执行的代码}

while 循环会在指定条件为真时循环执行代码块。

5.7.JS 的数组

JS 数组的申明形式一

// 申明一个空数组, 长度为零
var arr1 = [];
// 申明一个数组，并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];

JS 数组的申明形式二

// 申明一个空数组，长度为零
var arr3 = new Array();
// 申明一个数组，并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());

数组的特点:
(1)JS 中的数组能够寄存任意类型的元素
(2)JS 中的数组的长度能够被任意扭转
如：

var arr1 = [];
console.log("此处数组的长度为:"+arr1.length); // 0
arr1.length = 5;
console.log("此处数组的长度为:"+arr1.length); // 5
arr1[9] = "a";
console.log("此处数组的长度为:"+arr1.length); // 10
arr1[99] = "b";
console.log("此处数组的长度为:"+arr1.length); // 100
5.8.JS 的函数

JS 的函数相当于 Java 中的办法, 就是一个具备性能的代码块, 通过函数名能够重复执行!

function fn1([形参 1, 形参 2,...] ){[]示意参数可有可无
        // 函数体... 
    }
fn1([实参 1, 实参 2]);


var fn2 = function([形参 1, 形参 2,...] ){// 函数体...}
fn2([实参 1, 实参 2]);


匿名函数, 只执行一次
(function( [形参 1, 形参 2,...] ){// 函数体...})([实参 1, 实参 2,...] );

调用函数: 函数名称([参数列表]);

6.JS 中的事件

onclick:  点击事件
ondblclick:  双击事件
onchange:  扭转事件: 元素扭转时, 触发
onmouseover:  鼠标悬停事件
onmouseout:  鼠标来到事件
onselect:  文本框内容被选中事件
onfocus:  光标汇集
onblur:  光标来到
onload:  网页导入, 当页面加载完所有的 html 元素后，立刻执行 function
onunload:  敞开网页

JS 中设置事件

形式 1:

<script>

 function fn(){alert("input 按钮被点击了...");

 }

</script>

<body>

 <input onclick="fn()" type="button" value="点我~!" />

</body>

​

形式 2:

<script>
// 当页面加载完所有的 html 元素后，立刻执行 function
 window.onload = function(){  

 // 获取 id 为 btn 的元素

 var btn = document.getElementById("btn");

 btn.onclick = function(){alert("input 按钮被点击了...");

 }

 }

</script>

<body>

 <input id="btn" type="button" value="点我~!" />

</body>

7.JS 的 DOM 操作

DOM: Document Object Model, 文档对象模型是 JS 专门为拜访 html 元素所提供的一套 API

7.1. 如何获取 html 元素

document是一个 js 对象，用于示意以后 html 网页。当浏览器加载残缺个 html 网页后，会用 document 对象示意整个 html 网页！

document.getElementById(id 值) — 通过元素的 id 值，获取一个元素。返回的是示意该元素的 js 对象。

<div id="div1">xxxx</div>
// 获取 id 为 div1 的元素
var oDiv1 = document.getElementById("div1");
//oDiv1 是一个 js 对象, 示意获取的 div 元素

document.getElementsByTagName(元素名) — 通过元素名称获取以后文档中的所有指定名称的元素，返回的是一个数组，其中蕴含了所有指定名称的元素。

document.getElementsByclassName(元素名)— 通过元素名称获取以后文档中的所有指定 class 名称的元素，返回的是一个数组，其中蕴含了所有指定名称的元素。

document.body — 获取以后文档中的 body 元素

element.parentNode — 获取以后元素的父元素。element 示意以后元素 如:div.parentNode;

7.2. 如何创立 html 元素

document.createElement(元素名 / 标签名) 返回一个 JS 对象 — 依据标签名创立指定名称的标签, 返回的是一个 JS 对象, 示意新创建的这个元素

7.3. 如何增加 html 元素

parent.appendChild(child) — 通过父元素 (parent) 调用 appendChild 办法增加子元素(child)

实例: 创立一个表格, 并增加到 body 中
    // 创立 table、tr、td 元素
    var oTab = document.createElement("table");
    var oTr = document.createElement("tr");
    var oTd = document.createElement("td");
    // 将 td 增加到 tr 中, 将 tr 增加到 table, 将 table 增加到 body 中
    oTr.appendChild(oTd);
    oTab.appendChild(oTr);
    document.body.appendChild(oTab);

7.4. 如何删除 html 元素

parent.removeChild(child)— 通过父元素删除子元素，其中 parent 示意父元素，child 示意子元素

7.5. 如何获取或设置 (增加, 批改) 元素的内容

element.innerHTML — 获取以后元素的所有内容 element.innerHTML = xxx; — 为以后元素设置内容(原内容会被新内容笼罩)

<div id="div1">
    这是一个 div 元素...
    <span> 这是一个 span 元素 </span>
</div>
// 获取 div 元素
var oDiv1 = document.getElementById("div1");
oDiv1.innerHTML;// 获取 div 元素的内容

7.6. 如何删除 input 中的 value 值

value: 仅表单项有 value

var inp=document.getElementById("user");
//inp.value="刘备";  // 批改 inp 的 value 值为 刘备
inp.value="";

<input id="user" type="text" value="常山赵子龙"/>

8. 补充

8.1.JS 中主动转换值

"abc" -- 主动转数值 --> NaN
"89" -- 主动转数值 --> 89
"" -- 主动转数值 --> 0

8.2. 函数

alert() 弹出框

prompt() 显示可提醒用户进行输出的对话框

prompt(text,defaultText)
text: 可选, 在对话框中显示的纯文本
defaultText: 可选, 默认的输出文本. 也能够不输出值, 如果不输出值, 则返回 null
如:
var socue=prompt("请输出问题",0);
其中 "请输出问题" 显示在对话框上
0 显示在输入框内

8.3.JS 提供文档就绪事件函数

window.onload=function(){alert("以后 html 中的所有元素都曾经加载实现!");
}

8.4.JS 中设置 CSS 属性

tr.style.background="pink";
tr.className="xxx"; xxx==css 中 class 的值

四.jQuery

1. 什么是 jQuery

jQuery: JavaScript Query ​jQuery 是一门轻量的、收费开源的 JS 函数库(JS 文件) ​其实就是一个 JS 的框架 ​jQuery 能够极大的简化 JS 代码 ​核心思想：“写的更少、但做的更多”

轻量的：是指一个技术或框架对代码或程序的侵入水平是比拟低的。或者说代码对该技术依赖水平越低，这个技术越轻。对该技术的依赖水平越高，这个技术越重。

_jQuery 实质就是一个蕴含了很多函数的 JS 文件，如果要在某一个 HTML 中应用这个 JS 文件中的函数，就必须得将 JS 文件引入到 HTML 中_（想应用 jQuery，就得引入 jQuery 的函数库文件，就是一个 JS 文件）

2.jQuery 的劣势

(1) 能够极大的简化 JS 代码

(2) 能够像 CSS 选择器一样获取 html 元素

css 中获取所有的 div, 给 div 增加款式:

div{css 属性...}

jQuery 中获取所有 div, 给 div 增加边框款式:

$("div").css("border", "2px solid red");

JS 获取 id 为 div1 的元素: document.getElementById("div1")
jQuery 获取 id 为 div1 的元素: $("#div1")

(3) 能够通过批改 css 属性管制页面的成果

4) 能够兼容罕用的浏览器

比方: JS 中的 innerText 属性、removeNode()函数、replaceNode()函数 这些函数在某些浏览器中是无奈应用的。

jQuery 中提供了相应的函数（text 函数、remove 函数、replaceWith 函数）

罕用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等

3.jQuery 引入

jQuery 的函数库文件就是一个一般的 JS 文件，引入 jQuery 和引入 JS 文件的形式一样

<!-- 在应用 jQuery 之前，必须先引入 jQuery 的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>

在引入 jQuery 函数库文件时，如果文件引入门路谬误，则会导致文件引入失败, 如

Uncaught ReferenceError: $ is not defined
at

问题剖析: 引入门路有问题

4. 文档就绪事件函数

jQuery 提供的文档就绪事件函数 jQuery==$
<script>
$(function(){         //jQuery==$
    // 在浏览器加载完所有元素后立刻执行
    alert("以后 html 中的所有元素都曾经加载实现!");
});
</script>

其残缺写法为:

<script>
    $(document).ready(function(){// 在浏览器加载残缺个 html 网页后立刻执行});
</script>

什么时候该应用文档就绪事件函数?

如果在获取元素时，获取元素的代码执行的机会，比元素自身加载的工夫还要早，如果元素还没有加载就获取，必然是获取不到的。

能够将获取元素的代码放在文档就绪事件函数中，等浏览器加载残缺个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！

5.jQuery 选择器

5.1. 根本选择器

(1)元素名选择器
$("div") -- 选中所有的 div 元素
$("span") -- 选中所有的 span 元素

(2)class/ 类选择器
$(".s1") -- 选中所有 class 值为 s1 的元素(class 值为 s1 的元素可能是任何元素)
$("span.s1") -- 选中所有 class 值为 s1 的 span 元素

(3)id 选择器
$("#one") -- 选中 id 为 one 的元素

(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的 div 元素, 以及所有的 span 元素, 以及所有 class 值为 s1 的元素, 以及 id 为 one 的元素

5.2. 层级选择器

$("div span") -- 选中所有 div 外部的所有 span 元素
$("div").find("span") -- 选中所有 div 外部的所有 span 元素
$("#one span") -- 选中 id 为 one 的元素外部的所有 span 元素

相邻兄弟选择器
$("#two+span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素
$("#two").next("span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素
$("#two").prev("span") -- 选中 id 为 two 的元素后面紧邻的 span 兄弟元素


$("#two~span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素
$("#two").nextAll("span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素
$("#two").prevAll("span") -- 选中 id 为 two 的元素后面所有的 span 兄弟元素
$("#two").nextAll() -- 选中 id 为 two 的元素前面所有的兄弟元素
$("#two").prevAll() -- 选中 id 为 two 的元素后面所有的兄弟元素


$("#two").siblings("span") -- 选中 id 为 two 的元素前、后所有的 span 兄弟元素

parent() -- 获取以后元素的父元素, 相似于 js 中的 parentNode 属性
parents() -- 获取以后元素的所有的先人元素
$(":checked").parent().parent(); -- 获取所有被被选中的父类元素的先人元素
$(":checked").parents("tr") -- 获取所有被选中的先人元素

5.3. 根本过滤选择器

(1) 选中第一个 div 元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)

(2) 选中最初一个 div 元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)

(3) 选中第一个 div 元素以及选中最初一个 div 元素
$("div:first,div:last")

(4) 选中第 n + 1 个 div 元素(n 是下标从零开始)
$("div:eq(n)")
$("div").eq(n)

(5) 获取所有 div 下标值大于 3 的元素
$("div:gt(3)")
     获取所有 div 下标值小于 4 的元素
$("div:lt(3)")

5.4. 表单选择器

$(":input") -- 匹配所有的表单项元素(包含 input、select、textarea、button)
$(":text") -- 匹配所有一般文本输入框
$(":password") -- 匹配所有明码输入框
$(":radio") -- 匹配所有单选框
$(":checkbox") -- 匹配所有复选框

$(":checked") -- 匹配所有被选中的单选框, 复选框,option 选项
$(":radio:checked") -- 匹配所有被选中的单选框
$(":checkbox:checked") -- 匹配所有被选中的复选框

6.jQuery 中 html 元素操作

6.1. 创立元素

$("<div></div>") -- 创立一个 div 元素，返回的是一个 jQuery 对象, 示意创立的 div 元素
$("<div>xxxx</div>") -- 创立一个蕴含内容的 div 元素，返回的是一个 jQuery 对象, 示意创立的 div 元素

6.2. 增加子元素

$parent.append($child) -- 父元素调用办法增加子元素
$("body").append("<div> 我是新来的...</div>"); -- 往 body 元素外部追加一个 div 子元素
tr.append("<td>"+id+"</td>"); -- 向 tr 中增加带有值的 td 标签

6.3. 删除元素

$("div").remove() -- 删除所有的 div 元素

JS 删除所有 div 元素：// 获取所有的 div 元素(返回的是所有 div 组成的数组)
var divArr = document.getElementsByTagName("div"); //div 数组
// 遍历 div 数组, 顺次删除每一个 div 元素
var len = divArr.length;
for(var i=0;i<len;i++){// 通过以后元素的父元素删除以后元素(始终删除第一个)
    divArr[0].parentNode.removeChild(divArr[0] );
}

6.4. 替换元素

能够替换暗藏的元素
$("div").replaceWith("<p> 我是来替换的…</p>")

6.5.html 元素内容和值的操作

<div>
      这是一个 div11 元素
    <span> 这是一个 span 元素 </span>
    这是一个 div1111 元素
</div>
<input type="text" name="user"/>

1、html()函数 (相似于 js 中的 innerHTML 属性)

— 用于获取或设置元素的内容，比方为 div、span、p、h1~h6、table、tr、td、form 等元素设置内容

$("div").html() -- 获取所有 div 中的第一个 div 的内容
$("div").html("xxxx") -- 为所有 div 设置内容, 原内容会被笼罩
$("div").html("<h1>xxx</h1>") 设置的内容能够是标签

2、text()函数 (相似于 js 中的 innerText 属性，innerText 在局部浏览器中不兼容)

— 用于获取或设置元素的 文本内容

$("div").text() -- 获取所有 div 中的所有文本内容
$("div").text("xxxx") -- 为所有 div 设置文本内容

3、val()函数 (相似于 js 中的 value 属性)

— 获取或设置表单项元素的 value 值(input/select/option/textarea)

$("input").val() -- 获取所有 input 元素中的第一个 input 元素的 value 值
$("input").val(值) -- 为所有的 input 元素设置 value 值

6.6. 元素属性和 css 属性操作

<input type="text" name="username" id="inp"/>

1、prop()函数 — 用于获取或设置元素的属性值

在 jQuery1.6 版本之后才有这个函数，1.6 之前版本的 jQuery 能够应用 attr()函数

$("input[type='checkbox']").prop("checked")
// 获取 input 复选框的选中状态, 返回 true 示意复选框为选中状态, 返回 false 示意复选框为勾销选中状态
$("input[type='checkbox']").prop("checked", true)
// 设置所匹配的复选框元素为选中状态

$("#inp").prop("name"); // 获取 id 为 inp 元素的 name 属性值, 返回 useranme
$("#inp").prop("name","user"); // 为 id 为 inp 的元素设置 name 属性值, name 属性值就会变成 user

2、css()函数 — 用于获取或设置元素的 css 属性值

$("#div1").css("width") -- 获取 id 为 div1 元素的宽度
$("#div1").css("width","200px") -- 设置 id 为 div1 元素的宽度为 200px
$("#div1").css({
    "width" : "200px",
    "height" : "150px",
    "border" : "5px solid red",
    "background" : "pink"
}); // 为 id 为 div1 的元素设置宽度为 200px、高度为 150px、边框以及背景色彩等款式

7. 其余函数

1、each() 函数

$(selector).each(function( index,element){})
// each()函数能够遍历 $(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素, 并执行 function 函数)
// function 中的 index -- 示意遍历的元素的下标
// function 中的 element -- 示意以后正在遍历的元素(也能够通过 this 获取)

示例：

$("table tr").each(function(){// 从以后行中获取第二个单元格的内容(以后行的 id 值)
    var tempId = $(this).find("td").eq(1).html();
    // 拿着用户输出的 id 和 每一行中的 id 值进行比拟
    if(id == tempId){alert("增加失败，id 已存在！");
        flag = true; //id 存在，更新 flag 的值，true 示意已存在！}
});

动画函数

2、show()/hide() 函数

show() — 设置元素由暗藏变为显示

$("div").show(1000) -- 设置所有的 div 元素为显示,
1000 示意 1000ms=1s -- 示意在 1s 内实现操作

等价于:

$("div").css("display", "block");

hide() — 设置元素由显示变为暗藏

$("div").hide() -- 设置所有的 div 元素为暗藏

等价于:

$("div").css("display", "none");

2、toggle()/slideToggle()

toggle() — 切换元素的显示状态, 如果元素是显示的, 则切换为暗藏, 否则切换为显示

$("div").toggle() -- 设置所有的 div 元素的状态转换

slidToggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为暗藏，否则切换为显示，切换为显示为下拉状态，暗藏为膨胀状态。

8.jQuery 为元素绑定点击事件

<script>
$(function(){
    // 当点击 btn 按钮时, 触发点击事件执行其中的函数
    $("#btn").click(function(){alert("input 按钮被点击了...");
    });
});
</script>
<body>
    <input id="btn" type="button" value="点我~!" />
</body>

9.js 对象和 jQuery 对象的相互转换

通过 JS 的形式获取元素，返回的是 JS 对象，JS 对象只能调用 JS 的属性或函数

通过 jQuery 选择器获取元素，返回的是 jQuery 对象（构造像一个汇合），jQuery 对象只能调用 jQuery 的属性或函数。

如果现有 JS 对象，但咱们须要调用 jQuery 的属性或函数，能够将 JS 对象转成 jQuery 对象；

如果现有 jQuery 对象，但咱们须要调用 JS 的属性或函数，能够将 jQuery 对象转成 JS 对象；

js 对象转成 jQuery 对象:   $(js 对象)
jQuery 对象转成 js 对象:   jQuery 对象[下标]
正文完
html5
发表至： html5
2020-11-08
 0
关于html5:H5-在ios上元素动态fixed失效
关于html5:深入剖析letconst在for循环中的作用原理
关于html5:eltable的height属性
关于html5:HTML表单

站内搜索

-「」