一, html 部分
1,XHTML 和 HTML 有什么区别
HTML 是一种基本的 web 网页设计语言, XHTML 是一个基于 XML 的置标语言最主要的不同:
XHTML 元素必须被正确地嵌套.
XHTML 元素必须被关闭.
标签名必须用小写字母.
XHTML 文档必须拥有根元素.
2, 前端页面有哪几层构成, 分别是什么? 作用是什么?
, 结构层 Html(页面结构内容, 骨架) 表示层
- , CSS(网页的样式和外观)
- , js(实现网页的交互, 动画效果)
3, 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
cookie 在浏览器和服务器间来回传递.
sessionStorage 和 localStorage 不会
sessionStorage 和 localStorage 的存储空间更大;
sessionStorage 和 localStorage 有更多丰富易用的接口;
sessionStorage 和 localStorage 各自独立的存储空间;
4,form 表单中 input 标签的 readonly 和 disabled 属性有何区别?
readonly="readonly" 是只读, 不可以修改,
disabled="disabled" 是禁用, 整个文本框是显示灰色状态
form 中 method 是数据传递的方式, action 是与后台数据库提交的
5, 内联标签有哪些? 块级标签有哪些?
6, 内联标签和块级标签有什么区别?
内联标签不可以设置宽高, 不独占一行;
块级标签可以设置宽高, 独占一行.
7, 简述 form 标签的功能和属性?
功能: 表单用于向服务器传输数据, 从而实现用户与 Web 服务器的交互 属性:
1,action: 表单提交到哪. 一般指向服务器端一个程序, 程序接收到表单提交过
来的数据 (即表单元素值) 作相应处理;
2,method: 表单的提交方式 post/get 默认取值就是 get.
8, 图形标签是什么, 它的主要属性有哪些?
<img > 标签 主要属性:
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height: 图片的高 (宽高两个属性只用一个会自动等比缩放.)
9,input 标签都有哪些类型?
type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合 js 使用.)
file 提交文件
10,input 标签都有哪些属性?
name: 表单提交项的键
value: 表单提交项的值. 对于不同的输入类型,
value 属性的用法也不同
checked:radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用 input 都好使
11,src 和 href 的区别?
src 指向外部资源的位置, 用于替换当前元素, 比如 js 脚本, 图片等元素
href 指向网络资源所在的位置, 用于在当前文档和引用资源间确定联系, 加载 css
12, 选择器中 id,class 有什么区别?
在网页中 每个 id 名称只能用一次, class 可以允许重复使用
二, CSS 部分
1,css 的基本语法?
由两个主要的部分构成: 选择器, 以及一条或多条声明
2,css 的引入方式有哪些?
内嵌式 <h1 style="font-size: 10px;color: yellow">我是 h1 战争热诚</h1>
内链式 <style type="text/css"> h2{font-size:30px;color:red;} </style>
外链式 链接式: <link rel="stylesheet" type="text/css" href="./css/index.css">
导入式: <style type="text/css"> @import url('./css/index.css'); </style>
3,css 的选择器有哪些?
, 基本选择器 通配符选择器 标签选择器 id 选择器 类选择器
, 组合选择器 子代选择器 后代选择器 群组选择器 交集选择器 毗邻选择器 兄弟选择器
, 属性选择器
4,css 伪类的作用?
CSS 伪类是用来添加一些选择器的特殊效果.
a:link{ background-color: blue;} 超链接 未被访问时的状态
a:hover{ color: green;} 鼠标悬停时的状态
a:visited{ color: yellow;} 鼠标单击时的状态
a:active{ color:blue;} 鼠标不松手的状态
input:focus{ background-color:red;} 获取焦点时的状态
5, 什么是 css 优先级, 其基本规则是什么?
CSS 优先级, 即是指 CSS 样式在浏览器中被解析的先后顺序.
基本规则: 行内样式> 内部样式表> 外部样式表 ID 选择器> 类选择器> 标签选择器
6,CSS 隐藏元素的几种方法(至少说出三种)
1,Opacity: 元素本身依然占据它自己的位置并对网页的布局起作用. 它也将响应用户交互;
2,Visibility: 与 opacity 唯一不同的是它不会响应任何用户交互. 此外, 元素在读屏软件
中也会被隐藏;
3,Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效. 此外,
读屏软件也不会读到元素的内容. 这种方式产生的效果就像元素完全不存在;
4,Position: 不会影响布局, 能让元素保持可以操作;
5,Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持. 如果要在你的
clip-path 中使用外部的 SVG 文件, 浏览器支持度还要低;
7,CSS 清除浮动的几种方法(至少两种)
1, 给父元素添加 overflow:hidden (推荐使用)
.wrap{ overflow:hidden;}
2.:after 伪元素; (官方推荐)
- .wrap:after{
- content:"";
- clear:both;
- display:block;
- height:0;
- visibility:hidden;
- }
3. 给父盒子设定固定高度; 缺点: 不灵活;
4. 给浮动元素最后一个加一个空的块级元素, 且该元素为不浮动 float:none,
设置 clear:both, 就会撑开盒子.
缺点: 结构冗余
8, 页面导入样式时, 使用 link 和 @import 有什么区别?
- <link rel="stylesheet" type="text/css" href="./css/index.css">
- <style type="text/css"> @import url('./css/index.css'); </style>
1,link 属于 XHTML 标签, 除了加载 CSS 外, 还能用于定义 RSS, 定义 rel 连接属性等作用;
而 @import 是 CSS 提供的, 只能用于加载 CSS;
2, 页面被加载的时, link 会同时被加载, 而 @import 引用的 CSS 会等到页面被加载完再加载;
3,import 是 CSS2.1 提出的, 只在 IE5 以上才能被识别, 而 link 是 XHTML 标签, 无兼容问题;
9, 介绍一下 CSS 的盒子模型?
有两种,
IE 盒子模型和标准 W3C 盒子模型; IE 的 content 部分包含了 border 和 pading;
盒模型: 内容(content), 填充(padding), 边界(margin), 边框(border)
10,display:none 和 visibility:hidden 的区别是什么?
visibility:hidden---- 将元素隐藏, 但是还占着位置
display:none---- 将元素的显示设为无, 不占任何的位置
11, 设置一个 div 的最小宽度为 100 像素, 最大高度为 50 像素
min-width:100px; max-height:50px;
12, 在编写 css 样式的时候, 如果想要设置标记容器和主容器之间的补白, 用什么来表示?
marker-offset
13,CSS 属性是否区分大小写?
不区分.(HTML, CSS 都不区分, 但为了更好的可读性和团队协作, 一般都小写,
而在 XHTML 中元素名称和属性是必须小写的.)
14, 对行内元素设置 margin-top 和 margin-bottom 是否起作用?
不起作用.(需要注意行内元素的替换元素 img,input, 他们是行内元素,
但是可以为其设置宽高, 并且 margin 属性也是对其起作用的, 有着类似
于 Inline-block 的行为) img input 行内块元素 可以设置;
15, 对内联元素设置 padding-top 和 padding-bottom 是否会增加它的高度?
不会. 同上题, 要注意行内元素的替换元素, img 设置 padding-top/bottom 是会起作用的.
16,screen 关键词是指设备的物理屏幕大小还是指浏览器的视窗.
浏览器的视窗
17,rgba()和 opacity 的透明效果有什么不同?
rgba()和 opacity 都能实现透明效果, 但最大的不同是 opacity 作用于元素,
以及元素内的所有内容的透明度,
而 rgba()只作用于元素的颜色或其背景色.(设置 rgba 透明的元素的子元素不会继承透明效果!)
18,css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
垂直方向: line-height
水平方向: letter-spacing
19, 关于 letter-spacing 的妙用知道吗?
可以用于消除 inline-block 元素间的换行符空格间隙问题.
20,px 和 em 的区别?
px 和 em 都是长度单位,
区别是, px 的值是固定的, 指定是多少就是多少, 计算比较容易.
em 的值不是固定的, 并且 em 会继承父级元素的字体大小.
浏览器的默认字体高都是 16px. 所以未经调整的浏览器都符合:
1em=16px. 那么 12px=0.75em, 10px=0.625em
21, 知道 css 有个 content 属性吗? 有什么作用? 有什么应用?
css 的 content 属性专门应用在 before/after 伪元素上, 用于来插入生成内容.
最常见的应用是利用伪类清除浮动.
22, 简述 css 动画的优缺点?
优点: 1. 在性能上会稍微好一些, 浏览器会对 CSS3 的动画做一些优化(比如专门新建一个图层用来跑动画)
2. 代码相对简单
缺点: 1. 在动画控制上不够灵活
2. 兼容性不好
3. 部分动画功能无法实现(如滚动动画, 视差滚动等)
三, JavaScript 部分
1,js 的引入方式有哪些?
, 直接编写
, 导入文件
2, 如何在 js 中定义使用变量?
1, 声明变量时不用声明变量类型. 全都使用 var 关键字
2, 一行可以声明多个变量. 并且可以是不同类型
3, 声明变量时 可以不用 var. 如果不用 var 那么它是全局变量
4, 变量命名, 首字符只能是字母, 下划线,$ 美元符 三选一, 余下的字符
可以是下划线, 美元符号或任何字母或数字字符且区分大小写, x 与 X 是两个变量
3,js 的基本数据类型有哪些?
, 数字类型(number)
, 字符串类型(string)
, 布尔类型(boolean)
,Null 类型
,Undefined 类型
4,Null 和 Undefined 的区别?
null 是一个表示 "无" 的对象, 转为数值时为 0;
undefined 是一个表示 "无" 的原始值, 转为数值时为 NaN
5,js 有哪些运算符?
, 算术运算符(+ - */ % + -- )
, 比较运算符(>>= <<= != == === !==)
, 逻辑运算符(&& || !)
, 赋值运算符(= += -= *= /=)
, 字符串运算符(+ 连接, 两边操作数有一个或两个是字符串就做连接运算)
6,js 的 typeof 返回哪些数据类型?
number string Object function boolean underfind
7, 分别解释数组方法 pop(),push(),unshift(),shift()的功能?
shift()头部删除 pop()尾部删除
Unshift()头部添加 push()尾部添加
8,ajax 请求的时候 get 和 post 方式的区别?
GET 方式参数放在 url 后面
POST 放在虚拟载体里面有大小限制
安全问题应用不同一个是论坛等只需要请求的, 一个是类似修改密码的
9,ajax 请求时, 如何解释 json 数据?
使用 eval parse, 鉴于安全性考虑 使用 parse 更靠谱
10, 事件委托是什么?
事件代理: 自己完成不了当前的点击事件, 交给父级元素做这件事件
$('ul).on('click','.btn',function(){})
让利用事件冒泡的原理, 让自己的所触发的事件, 让他的父元素代替执行
11, 添加 删除 替换 插入到某个节点的方法分别是什么?
添加: obj.appendChild()
删除: obj.removeChild()
替换: obj.replaceChild()
插入: obj.insertBefore()
12, 简述一下什么是 javascript 的同源策略?
一段脚本只能读取来自于同一来源的窗口和文档的属性,
这里的同一来源指的是主机名, 协议和端口号的组合
13, 简述一下对 This 对象的理解.
this 是 js 的一个关键字, 随着函数使用场合不同, this 的值会发生变化.
但是有一个总原则, 那就是 this 指的是调用函数的那个对象. this 一般情
况下: 是全局对象 Global. 作为方法调用, 那么 this 就是指这个对象
14, 编写一个 b 继承 a 的方法
- function A(name){
- this.name = name;
- this.sayHello = function(){alert(this.name+"say Hello!");};
- }
- function B(name,id){
- this.temp = A; this.temp(name); // 相当于 new A();
- delete this.temp;
- this.id = id;
- this.checkId = function(ID){alert(this.id==ID)};
- }
15, 如何阻止事件冒泡和默认事件
- function stopBubble(e){
- if (e && e.stopPropagation)
- e.stopPropagation()
- else
- window.event.cancelBubble=true
- }
- return false
- $(function(ev){
- //1. 阻止事件冒泡
- ev.stopPropagation()
- //2. 阻止默认事件
- eg:href submit ev.preventDefault();
- // 阻止了冒泡和默认
- return false;
- });
16, 浏览器端的 js 包括哪几个部分?
核心( ECMAScript) , 文档对象模型(DOM), 浏览器对象模型(BOM)
17,js 动画有哪些实现方法?
用定时器 setTimeout 执行一次和 setInterval
18,js 动画的优缺点?
优点:
1. 控制能力很强, 可以单帧的控制, 变换
2. 兼容性好, 写得好完全可以兼容 IE6, 且功能强大.
缺点:
计算没有 css 快, 另外经常需要依赖其他的库.
19, 跨域的几种方式?
jsonp(利用 script 标签的跨域能力)跨域,
websocket(html5 的新特性, 是一种新协议)跨域,
设置代理服务器(由服务器替我们向不同源的服务器请求数据),
CORS(跨源资源共享, cross origin resource sharing),
iframe 跨域,
postMessage(包含 iframe 的页面向 iframe 传递消息)
20,3 + 2 +"7" 的结果是什么?
由于 3 和 2 是整数, 它们将直接相加. 由于 7 是一个字符串, 它将会被直接连接, 所以结果将是 57.
四, jQuery 部分
1,jQuery 是什么?
jQuery 是一个快速的, 简洁的 javaScript 库, 使用户能更方便地处理 HTMLdocuments,
events, 实现动画效果, 并且方便地为网站提供 AJAX 交互
2,jQuery 的优势是什么?
它的文档说明很全, 而且各种应用也说得很详细, 同时还有许多成熟的插件可供选择
3, 什么是 jQuery 对象?
jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象.
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象,
那么它就可以使用 jQuery 里的方法: $("#test").html()
4,jQuery 都有哪些选择器?
1. 基础选择器
id 选择器 $('#brother').css('color','red');
标签选择器 $('a').css({'color':'green','font-size':'24px'});
类选择器 $('.li3').css('background','yellow');
通配符选择器 console.log($(''));
$('').html(''); // 清空整个界面的 dom 元素
2. 层级选择器
后代选择器 $('#box p').css('color','red');
子代选择器 $('#box>p').css('color','green');
毗邻选择器, 匹配所有的紧接着选中元素的兄弟 $('#father+p').css('font-size','30px');
兄弟选择器 $('#father~p').css('background','gray');
3. 过滤选择器
获取第一个 $('li:first').css('background','gray');
获取最后一个 $('li:last').css('background','yellow');
获取奇数 $('li:odd').css('color','red');
获取偶数 $('li:even').css('color','green');
选中索引值为 1 $('li:eq(1)').css('font-size','32px');
大于索引值 1 $('li:gt(1)').css('font-size','60px');
小于索引值 1 $('li:lt(1)').css('font-size','10px');
4. 属性选择器
- $('li[id]').css('color','red');
- $('li[class=what]').css('font-size','30px');
- $('li[class!=what]').css('font-size','50px');
- $('input[name^=username]').css('background','gray');
- $('input[name$=222]').css('background','green');
- $('button[class*=danger]').css('background','orange');
解释: 标签名[属性名], 查找所有含有 id 属性的该标签名的元素 匹配给
定的属性 是 what 值 [attr=value] 匹配给定的属性是某个特定值的元素
没有 class 也会发生变化,[attr!=value] 匹配所有不含有指定的属性,
或者属性不等于特定值的元素 匹配给定的属性是以某些值开始的元素 ^
匹配给定的属性是以某些值结尾的元素 $ 匹配给定的属性是以包含某些值的元素 *
5. 筛选选择器
- $('span').eq(1).css('color','red');
- $('span').first().css('font-size','28px');
- $('span').last().css('color','greenyellow');
- console.log($('span').parent());
- $('span').parent('.p1').css({'width':'300px',height:'400px','background':'red'});
- $('.list').siblings('li').css('color','red');
- $('div').find('button').css('background','gray');
解释: 获取第 n 个元素 数值从 0 开始 .eq() 获取第一个元素 .first() 获取最后
一个元素 .last() 获取父亲元素 .parent() 选择所有的兄弟元素 .siblings()
查找所有的后代元素 .find()
5, 简述一下 jQuery 的筛选器的分类, 分别简单举例介绍一下.
过滤筛选器 如:$("li").eq(2) $("li").first() $("ul li").hasclass("test")
- $("ul").delegate("li", "click", function(){
- $(this).hide();
- });
- // 事件代理: 自己完成不了当前的点击事件, 交给父级元素做这件事件
- // 事件代理
- $('ul').on('click','.name,.luffy',function () {
- console.log($(this));
- });
- var a = $('button').remove();
- console.log(a[0],a[1]);
- $('ul').append(a[0]); // 事件没了
- var b = $('button').detach();
- console.log(b[0]);
- $('ul').append(b[0]); // 事件会保留
- $('#ButtonToClick').click(function(){
- $('#ImageToHide').hide();
- });
- $('<a href='#'>zhanzhengrecheng</a>').appendTo($('ul'));
- append appendTo
- prepend prependTo
- before insertBefore after insertAfter
- clone replaceWith replaceAll
- empty remove detach
来源: https://www.cnblogs.com/wj-1314/p/9550454.html