100字范文 > 16.JAVA之前端 HTML CSS(选择器盒子模型) JS JQuery Json ajax

16.JAVA之前端 HTML CSS(选择器盒子模型) JS JQuery Json ajax

时间：2020-11-30 22:39:02

一、Web前端技术栈

1、HTML超文本标记语言实现页面展现，形成静态网页

2、CSS层叠样式表实现页面美化

3、JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页

4、React facebook出品前端、移动端JavaScript框架

5、Angular google出品基于TypeScript的开源Web应用框架

6、Vue国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发

7、NodeJS基于Chrome V8引擎的JavaScript运行环境

二、HBuilderX

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。

它基于Eclipse，所以顺其自然地兼容了Eclipse的插件，用过Eclipse的开发者使用HBuilder会非常顺手。形成HBuilderX开发前端内容，Eclipse/Idea开发后端内容的格局。

特点：快，是HBuilder的最大优势，通过完整的语法提示和代码块模板等，大幅提升HTML、js、css的开发效率。

三、Web概述

四、静态页面HTML

4.1概述

HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者Tim Berners-Lee和同事Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。

HTML历史上有如下版本：

1、HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布

2、HTML 2.0：1995年11月作为RFC 1866发布

3、HTML 3.2：1997年1月14日，W3C推荐标准

4、HTML 4.0：1997年12月18日，W3C推荐标准

5、HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准

6、HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

4.2结构

1、<html>文档声明，用来声明HTML文档所遵循的HTML规范。

2、<head></head>头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。

3、<body></body>体部分，用来存放网页要显示的数据。

4、<title></title>声明网页标题

5、<meta charset="utf-8"/>用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

4.3语法

1、HTML标签

HTML是一门标记语言，标签分为开始标签和结束标签，如<a></a>。

如果开始和结束中间没有内容，可以合并成一个自闭标签，如<a/> <meta/>。

2、HTML属性

HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。

如：<a href="" target="" name="" id=""></a>

3、HTML注释

格式：

注意：不能交叉嵌套！

4、在网页中做空格和换行

换行：<br/>

空格：在HTML中，多个空格会被当成一个空格来显示。 

4.4常用标签

4.4.1标题标签: 包括:h1~h6

4.4.2列表标签: ol + li有序，ul + li无序。

type定义列表符号,默认是disc (实心小圆点)，circle(空心圆),square(方块)。

4.4.3 图片标签:img(也是自闭标签)

src=" “向网页中引入图片(相对路径/绝对路径)，border:边框，width:宽度，height:高度。

4.4.4超链接标签：href指定要跳转的位置，target指定要打开的方式

<a href="" target="_blank">超链接标签</a>

<aname="_top">锚定功能</a>

<h6>你好java</h6>后面有很多一样的内容。

4.4.5Input标签

<input type="text" />普通文本框

<input type="password" />密码

<input type="radio"/>男单选框

<input type="number" />数字值

<input type="week" />日历

<input type="checkbox" />杨幂复选框

4.4.6table表格标签：向网页中插入表格

tr表格里的行，th 自动加粗，td表格里的列，border:表格的边框。

cellspacing:单元格的间距，bgcolor:背景颜色，width:宽度，align:位置。

colspan是列合并，rowspan是行合并。

<tr> <th>总页面流量</th> </tr>

<tdcolspan="2">11</td>

<tdrowspan="2">23</td>

</table>

4.4.7form表单标签

在table表格标签外套一个form标签就可以。

get方式提交的数据都在地址栏里不安全显示数据

http://127.0.0.1:8848/cgbtest/3.html?user=&pwd=？

post提交安全不显示数据：<form method="post">

<!DOCTYPE html><html><head><meta charset="utf-8"><title>表单标签</title></head><body><form method="get" action="#"><table border="1px" cellspacing="0px" width="500px" bgcolor="gainsboro"><tr><th colspan="2">注册表单</th></tr><tr><td>用户名：</td><td><input type="text" name="user"/></td></tr><tr><td>密码：</td><td><input type="password" name="pwd"/> </td></tr><tr><td>确认密码：</td><td><input type="password" name="repwd" /> </td></tr><tr><td>昵称：</td><td><input type="text" name="nick" /></td></tr><tr><td>邮箱：</td><td><input type="email" name="mail" /> </td></tr><tr><td>性别：</td><td><input type="radio" name="sex" value="1"/> 男<input type="radio" name="sex" value="0" /> 女</td></tr><tr><td>爱好：</td><td><input type="checkbox" name="lanqiu" value="lq" />篮球<input type="checkbox" name="zuqiu" value="zq" />足球<input type="checkbox" name="maoqiu" value="ymq" />羽毛球</td></tr><tr><td>城市：</td><td><select name="city"><option value="bj">北京</option><option value="cx">朝鲜</option><option value="xa">西安</option></select></td></tr><tr><td>头像：</td><td><input type="file" name="tou" /> </td></tr><tr><td>验证码：</td><td><input type="text" /> <img src="images/a.png" /><input type="button" value="点我换一张" /></td></tr><tr><td>自我描述：</td><td><textarea>请在这儿输入....</textarea></td></tr><tr><td colspan="2" align="center"> <input type="submit" value="提交"/><input type="reset" value="重置"/></td></tr></table></form></body></html>

