文档章节

前端知识

pantyyy
 pantyyy
发布于 2017/07/26 13:09
字数 1875
阅读 7
收藏 0

1. javascript的作用?

    HTML:它是整个网站的骨架

    CSS:它是对整个网站骨架的内容进行美化(修饰)

    Javascript:它能够让整个页面具有动态效果

2. javascript的组成部分

    ECMAScript:它是javascript的核心(语法、变量、数据类型、语句、函数……)

    DOM:document object model 整个文档对象

    BOM:浏览器对象

3. 获取元素内容

    获取元素

        document.getElementById(“id名称”);

    获取元素里面的值

        document.getElementById(“id名称”).value;

4.使用JS完成注册表单数据校验

    第一步:确定事件(onsubmit)并为其绑定一个函数

    第二步:书写这个函数(获取用户输入的数据)

    第三步:对输入的数据进行判断(非空)

    第四步:如果输入的内容为空,给出错误提示信息(alert),不让表单提交

    第五步:如果输入的内容合法,让表单提交。

实现:

    Html部分代码:

        为表单绑定一个事件

<form action="#" method="get" onsubmit="return checkForm()">

对需要校验的输入项目定义id

<input type="text" name="user" id="user" />

    Javascript部分代码:

<script type="text/javascript">

function checkForm(){

    /*校验用户名*/

    //alert("aa");

    //获取用户输入的数据

    var uValue =  document.getElementById("user").value;

    //alert(uValue);

    if(uValue==""){

    //给出错误提示信息

    alert("用户名不能为空!");

    return flase;

}

    /*校验邮箱*/

    var Evalue = document.getElementById("email").value;

    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(Evalue)){

    //给出错误提示信息

    alert("邮箱格式不正确!");

    return false;

}

}

</script>

5.Window对象

Window 对象表示浏览器中打开的窗口

弹出框的几个方法:

<script>

    //警告框

    alert("aaa");

    //确认按钮

    confirm("您确认删除吗?");

    //提示输入框

    prompt("请输入价格:");

</script>

6.Location对象

href:该属性可以完成通过JS代码控制页面的跳转。

<html>

<head>

<meta charset="UTF-8">

<title>location对象</title>

<script>

function tiao(){

    window.location.href="http://www.itcast.cn";

}

</script>

</head>

<body>

    <a href="#" onclick="tiao()">跳转到首页</a>

</body>

</html>

7. javascript的引入方式

    1. 内部引入方式

        直接将javascript代码写到<script type=”text/javascript”></script>

    2.外部引入方式

        需要创建一个.js文件,在里面书写javascript代码,然后在html文件中通过script标签的src属性引入该外部的js文件

8. 列举BOM 中常用的几个全局变量和全局方法?

    全局对象: window

    全局变量: document location history navigator screen

    全局方法:alert() confirm() prompt() open() close()

9.什么是jquery

    Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

    怎么使用jquery

        Jquery它是一个库(框架),要想使用它,必须先引入

        jquery-1.8.3.js:一般用于学习阶段。

        jquery-1.8.3.min.js:用于项目使用阶段

    Jquery的简单入门

    所有的jquery代码写在页面加载函数

    $(function(){

        Jquery代码

    });

    获取元素

        JS:document.getElementById();

        JQ:$(“#id”);

10. jquery的选择器

基本选择器:

    id选择器:$("id名称");

    元素选择器:$("元素名称");

    类选择器:$(".类名");

层级选择器

11.使用validate插件

$("#表单名").validate(

    rules:{

        user:{

            校验规则

             如:

            required:true,

            minlength:2

}

},

        messages:{

            校验回显

            如:

            user:{

            required:用户名不能为空

}

}

);

12.什么是同步,什么是异步

    同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态

    异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随 意做其他事情,不会被卡死

13.Ajax的运行原理

    页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到 服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回 给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面功能

    Ajax 的优点:

        1.最大的一点是页面无刷新,给用户的体验非常好。

        2.使用异步方式与服务器通信,不需要打断用户操作,具有更加迅速的响应能力。

        3.ajax 的原则是“按需取数据”,最大程度的减少冗余请求,减少服务器的负荷。

    Ajax 的缺点:

        1.破坏浏览器后退按钮的正常行为在动态更新页面后,用户无法回到前一个页面的状态.

        2.使用JavaScript 作Ajax 的引擎,JavaScript 的兼容性和Debug 本身就让人头大。

14.Json的格式与解析

    json有两种格式:

        1)对象格式:{"key1":obj,"key2":obj,"key3":obj...}

        2)数组/集合格式:[obj,obj,obj...]

    例如:user对象 用json数据格式表示

        {"username":"zhangsan","age":28,"password":"123","addr":"北京"}

    List<Product> 用json数据格式表示

        [{"pid":"10","pname":"小米4C"},{},{}]

