看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:)

原文地址:https://segmentfault.com/a/1190000012998107

jQuery部分:

  1. jQuery里如何绑定事件?有多少种方式?
  2. jQuery绑定事件时,this指针指向的是?(dom对象还是jQuery对象)
  3. 对于页面中暂时不存在的对象,如果进行事件绑定?
  4. 为什么选用jQuery框架(言下之意就是还有哪些其他的框架,各有什么优缺点,即你对比之后选择的原因)
  5. 有没有考虑过jQuery UI?如何对jQuery UI的样式进行定制?
  6. 有没有自己写作jQuery插件(即如何写jQuery插件)

1.1)个人最常用的使用a.click(function(){})这样的方式,这其实是bind(type,[data],function(eventObject))方式的简写,它的缺点只能为页面已经加载好的元素绑定事件,不能绑定动态添加的元素。适用版本<jquery3.0;

2)live(type, [data], fn)。这个方法看似和bind一样,其实实现大不一样。他是利用事件委托机制将click事件注册到document上。这样使得他可以给动态添加的元素绑定事件。缺点主要是不支持event.stopPropogation(),阻止冒泡的操作。 适用版本<jquery1.7;

3)delegate( selector, types, [data], fn )。这个方法同样是利用事件委托机制,但是是将click事件注册到你指定的附加元素上(一般你可以注册到父元素上)。如:

$( "#members" ).delegate( "li a", "click", function( e ) {} );//members只要为"li a"的父节点即可

这个方法稍复杂,但也没有明显的缺点,但是jquery的新版本把它的功能到新的方法on()中了。适用版本<jquery1.7。

4)on()。on方法合并了以上3种方法。而它的具体实现方式,将根据你的调用方法来决定。参考代码:

 /* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一种方式来调用它们 */

 // Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} ); // Live
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} ); // Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

很明显,on()方法提供了对Bind和Delegate方法的兼容,这也是jquery的作者提倡使用的方法。缺点是可能给初次使用的人一些困惑。与之配套的是,使用.off(event,selector,function(eventObj),map)方法可以解绑事件。适用版本>=jquery1.7。

参考文章:http://www.jb51.net/article/120018.htm

2. this指向dom对象,如果是$(this),则转化为jquery对象。

3.如前所述,对于页面中暂时不存在的对象,可以使用live(),delegate(),on()绑定。在jquery1.7以下使用live(),delegate;jquery1.7及以上推荐使用on()绑定。

4.我个人最开始编写前端代码的时候,在面临选择框架的时候,就选用了jquery。jquery的优点:1)文件较小,压缩后只有10几k;2)使用者广泛,随处可见大量使用jquery的网站,以及各种jquery开发的插件,这对开发的帮助是极大的;3)兼容性好。jquery2.0之前的版本都兼容ie6浏览器,对各其他浏览器的兼容性也非常不错。4)语法直观,很容易上手。例如标签选择器,通过$("")就能准确找到dom进行操作;click事件则直接可以使用$("").click(function(){}),和原生js中的onclick相似,非常直观。

其他的前端框架有:extjs--富客户端框架,收费,外观漂亮;angularjs-比较笨重,有一些兼容性问题等。这些框架我很少使用,也是知道些皮毛,主要还是使用jquery多。

基于jquery的框架,我还使用过semantic UI框架。他里面有一些非常方便实用的功能(比如弹出层,按钮样式,文本框验证等),虽然对于开发大型网站的前端不太适合,但是对于开发cms管理后台则是非常方便的。

5.jquery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+。

jqueryUI类似于semanticUI,虽然对于开发大型网站的前端不太适合,但是对于开发cms管理后台则是非常方便的。jqueryUI的定制,一是可以填写选项,使得插件按指定方式运行;二是可以去编写主题或去专业网站定制主题。参考:http://www.jqueryui.org.cn/tutorial/31.html。

6.没有编写过jquery插件,不过改写过一些jquery的插件(自动填充输入框默认文字,轮转图插件等)。

jquery插件一般会用闭包,格式如下:

(function($){
//插件书写部分
})(jQuery);

  参考:https://blog.csdn.net/qq_18661257/article/details/50434475

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

html+CSS:

  1. 用html+CSS实现这样的布局效果,左栏固定宽度,右栏宽度自适应并填满剩下空间。
  2. 说说<strong>标签和<b>标签的区别,如果让你选择,你会选择使用哪个?
  3. 说说你对对html标签语义化的理解。

1.方法有两种:1)左栏float:left,右栏margin-left:左栏宽度;2.左栏采用绝对定位,右栏还是margin-left:左栏宽度。参考:https://blog.csdn.net/wky_csdn/article/details/72475481