4.4.8其他标签

<div>大家好</div>块元素，自动换行

<p> Nice</p>段落(自动在前后加空行)

<span> hello</span>内联元素，多个一行，不会自动换行

4.4.9HTML5播放视频

加载mp3音频

注意::浏览器默认规定视频音频不会自动播放，因为自动播放会占用流量

</audio>

加载mp4视频

注意::不能按网站方式访问,无法打开视频,直接按本地文件打开方式可以正常播放

</video>

五、CSS技术

5.1概述

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

5.2css的用法

<trstyle="text-align:center;">

css方式2 实现css与HTML代码的分离，提高css代码的复用性

5.3测试

<!DOCTYPE html><html><head><meta charset="utf-8"><title>css入门</title><style>body{/* 把body里的所有元素居中 */text-align: center; /* 文字居中 */background-color: bisque; /* 背景色 */font-size: 20px; /* 字号 */}</style></head><body><div align="center">hello css</div> <p style="text-align: center;">hello css</p><span> 你好 </span> </body></html>

5.4选择器

5.4.1标签名选择器

span{color:red;} /*选中网页中所有的span,设置字体颜色是红色*/

5.4.2class类选择器

--给指定元素加class属性

--通过.获取class属性的位置

.hi{ color:red; } /* 选中网页中所有class=hi的元素,修饰样式*/

5.4.3id选择器

--给指定元素加id属性,并且要保证id的值是唯一的

--通过#获取id属性的位置

#hello{ color:red; } /*选中网页中所有id=hello的元素*/

<!DOCTYPE html><html><head><meta charset="utf-8"><title>css选择器</title><style> body{/* 用来统一网页的风格 */width: 300px; /* 设置网页的宽度*/font-size: 10px; /* 统一字号 */color: black;/* 统一字的颜色 *//* background-image: url("a.png"); 背景图片 */}/* 语法:选择器{样式1;样式2;样式3} *//* 第一种选择器::: 标签名选择器 */div{color: red; /*红色的字,覆盖掉了body原来的效果*/}/* 第二种选择器::: 类选择器(给元素加class属性+通过.获取class的值) */.me{/* 获取网页中所有class=me的元素 */font-size: 20px; /* 字号加大 */text-indent: 15px;/* 首行缩进 */}/* 第三种选择器:::id选择器(给元素加id属性+通过#获取id的值) */#please{text-align: center;/* 居中 */}/* 第四种选择器:::分组选择器(统一给多个选择器的元素设置) */.me,#please{border: 2px dashed red;/* 设置边框 2px宽度虚线线的颜色*/border-radius: 5px;/* 边框的圆角 */}/* 第五种选择器:::属性选择器 */input[type='text']{ /* 按照属性的值过滤input*/background-color: aqua;/* 设置背景色 */}</style></head><body><input type="text" /><input type="password" /><input type="week" /><input type="text" /><div style="color: red;">顾客联</div> <div class="me">请您留意取餐账单号</div><div id="please">自取顾客联</div><div class="me">永和大王（北三环西路店）</div><div>010-62112313</div><div id="please">--结账单--</div><div>账单号：P000009</div><div>账单类型：食堂</div><div>人数：1</div><div>收银员：张静</div><div>开单时间：-04-17 07:24:11</div><div>结账时间：-04-17 07:24:22</div><hr /><table><tr><td>数量</td><td>品项</td><td>金额</td></tr><tr><td>1</td><td>油条豆浆套餐<br />1 X --非矾油条<br />1 X --现磨豆浆</td><td>7.0</td> </tr></table></body></html>

5.5盒子模型

5.5.1概述

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。

5.5.2语法

margin:外边距,盒子和盒子之间的距离

--margin:10px 上下左右都是10

--margin-left:10px 左是10

--margin-right:10px 右是10

--margin-top:10px 上是10

--margin-bottom:10px 下是10

border:盒子的边框 -- border:2px solid red

padding:内边距,盒子里的内容和盒子边框的距离

--padding:10px 上下左右都是10

--padding-top:10px 上是10

--padding-bottom:10px 下是10

--padding-left:10px 左是10

--padding-right:10px 右是10

width/height:盒子里的内容的宽度和高度

在HTML中,引入外部的css文件 rel指定文件类型 href指定文件路径。

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

