基础知识

                                     基础知识

一 .HTML基础

 1.表单元素有哪些?

文本框:<input type = "text">

密码框:<input type = "password">

单选框:<input type = "radio">

复选框:<input type = "checkbox">

按 钮 :<input type = "button">

提 交 :<input type = "submit">

隐藏表单:<input type = "hidden">

文件上传:<input type = "file">

下拉列表:<option>

            <multhple>1</multhple>

            <multhple>2</multhple>

          </option>

*特殊点

(1)防止用户更改数据控制

<input type = "text" readonly = "">

(2)单元素容器边框

        <fieldset>

          <legend></legend>

        </fieldset>

 2.块级元素与内嵌元素的区别?

块级元素:

        p,h1-h6,pre,ul,li,div,form,br,table,blockqute

内嵌元素:

        span,a,img,

区别:块级元素定义文本要换行,而内嵌元素不换行。

二 .CSS基础

 1.使用CSS的优点

(1)提高页面浏览速度;

(2)缩短改版时间,降低维护费用;

(3)更好的控制页面布局;

(4)实现表现和结构、内容相分离;

(5)更方便搜索引擎的搜索

 2.样式表的分类?

(1)嵌入式样式表

(2)内联式样式表

(3)外部式样式表

 3.css中的浏览器兼容问题?

 (1)兼容问题一:各大浏览器之间存在着内外补丁 差异,各自margin padding差异较大。
   解决方法:进行CSS样式重设。

 (2)兼容问题二:标签的高度不受控制,超出自己设置的高度。
   解决方法:给超出高度的标签设 overflow:hidden;或者设置行高line-height 小于你设置的高度。
 (3)兼容问题三:CSS3的动画效果在不同浏览器上 会出现差异。
   解决方法:(谷歌:Chrome-webkit-transition;(火狐: FireFox-moz-transition

             (苹果:SaFari-ms-transition;(世界之窗:Opera-o-transition: 

4.列举CSS的选择器有哪些?

(1)元素选择器;类选择器;ID选择器;

(2)伪类选择器(元素:hover点击后;元素:link 未访问;元素:visted已访问;元素:active激活;);

(3)复合选择器(1.并集选择器:p h[中间以空格隔开]2.交集选择器:h1h2[中间以逗号相隔]3.后代选择器:div下的任何元素)

 *优先级问题

       ID选择器 类选择器 元素选择器

 5.对于盒模型的理解?

Border:属性主要有3个,color(颜色),width(粗细)style(样式)

Padding:内边距;

Margin:外边距;

 6.对于在HTML中定位的理解?

(1)Static:没有设置任何定位效果的默认值就是static,也就是标准文档流

(2)Relative(相对定位):使用相对定位的盒子,会相对与它原本的位置,通过偏移指定的距离,到达新的位置

(3)absolute(绝对定位):使用绝对定位的盒子,以他最近的一个“已经定位”的父元素为基准进行偏移,如果没有“已经定位”的父元素,就以浏览器窗口为基准[*脱离文档流*]

(4)fixed(固定定位):基于浏览器的定位;

 7.CSS中对于文字的样式设置!

Font-size:-px(字体大小)

       【weightbold:加粗bolder:特粗)字体粗细;

         Family:“字体”;字体样式;

         styleitalic:斜体oblique:倾斜)斜体;

         variantsmall:大写cops:小写)字母大小型转化】

 8.背景样式的设置?

Backgroundcolor:背景色

         —imageurl(“地址”);背景图

         —repeat:默认就是平铺;no-repeat:不平铺,repeat-x横向y纵向

         —position-xx=left居左,center居中,right居右)

         —attachmentfixed 背景图固定不随对象移动

 9.文本对齐设置的方法?

水平对齐:text-alignleft居左,right居右,center居中