2.<strong>和<b>在页面表现上都是加粗字体。区别是一个字符,一个六个字符。<b>对应bold,单纯的表示加粗;<strong>有强调,重点指出的意味,为了达到这个目的,加粗显示。我选择的话,如果只是加粗,会选择利用css属性font-weight:bold来实现,如果是要强调的话,会使用<strong>。

3.标签语义化的目的是使得页面对应的部分用正确语义标签来表示,可以使得页面内容结构化,便于浏览器解析,便于搜索引擎解析,增加页面可读性和可维护性。所以尽量减少使用<div>,<span>等没有语义的标签,多使用<header><article><section>等标签来表示。

2010年腾讯前端面试题学习(jquery,html,css部分)的更多相关文章

  1. 2010年腾讯前端面试题学习(js部分)

    看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,学习一下:) 原文地址:https://segmentfault.com/a/1190000012998107 js ...

  2. 2019届校招前端面试题整理——HTML、CSS篇

    前言 2019届校招陆陆续续开始了,整理了一些高频的面试题. HTML部分 1. 什么是<!DOCTYPE>? DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行.来 ...

  3. 前端面试题之Html和CSS

    又到了毕业季,很多小伙伴们都到了找工作的时候了,好多小伙伴问我有前端的面试题么?答:没有. 呃呃… … 小伙伴本宝宝真的没有骗你们,我从毕业到现在一直在一家公司没有换过,所以手里压根没有面试题.我们公 ...

  4. 总结一下前端面试题之Html和CSS

    总结一下关于前端的面试题,今天我们分享关于Html和CSS部分的 面试 (1) 1. 常用那几种浏览器测试?有哪些内核(Layout Engine)? 2. 说下行内元素和块级元素的区别?行内块元素的 ...

  5. 前端面试题(HTML、CSS部分)

    HTML.CSS部分: 一.html5有哪些新特性.移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?   新特性: HTML5 现在已经不是 SGML 的 ...

  6. 前端面试题整理—jQuery篇

    1.为什么使用jquery,他有哪些好处? 1)轻量级.代码简洁 2)强大的选择器,出色的DOM操作封装 3)有可靠的事件处理机制 4)浏览器兼容性好 5)支持链式操作 6)支持丰富的插件 2.jqu ...

  7. 前端面试题 之 JavaScript

    昨天我们一起分享了关于html和css的面试题<前端面试题之Html和CSS>,今天我们来分享关于javascript有关的面试题.我面试的时候最害怕面试官问我js了,因为我真心不擅长这个 ...

  8. 史上最全前端面试题(含答案)-A篇

    HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...

  9. 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上

    金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...

随机推荐

  1. js,vue.js一些方法的总结

    push() 可向数组的末尾添加一个或多个元素 pop() 删除并返回数组的最后一个元素 shift()删除并返回数组的第一个元素 unshift() 添加并返回数组的第一个元素 sort()对数组的 ...

  2. find xss

    from :http://blog.sina.com.cn/s/blog_68d342d90100nh7b.html 什么是XSS跨站攻击: http://baike.baidu.com/view/5 ...

  3. 『TensotFlow』RNN中文文本_上

    中文文字预处理流程 文本处理 读取+去除特殊符号 按照字段长度排序 辅助数据结构生成 生成 {字符:出现次数} 字典 生成按出现次数排序好的字符list 生成 {字符:序号} 字典 生成序号list ...

  4. 纯css实现顶部进度条随滚动条滚动

    <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv=" ...

  5. 数据结构与算法之PHP实现二叉树的遍历

    一.二叉树的遍历 以某种特定顺序访问树中所有的节点称为树的遍历,遍历二叉树可分深度优先遍历和广度优先遍历. 深度优先遍历:对每一个可能的分支路径深入到不能再深入为止,而且每个节点只能访问一次.可以细分 ...

  6. 【转】分享前端开发中通过js设置/获取cookie的一组方法

    在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. js方法的完整代码如下: var cookie = { set:function ...

  7. Python---字典常用方法总结

    字典是一种key-value的数据类型,字典里必须写Key和value,字典的优点是取数方便和速度快.字典的特性: 1.字典是无序的,因为它没有下标,用key来当索引,所以是无序的 2.字典的key必 ...

  8. Winform下有关控件焦点问题

    工作中遇到这样一个需求,根据控件焦点弹出对应的代码帮助窗体.比如界面上,有两个TextBox需要进行代码帮助功能的实现. 首先是绑定主窗体的代码帮助事件. 首先要给代码帮助这个按钮绑定事件: priv ...

  9. 更改Linux语言环境

    查看本地语言环境 locale 中文环境: export LC_ALL=zh_CN.UTF- 英文环境:export LC_ALL=en_US.UTF-8 具体设置其他环境百度...

  10. 青蛙跳N阶(变态跳)

    https://www.nowcoder.com/questionTerminal/22243d016f6b47f2a6928b4313c85387 描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级 ...