<!DOCTYPE html><html><head><meta charset="utf-8"><title>永和大王小票</title><link rel="stylesheet" href="1.css" /><style>/* 统一风格 */body{/* 标签名选择器 */font-size: 10px;/* 统一字号 */width: 300px;/* 宽度 */}.hello{/* 选中网页中,所有class=hello的元素,给指定元素字号加大 */font-size: 20px; /* 覆盖了body的设置*/margin-top: 10px;/* 上边距,设置盒子间的外边距 */}/* 选中网页中,所有id=hi的元素,设置居中效果 */#hi{/* text-align: center; 文字居中 */padding-left: 66px;/* 设置内边距 */}/* 设置文字首行缩进,上边距 */.note{text-indent: 20px;/* 首行缩进 */padding-top: 20px;/* 上边距,内边距,内容和边框的距离 */}</style></head><body><div>顾客联</div><div class="hello">请您留意取餐账单号</div><div id="hi">自取顾客联</div><div>永和大王（北三环西路店）</div><div>010-62112313</div><div id="hi">--结账单--</div><div class="hello">账单号：P000009</div><div>账单类型：食堂</div><div>人数：1</div><div>收银员：张静</div><div>开单时间：-04-17 07:24:11</div><div>结账时间：-04-17 07:24:22</div><hr /><table><tr><td>数量</td><td width="105px">品项</td><td>金额</td></tr><tr><td>1</td><td>油条豆浆套餐<br />1 X --非矾油条<br />1 X --现磨豆浆</td><td>7.0</td> </tr></table><hr /><table><tr><td>支付宝花呗一元早餐    1</td><td>-3.0</td></tr><tr><td>合计</td><td>4.0</td></tr> <tr><td>支付宝</td><td>1.0</td></tr> <tr><td>支付宝补贴</td><td>3.0</td></tr></table><hr /><div class="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div></body></html>

<!DOCTYPE html><html><head><meta charset="utf-8"><title>用户注册</title><link rel="stylesheet" href="zhuce.css"/></head><body><form method="get" action="#"> <table><h2 style="padding-left: 130px;font-size:30px;">用户注册</h2><tr><td><input type="text" placeholder="用户名" class="a" name="user"/></td></tr><tr><td class="xiao">支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td></tr><tr><td><input type="password" placeholder="设置密码" class="a" /></td></tr><tr><td class="xiao">建议使用数字、字母和符号两种以上的组合，6-20个字符</td></tr><tr><td><input type="password" placeholder="确认密码" class="a" /></td></tr><tr><td class="xiao">两次密码输入不一致</td></tr><tr><td><input type="password" placeholder="验证手机" class="a"/>或<a href="#"> 验证邮箱</a></td></tr><tr><td id="note">我已阅读并同意 <a href="#">《京淘用户注册协议》</a></td></tr><tr><td><input id="btn" type="submit" value="立即注册" /></td></tr></table></body></html>##################zhuce.css的代码#######################/* 语法:选择器{样式1;样式2;样式3;} *//* 统一网页风格 */body{font-family: "宋体";/* 统一字体 */font-size: 15px;/* 统一字号 */width: 500px;/* 统一宽度 */padding-left: 100px;/* 设置左边距 */}/*修饰所有input的样式 */.a{height: 20px;/* 高度 */width: 300px;/* 宽度 */padding: 15px;/* 调整内容和边框的距离,内边距 */font-size:20px ;/* 字号变大 */margin: 10px;/* 调整盒子间的距离,外边距 */}/* 修饰所有的提示信息 */.xiao{font-size: 8px;/* 字体变小 */color: grey;/* 字的颜色 */padding-left: 40px;/* 左边距 */}/* 修饰同意 */#note{height: 60px;/* 高度 */text-indent: 60px;/* 首行缩进 */font-size: 17px;/* 字号变大 */}/* 修饰立即注册按钮 */#btn{background-color: #E64346;/* 背景色 */font-size: 25px;/* 字号变大 */color: white;/* 字的颜色 */width: 360px;/* 设置宽度 */height: 50px;/* 设置高度 */border: #E64346;/* 设置边框 */}

5.6静态网页和动态网页

5.6.1静态网页

这时javascript就派上用场了。它能实现浏览器用户和后台服务器进行交互。注册、登录、添加商品到购物车、下订单对它而言都是小菜一碟。有了javascript的加入，实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不老少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。

简而言之，静态网站只能看，不同浏览者看到内容一致不能变化；动态网站可以读写数据，内容根据不同浏览者展示不同的信息。

5.6.2网页如何和后端交互

用户访问页面，页面触发事件创建XHR对象，进行ajax请求，请求访问服务器端，请求被web中间件拦截并进行处理，由控制层框架springmvc中的controller进行接收，controller请求业务层spring框架的service服务，service请求持久层mybatis框架的mapper映射，mapper访问数据库。操作完数据库，返回结果，mybatis封装成java对象传回service，service把java对象传回controller，controller把java对象又转换为json字符串，然后传回浏览器，浏览器传回给调用者XHR，XHR调用回调方法callback，callback进行json字符串的解析，从中拿到要展现的数据，通过javascript处理，最终回显到页面上。

avascript，它实现了用户的请求和响应，实现了数据的动态展现，使早期静态的网站走向了动态的网站。

六、JS(JavaScript)

6.1概述

JavaScript是web前端开发者必学的三种语言之一：