垂直对齐:line-height:高度;vertical-alignmiddle

 10.CSS3的简单动画效果如何实现?

      动画过度: transition:all 500ms ease-in;(参数:all,时间,ease-in

           旋转:transform:rotate(30deg)

           平移:transform:translate(5px,5px);

           缩放:transform:scale(-1.1,1)

11.在CSS中清除浮动的方法有哪些?(举例说明,至少三种)

 (1).使用带clear属性的空元素

  在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动

 (2).使用CSS的overflow属性

  浮动元素的容器(父元素)添加overflow:hidden;或overflow:auto;可以清除浮动

 (3).使用邻接元素处理

  什么都不做,给浮动元素后面的元素添加clear属性

三 .JavaScript的基础(原生js块)

 1.JavaScript的实现要有?

(1)核心(ECMAscript)

(2)文档对象模型(DOM)

(3)浏览器对象模型(BOM)

 2.JavaScript的五种基本数据类型?

 原始数据类型

(1)undefined  (2)Boolean 布尔型 (3)null 空型 (4)number 字符串型 (5)string 数字型 

 引用数据类型

  Object(JavaScript的所有类型都是由object继承而来的)

 3.JavaScript中的操作符的使用?

(1)一元操作符(++,--,+,-)

(2)布尔操作符(!,&&,|| )

(3)四则运算符 ( 无非就是+,-,*,/    唯一需要注意的是+在有字符串时的作用 )

(4)相等操作符(==,!=,===,!==)

(5)三元表达式  (  下面变量的取值情况:  var max = (num1 > num2) ? num1 : num2; )

 4.JavaScript中的语句使用?

(1)条件语句(if....else...)

(2)循环语句 (for)

(3)continue语句

 5.对于DOM元素位置和尺寸大小的理解?

  (1)clientHeight和clientWidth用于描述元素内尺寸,是指 元素内容+内边距 大小,不包括边框(IE下实际包括)、外边距、滚动条部分

                            

  (2)offsetHeight和offsetWidth用于描述元素外尺寸,是指 元素内容+内边距+边框,不包括外边距和滚动条部分

                           

  (3)clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离,也就是左,上边框宽度

  (4)offsetTop和offsetLeft表示该元素的左上角(边框外边缘)与已定位的父容器(offsetParent对象)左上角的距离

  (5)offsetParent对象是指元素最近的定位(relative,absolute)祖先元素,递归上溯,如果没有祖先元素是定位的话,会返回null

  (6)scrollWidth和scrollHeight是元素的内容区域加上内边距加上溢出尺寸,当内容正好和内容区域匹配没有溢出时,这些属性与clientWidth和clientHeight相等

                          

6.对于正则表达式的简单理解?

(1)字符^ 

意义:表示匹配的字符必须在最前边。 

例如:/^A/不匹配"an A,"中的'A',但匹配"An A."中最前面的'A'。 

(2)字符$ 

意义:与^类似,匹配最末的字符。 

例如:/t$/不匹配"eater"中的't',但匹配"eat"中的't'。 

(3)字符* 

意义:匹配*前面的字符0次或n次。 

例如:/bo*/匹配"A ghost booooed"中的'boooo'或"A bird warbled"中的'b',但不匹配"A goat g runted"中的任何字符。 

(4)字符+ 

意义:匹配+号前面的字符1次或n次。等价于{1,}。 

例如:/a+/匹配"candy"中的'a'和"caaaaaaandy."中的所有'a'。 

(5)字符? 

意义:匹配?前面的字符0次或1次。 

例如:/e?le?/匹配"angel"中的'el'和"angle."中的'le'。 

(6)字符. 

意义:(小数点)匹配除换行符外的所有单个的字符。 

例如:/.n/匹配"nay, an apple is on the tree"中的'an'和'on',但不匹配'nay'。 

(7)字符d 

意义:匹配一个数字,等价于[0-9]。 

例如:/d/或/[0-9]/匹配"B2 is the suite number."中的'2'。 

(8)字符D 

意义:匹配任何的非数字,等价于[^0-9]。 

例如:/D/或/[^0-9]/匹配"B2 is the suite number."中的'B'。

(9)字符w 

意义:匹配所有的数字和字母以及下划线,等价于[A-Za-z0-9_]。 

例如:/w/匹配"apple,"中的'a',"$5.28,"中的'5'和"3D."中的'3'。 

(10)字符W 

意义:匹配除数字、字母外及下划线外的其它字符,等价于[^A-Za-z0-9_]。 

例如:/W/或者/[^$A-Za-z0-9_]/匹配"50%."中的'%'。 

(11)字符{n} 

意义:这里的n是一个正整数。匹配前面的n个字符。 

例如:/a{2}/不匹配"candy,"中的'a',但匹配"caandy," 中的所有'a'和"caaandy."中前面的两个 'a'。 

(12)字符{n,} 

意义:这里的n是一个正整数。匹配至少n个前面的字符。 

例如:/a{2,}不匹配"candy"中的'a',但匹配"caandy"中的所有'a'和"caaaaaaandy."中的所有'a' 

(13)字符{n,m} 

意义:这里的n和m都是正整数。匹配至少n个最多m个前面的字符。 

例如:/a{1,3}/不匹配"cndy"中的任何字符,但匹配 "candy,"中的'a',"caandy," 中的前面两个 'a'和"caaaaaaandy"中前面的三个'a',注意:即使"caaaaaaandy" 中有很多个'a',但只匹配前面的三 个'a'即"aaa"。 

7.对于事件模型的理解?

  (1)现代派事件:addEventListener
  (2)传统派事件:attachEvent
  (3)现代派事件的参数('执行语句',函数名,falsetrue),则false代表冒泡阶段,true代表捕获阶段。

8.基本的获取节点的方式?
 (1)getElementsByTagName(name)   返回指定元素的称的元素节点集合

 (2)getElementByTagName(*)       能得到所有元素节点

 (3)getElementsByName(name)     按name属性值获取元素节点集合。

 (4)getElementById(id)            通过元素ID取得节点

9.基本的节点操作?

 1.  firstChild,lastChild:               1/最后一个节点。

 2.  previousSibling:                 前一个兄弟节点,没有则为null

 3.  nextSibling:                    后一个兄弟节点,没有则为null

 4.  hasChildNodes():                是否有子节点,返回true/false

 5.  appendChild(node) :             添加元素节点到childNodes

 6.   removechild(node):             childNodes中删除节点

 7.   replaceChild(newNode,oldNode):  替换节点

 8.    insertBefore(newNode,refNode):   在refNode前插入节点

 9.    removeNamedItem(name)-       删除指定名称的属性节点

 10.   setNamedItem(node)-           添加属性节点

 11.   item(pos)-                     返回指定位置的节点

 12    length属性 -                  属性节点数量

 13    getAtrribute(name)-             取得指定名称属性的值。

 14    setAttribute(name,value)-        设置属性的名值对

 15    removeAttribute(name)-         删除属性

创建和操作节点

createElement(name)-创建元素节点

createTextNode(text)-创建文本节点

createAttribute(name)-创建属性节点

createComment(text)-创建注释节点

createDocumentFragment()-创建文档碎片节点,提高效率

removeChild(node)-删除子节点

replaceChild(node)-替换子节点

insertBefore(newNode,oldNode)-插入到指定位置

cloneNode(是否包含子节点)-复制节点

操作文本节点

元素节点.firstChild-获取文本节点

textNode.length-获取文本节点长度

textNode.data="..." - 设置文本内容

appendData(string) - 添加文本

deleteData(offset,count) - 删除指定位置和长度的文本

insertData(offset,string) - 在指定位置插入文本

replaceData(offset,count,string) - 替换指定位置和长度的文本

10. 讲一下什么是闭包?

内部函数可以使用外部函数里面的变量

官方:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

为什么:(变量的作用域)内部环境可以通过作用域链访问它之上的所有外部环境,但是外部环境不能访问内部环境中的任何变量和函数。这些环境是线性的,有次序的。每个环境都可以向上搜索作用域链,以查询变量和函数名;而任何环境都不能通过向下搜索作用域链而进入另一个执行环境。

jQuery的基础

1.jQuery的特点有哪些?

(1)提供了强大的功能函数

(2)解决了浏览器的兼容性问题

(3)实现丰富的UI

(4)纠正错误的脚步知识

  1. jQuery的基础选择器

(1)【ID选择器】#id       根据元素Id选择            $("divId") 选择IDdivId的元素

(2)【元素选择器】element       根据元素的名称选择,      $("a") 选择所有<a>元素

(3)【类选择器】.class       根据元素的css类选择      $(".bgRed") 选择所用CSS类为bgRed的元素

(4)   *                 选择所有元素                $("*")选择页面所有元素

(5)【并集选择器】         选择元素可以用逗号隔开      $('#layer1,#layer2,#layer3')

(6)【直接子元素选择器】                $('#Hierarchy>ul')

(7)【同级直接后一个元素】              $('#Hierarchy div.div1 ul+p')

(8)【同级后面所有元素】                $('#Hierarchy div.div1 ul~p')

  1. jQuery的基础过滤器

(1)   过滤出第一个                     $('li:first)

(2)   过滤最后一个                     $('li:last')

(3)   排除过滤器                       $('li:not(:first)')

(4)   找出没有选中的checkbox           $('input:not(:checked)')

(5)   索引奇数偶数过滤器               $('table tr:odd')

(6)   索引 大于小于过滤器              $('table tr:lt(2)')

  *特殊的过滤器*

(1)eq( index ) 获取第N个元素                         获取匹配的第二个元素: $("p").eq(1) :index从 开始计数 查找第二行: 

(2)filter( expr ) 筛选出与指定表达式匹配的元素集合。      保留带有select类的元素: $("p").filter(".selected")

4.jQuery的一些方法

(3)           删除指定的属性                                $('div').removeAttr('title'); 

原文地址:https://www.cnblogs.com/Victory-peng/p/5250071.html