注意:对象格式和数组格式可以互相嵌套

注意:json的key是字符串  json的value是Object

    json的解析:

        json是js的原生内容,也就意味着js可以直接取出json对象中的数据

15.Jquery的Ajax技术(重点)

    1)$.get(url, [data], [callback], [type])

    2)$.post(url, [data], [callback], [type])

其中:

    url:代表请求的服务器端地址

    data:代表请求服务器端的数据(可以是key=value形式也可以是json格式

    callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)

    type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换

常用的返回类型:text、json、html等

    3)$.ajax( { option1:value1,option2:value2... } ); ---- 以后在掌握

    常用的option有如下:

    async:是否异步,默认是true代表异步

    data:发送到服务器的参数,建议使用json格式

    dataType:服务器端返回的数据类型,常用text和json

    success:成功响应执行的函数,对应的类型是function类型

    type:请求方式,POST/GET

    url:请求服务器端地址

16. HTTP 请求的GET 与POST 方式的区别

    1. 携带请求参数的方式

        GET: 通过请求行携带参数, 参数会显示在地址栏

        POST: 通过请求体来携带参数, 参数不会显示在地址栏

    2. 服务器端处理请求的方法

        GET: 会调用Servlet 的doGet()来处理请求

        POST: 会调用Servlet 的doPost()来处理请求

    3. 数据大小与安全性

        GET: 大小有限制(小于2k), 不安全

        POST: 大小没有限制, 安全

17. 说说自动登陆功能的编码实现?

    1. 登陆功能是用Session 实现的,就是向Session 对象中保存当前用户的对象

    2. 自动的功能用Cookie 实现, 就是登陆时将用户的信息保存为持久化Cookie

    3. 下次访问时, 读取请求中如果有用户信息的Cookie 就可以自动登陆

18. 如何防止表单重复提交?

使用Session 技术:

    1. 在regist.jsp 页面中生成一个唯一随机值, 将其保存到Session 中, 同时将其保存为表单的隐藏域的值

    2. 在处理注册的请求时,获取Session 中值,获取请求参数的值,比较两者是否相同, 如果相同说明不是重复提交,请求通过同时删除session 中保存的值,如果不相同则是重复提交, 不能通过.

 

    

    

 

© 著作权归作者所有

下一篇: MyBatis(一)
pantyyy
粉丝 4
博文 21
码字总数 13293
作品 0
私信 提问

暂无文章

用原生js对表格排序

本文转载于:专业的前端网站➸用原生js对表格排序 阿里的模拟笔试题,当时时间有限没写出来,其实是因为自己对原生dom操作不熟悉,这里补一下。 题目的大意是有一个表格,如代码所示 <table>...

前端老手
28分钟前
4
0
IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

HTML5有一些新的表单元素:<datalist>、<keygen>、<output>。不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性,仍然可以显示为常规的表单元素。 1 <datalist>元素 ...

老码农的一亩三分地
30分钟前
4
0
【朝花夕拾】Android自定义View篇之(一)View绘制流程

https://www.cnblogs.com/andy-songwei/p/10955062.html

shzwork
32分钟前
5
0
Qt编写自定义控件70-扁平化flatui

一、前言 对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产...

飞扬青云
41分钟前
3
0
教你玩转Linux—添加批量用户

添加和删除用户对每位Linux系统管理员都是轻而易举的事,比较棘手的是如果要添加几十个、上百个甚至上千个用户时,我们不太可能还使用useradd一个一个地添加,必然要找一种简便的创建大量用户...

Linux就该这么学
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部