1、HTML定义网页的内容H5

2、CSS规定网页的布局CSS3

3、JavaScript实现网站的交互ES6

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它们根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。

JavaScript遵循ECMA国际组织颁布的ECMAScript标准。截至，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3标准。6月17日，ECMA国际组织发布了ECMAScript的第六版，简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。

微软出了符合规范类似javascript的称为js，但一般开发者忽略它们的差异，全称就习惯叫javascript，简称就习惯叫js。

全称JavaScript，是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。

JS是一门基于对象和事件驱动的脚本语言，通常用来提高网页与用户的交互性。

6.2名词解释

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）

脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

6.3特点和优势

特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.

优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性：只要有浏览器的地方都能执行JS

<!DOCTYPE html><html><head><title>hello</title><meta charset="utf-8"/><script>/* JS代码 */function fn(){alert("111");}function method(){alert(100);alert(1.5+2.5);alert("hello");alert('hello');alert(true);alert(null);var i = 10;alert(i);x = 1.1 ;alert(x); //小数的1.1 x = "jack" ;alert(x); //字符串的jackx = false ;alert(x); //布尔的false}</script></head><body><a href="#" onclick="fn();">鼠标点击事件...</a><a href="#" onclick="method();">点击触发js</a></body> </html>

6.4JS语法

基础语法

<!DOCTYPE html><html><head><meta charset="utf-8"><title>js基础语法</title><script src="1.js"></script></head><body><a onclick="alert(123);">点击</a></body></html>

通用写法

var a = 10;a = 1.4;a = true;a = "jack";alert(a);var b = 1.9;var c = 2.1;alert(b+c);alert(b-c);alert(b*c);alert(b/c);var d =1;alert(d++);//符号在后,先使用再变化alert(++d);//符号在前,先变化再使用 var e = 2;alert(++e+d+e+++e);//++优先级高于+ //3,复合赋值运算符+= -+ *= /=var f = 10;f = f + 5 ; //f += 5; //简写alert(f);//4,比较运算符 == != === !==alert(1==1);alert(1=="1");//比较值alert(1==="1");//比较值和类型alert(1!=1);//5,三元运算符 ? :// alert(1==0 ? 10 : 5);//求两个数里的大值//prompt()默认收到的数据都是string类型,把字符串转整数的函数----parseInt()var g = parseInt( prompt("请输入a的值:") ); //接受浏览器输入的数据var h = parseInt( prompt("请输入b的值:") );alert( g > h ? g : h );//求三个数里的大值var i = parseInt( prompt("请输入c的值:") ) ;var max = g > h ? (g > i ? g : i ) : ( h > i ? h : i );alert("三个数里的大值: "+max);var i = 3;console.log(typeof i);//numberi=true;console.log(typeof i);//booleani="hello";console.log(typeof i);//stringconsole.log(typeof 123+"abc");//numberabcconsole.log(typeof (123+"abc"));//string

6.4.1注释

单行注释：//注释内容多行注释：/*注释内容*/

6.4.2基本数据类型

包括:number/string/boolean/null/undefined

6.4.3复杂数据类型

函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象.....）

6.4.4JS的变量

js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。

(1)在JS中是通过var关键字来声明一个变量 var a=1; alert(a);

(2)在JS中声明的变量是不区分类型的，可以指向任意的数据类型。

6.4.5JS的运算符

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

算术运算符: +，-，*，/，%，++，--

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ==，!=，===，!==，>，>=，<，<=

位运算符: &，|

逻辑运算符: &&，||

前置逻辑运算符: ! (not)

三元运算符: ? :

6.5JS语句

JS中的语句和Java中的语句用法也大致相同

6.5.1if..else语句

6.5.2switch..case语句

6.5.3for循环语句

<!DOCTYPE html><html><head><meta charset="utf-8"><title>js嵌套语句</title><script>var i = 3;if(i<2){alert(i);}else{alert("炸雷");}var a = parseInt( prompt("请输入用户成绩:") );if(a>=80&&a<=100){alert("优秀");} else if(a>=60&&a<80){alert("中等");} else if (a>=0&&a<60){alert("不及格");}else{alert("输入值错误");}var a = parseInt( prompt("请输入今天日期:") );switch(a){case 1:alert("今天是星期一");break;case 2:alert("今天是星期二");break;case 3:alert("今天是星期三");break;case 4:alert("今天是星期四");break;case 5:alert("今天是星期五");break;case 6:alert("今天是星期六");break;case 7:alert("今天是星期天");break;}for(var i=1;i<=10;i++){if(i%2==0){alert(i);console.log(i);//在浏览器按f12的console里}}</script></head><body></body></html>

注意：JS中的语句，判断条件可以不是boolean类型，因为JS中会自动进行数据类型的转换。

6.6JS数组

JS数组用于在单个的变量中存储多个值(其实就是一个容器)。

JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等

6.6.1JS数组的声明方式

--for...in遍历: for(var i in a){ alert(a[i]); }相当于java里的foreach

方式一:通过new Array构造函数声明数组

var arr1 = new Array();//声明一个空数组

var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组

方式二:通过数组直接量声明数组

var arr4 = [];//声明一个空数组

arr4 = ["abc", "hello", true];//声明一个具有初始值的数组

alert(arr4);

6.6.2数组需要注意的细节

(1)JS数组中可以存放任意的数据类型

(2)JS中的数组长度可以被改变

var arr1 = [];//声明一个空数组

console.log( arr1.length ); //此时数组长度为0

arr1.length = 10;

console.log( arr1.length ); //此时数组长度为10

arr1[99] = "abc";

console.log( arr1.length ); //此时数组长度为100

arr1.length = 0;

console.log( arr1.length ); //此时数组长度为0

6.6.3数组的常见操作

length属性--获取数组的长度，还可以改变数组的长度

var a = [1,2,3];

alert(a.length);

var arr = [123, "abc", false, new Object() ]

//for循环实现遍历数组

for( var i=0; i< arr.length; i++ ){

console.log( arr[i] );

}

<!DOCTYPE html><html><head><meta charset="utf-8"><title>js数组</title></head><script>var a = [];a = [1,2,3,4,5];var b = new Array();b = new Array("tony",10,1.1,true,null,undefined);console.log(a);console.log(b);for(var i=0;i<a.length;i++){console.log(a[i]);}</script><body></body></html>

6.7JS函数

函数就是一个具有功能的代码块,可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词function

6.7.1方式一：通过function关键字声明函数

声明：function函数名称([参数列表]){ 函数体 }

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

案例：function fn1(name,age){alert(name+age);}

fn1(“wanght”,18);

6.7.2方式二：通过函数直接量声明函数

声明：var函数名称= function [函数名]([参数列表]){ 函数体 }

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

案例：var fn2 = function fn1(name,age){alert(name+age);}

fn2("zhangsz",18);

fn2("王海涛");参数个数不匹配，王海涛undefined

注意:在JS中调用函数时,传递的参数个数如果与声明的参数个数不相同,也不会报错。

但是最好按声明的个数来传递,因为个数不符,可能会引发一些问题！！！

<!DOCTYPE html><html><head><meta charset="utf-8"><title>js函数</title><script>function a(){console.log(123);}a();var b = function(){console.log(12233);}b();function e(x,y){return x+y;}var f = e(1,2);console.log(f);</script></head><body></body></html>

6.8JS对象

利用function关键字声明对象，用new关键字创建对象。

6.8.1内置对象

Window对象--代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代

window.onload()在浏览器加载完整个html后立即执行!

window.alert("text")提示信息会话框

window.confirm("text")确认会话框

window.prompt("text")键盘输入会话框

window.event事件对象

window.document文档对象

Document对象--代表整个HTML文档，可用来访问页面中的所有元素

document.write()动态向页面写入内容

document.getElementById(id)获得指定id值的元素

document.getElementsByName(name)获得指定Name值的元素

学会简单使用，后期被jQuery封装，在后期被Vue框架封装

6.8.2自定义对象

(1)方式一：

1)声明对象：function Person(){}

2)创建对象：var p1 = new Person();

3)设置属性：p1.name = "张飞";p1.age = 18;

