精华内容
下载资源
问答
  • 有几种可用的工具和平台(wordpress,magento等)可用于开发网站的前端,并且了解种工具最适合特定任务,这标志着开发被黑网站和精心设计之间的区别。 ,可扩展的网站。 超文本标记语言(HTML) 超文本标记语言...
  • 2. PC 时代大教堂模式的前端生态建设,在无线端早已水土不服 3. 阿里成了围城,大量业务强相关的私有技术崛起,和开源社区渐行渐远 <h3>4. 那么,航旅解了这个问题了吗? 当然没有。...
  • 前端开发 - 考核题

    2018-05-16 21:37:00
    一.... ...HTML是一基本的WEB网页设计语言,XHTML是一个基于XML置标语言最主要不同: ...前端页面有哪几层构成,分别是什么?作用是什么? 1, 结构层 Html(页面结构内容,骨架) 表示层 2, CSS(网页样式和...

    一. HTML部分

    1. XHTML和HTML有什么区别

      HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:
      XHTML 元素必须被正确地嵌套。
      XHTML 元素必须被关闭。
      标签名必须用小写字母。
      XHTML 文档必须拥有根元素。
    2. 前端页面有哪几层构成,分别是什么?作用是什么?
      1, 结构层 Html(页面结构内容,骨架) 表示层 2, CSS(网页的样式和外观) 3, 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. 内联标签有哪些?块级标签有哪些?
      行内标签:a b img em br i span input select 块级标签:div p h1-h6 form ul dl ol table
    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的引入方式有哪些?
      1.内嵌式 <h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1> 2.内链式 <style type="text/css"> h2{font-size:30px;color:red;} </style> 3.外链式 链接式: <link rel="stylesheet" type="text/css" href="./css/index.css"> 导入式: <style type="text/css"> @import url('./css/index.css'); </style>
    3. css的选择器有哪些?
      1,基本选择器 通配符选择器 标签选择器 id选择器 类选择器 2,组合选择器 子代选择器 后代选择器 群组选择器 交集选择器 毗邻选择器 兄弟选择器 3,属性选择器
    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的引入方式有哪些?
      1,直接编写 2,导入文件
    2. 如何在js中定义使用变量?
      1,声明变量时不用声明变量类型. 全都使用var关键字 2,一行可以声明多个变量.并且可以是不同类型 3,声明变量时 可以不用var. 如果不用var 那么它是全局变量 4,变量命名,首字符只能是字母,下划线,$美元符 三选一,余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写,x与X是两个变量
    3. js的基本数据类型有哪些?
      1,数字类型(number) 2,字符串类型(string) 3,布尔类型(boolean) 4,Null类型 5,Undefined类型
    4. Null和Undefined的区别?
      null是一个表示”无”的对象,转为数值时为0; undefined是一个表示”无”的原始值,转为数值时为NaN
    5. js有哪些运算符?
      1,算术运算符(+ - * / % ++ -- ) 2,比较运算符(> >= < <= != == === !==) 3,逻辑运算符(&& || !) 4,赋值运算符(= += -= *= /=) 5,字符串运算符(+ 连接,两边操作数有一个或两个是字符串就做连接运算)
    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") 查找筛选器 如: 查找子标签: $("div").children(".test") $("div").find(".test") 向下查找兄弟标签: $(".test").next() $(".test").nextAll() $(".test").nextUntil() 向上查找兄弟标签: $("div").prev() $("div").prevAll() $("div").prevUntil() 查找所有兄弟标签: $("div").siblings() 查找父标签: $(".test").parent() $(".test").parents() $(".test").parentUntil()
    6. jQuery的美元符号$有什么作用?
      其实美元符号$只是”jQuery”的别名,它是jQuery的选择器
    7. body中的onload()函数和jQuery中的document.ready()有什么区别?
      1,我们可以在页面中使用多个document.ready(),但只能使用一次onload()。 2,document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。
    8. jQuery中的Delegate()函数有什么作用?
      ```
      1,如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:
      $("ul").delegate("li", "click", function(){
      $(this).hide();
      });
      2,当元素在当前页面中不可用时,可以使用delegate()

      //事件代理: 自己完成不了当前的点击事件,交给父级元素做这件事件
      // 事件代理
      $('ul').on('click','.name,.luffy',function () {
      console.log($(this));
      });
      ```
    9. 请用jQuery实现,在一个表单中,如果将所有的div元素都设置为绿色。
      $(“div”).css(“color”,”green”)
    10. jQuery中的hover()和toggle()有什么区别?

      hover()和toggle()都是jQuery中两个合成事件。
      hover()方法用于模拟光标悬停事件。         
      toggle()方法是连续点击事件。
    11. jquery表单提交前有几种校验方法?分别为?

      formData:返回一个数组,可以通过循环调用来校验    
      jaForm:返回一个jQuery对象,所有需要先转换成dom对象
      fieldValue:返回一个数组  
      beforeSend()
    12. $(this) 和 this 关键字在 jQuery 中有何不同?

      $(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等
      this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)
    13. jQuery中 detach() 和 remove() 方法的区别是什么?

      detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于
      detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除,
      而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看 用来向DOM中添加元素的 appendTo() 方法
      
      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]);   // 事件会保留
      
    14. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样?

      这通常用于阻止事件向上冒泡。
    15. 如何在点击一个按钮时使用 jQuery 隐藏一个图片?

      $('#ButtonToClick').click(function(){
          $('#ImageToHide').hide();
      });
    16. jQuery.get() 和 jQuery.ajax()方法之间的区别是什么?

      ajax() 方法更强大,更具可配置性, 让你可以指定等待多久,以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。
    17. 用jQuery如何将一个 HTML 元素添加到 DOM 树中的?

      通过appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。
      $('<a href='#'>luffy</a>').appendTo($('ul'));
      append  appendTo
      prepend  prependTo
      before  insertBefore  after  insertAfter
      clone   replaceWith  replaceAll
      empty  remove  detach
    18. 如何找到所有 HTML select 标签的选中项?

      $('[name=NameOfSelectedTag] :selected')
      这段代码结合使用了属性选择器和 :selected 选择器,结果只返回被选中的选项。你可按需修改它,比如用 id 属性而不是 name 属性来获取 <select> 标签。
    19. remove() 和 empty()的区别?

      remove, 删除节点,并删除元素节点绑定的事件。
      empty, 清空节点元素的内容,但是节点还存在,只是内容被清空,类似$().html(' ')
    20. 在jquery中你是如何去操作样式的?

      addClass() 来追加样式   
      removeClass() 来删除样式    
      toggle() 来切换样式
    21. 简述beforeSend方法有的作用?

      发送请求前可以修改XMLHttpRequest对象的函数,在beforeSend中,如果返回false 可以取消本次的Ajax请求。XMLHttpRequest对象是唯一的参数,所以在这个方法里可以做验证。
    22. jquery对象和dom对象是怎样转换的?

      jquery转DOM对象:jQuery对象是一个数组对象,可以通过[index]的丰富得到相应的DOM对象还可以通过get[index]去得到相应的DOM对象。
      DOM对象转jQuery对象:$(DOM对象)
    23. radio单选组的第二个元素为当前选中值,该怎么去取?

      $('input[name=items]').get(1).checked = true;
    24. 在ajax中data主要有几种方式?

      三种,
      html拼接的,
      json数组,
      form表单经serialize()序列化的
    25. jQuery 中的方法链是什么?使用方法链有什么好处?

      方法链是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,同时由于只对 DOM 进行了一轮查找,性能方面更加出色
    26. 哪种方式更高效:document.getElementbyId("myId") 还是 $("#myId")?

      第一种,因为它直接调用了 JavaScript 引擎。

    五、Bootstrap部分

    1. 什么是 Bootstrap?
      Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
    2. 为什么使用 Bootstrap?
      移动设备优先 浏览器支持 容易上手 响应式设计 它为开发人员创建接口提供了一个简洁统一的解决方案。 它包含了功能强大的内置组件,易于定制。 它还提供了基于 Web 的定制。 它是开源的。
    3. Bootstrap 包含哪些内容?
      1,基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 2,CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。 3,组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。 4,JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。 5,定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
    4. Bootstrap HTML编码规范语法。
      1,用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 2,嵌套元素应当缩进一次(即两个空格)。 3,对于属性的定义,确保全部使用双引号,绝不要使用单引号。 4,不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。 5,不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>)。
    5. Bootstrap CSS编码规范语法。
      1,用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 2,为选择器分组时,将单独的选择器单独放在一行。 3,为了代码的易读性,在每个声明块的左花括号前添加一个空格。 4,声明块的右花括号应当单独成行。 5,每条声明语句的 : 后应该插入一个空格。 6,为了获得更准确的错误报告,每条声明都应该独占一行。 7,所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。 8,对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。, 9,不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。 10,对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。 11,十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。 12,尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。 13,为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。 14,避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。
    6. 让 中的每一行对鼠标悬停状态作出响应的类名是什么?
      table-hover
    7. 让表格更加紧凑,单元格中的内补(padding)均会减半的类名是什么?
      table-condensed
    8. 输入框设置 readonly 后的结果是什么?
      禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。
    9. 输入框设置 disabled 属性后的结果是什么?
      禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了 not-allowed 鼠标状态。
    10. 简述下button都有哪些常用的状态,及类名分别是什么?

      默认样式    btn-default
      首选项  btn-primary
      成功    btn-success
      一般信息    btn-info
      警告    btn-warning
      危险    btn-danger
      链接    btn-link
    11. 为 元素添加 什么 属性,使其表现出禁用状态?

      disabled
    12. 常用的情境背景色都有哪些,并把类名写出?

      首选项  bg-primary
      成功    bg-success
      一般信息    bg-info
      警告    bg-warning
      危险    bg-danger
    13. 简述 .show 和 .hidden 类的作用?

      可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)
    14. 在bootstrap中被删除的文本使用什么标签?

      <del>
    15. 在bootstrap中无用文本使用什么标签?

      <s>
    16. 在bootstrap中额外插入的文本使用什么标签?

      <ins>
    17. 在bootstrap中为文本添加下划线使用什么标签?

      <u>
    18. 在bootstrap中给

      之内的每一行增加斑马条纹样式类名是什么?
      table-striped
    19. 简介一下栅格系统。

      栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中,系统会自动分为最多12列。
    20. 在bootstrap中让段落突出显示的类名是什么?

      lead
    posted @ 2018-05-16 21:37 Alice的小屋 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/alice-bj/p/9048314.html

    展开全文
  • web网页练习

    2018-05-22 11:36:00
    一.... ... HTML是一基本的WEB网页设计语言,XHTML是一个基于XML置标语言最主要不同: XHTML 元素必须被正确地嵌套。...2. 前端页面有哪几层构成,分别是什么?作用是什么? 1, 结构层 Html...

     

    一. HTML部分

    1. XHTML和HTML有什么区别

    HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:
    XHTML 元素必须被正确地嵌套。
    XHTML 元素必须被关闭。
    标签名必须用小写字母。
    XHTML 文档必须拥有根元素。

     

    2. 前端页面有哪几层构成,分别是什么?作用是什么?

    1, 结构层 Html(页面结构内容,骨架) 表示层
    2, CSS(网页的样式和外观) 行为层
    3, js(实现网页的交互,动画效果)

     

    3. 请描述一下 cookies,sessionStorage 和 localStorage 的区别?

    cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
    sessionStorage和localStorage的存储空间更大;
    sessionStorage和localStorage有更多丰富易用的接口;
    sessionStorage和localStorage各自独立的存储空间;

    参考https://www.cnblogs.com/caiyezi/p/5619506.html

    4. form表单中input标签的readonly和disabled属性有何区别?

    readonly=“readonly”是只读,不可以修改,
    disabled=“disabled”是禁用,整个文本框是显示灰色状态 
    form 中method是数据传递的方式,action是与后台数据库提交的


    5. 内联标签有哪些?块级标签有哪些?

    行内标签:a br span strong label  
    块级标签:div p h1-h6 form ul ol li table


    6. 内联标签和块级标签有什么区别?

    内联标签不可以设置宽高,不独占一行;
    块级标签可以设置宽高,独占一行。

     

    7. 简述form标签的功能和属性?

    功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互
    属性:
    1,action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理;定义表单提交时发生的动作,提交给服务器处理程序的地址。
    2,method: 定义表单的提交方式 post/get默认取值就是get。get,明文提交,所提交的数据可以显示在地址上,安全性低,提交数据有大小限制,最大2kpost隐式提交,不会显示在地址上,安全性高,没有大小限制。

     

    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的引入方式有哪些?
    1,行内式
    2,嵌入式
    3,链接式
    4,导入式

    3. css的选择器有哪些?

    1.基本选择器:标签选择器、类选择器、ID选择器、通用选择器;
    2.组合选择器:后代选择器(以空格分割)、子元素(儿子)选择器(以>分割)、相邻兄弟(毗邻)选择器(以+分割)、兄弟(弟弟)选择器(~
    3.属性选择器: ID、class属性,元素的特定属性选择元素。           [class='值']、 [class^='开头的值']、 [class$='结尾的值']、[title*="hello"]、表单input[type="text"] 

    4.分组选择器:在多个选择器之间用分割;如div,p{  }

    5.伪类选择器:没有访问的超链接a标签样式a:link{ }、访问过的超链接a标签样式a:visited { }、鼠标悬浮a:hover{ }、鼠标点击a:active{ }、获取焦点input:focus{ }

    6.伪元素选择器:first-letter用于文本的首字母设置样式如p:first-letter、before是在元素内容前面插入新内容如p:before、after用在元素的内容后面插入新内容

     

    4. css伪类的作用?
    CSS伪类是用来添加一些选择器的特殊效果。

    5. 什么是css优先级,其基本规则是什么?
    CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
    基本规则:
    1,内联样式表的权值最高(内联样式)
    2,统计选择符中的ID属性个数(ID选择器)
    3,统计选择符中的CLASS属性个数(类选择器)
    4,统计选择符中的HTML标签名个数(元素选择器)


    6. CSS隐藏元素的几种方法(至少说出三种)
      1.Opacity:元素的透明度,设置为0,元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
      2.Visibility:将它的值设置为hidden;与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
      3.Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
      4.Position:将元素移至可视区域,既不会影响布局,能让元素保持可以操作;
      5.Clip-path:通过剪裁,clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;
      参考:http://www.divcss5.com/rumen/r18099.shtml


    7. CSS清除浮动的几种方法(至少两种)
      1.使用带clear属性的空元素;
      2.使用CSS的overflow属性;
      3.使用CSS的:after伪元素;
      4.使用邻接元素处理。


    8. 页面导入样式时,使用link和@import有什么区别?
    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的行为)

    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的引入方式有哪些?
    1,直接编写
    2,导入文件

    2. 如何在js中定义使用变量?
    1.声明变量时不用声明变量类型. 全都使用var关键字
    2.一行可以声明多个变量.并且可以是不同类型
    3.声明变量时 可以不用var. 如果不用var 那么它是全局变量
    4.变量命名,首字符只能是字母,下划线,$符 三选一,余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写,x与X是两个变量


    3. js的基本数据类型有哪些?
    1.数字类型(number)
    2.字符串类型(string)
    3.布尔类型(boolean)
    4.Null类型(空对象)
    5.Undefined类型(表示变量未定义)

    4. Null和Undefined的区别?
    null是一个表示”无”的对象,转为数值时为0;
    undefined是一个表示”无”的原始值,转为数值时为NaN

    5. js有哪些运算符?
    1.算术运算符(+ - * / % ++ -- )
    2.比较运算符(> >= < <= != == === !==)
    3.逻辑运算符(&& || !)
    4.赋值运算符(= += -= *= /=)
    5.字符串运算符(+ 连接,两边操作数有一个或两个是字符串就做连接运算)

    6. js的typeof返回哪些数据类型?
    Object  number  function  boolean  underfind

    7. 分别解释数组方法pop()、push()、unshift()、shift()的功能?
    pop()尾部删除
    Push()尾部添加
    Unshift()头部添加
    shift()头部删除

    8. ajax请求的时候get 和post方式的区别?
    GET方式参数放在url后面
    POST放在虚拟载体里面有大小限制
    安全问题应用不同一个是论坛等只需要请求的,一个是类似修改密码的

    9. ajax请求时,如何解释json数据?
    使用eval parse,鉴于安全性考虑 使用parse更靠谱

    10. 事件委托是什么?
    让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行

    事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。

    参考:https://www.cnblogs.com/liugang-vip/p/5616484.html

     

    11. 添加 删除 替换 插入到某个节点的方法分别是什么?
    添加:obj.appendChidl()
    删除:obj.removeChild()
    替换:obj.replaceChild()
    插入:obj.innersetBefore()

    12. 简述一下什么是javascript的同源策略?
    一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合

    参考:http://www.jb51.net/article/66500.htm


    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);  //相当于newA();
                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


    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都有哪些选择器?

    基本选择器:id选择器、标签选择器、类选择器、通配符选择器、
    层级选择器 :后代选择器 $('div p')、子代选择器$('div>p')、毗邻选择器$('#brother+li')、兄弟选择器$('#brother~li')、:first获取第一个元素 $('li:first')、:last获取最后一个元素
    基本筛选器:获取第n个元素 数值从0开始$('span').eq(0)、$('span').first(). last是获取最后一个、.parent() 选择父亲元素 $('span').parent('.p1').、.siblings()选择所有的兄弟元素、.find()查找所有的后代元素$('div').find('button')
    
    基本过滤选择器:first 获取第一个元素、:odd 匹配所有索引值为奇数的元素,从0开始计数、:even 匹配所有索引值为偶数的元素,从0开始计数、:eq(index) 获取给定索引值的元素 从0开始计数、:gt(index)匹配所有大于给定索引值的元素、:lt(index) 匹配所有小于给定索引值的元素、一个给定索引值的元素$('p:eq(3)')
    
    属性选择器:标签名[属性名] 查找所有含有id属性的该标签名的元素$("li[id]")、[attr=value] 匹配给定的属性是某个特定值的元素$('li[class=what]')、[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素$('li[class!=what]')、匹配给定的属性是以某些值开始的元素$('input[name^=username]').、匹配给定的属性是以某些值结尾的元素$('input[name$=222]')、匹配给定的属性是以包含某些值的元素$("button[class*='btn']")
    
    表单选择器

     

    5. 简述一下jQuery的筛选器的分类,分别简单举例介绍一下。

    过滤筛选器 如:$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")
        查找筛选器 如:
            查找子标签:
                $("div").children(".test")      
                $("div").find(".test")
            向下查找兄弟标签:    
                $(".test").next()               
                $(".test").nextAll()     
                $(".test").nextUntil()
            向上查找兄弟标签:    
                $("div").prev()                  
                $("div").prevAll()       
                $("div").prevUntil()
            查找所有兄弟标签:    
                $("div").siblings()
            查找父标签:         
                $(".test").parent()              
                $(".test").parents()     
                $(".test").parentUntil()

     


    6. jQuery的美元符号$有什么作用?
    其实美元符号$只是”jQuery”的别名,它是jQuery的选择器

    7. body中的onload()函数和jQuery中的document.ready()有什么区别?

    1.我们可以在页面中使用多个document.ready(),但只能使用一次onload()。
    2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。


    8. jQuery中的Delegate()函数有什么作用?

    1.如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:
            $("ul").delegate("li", "click", function(){
                $(this).hide();
            });
    2.当元素在当前页面中不可用时,可以使用delegate()

     


    9. 请用jQuery实现,在一个表单中,如果将所有的div元素都设置为绿色。
    $(“div”).css(“color”,”green”)

    10. jQuery中的hover()和toggle()有什么区别?
    hover()和toggle()都是jQuery中两个合成事件。
    hover()方法用于模拟光标悬停事件。
    toggle()方法是连续点击事件。

    11. jquery表单提交前有几种校验方法?分别为?

    formData:返回一个数组,可以通过循环调用来校验
    jaForm:返回一个jQuery对象,所有需要先转换成dom对象
    fieldValue:返回一个数组
    beforeSend()

    12. $(this) 和 this 关键字在 jQuery 中有何不同?
    $(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等
    this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)

    13. jQuery中 detach() 和 remove() 方法的区别是什么?
    detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于
    detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除,
    而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看 用来向DOM中添加元素的 appendTo() 方法

    14. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样?
    这通常用于阻止事件向上冒泡。

    15. 如何在点击一个按钮时使用 jQuery 隐藏一个图片?

    $('#ButtonToClick').click(function(){
            $('#ImageToHide').hide();
        });


    16. jQuery.get() 和 jQuery.ajax()方法之间的区别是什么?
    ajax() 方法更强大,更具可配置性, 让你可以指定等待多久,以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

    17. 用jQuery如何将一个 HTML 元素添加到 DOM 树中的?
    通过appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。

    18. 如何找到所有 HTML select 标签的选中项?
    $('[name=NameOfSelectedTag] :selected')
    这段代码结合使用了属性选择器和 :selected 选择器,结果只返回被选中的选项。你可按需修改它,比如用 id 属性而不是 name 属性来获取 <select> 标签。

    19. remove() 和 empty()的区别?
    remove, 删除节点,并删除元素节点绑定的事件。
    empty, 清空节点元素的内容,但是节点还存在,只是内容被清空,类似$().html(' ')

    20. 在jquery中你是如何去操作样式的?
    addClass() 来追加样式
    removeClass() 来删除样式
    toggle() 来切换样式

    21. 简述beforeSend方法有的作用?
    发送请求前可以修改XMLHttpRequest对象的函数,在beforeSend中,如果返回false 可以取消本次的Ajax请求。XMLHttpRequest对象是唯一的参数,所以在这个方法里可以做验证。

    22. jquery对象和dom对象是怎样转换的?
    jquery转DOM对象:jQuery对象是一个数组对象,可以通过[index]的丰富得到相应的DOM对象还可以通过get[index]去得到相应的DOM对象。
    DOM对象转jQuery对象:$(DOM对象)

    23. radio单选组的第二个元素为当前选中值,该怎么去取?
    $('input[name=items]').get(1).checked = true;

    24. 在ajax中data主要有几种方式?
    三种:
    html拼接的,
    json数组,
    form表单经serialize()序列化的

    25. jQuery 中的方法链是什么?使用方法链有什么好处?
    方法链是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,同时由于只对 DOM 进行了一轮查找,性能方面更加出色

    26. 哪种方式更高效:document.getElementbyId("myId") 还是 $("#myId")?
    第一种,因为它直接调用了 JavaScript 引擎。

    五、Bootstrap部分


    1. 什么是 Bootstrap?
    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

    2. 为什么使用 Bootstrap?
    移动设备优先
    浏览器支持
    容易上手
    响应式设计
    它为开发人员创建接口提供了一个简洁统一的解决方案。
    它包含了功能强大的内置组件,易于定制。
    它还提供了基于 Web 的定制。
    它是开源的。

    3. Bootstrap 包含哪些内容?

    1.基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
    2.CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
    3.组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
    4.JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
    5.定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。


    4. Bootstrap HTML编码规范语法。

    1.用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。
    2.嵌套元素应当缩进一次(即两个空格)。
    3.对于属性的定义,确保全部使用双引号,绝不要使用单引号。
    4.不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
    5.不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>)。


    5. Bootstrap CSS编码规范语法。

    1.用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。
    2.为选择器分组时,将单独的选择器单独放在一行。
    3.为了代码的易读性,在每个声明块的左花括号前添加一个空格。
    4.声明块的右花括号应当单独成行。
    5.每条声明语句的 : 后应该插入一个空格。
    6.为了获得更准确的错误报告,每条声明都应该独占一行。
    7.所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
    8.对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。,
    9.不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。
    10.对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。
    11.十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。
    12.尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。
    13.为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。
    14.避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。

     



    6. 让 <tbody> 中的每一行对鼠标悬停状态作出响应的类名是什么?
    table-hover

    7. 让表格更加紧凑,单元格中的内补(padding)均会减半的类名是什么?
    table-condensed

    8. 输入框设置 readonly 后的结果是什么?
    禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。

    9. 输入框设置 disabled 属性后的结果是什么?
    禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了 not-allowed 鼠标状态。

    10. 简述下button都有哪些常用的状态,及类名分别是什么?
    默认样式 btn-default
    首选项 btn-primary
    成功 btn-success
    一般信息 btn-info
    警告 btn-warning
    危险 btn-danger
    链接 btn-link

    11. 为 <button> 元素添加 什么 属性,使其表现出禁用状态?
    disabled

    12. 常用的情境背景色都有哪些,并把类名写出?
    首选项 bg-primary
    成功 bg-success
    一般信息 bg-info
    警告 bg-warning
    危险 bg-danger

    13. 简述 .show 和 .hidden 类的作用?
    可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)

    14. 在bootstrap中被删除的文本使用什么标签?
    <del>

    15. 在bootstrap中无用文本使用什么标签?
    <s>

    16. 在bootstrap中额外插入的文本使用什么标签?
    <ins>

    17. 在bootstrap中为文本添加下划线使用什么标签?
    <u>

    18. 在bootstrap中给 <tbody> 之内的每一行增加斑马条纹样式类名是什么?
    table-striped

    19. 简介一下栅格系统。
    栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中,系统会自动分为最多12列。

    20. 在bootstrap中让段落突出显示的类名是什么?
    lead

     

    转载于:https://www.cnblogs.com/shengyang17/p/9068453.html

    展开全文
  • 一,HTML部分 ... HTML是一基本的WEB网页设计语言,XHTML是一个基于XML置标语言最主要不同: XHTML 元素必须被正确地嵌套。...2,前端页面有哪几层构成,分别是什么?作用是什么? 1, 结构层 ...

    一,HTML部分

    1,XHTML和HTML有什么区别

    HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: 
    
    XHTML 元素必须被正确地嵌套。 
    
    XHTML 元素必须被关闭。 
    
    标签名必须用小写字母。 
    
    XHTML 文档必须拥有根元素。
    

      

    2,前端页面有哪几层构成,分别是什么?作用是什么?

    1, 结构层 Html(页面结构内容,骨架) 表示层 
    
    2, CSS(网页的样式和外观) 
    
    3, 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,内联标签有哪些?块级标签有哪些?

    行内标签:a b img em br i span input select 
    
    块级标签:div p h1-h6 form ul dl ol table
    

      

    6,内联标签和块级标签有什么区别?

    内联标签不可以设置宽高,不独占一行; 
    
    块级标签可以设置宽高,独占一行。
    

      

    块级元素 行内元素
    独占一行,默认情况下,其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化
    可以设置width,height属性 行内元素设置width,height属性无效
    可以设置margin和padding属性 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right,其它属性不会起边距效果。
    对应于display:block 对应于display:inline;

    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可以允许重复使用
    

     

    13,两种=HTTP方法:get和post的区别

     

    二,CSS部分

    1,css的基本语法?

    由两个主要的部分构成:选择器,以及一条或多条声明
    

      

    2,css的引入方式有哪些?

    1.内嵌式 <h1 style="font-size: 10px;color: yellow">我是h1战争热诚</h1> 
    
    2.内链式 <style type="text/css"> h2{font-size:30px;color:red;} </style> 
    
    3.外链式 链接式: <link rel="stylesheet" type="text/css" href="./css/index.css"> 
    
    4.导入式: <style type="text/css"> @import url('./css/index.css'); </style>
    

      

    3,css的选择器有哪些?

    1,基本选择器 通配符选择器 标签选择器 id选择器 类选择器 
    
    2,组合选择器 子代选择器 后代选择器 群组选择器 交集选择器 毗邻选择器 兄弟选择器 
    
    3,属性选择器
    

      

    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的引入方式有哪些?

    1,直接编写 
    2,导入文件
    

      

    2,如何在js中定义使用变量?

    1,声明变量时不用声明变量类型. 全都使用var关键字 
    
    2,一行可以声明多个变量.并且可以是不同类型 
    
    3,声明变量时 可以不用var. 如果不用var 那么它是全局变量 
    
    4,变量命名,首字符只能是字母,下划线,$美元符 三选一,余下的字符
    可以是下划线、美元符号或任何字母或数字字符且区分大小写,x与X是两个变量
    

      

    3,js的基本数据类型有哪些?

    1,数字类型(number) 
    2,字符串类型(string) 
    3,布尔类型(boolean) 
    4,Null类型 
    5,Undefined类型
    

      

    4,Null和Undefined的区别?

    null是一个表示”无”的对象,转为数值时为0; 
    
    undefined是一个表示”无”的原始值,转为数值时为NaN
    

      

    5,js有哪些运算符?

    1,算术运算符(+ - * / % ++ -- ) 
    2,比较运算符(> >= < <= != == === !==) 
    3,逻辑运算符(&& || !) 
    4,赋值运算符(= += -= *= /=) 
    5,字符串运算符(+ 连接,两边操作数有一个或两个是字符串就做连接运算)
    

      

    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") 
    
    查找筛选器 如: 查找子标签: $("div").children(".test") $("div").find(".test") 
    
    向下查找兄弟标签: $(".test").next() $(".test").nextAll() $(".test").nextUntil() 
    
    向上查找兄弟标签: $("div").prev() $("div").prevAll() $("div").prevUntil()
    
    查找所有兄弟标签: $("div").siblings() 
    
    查找父标签: $(".test").parent() $(".test").parents() $(".test").parentUntil()
    

      

    6,jQuery的美元符号$有什么作用?

    其实美元符号$只是”jQuery”的别名,它是jQuery的选择器
    

      

    7,body中的onload()函数和jQuery中的document.ready()有什么区别?

    1,我们可以在页面中使用多个document.ready(),但只能使用一次onload()。
    
     2,document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()
    函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。
    

      

     8,jQuery中的Delegate()函数有什么作用?

    1,如果你有一个父元素,需要给其下的子元素添加事件,
    这时你可以使用delegate()了,代码如下:
    
    $("ul").delegate("li", "click", function(){
    $(this).hide();
    });
    
    2,当元素在当前页面中不可用时,可以使用delegate()
    
    //事件代理: 自己完成不了当前的点击事件,交给父级元素做这件事件
    // 事件代理
    $('ul').on('click','.name,.luffy',function () {
    console.log($(this));
    });
    

      

    9,请用jQuery实现,在一个表单中,如果将所有的div元素都设置为绿色。

    $(“div”).css(“color”,”green”)
    

      

    10,jQuery中的hover()和toggle()有什么区别?

    hover()和toggle()都是jQuery中两个合成事件。 
    hover()方法用于模拟光标悬停事件。
    toggle()方法是连续点击事件。
    

      

    11,jquery表单提交前有几种校验方法?分别为?

    formData:返回一个数组,可以通过循环调用来校验 
    jaForm:返回一个jQuery对象,所有需要先转换成dom对象 
    fieldValue:返回一个数组 beforeSend()
    

      

    12,$(this) 和 this 关键字在 jQuery 中有何不同?

    $(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,
    比如用 text() 获取文本,用val() 获取值等等
    
    this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。
    你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)
    
     
    

      

    13,jQuery中 detach() 和 remove() 方法的区别是什么?

    detach() 和 remove() 方法都被用来移除一个DOM元素, 
    两者之间的主要不同在于 
    detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 
    而 remove() 方法则会保持过去被移除对象的引用. 
    
    你也还可以看看 用来向DOM中添加元素的 appendTo() 方法
    
     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]); // 事件会保留
    
     
    

      

     14,你要是在一个 jQuery 事件处理程序里返回了 false 会怎样?

    这通常用于阻止事件向上冒泡。
    

      

    15,如何在点击一个按钮时使用 jQuery 隐藏一个图片?

    $('#ButtonToClick').click(function(){ 
        $('#ImageToHide').hide(); 
    });
    
     
    

      

     16,jQuery.get() 和 jQuery.ajax()方法之间的区别是什么?

        ajax() 方法更强大,更具可配置性, 让你可以指定等待多久,以及如何处理错误。
    get() 方法是一个只获取一些数据的专门化方法。
    

      

    17,用jQuery如何将一个 HTML 元素添加到 DOM 树中的?

    通过appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。
    
    $('<a href='#'>zhanzhengrecheng</a>').appendTo($('ul')); 
        append appendTo 
        prepend prependTo 
        before  insertBefore after insertAfter 
        clone replaceWith replaceAll 
        empty remove detach
    
     
    

      

    18,如何找到所有 HTML select 标签的选中项?

    $('[name=NameOfSelectedTag] :selected') 
    
        这段代码结合使用了属性选择器和 :selected 选择器,结果只返回被选中的选项。
    你可按需修改它,比如用 id 属性而不是 name 属性来获取 <select> 标签。
    

      

    19,remove() 和 empty()的区别?

    remove, 删除节点,并删除元素节点绑定的事件。 
    empty, 清空节点元素的内容,但是节点还存在,只是内容被清空,类似$().html(' ')

     

    20,在jquery中你是如何去操作样式的?

    addClass() 来追加样式 removeClass() 来删除样式 toggle() 来切换样式
    
     
    

      

     21,简述beforeSend方法有的作用?

        发送请求前可以修改XMLHttpRequest对象的函数,在beforeSend中,
    如果返回false 可以取消本次的Ajax请求。XMLHttpRequest对象是唯一的
    参数,所以在这个方法里可以做验证。
    
     
    

      

    22,jquery对象和dom对象是怎样转换的?

        jquery转DOM对象:jQuery对象是一个数组对象,可以通过[index]的丰富
    得到相应的DOM对象还可以通过get[index]去得到相应的DOM对象。 
    DOM对象转jQuery对象:$(DOM对象)
    
     
    

      

    23,radio单选组的第二个元素为当前选中值,该怎么去取?

    $('input[name=items]').get(1).checked = true;
    

      

    24,在ajax中data主要有几种方式?

    三种, html拼接的, json数组, form表单经serialize()序列化的
    

      

    25,jQuery 中的方法链是什么?使用方法链有什么好处?

    方法链是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,
    同时由于只对 DOM 进行了一轮查找,性能方面更加出色
    

      

    26,哪种方式更高效:document.getElementbyId("myId") 还是 $("#myId")?

    第一种,因为它直接调用了 JavaScript 引擎。
    

      

     

    五,bootstrap部分

    1,什么是 Bootstrap?

        Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
    

      

    2,为什么使用 Bootstrap?

        移动设备优先 浏览器支持 容易上手 响应式设计 它为开发人员创建接口提供
    了一个简洁统一的解决方案。 它包含了功能强大的内置组件,易于定制。 它还
    提供了基于 Web 的定制。 它是开源的。
    

      

    3,Bootstrap 包含哪些内容?

    1,基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 
    
    2,CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、
    可扩展的 class,以及一个先进的网格系统。 
    
    3,组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、
    警告框、弹出框等等。 
    
    4,JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接
    包含所有的插件,也可以逐个包含这些插件。 
    
    5,定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
    

      

    4,Bootstrap HTML编码规范语法。

    1,用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 
    
    2,嵌套元素应当缩进一次(即两个空格)。 
    
    3,对于属性的定义,确保全部使用双引号,绝不要使用单引号。 
    
    4,不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。 
    
    5,不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>)。
    

      

    5,Bootstrap CSS编码规范语法。

    1,用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 
    
    2,为选择器分组时,将单独的选择器单独放在一行。 
    
    3,为了代码的易读性,在每个声明块的左花括号前添加一个空格。 
    
    4,声明块的右花括号应当单独成行。 
    
    5,每条声明语句的 : 后应该插入一个空格。 
    
    6,为了获得更准确的错误报告,每条声明都应该独占一行。 
    
    7,所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果
    省略这个分号,你的代码可能更易出错。 
    
    8,对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。
    
    9,不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利
    于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。 
    
    10,对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代
    替 -0.5px)。 
    
    11,十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们
    的形式更易于区分。 
    
    12,尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。 
    
    13,为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选
    的,但是,为了代码的一致性,建议都加上双引号。 
    
    14,避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。
    

      

    6,让 中的每一行对鼠标悬停状态作出响应的类名是什么?

    table-hover
    

      

    7,让表格更加紧凑,单元格中的内补(padding)均会减半的类名是什么?

    table-condensed
    

      

    8,输入框设置 readonly 后的结果是什么?

    禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁
    用的输入框一样),但是仍然保留标准的鼠标状态。
    

      

    9,输入框设置 disabled 属性后的结果是什么?

    禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并
    且还添加了 not-allowed 鼠标状态。
    

      

    10,简述下button都有哪些常用的状态,及类名分别是什么?

    默认样式 btn-default 
    首选项 btn-primary 
    成功 btn-success 
    一般信息 btn-info 
    警告 btn-warning 
    危险 btn-danger 
    链接 btn-link
    

      

    11,常用的情境背景色都有哪些,并把类名写出?

    首选项 bg-primary 
    成功 bg-success 
    一般信息 bg-info 
    警告 bg-warning 
    危险 bg-danger
    

      

    12,简述 .show 和 .hidden 类的作用?

    可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)
    

      

    13,在bootstrap中被删除的文本使用什么标签?

    <del>
    

      

    14,在bootstrap中无用文本使用什么标签?

    <s>
    

      

    15,在bootstrap中额外插入的文本使用什么标签?

    <ins>
    

      

    16,在bootstrap中为文本添加下划线使用什么标签?

    <u>
    

      

    17,在bootstrap中给 之内的每一行增加斑马条纹样式类名是什么?

    table-striped
    

      

    18,简介一下栅格系统。

    栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,
    你的内容就可以放入这些创建好的布局中,系统会自动分为最多12列。
    

      

    19,在bootstrap中让段落突出显示的类名是什么?

    lead
    

      

     

    转载于:https://www.cnblogs.com/wj-1314/p/9550454.html

    展开全文
  • 作为一名程序员,特别是有几年工作经验程序员,相信都会接触过一以上计算机语言,就比如说一般的web开发工程师,起码会php或者java,前端js也是会有的甚至会写python脚本,shell脚本等,不论是哪种语言,...

    作为一名程序员,特别是有几年工作经验的程序员,相信都会接触过一种以上的计算机语言,就比如说一般的web开发工程师,起码会php或者java,前端js也是会的,有的甚至会写python脚本,shell脚本等,不论是哪种语言,他们的符号都是英文字母组成,我想就有一部分人会纳闷了,为啥都是字母呢?就不能是汉字么?其实也真不是,还真有中文的编程语言,比如说易语言,其实说句真心话,虽然本人英文不是怎么擅长吧,但是作为计算机语言来说,并不太喜欢中文的编程语言,这也许是习惯的作用吧,关于这个情况,近期有名网友发出了一些疑问。
    在这里插入图片描述
    据这名网友说,现在中国这么多程序员和互联网巨头,为啥都去学国外的C,JAVA,PHP,Python,go语言,我们就不能发明一个中文版的C语言吗?通俗易懂易学,然后配上纯国产芯片,操作系统;反正计算机只认0和1,字母可以转化,汉字不可以吗?中国人这么多怎么没人做呢?然后他就@阿里,腾讯,百度,针对这名网友的这些疑问,让我们来看看其他网友们都是怎么回答的吧!
    在这里插入图片描述
    网友一:刚上大学?

    上世是朵花:在这名网友看来,问这种问题比较幼稚吧。

    网友二:写成中文就降低门槛了?写程序的门槛就在几个字母不认识?

    上世是朵花:这名网友反问的有道理,其实学习一门计算机语言的门槛不在于是字母还是汉字,大部分计算机语言的指令个数都在50个左右或者50个以下吧,这个与学英语不是同一个概念。

    网友三:易语言,想象你下你的代码,如果。。。那么。。。尝试执行。。。捕获。。。抛出。。。类不存在。。。堆栈溢出

    上世是朵花:没错,看着汉字的代码反而到感觉不习惯,不顺眼了,也许这是习惯的力量吧。

    网友四:感觉写程序这么多年,从来没被人这么小看过。

    上世是朵花:我想楼主并没有这个意思吧,他只是对这方面不太了解。
    在这里插入图片描述
    网友五:你应该不是程序员吧 ,要不你就不会问出这样的问题了

    上世是朵花:同感,感觉楼主应该不是程序员,不过他对这方面还是挺感兴趣的。

    网友六:二人转为啥不用英文唱

    上世是朵花:这个问题问的有意思,就像计算机语言为啥不是中文有一定的类似度吧。

    网友七:中文编程太慢,效率降低90%。打个if和如果,按键次数一比你就知道了

    上世是朵花:没错,是的,这种情况,用英文倒是觉得更简洁了。

    网友八:说真的。写代码常用的,需要认识的单词只有不到20个。剩下的单词都是自己胡编的。要是连20个词都记不住(字母不超过十个)还是不要学了。不适合。楼主不是程序员

    上世是朵花:这名网友说的“胡编的”应该指的是自定义变量吧,这些变量有部分人使用的是中文拼音,有的英语比较好的采用英文单词。
    在这里插入图片描述
    其实,关于为啥计算机语言是英文而不是中文的问题,上面的网友们已经回答出来了,首先英文更简洁啊,键盘上都是些英文字母,特别是常用指令都是很简单的单词,与中文相比,编译起来更节省内存,不论是对人还是对计算机来说,都是有好处的,另外,由于计算机指令是非常少的,并不会给英文不好的程序员带来什么障碍,相信用习惯的人都不会觉得英文符号没有中文符号方便吧。

    那么编程语言就不能用中文吗?答案是当然可以啊,易语言就是一个例子,不过看看易语言的使用情况,就知道大部分人还是喜欢用英文编程的吧。最后,个人认为,如果想开发出一种中文计算机语言当然也是可以,前提是这个语言应该是解决一些问题才行,比如说这个语言具备其他语言不具备的优势,比如java在安全方面具有优势,php适合web开发,python适合抓取脚本或人工智能方面,每一种语言都是在一种特定环境下而产生,都具备某个领域的优势,因此开发一种中文语言就需要具备特定条件下的优势,如果不具备优势,只是将英文换成中文,那么就是重复制造轮子,是在做无用功。

    以上所有图片均来之互联网

    大家好,我是“上世是朵花”。如果你有什么好的看法或者观点可以在评论区展现你的才华,互动交流,如果想进一步了解我,那就关注我吧!(微信公众号:sssdhua )

    展开全文
  • Web页面通常使用哪几种语言开发? HTML结构包含哪两部分? HTML元素由哪几部分组成? 常见HTML标签哪些? HTML DOM是什么结构? 总结回答 HTML + CSS + Java Script Head 和 Body 开始标签(例如<...
  • 所有Web应用都是一运行在网页浏览器中软件,这些软件图形用户界面(Graphical User Interface,简称GUI)即为前端前端又不同于传统客户端软件/后端,因为前端应用...
  • 前端使用流程自动化工具更是没有测试参与了)。对于像基础组件、基础模型之类不常变更且复用较多部分,可以考虑去写测试用例来保证质量。个人比较倾向于先写少量测试用例覆盖到80%+场景...
  • <div><h2>3月份前端资源分享 ...几种常见JavaScript混淆和反混淆工具分析实战</a></li><li><a href="http://gold.xitu.io/entry/56dfce84f3609a005536a53a">让图片加载这件事儿变得更美好</a></li><li><a href=...
  • 自己再做方面知识储备? <p>5)是否了解或精通其他(后端)编程语言? <p>6)做过项目没有什么(视觉、交互)美感?什么是美?你觉得让你...
  • 大家好,我是IT修真院郑州分院第十期学员金俊,一枚正直纯洁善良程序员 今天给大家分享一下,修真院官网前端任务js5,深度思考中知识点——异步编程有哪几种方法来实现 一、背景知识: Javascript语言的执行...
  • 大家好,我是IT修真院郑州分院第十期学员金俊,一枚正直纯洁善良程序员 今天给大家分享一下,修真院官网前端任务js5,深度思考中知识点——异步编程有哪几种方法来实现 一、背景知识: Javascript语言的执行...
  • 引用类型和原始类型具有不同特征和用法,它们包括:大小和速度问题,这种类型以哪种类型数据结构存储,当引用类型和原始类型用作某个类实例数据时所指定缺省值。对象引用实例变量缺省值为 null,而原始...
  • 36、排序都有哪几种方法?请举例 冒泡 选择 快序 二分查找 网上答案: 排序方法有:插入排序(直接插入排序、希尔排序), 交换排序(冒泡排序、快速排序), 选择排序(直接选择排序、堆排序), 归并...
  • 后来这种模式几乎被应用在所有语言的Web开发框架当中。PHPThinkPHP,PythonDijango、Flask,NodeJSExpress,RubyRoR,基本都采纳了这种模式。平常所讲MVC基本是这种服务端MVC。...
  • 先了解了解底下这几种: <pre><code>javascript // 为了方便,我把注释写在json中了。。 [{ "url": , // issue url "id": , // issue id , 是一个随机生成不重复数字串...
  • jpivot学习总结.doc

    2011-12-09 08:38:08
    Cube 中的有以下个属性: 属性名 含义 name Cube 名字 caption 标题 , 在表示层显示 cache 是否对 Cube 对应实表用 mondrian 进行存储 , 默认为 true enabled 是布尔型 , 如果是被激活 ,Cubes ...
  • asp学习相关资料大全

    2009-03-01 14:12:05
    对于 VBscript和Jscript,使用哪种语言并不重要,Web 服务器等同地处理这两种语言,并向用户浏览器发送 HTML 格式化结果。 (2)因为ASP采用script语言(VBscript和Jscript)就可以轻松编写程序,因此这就大节省...
  • java 面试题 总结

    2009-09-16 08:45:34
    引用类型和原始类型具有不同特征和用法,它们包括:大小和速度问题,这种类型以哪种类型数据结构存储,当引用类型和原始类型用作某个类实例数据时所指定缺省值。对象引用实例变量缺省值为 null,而原始...
  • 2. 项目 3 状态 开发中 已上线 已关闭或缺乏维护 ✅ ❌ 社区投票 3. 项目列表 (名字按时间排序,最新添加在最上面) 2021年5月14号添加 一粒豆子(深圳) ✅ 魔豆车主:更适合国人使用...
  • 说法认为函数式语言和命令式语言的不同在于命令式语言是给计算机下达指令而函数式语言是向计算机描述逻辑。这种思路在Flutter UI中得到了体现。Flutter不提倡去操作UI,它当然也基本不会提供操作View...
  • Delphi5开发人员指南

    热门讨论 2012-07-18 16:51:14
    7.6 发布带ActiveX控件应用程序 154 7.7 注册ActiveX控件 155 7.8 BlackJack:一个OCX示范程序 155 7.8.1 纸牌 155 7.8.2 游戏 157 7.8.3 调用ActiveX控件方法 165 7.9 总结 166 第二部分 高级技术 第8章 使用...
  • vector遍历有哪几种方式(尽可能多) cv:Mat 有几种访问方式 map容器增删改查,和unorder_map区别,map底层如何实现 c++智能指针 c++14/17新特性 c++和c语言区别 c++如何实现多态,有几种方式,动态多态和...
  • JavaScript笔记

    2018-09-28 11:21:56
    也是一广泛应用于客户端Web开发脚本语言) 基于对象:网页中一切元素都是假象!不需要new,即可直接使用 事件驱动:JavaScript执行都是由事件引发 解释执行:先读到先执行,后读到会替代先读 可以...
  • 强大的web,命令行监控。 支持前端作为mysq通用代理,后端JDBC方式支持Oracle、DB2、SQL Server 、 mongodb 、巨杉。 支持密码加密 支持服务降级 支持IP白名单 支持SQL黑名单、sql注入攻击拦截 支持分表(1.6) 集群...

空空如也

空空如也

1 2
收藏数 28
精华内容 11
关键字:

web的前端语言有哪几种