4)设置方法：p1.run =function(){ alert(this.name+" : "+this.age); }

5)访问p1对象：

/*自定义对象*/

function Person(){ } /*定义对象*/

var p1 = new Person(); /*创建对象*/

p1.name="张三";

p1.age=20;

console.log(p1);

p1.say = function(){ /*定义函数*/

console.log("haha"); }

p1.say(); /*函数调用*/

上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。

(2)方式二:

var p2 = {

"pname":"李四",

"page":100,

"psay":function(){

/* this使用p2里定义的*/

console.log(this.pname+this.page); } }

console.log(p2);

p2.psay();/*函数调用*/

6.9DOM树的作用

6.9.1概述

本质上就是把一整个HTML文件,当做一个Document对象解析.

使用js提供的Document对象的各种API，解析HTML文件中的每个元素节点

6.9.2Document对象

--获取对象: window.document

--调用方法:

getElementById("元素的id的属性的值")--返回1个元素

getElementsByName("元素的name属性的值")--返回多个元素(用数组)

getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)

getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)

title--返回网页的标题

innerText--在网页内部插入text数据

innerHTML--在网页内部插入html数据

<!DOCTYPE html><html><head><meta charset="utf-8"><title>dom运用</title><script>function a(){//document提供的属性，innerText获取文本数据，alert(document.getElementsByName('a1')[0].innerText);}function a1(){alert(document.getElementById("div").innerHTML);}function a2(){var a = document.getElementsByClassName("p1");//a[0].innerText = "妙啊...";a[0].innerHTML = "<h1>退退退..</h1>"}function a3(){var a = document.getElementsByTagName("p");alert(a[0].innerText);alert(a[1].innerText);}</script></head><body><span onclick="a();">我是span</span><div id="div" onclick="a1();">我是div</div><a href="#" name="a1">点我</a><p class="p1" onclick="a2();">我是p1</p><p onclick="a3();">我是p2</p><button onclick="alert(1);">单击按钮</button><button ondblclick="alert(2);">双击按钮</button><button onmouseenter="alert(3);">鼠标进入按钮</button><button onmouseleave="alert(4);">鼠标离开按钮</button></body></html>

6.10异步请求局部刷新

6.10.1架构

6.10.2技术栈

1、JavaScript形成交互

2、 jQuery封装JavaScript，代码更加简洁高效

3、ajax异步请求

4、 json数据传输

5、Web中间件(tomcat)处理请求和响应

6、mysql数据库存取数据

6.10.3执行过程

用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。

七、JQuery

7.1概述

封装了大量的js,优化了DOM解析HTML文档的代码

本质上就是一个.js文件,写好了很多函数/属性

jQuery可以快速的定位网页中的元素位置,基于Css选择器。

jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码

轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架

jQuery的核心思想：“写的更少，但做的更多”

jQuery库包含以下功能：

1、HTML元素选取

2、HTML元素操作

3、CSS操作

4、HTML事件函数

5、JavaScript特效和动画

6、HTML DOM遍历和修改

7、AJAX

7.2JQuery的优势

(1)可以极大的简化JS代码，例如：

JS获取元素：var d = document.getElementById("demo1");

jQuery获取元素：$("#demo1")

jQuery删除所有div元素：$("div").remove();

(2)可以像CSS选择器一样非常方便的获取元素

$("div") --获取所有的div元素

$(".s1") --获取所有class值为s1的元素

$("#div1") --获取id值为div1的元素

$("div span") --获取div内部的所有span元素

(3)可以通过修改css样式控制页面的效果

$("div").css("background", "red");

$("div").css({

"background" : "blue",

"border" : "2px solid red",

"font-size" : "30px"

});

(4)可以兼容常用的浏览器(谷歌/火狐/苹果/欧朋...)

7.2.1JQuery简介

JavaScript获取元素的4种方式：

var ele = document.getElementsByTagName("p");//标签

var ele = document.getElementsByName("username");//名称

var ele = document.getElementsByClassName("info");//样式

var ele = document.getElementById("username");//id属性

jQuery选择器获取元素的4种方式：

var ele = $("p");//访问标签

var ele = $('input[name="username"]');//访问名称

var ele = $('input[type="text"]');//访问text框

var ele = $(':text');//访问text框

var ele = $(".info");//访问css的class样式

var ele = $("#username");//访问id属性

可以看出jQuery本质其实就是简化了js的写法，用$替代了document.getXxx，代码简洁，清爽。

7.3使用步骤

--在网页上引入jQuery的文件

--使用jQuery语法写高效简洁的jQuery代码

7.4语法

基础语法是：$(selector(选择器)).action()

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery语法测试</title><script src="jquery-1.8.3.min.js"></script>//问题的解决方式2: 整个文档都加载完再用 -- 用到jQuery的文档就绪事件<script>/* 第二步:JQuery的语法: $(选择器).事件 *///jQuery的文档就绪事件// $(document).ready( function(){$( function(){ //文档就绪的简化写法var a = document.getElementById("h");alert(a.innerText);} );</script></head><body><h1 id="h">我是h1</h1></body></html>

7.4.1总结

什么时候该使用文档就绪事件函数？

如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！

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

jQuery提供的文档就绪事件函数（简写形式）：

//jQuery提供的文档就绪事件函数：

$(function(){

//在浏览器加载完整个html后立即执行 });

</script>

其完整写法为：

//jQuery提供的文档就绪事件函数：

$(document).ready(function(){

//在浏览器加载完整个html后立即执行 });

</script>

7.5jQuery的选择器

--id选择器: 按照id获取网页中的元素

--class选择器: 按照class获取网页中的元素

--标签名选择器/属性选择器: 按照标签名获取网页中的元素

7.6jQuery的事件

--单击事件(常用):click

--双击事件:dbclick

--鼠标进去:mouseenter

--鼠标移出:mouseleave

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jquery事件</title><script src="jquery-1.8.3.min.js"></script><script>//jQuery语法: $(选择器).事件( function(){ .... })// $(document).ready( function .... );//写全的了文档就绪$(function(){ //简写了文档就绪//#表示id选择器,选中网页中的元素,动态//的给 id="p1"绑定一个单击事件click$("#p1").click( function(){alert(1);});//#表示id选择器,选中网页中的元素,动态//的给 id="div1"绑定一个双击事件dblclick$("#div1").dblclick(function(){alert(2);});//.表示class选择器,选中网页中的元素,动态//的给 class="a1"绑定一个鼠标进入mouseenter$(".a1").mouseenter(function(){alert(3);});//.表示class选择器,选中网页中的元素,动态//的给 class="a2"绑定一个鼠标划走mouseleave$(".a2").mouseleave(function(){alert(4);});//元素选择器,选中网页中的a元素,动态//的把a绑定一个鼠标进入事件mouseleave$("a").mouseenter(function(){$("a").hide();//隐藏指定元素})});</script></head><body><a href="#" class="a2">鼠标划走弹4</a><p id="p1">单击我弹1</p><div id="div1">双击我弹2</div><a href="#" class="a1">鼠标进入弹3</a></body></html>

7.7JQuery练习

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jquery练习</title><script src="jquery-1.8.3.min.js"></script><script >//文档就绪$(function(){//点击p,隐藏div$("#p1").click(function(){$("#div1").hide();//hide()隐藏 })//点击a2,获取a1的内容,再改内容$(".a2").click(function(){alert( $(".a1").text() );//获取指定元素的内容//设置指定元素的内容$(".a1").text("我变了...");})//点击a,隐藏p$("a").click(function(){$("#p1").hide();})});</script></head><body><p id="p1">单击我弹1</p><div id="div1">双击我弹2</div><a href="#" class="a2">鼠标划走弹4</a><a href="#" class="a1">鼠标进入弹3</a></body></html>

八、Json

8.1概述

ajax往往要完整应用还会配合一个技术：JSON，那什么是JSON呢？

JSON(JavaScript Object Notation，JS对象简谱)起名不咋地，非常拗口，我们就记住它是一种轻量级的数据交换格式即可。它基于ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）

是一种轻量级的技术。用来解决浏览器和服务器之间的数据传输。格式简单,体量小

是存储和交换文本信息的语法。类似XML。比XML更小，更快，更易解析。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>json语法</title><script>//json用来在浏览器和服务器之间做数据的传输,因为语法简洁,轻量级的function d1(){//定义json字符串:语法--- "k" : "v"var jsonstr = ' "name" : "王林" ' ; //简单的json串jsonstr = ' { "name" : "苏铭" , "age" : "20" } ' ; //json对象jsonstr = [ //json数组{ "name" : "孟浩" , "age" : "20" },{ "name" : "石昊" , "age" : "10" }, { "name" : "秦牧" , "age" : "30" }] ; //给div处显示json字符串的数据var ele = document.getElementById("d1");ele.innerHTML=jsonstr ;//把数组里[1]的对象,里的age属性值10获取到,,,,再赋值ele.innerHTML=jsonstr[1].age ;}</script></head><body><div id="d1" onclick="d1();">点我</div></body></html>

8.2语法

"k":"v"

{"k":"v","k":"v","k":"v"}

[{"k":"v","k":"v","k":"v"} ,{"k":"v","k":"v","k":"v"} ]

8.3转换工具

使用js的内置对象JSON,进行两种 json数据的转换

把json字符串转成 js对象 -- JSON.parse("json字符串")

把js对象转成 json字符串 -- JSON.stringify(js对象)

<!DOCTYPE html><html><head><meta charset="utf-8"><title>JSON对象的使用</title><script src="jquery-1.8.3.min.js"></script><script>function d1(){//定义json字符串var text = ' { "name":"熊大" , "age":"20" } ' ;//1,,,把串转成js对象 -- 使用js的内置对象JSONvar jsobj = JSON.parse(text);//console输出console.log(text);//json字符串console.log(jsobj);//js对象 -- 方便的获取对象身上的属性值.函数console.log(text.name);//undefinedconsole.log(jsobj.age); //"熊大" //2,,,把js对象转成json串 -- 使用js的内置对象JSONvar jsonstr = JSON.stringify(jsobj);console.log(jsonstr);//json字符串console.log(jsonstr.length);//获取 json字符串的长度}</script></head><body><div id="d1" onclick="d1();">我是div1</div></body></html>

九、ajax

9.1概述

ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式、快速动态网页应用的技术。早期只有同步的方式，多个请求，只能顺序执行，只能等待执行。有了ajax异步技术，可以无需等待上一个请求执行完成，就可以直接发起请求。服务端返回后，ajax通过回调技术通知客户端程序，把响应的结果传递给用户事先写好的回调函数。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页进行局部更新，提升网页的效率，用户无需等待页面的刷新，嗖的一下内容就变化了。改变原有整个页面刷新，造成页面晃眼的现象。所以这项技术一出现，就得到业界的推崇。

关键字：异步、回调、局部刷新。

ajax即Asynchronous Javascript And XML

好处:异步访问(加快响应速度,不必等待)

局部刷新(不必刷新整个网页,只是局部刷新)

9.2语法

七个参数：

$.ajax({

type:

url:

contentType:

data:

dataType:

success: function(data){

error: function(data){

}

})

9.3ajax练习

<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 ajax</title><script src="jquery-1.8.3.min.js"></script><script>$(function(){//文档就绪事件/* 使用jQuery提供的Ajax技术,需要指定一些参数 */$.ajax({//发起ajax的请求--准备参数//访问/prices/mgets?skuIds=J_100003717483type: "POST" , //请求方式url: "/prices/mgets" , //请求地址contentType: "application/json;charset=utf-8", //请求的数据的类型data: //请求时带的参数{"skuIds": "J_100003717483"},dataType: "json" , //期望服务器返回来的数据的类型//返回数据:[{"p":"-1.00","op":"2499.00","cbf":"0","id":"J_100003717483","m":"10000.00"}]success: function(data){ //请求成功,会返回数据封装在data里// document.getElementById("d1").innerHTML=data[0].id; //js$("#d1").text(data[0].id); //jquery document.getElementById("d2").innerHTML=data[0].op;document.getElementById("d3").innerHTML=data[0].p;},error: function(data){ //请求失败,给失败提示alert(" 请求错误! ");}})} );</script></head><body><div id="d1"></div><div id="d2"></div><div id="d3"></div><img src="-06-30%20(1).png" width="200px" height="200px" /><br /><img src="-07-06.png" width="200px" height="200px"/></body></html>

十、拓展

1、http协议

--作用：用来处理客户端要给服务器发送的数据的格式

用来处理服务器要给客户端响应的数据的格式

--发送数据的方式:get/post....

--请求Request:从客户端到服务器的连接过程

--请求头确定访问哪个服务器的哪个程序

--请求方式:是用了get还是post,如果是是get方式地址栏中就可以看到数据

如果是post方式,数据安全,浏览器无法看到数据

--HTTP状态码:一般是3位数,有不同意义.

常见的有:200成功,404是客户端访问了不存在的资源,5XX是服务器代码的问题

--响应Response:从服务器到客户端的连接过程

--状态行:要遵循的协议和版本号 HTTP/1.1 404 not found

--响应报头:统计响应数据的大小

通知浏览器用什么编码打开

要展示的数据类型

--HTTP状态码:一般是3位数,有不同意义.

常见的有:200成功,404是客户端访问了不存在的资源,5XX是服务器代码的问题

2、get提交和post提交的区别

--get提交:不安全,数据都会在地址栏做拼接,数据不能太长

http://127.0.0.1/test.html ? name=123 & age=12 & addr=abc

--post提交:安全,不在地址栏中展示,只能编写java代码解析数据

3、json和js对象的区别

json字符串: { "id":"100","name":"tony","salary":"30000" }

js对象：{ "id":100,"name":"tony","salary":30000 }

可以看出js对象中value值如果是整数，小数，无需加双引号

1、含义不同，json是一种数据格式，js表示类的实例

2、传输：json用于跨平台、跨网络传输，速度快；js不能传输

3、展现：json键值对方式，值是字符串不能是对象方法函数；js值不一定加双引号，值可以是对象、函数、字符串等

4、转换：JSON.parse(jsonStr) JSON已经作为浏览器内置对象，eval(json)；JSON.stringify(obj)

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。

16.JAVA之前端 HTML CSS(选择器 盒子模型) JS JQuery Json ajax

一、Web前端技术栈

二、HBuilderX

三、Web概述

四、静态页面HTML

4.1概述

4.2结构

4.3语法

4.4常用标签

4.4.1标题标签: 包括:h1~h6

4.4.2列表标签: ol + li有序，ul + li无序。

4.4.3 图片标签:img(也是自闭标签)

4.4.4超链接标签：href指定要跳转的位置，target指定要打开的方式

4.4.5Input标签

4.4.6table表格标签：向网页中插入表格

4.4.7form表单标签

4.4.8其他标签

4.4.9HTML5播放视频

五、CSS技术

5.1概述

5.2css的用法

5.3测试

5.4选择器

5.4.1标签名选择器

5.4.2class类选择器

5.4.3id选择器

5.5盒子模型

5.5.1概述

5.5.2语法

5.6静态网页和动态网页

5.6.1静态网页

5.6.2网页如何和后端交互

六、JS(JavaScript)

6.1概述

6.2名词解释

6.3特点和优势

6.4JS语法

6.4.1注释

6.4.2基本数据类型

6.4.3复杂数据类型

6.4.4JS的变量

6.4.5JS的运算符

6.5JS语句

6.5.1if..else语句

6.5.2switch..case语句

6.5.3for循环语句

6.6JS数组

6.6.1JS数组的声明方式

6.6.2数组需要注意的细节

6.6.3数组的常见操作

6.7JS函数

6.7.1方式一：通过function关键字声明函数

6.7.2方式二：通过函数直接量声明函数

6.8JS对象

6.8.1内置对象

6.8.2自定义对象

6.9DOM树的作用

6.9.1概述

6.9.2Document对象

6.10异步请求局部刷新

6.10.1架构

6.10.2技术栈

6.10.3执行过程

七、JQuery

7.1概述

7.2JQuery的优势

7.2.1JQuery简介

7.3使用步骤

7.4语法

7.4.1总结

7.5jQuery的选择器

7.6jQuery的事件

7.7JQuery练习

八、Json

8.1概述

8.2语法

8.3转换工具

九、ajax

9.1概述

9.2语法

16.JAVA之前端 HTML CSS(选择器盒子模型) JS JQuery Json ajax