简历资料

专业技能

1.移动端前端开发，PC端前端开发

　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局

等方面的不同，但是还是很不系统，所以这里做一个总结。

第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，

一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，

这样的问题在PC端都是遇不到的。

第三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。

第四： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲，

而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。

第五：  微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon等图标的配置，这些还是要会的。

第六： 百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，

在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。

第七： CSS3的动画一定要比较熟练，这在移动端用的还是比较多的。

第八： 一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，

在移动端的差别还是挺大的。

而未压缩的jquery是262kb， 压缩的jquey是83kb，可见两者的差别之大。

第九：最好能掌握一套完整的前端开发架构，比如模块化、打包、压缩、缓存、有条件的还可以做一下自动化测试等等，比较好用的有fis，另外，

想要快速提升自己的前端开发技术，钻研前端架构这块是一个非常好的方向。

第十： 性能优化，包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。

第十一： 比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，

所以可以使用hammer-time.js来移除这300ms的延迟。

 

2.移动端与PC端比有哪些不同？

关于移动端：

1、iPhone上submit按钮bug：iPhone上的控件（、之类的）若不写-webkit-appearance: none; 的话，就算你已经做好了控件的样式，iPhone还是会使用自身默认的样式。
2、移动端的自动播放功能：移动端浏览器大部分是禁用video和audio的autoplay功能，并且，很多移动浏览器也不支持首次js调用play方法进行播放。（此段内容摘抄自百度回答~）
3、手机端的字体显示问题：手机端文本字的大小也有点不一样，iPhone上最小字体可以显示10px，安卓大部分手机由于不是高清显示屏，像素不够只能最小显示12px的字体。编写的时候需要注意。
4、移动端设备的分辨率：iPhone设备分辨率宽度分别为640、750、828，我们这里现在的设计稿一般是使用750的宽度，实际开发时需要将宽高减半，包括字体（字体在小于24px的情况是需要与设计师确认是否为系统字，减半后安卓在字体小于10px时会按照12px大小显示）

 

几点响应屏幕大小的建议和方法：

1、由于现在手机屏幕多种多样，想要兼容所有设备所需要开发的经验必须非常丰富，对设计师的要求也非常高，如果是初学或者开发经验较少，可将设备分为手机、平板、PC三种页面来写。
2、宽度的响应：宽度的响应最近使用的最多的就是类似以下这种写法

width:calc(100% - 10px);

width:-webkit-calc(100% - 10px);

width:-moz-calc(100% - 10px);

好处是可以很好的控制布局，把已知的宽度和整列宽度结合在一起使用，方便设置位置。
另外有些比较奇葩的手机游览器可能不兼容css3的属性，这时你可以使用以下代码来加强你代码的健壮性

@media screen and (max-width: 355px) {         //宽度小于355px时

    ...                                        //添加属性

}

3、图片的处理：由于各个设备的分辨率不同，理论上需要切出不同设备大小的图片，并且判断当前设备的分辨率再调用相对应的图片。但操作起来实在是过于困难，所以一般都是使用同一张图片来显示。

===================补充时间：2015-08-11====================
我来说说calc()的兼容问题：
calc()属性也是近两个月才使用的，目前仅有一台安卓的测试机放到我们自制的app平台上使用时无法读取该样式，该机器在自带的游览器内看是可以正常显示的。我们的处理方法是在使用calc()的上面写上普通的样式，例如：

width:95%;

width:calc(100% - 10px);

width:-webkit-calc(100% - 10px);

width:-moz-calc(100% - 10px);

当游览器无法读取样式时会使用最上面的widht：95%;这样会与实际设计稿有些许出入，所以使用时谨慎对待~

3.W3c标准

W3C标准万维网联盟标准。

　　万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

　　对应的标准也分三方面：

结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

网页通过W3C标准的步骤：



　　1、图片的alt="" 属性必须每张图片都加上，而且对齐属性用CSS来定义。不加不能通过XHTML 1.0的验证。

　　2、每个文档必须加上DTD声明。

　　a) !DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　去掉后能通过验证，但有警告：No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.

　　3、RSS的XML通过时其中的域名地址必须与检测的地址一致，否则会报错。

　　4、标签的链接属性加上JAVASCRIPT事件时必须为#空链,不能为javascript:;或javascript:void(null);

　　5、同一个页面当中，同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。

　　
111

　　
222

　　如果不用W3C来检测的话，在CSS设计里是允许这样做的。

　　那是程序的角度不能相同，CSS上是可以相同的!

　　之前就是相同的产生问题，后面就改成类引用了!

　　6、不可省略双引号或单引号。

　　a) 这个是指属性，标准是双引号~

　　单引号也能通过验证。

　　7、标签之间不可错位嵌套。

　　
原文链接：官方网站

　　这是不允许的。

　　8、所有的标签都使用小写。

　　9、FLASH的标签代码中不能含有,必须采用其它的方法实现。

　　10、所有的标签中含有的属性必须有值(官方的说法)。

　　11、标签必须配对完成,单标签必须以/关闭

　　12、JS和CSS外部引入文件必须加上类型定义。

　　13、所有的样式全部写在外部文件。用类名定义。在使用的地方引用。

　　14、页面上的一些特殊字符必须用HTML代码来标识.如“&”写成“&“

 

4.使用响应式布局

一开始并没有响应式布局这个词语，但是慢慢就出现了一个词——渐进增强，新词的出现总是伴随的旧词一起出现，就好比3G网络出现之前，没人知道自己手机用的是2G网络。所以3G和2G是一起出现了，技术上当然是2G技术先出现。同理，渐进增强出现之后，另一个词[优雅降级]也随之出现了

响应式布局和自适应的区别：

首先两种的方式的解决问题是不一样的。

自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。因此就有人想出了一个办法，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。

 

响应式布局的一些技术点纪录：

(1)允许网页的宽度自动的调整

 

(2)尽量少使用绝对的宽度，多点百分比

 

(3)相对大小的字体:

字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置

 

(4)流式布局，

float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

 

(5)选择加载css，

，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

 

 

但是无论怎样，他们主体的内容和布局是没有变的。

 

响应式的概念应该覆盖了自适应，而且涵盖的内容更多。

 

 

响应式布局等于流动网格布局，

而自适应布局等于使用固定分割点来进行布局。

自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础知识。当然，要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的，但是你至少可以很轻松的确定它是能够正常工作的，因为页面的基本特性和布局结构都是根据语义结构来部署的。

响应式布局概念

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

经过不停地学习和实践，如今总结响应式设计的方法和注意点。其实很简单。

响应式设计的步骤

1. 设置 Meta 标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

[1]（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 ）

3. 通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

@media screen and (max-width: 980px) {

  #head { … }

  #content { … }

  #footer { … }

}

这里的样式就会覆盖上面已经定义好的样式。

4. 设置多种试图宽度

假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：

/** iPad **/

@media only screen and (min-width: 768px) and (max-width: 1024px) {}

/** iPhone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {}

恩，差不多就这样的一个原理。

一些注意的

1. 宽度需要使用百分比

例如这样：

#head { width: 100% }

#content { width: 50%; }

2. 处理图片缩放的方法

• 简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。

img { width: auto; max-width: 100%; }

• 用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： HTML 结构：

     data-src-600px="image-600px.jpg"

     data-src-800px="image-800px.jpg"

     alt="">

CSS 控制：

@media (min-device-width:600px) {

    img[data-src-600px] {

        content: attr(data-src-600px, url);

    }

}

@media (min-device-width:800px) {

    img[data-src-800px] {

        content: attr(data-src-800px, url);

    }

}

3. 其他属性

例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：

5.移动web开发响应式布局总结

首先来理解三个概念。

一、viewport深入理解

　我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

• 1

　该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。 
　 
　点击这里查看viewport详细介绍

二、flexbox弹性盒子布局

　flexbox是css3的新属性，具有新旧两个版本。 
　flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。（这里我们称为flex）。 
　flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。 
　详细的介绍点击链接　flexbox详细介绍

三、媒体查询@media query

　 media query是css3的新属性，针对不同的设备可以使用不同的css属性。用起来很简单，直接在css文件中添加以下代码即可： 
　 @media 媒体设备 and(条件)。 
　 看下面的代码，在不同屏幕宽度下使用不同的css样式：

@media only screen and (max-width: 2000px) { 

    html {

        font-size: 150%;/*20 ÷ 16 × 100% = 62.5%*/

    }

}

@media only screen and (max-width: 1500px) { 

    html {

        font-size: 125%;/*20 ÷ 16 × 100% = 62.5%*/

    }

}

@media only screen and (max-width: 1280px) { 

    html {

        font-size: 110.6%;/*17 ÷ 16 × 100% = 62.5%*/

    }

}

@media only screen and (max-width: 720px) { 

    html {

        font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/

    }

}

@media only screen and (max-width: 600px) { 

    html {

        font-size: 50%;/*8 ÷ 16 × 100% = 62.5%*/

    }

}

@media only screen and (max-width: 414px) { 

    html {

        font-size: 50%;/*7 ÷ 16 × 100% = 62.5%*/

    }

}

@media only screen and (max-width: 375px) { 

    html {

        font-size: 37.5%;/*6 ÷ 16 × 100% = 62.5%*/

    }

}

@media only screen and (max-width: 320px) { 

    html {

        font-size: 31.25%;/*5 ÷ 16 × 100% = 62.5%*/

    }

}

@font-face {

    font-family:"acme";

    src: url(acme.TTF);

}

再看一下如何进行响应式设计：

6.响应式设计总结：

1.使用百分比布局

仅仅使用媒体查询来适应不同的固定宽度设计，只会从一组css到另一组css切换，两种之间没有任何平滑的渐变。当没有命中媒体查询时，变现就会变得不可控制（滚动，换行）。

2.设置弹性图片

img {

    max-width: 100%;

}

• 1
• 2
• 3

很简单，如同第一点布局使用百分比，图片也使用百分比。其背后的思路是：无论何时，都全包在图片的元素宽度范围内，以最大宽度同比完整的显示图片。

3.重新布局，显示与隐藏

当页面达到查手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想。力求页面简单，简洁。所以我们必须要做出一下处理：

1. 同比例缩减元素尺寸
2. 调整页面结构布局
3. 隐藏冗余元素 
   注： 经常要切换的位置元素使用绝对定位，减少重绘提高渲染能力。

解决手机端一像素边框问题： 
在高清屏下，有时候当我们设置手机边框为1px的时候，实际看起来并没有那么精致，那是因为在高清屏幕下1px用2dp去渲染。如果我们将边框设置为border : 0.5px 是否可行呢？答案是仅在ios8下可用。现在一种比较成熟的写法是用到了scacleY(0.5)。我们知道scacleY(value)中，当value>1表示垂直方向的扩大，<1表示缩放，具体写法如下：

.sidebar .folder li { 
/*border-bottom: 0.5px solid #000;*/ 
padding: 8px 0 8px 15px; 
positon: relative; 
} 
.folder li:after { 
position: absolute; 
bottom: 0; 
left: 0; 
content: ''; 
width: 100%; 
border-bottom: 1px solid #ddd; 
-webkit-tranform: scaleY(0.5); 
} 

 

 

7. ajax五步使用法:

1. 1. 建立XMLHTTPRequest对象(创建异步对象)
   2. 注册回调函数(设置请求的url等参数)

当服务器回应我们了,我们想要执行什么逻辑

1. 1. 使用open方法设置和服务器端交互的基本信息(发送请求)

设置提交的网址,数据,post提交的一些额外内容

1. 1. 设置发送的数据，开始和服务器端交互(注册事件)

发送数据

1. 1. 更新界面(在注册的事件中获取 返回的内容,并修改页面显示)

在注册的回调函数中,获取返回的数据,更新界面

• 示例代码:GET

get的数据,直接在请求的url中添加即可

• 示例代码:POST

 

清除浮动

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。

◆清除浮动不是不用浮动，清除浮动产生的不利影响。

◆清除浮动的方法

clear: left  |  right  | both

工作里用的最多的是clear:both;

★额外标签法

 在最后一个浮动元素后添加标签,。 

★给父集元素使用overflow:hidden;    bfc

  如果有内容出了盒子，不能使用这个方法。

★伪元素清除浮动  推荐使用

8 渐进增强优雅降级

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，

然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，

然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。

渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本，

向上兼容的很少。大多数软件都是向下兼容的，比如说Office2010能打开Office2007，Office2006，Office2005，Office2003等建的word文件，但是用Office2003就不能打开用Office2007，Office2010等建的word文件！

 

二者区别

优雅降级和渐进增强只是看待同种事物的两种观点。优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。

关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后

阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (

poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，

其它的差异将被直接忽略。

渐进增强观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它，

有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。

这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

8.浅析JSONP解决Ajax跨域访问问题的思路详解

前几天，工作上有一新需求，需要前端web页面异步调用后台的Webservice方法返回信息。实现方法有多种，本例采用jQuery+Ajax，完成后，在本地调试了一切ok，但是部署到服务器上以后就出现问题了，后台服务调用没有响应，怎么回事？代码没怎么改动，唯一修改的地方就是jQuery的ajax方法中的url地址。难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same- Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档或脚本 在同一域名下的内容。不同域名下的脚本不能互相访问，即便是子域也不行。

但是有时候又不可避免地需要进行跨域操作，这时候“同源策略”就是一个限制了，怎么办呢？采用JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并探讨下JSONP跨域的原理。

这里提到了JSONP，那有人就问了，它同JSON有什么区别不同和区别呢，接下我们就来看看，百度百科有以下说明：

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(网络传输速度快)。

JSONP(JSON with Padding)是JSON的 一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

2 你为什么要使用jquery？

答：因为jQuery是轻量级的框架，大小不到30kb,它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富。

3 你觉得jquery有哪些好处？ 

答案同上

4  你使用jquery遇到过哪些问题，你是怎么解决的？

答：这个答案是开发的，看你是否有相关的项目经验。

例：前台拿不到值，JSON 可是出现的错误(多了一个空格等)这编译是不会报错的 jquery库与其他库冲突；

今天在处理一个数据问题时，发现jQuery.ajax()方法返回的值一直有问题，清除缓存后数据无误，多次测试后发现返回的值都是之前的值，并且一直未执行url(后台为JAVA，设置断点一直未进入)。在网上查找下,发现是未设置type的原因。如果没设置jQuery.ajax的type="Post"，那么ajax就会默认type="Get"，这就会导致之前数据被缓存起来。加上type="Post"，问题解决！

5  你知道jquery中的选择器吗，请讲一下有哪些选择器？

答 ：选择器大致分为:基本选择器，层次选择器，过滤选择器，表单选择器

6  jquery中的选择器 和 css中的选择器有区别吗？

答：jQuery选择器支持CSS里的选择器，

jQuery选择器可用来添加样式和添加相应的行为

CSS 中的选择器是只能添加相应的样式

7  你觉得jquery中的选择器有什么优势？

答：简单的写法  $('ID') 来代替 document.getElementById()函数

支持CSS1 到CSS3 选择器

完善的处理机制(就算写错了id也不会报错)

8  你在使用选择器的时候有有没有什么觉得要注意的地方？

答: 1 选择器中含有".","#","[" 等特殊字符的时候需要进行转译

2 属性选择器的引号问题

3 选择器中含有空格的注意事项

9  jquery对象和dom对象是怎样转换的？

答 ：jquery转DOM对象:jQuery 对象是一个数组对象，可以通过[index]的丰富得到相应的DOM对象

还可以通过get[index]去得到相应的DOM对象。

DOM对象转jQuery对象:$(DOM对象)

10  你是如何使用jquery中的ajax的？

答: 如果是一些常规的ajax程序的话，使用load(),$.get(),$.post(),就可以搞定了，一般我会使用的是$.post() 方法。如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等，这个时候我会使用$.ajax()

11  你觉得jquery中的ajax好用吗，为什么？

答: 好用的。因为jQuery提供了一些日常开发中夙瑶的快捷操作，例 load，ajax，get，post等等，所以使用jQuery开发ajax将变得极其简单，我们就可以集中精力在业务和用户的体验上，不需要去理会那些繁琐的XMLHttpRequest对象了。

12 jquery中$.get()提交和$.post()提交有区别吗？

答: 1 $.get() 方法使用GET方法来进行异步请求的。   

$.post() 方法使用POST方法来进行异步请求的。

2 get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3 get方式传输的数据大小不能超过2KB 而POST要大的多

4 GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

13  jquery中的load方法一般怎么用的？

答：load方法一般在载入远程HTML代码并插入到DOM中的时候用

通常用来从Web服务器上获取静态的数据文件。

如果要传递参数的话，可以使用$.get() 或 $.post()

14  在jquery中你是如何去操作样式的？

答: addClass() 来追加样式

removeClass() 来删除样式

toggle() 来切换样式

15  简单的讲叙一下jquery是怎么处理事件的，你用过哪些事件？

答: 首先去装载文档，在页面家在完毕后，浏览器会通过javascript 为DOM 元素添加事件。

16  你使用过jquery中的动画吗，是怎样用的？

答:使用过。

hide() 和 show() 同时修改多个样式属性。像高度，宽度，不透明度。 fadeIn() 和fadeOut() fadeTo() 只改变不透明度

slideUp() 和 slideDown() slideToggle() 只改变高度

animate() 属于自定义动画的方法.

17  你使用过jquery中的插件吗？

答:看个人的实力和经验来回答了，例如：jQuery_Mobile,jQuery_ui。

18  你一般用什么去提交数据，为什么？

答:一般我会使用的是$.post() 方法。

如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等，这个时候我会使用$.ajax()

19  在jquery中引入css有几种方式？

答:四种 行内式，内嵌式，导入式，链接式

20  你在jquery中使用过哪些插入节点的方法，它们的区别是什么？ 

答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter()    before(),insertBefore()    

内添加

1.append在文档内添加元素

2.appendTo()把匹配的元素添加到对象里

3.prepend()在元素前添加

4.prependTo()把匹配的元素添加到对象前

  外添加

1.after()在元素之后添加

2.before()在元素之前添加

3.insertAfter()把匹配元素在对象后添加

4.insertBefore()把匹配元素在对象前添加

21  你使用过包裹节点的方法吗，包裹节点有方法有什么好处？

答: 1.wrap()把匹配的元素包裹起来

    2.wrapAll()把所有匹配的对象用单个元素包裹

3.wrapInner()将每一个元素的子内容包裹

需要在文档中插入额外的结构化标记的时候可以使用这些包裹的方法，应为它不会帛画原始文档的语义

22  jquery中如何来获取或和设置属性？

答：jQuery中可以用attr()方法来获取和设置元素属性

removeAttr() 方法来删除元素属性

23  如何来设置和获取HTML 和文本的值？

答：html()方法 类似于innerHTML属性 可以用来读取或者设置某个元素中的HTML内容注意：html() 可以用于xhtml文档，不能用于xml文档

Text() 类似于innerText属性 可以用来读取或设置某个元素中文本内容。

val() 可以用来设置和获取元素的值

24  你jquery中有哪些方法可以遍历节点？

答 ：children() 取得匹配元素的子元素集合,只考虑子元素不考虑后代元素  next() 取得匹配元素后面紧邻的同辈元素

 prev() 取得匹配元素前面紧邻的同辈元素

 siblings() 取得匹配元素前后的所有同辈元素

 closest() 取得最近的匹配元素

 find() 取得匹配元素中的元素集合 包括子代和后代

25 子元素选择器和后代选择器元素有什么区别？

答:子代元素是找子节点下的所有元素,后代元素是找子节点或子节点的子节点的元素

26 在jquery中可以替换节点吗？

答：可以 在jQuery中有两者替换节点的方式replaceWith() 和 replaceAll() 例如：在

hao are you

替换成I am fine   $('p').replaceWith('I am fine');

    replaceAll 与replaceWith的用法前后调换一下即可。

27 你觉得beforeSend方法有什么用？

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

28 siblings() 方法 和 $('prev~div')选择器是一样的嘛？

答: $('prev~div') 只能选择'#prev'元素后面的同辈

元素

而siblings()方法与前后的文职无关，只要是同辈节点就都能匹配。

29 你在ajax中使用过JSON吗，你是如何用的？

答:使用过，在$.getJSON()方法的时候就是。

因为 $.getJSON() 就是用于加载JSON文件的

30 有哪些查询节点的选择器？

答：我在公司使用过

:first 查询第一个， :last 查询最后一个，

:odd查询奇数但是索引从0开始 :even 查询偶数，

:eq(index)查询相等的 , :gt(index)查询大于index的 ,

:lt查询小于index :header 选取所有的标题等

31 nextAll()能替代$('prev~siblindgs')选择器吗？

答:能。使用nextAll() 和使用$('prev~siblindgs') 是一样的

32 jQuery中有几种方法可以来设置和获取样式

答 ：addClass() 方法，attr() 方法

33 $(document).ready()方法和window.onload有什么区别？

答: 两个方法有相似的功能，但是在实行时机方面是有区别的。

1 window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

2 $(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

34 jQuery是如何处理缓存的？

答 ：要处理缓存就是禁用缓存.

1 通过$.post() 方法来获取数据，那么默认就是禁用缓存的。

2 通过$.get()方法 来获取数据，可以通过设置时间戳来避免缓存。

可以在URL后面加上+(+new Date)

例 $.get('ajax.xml?'+(+new Date),function () { //内容 });

3 通过$.ajax 方法来获取数据，只要设置cache:false即可。

35 $.getScript()方法 和 $.getJson() 方法有什么区别？

答: 1 $.getScript() 方法可以直接加载.js文件，并且不需要对javascript文件进行处理，javascript文件会自动执行。

2 $.getJson() 是用于加载JSON 文件的 ，用法和$.getScript()

36 你读过有关于jQuery的书吗？

答: 《jquery基础教程》，《jquery实战》，《锋利的jquery》，《巧用jquery》，《jQuery用户界面库学习指南》等

37 $("#msg").text(); 和 $("#msg").text("new content");有什么区别？

答：1 $("#msg").text() 是 返回id为msg的元素节点的文本内容

2 $("#msg").text("new content");是 将“new content”作为普通文本串写入id为msg的元素节点内容中,  

  页面显示粗体的new content

38 radio单选组的第二个元素为当前选中值，该怎么去取？

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

39 选择器中 id，class有什么区别？

答：在网页中 每个id名称只能用一次，class可以允许重复使用

40 你使用过哪些数据格式，它们各有什么特点？

答: HTML格式 ,JSON格式,javascript格式,XML格式

1 HTML片段提供外部数据一般来说是最简单的。

2 如果数据需要重用，而且其他应用程序也可能一次受到影响，那么在性能和文件大小方面具有优势的JSON通常是不错的选择。

3 而当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证。

41 jQuery 能做什么？

答：1 获取页面的元素

2 修改页面的外观

3 改变页面大的内容

4 响应用户的页面操作

5 为页面添加动态效果

6 无需刷新页面，即可以从服务器获取信息

7 简化常见的javascript任务

42 在ajax中data主要有几种方式？

答 ： 三种，html拼接的，json数组，form表单经serialize()序列化的。

43 ：jQuery中的hover()和toggle()有什么区别？

答 hover()和toggle()都是jQuery中两个合成事件。

hover()方法用于模拟光标悬停事件。

toggle()方法是连续点击事件。

44 你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？

答 : 知道, 事件冒泡是从里面的往外面开始触发。

在jQuery中提供了stopPropagation()方法可以停止冒泡。

45 例如 单击超链接后会自动跳转，单击"提交"按钮后表单会提交等，有时候我想阻止这些默认的行为，该怎么办？

答: 可以用 event.preventDefault()

或 在事件处理函数中返回false，即 return false;

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

formData:返回一个数组，可以通过循环调用来校验

jaForm：返回一个jQuery对象，所有需要先转换成dom对象

fieldValue：返回一个数组 beforeSend()

47.在jquery中你有没有编写过插件，插件有什么好处？你编写过那些插件？它应该注意那些？

答: 插件的好处：对已有的一系列方法或函数的封装，以便在其他地方重新利用，方便后期维护和提高开发效率

插件的分类：封装对象方法插件 、封装全局函数插件、选择器插件注意的地方：

1.插件的文件名推荐命名为jquery.[插件名].js，以免和其他的javaScript库插件混

2.所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上

3.插件应该返回一个jQuery对象，以保证插件的可链式操作

4.避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示，这样可以避免冲突或使用闭包来避免

5.所有的方法或函数插件，都应当一分好结尾，否则压缩的时候可能出现问题。在插件头部加上分号，这样可以避免他人的不规范代码给插件带来影响

6.在插件中通过$.extent({})封装全局函数,选择器插件，扩展已有的object对象通过$.fn.extend({})封装对象方法插件

48.怎样给jquery动态附加新的元素?那么怎样给新生成的元素绑定事件呢？

jQuery的html()可以给现在元素附加新的元素

直接在元素还未生成前就绑定肯定是无效的，因为所绑定的元素目前根本不存在。

所以我们可以通过live和livequery来动态绑定事件

49.Jquery与jQuery UI 有啥区别？

    *jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

    *jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。

     提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

50.jquery 中如何将数组转化为json字符串，然后再转化回来？

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

    $.fn.stringifyArray = function(array) {

        return JSON.stringify(array)

    }

    $.fn.parseArray = function(array) {

        return JSON.parse(array)

    }

    然后调用：

    $("").stringifyArray(array)

 

 

 

16. jQuery 面试问题及答案

  　jQuery 面试问题和答案

　　JavaScript 是客户端脚本的标准语言，而 jQuery 使得编写 JavaScript 更加简单。你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到的 JavaScript 库之一，并且现在已经很少有不用jQuery 而使用原生 JavaScript 的新项目了。这对于作为一个 Java web 开发者的你而言意味着你会在一场Java web开发面试中发现许多jQuery的面试问题.

　　早些时候，绝大部分都是 HTTP, HTML, CSS 以及 JavaScript，但最近开始，除了 JavaScript 基础之外，人们也希望知道你是否熟悉 jQuery。这16个jQuery的问题是为web开发者准备的，且也能够非常方便你在参加一次电话或者视频一轮的面试之前纠正一些关键的概念。如果你是  jQuery 新手，那么它也能够帮助你更加好的理解基础知识，并激励你去发现更多东西。

　　1. jQuery 库中的 $() 是什么？（答案如下）

　　$() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解 jQuery。

　　2. 网页上有 5 个

元素，如何使用 jQuery来选择它们？（答案）

　　另一个重要的 jQuery 问题是基于选择器的。jQuery 支持不同类型的选择器，例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你可以用标签选择器来选择所有的 div 元素。jQuery 代码：$("div")，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。

　　3. jQuery 里的 ID 选择器和 class 选择器有何不同？（答案）

　　如果你用过 CSS，你也许就知道 ID 选择器和 class 选择器之间的差异，jQuery 也同样如此。ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。在面试过程中，你有很大几率会被要求使用 ID 选择器和 class 选择器来写代码。下面的 jQuery 代码使用了 ID 选择器和 class 选择器：

1 2	$('#LoginTextBox')  // Returns element wrapped as jQuery object with id='LoginTextBox' $('.active') // Returns all elements with CSS class active.

　　正如你所见，从语法角度来说，ID 选择器和 class 选择器的另一个不同之处是，前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。

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

　　这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。你需要知道如何为按钮设置事件并执行hide() 方法，代码如下所示：

1 2 3

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

　　我喜欢这个问题，因为很贴近实际使用，代码也不复杂。

　　5.  $(document).ready() 是个什么函数？为什么要用它？(answer)

　　这个问题很重要，并且常常被问到。 ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。需要进一步了解的用户可以点击 answer链接查看详细讨论。

　　6. JavaScript window.onload 事件和 jQuery ready 函数有何不同？（答案）

　　这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

　　另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

　　7. 如何找到所有 HTML select 标签的选中项？（答案如下）

　　这是面试里比较棘手的 jQuery 问题之一。这是个基础的问题，但是别期望每个 jQuery 初学者都知道它。你能用下面的 jQuery 选择器获取所有具备 multiple=true 的 标签的选中项：

1	$('[name=NameOfSelectedTag] :selected')

　　这段代码结合使用了属性选择器和 :selected 选择器，结果只返回被选中的选项。你可按需修改它，比如用 id 属性而不是 name 属性来获取

标签。

　　8. jQuery 里的 each() 是什么函数？你是如何使用它的？（答案如下）

　　each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找出所有选中项，然后我们在 alert 框中用 each() 方法来一个个打印它们，代码如下：

1 2 3

$('[name=NameOfSelectedTag] :selected').each(function(selected) {     alert($(selected).text()); });

　　其中 text() 方法返回选项的文本。

　　9. 你是如何将一个 HTML 元素添加到 DOM 树中的？（答案如下）

　　你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。

　　10. 你能用 jQuery 代码选择所有在段落内部的超链接吗？（答案略）

　　这是另一个关于选择器的 jQuery 面试题。就像其他问题那样，只需一行 jQuery 代码就能搞定。你可以使用下面这个 jQuery 代码片段来选择所有嵌套在段落（

标签）内部的超链接（标签）……

　　11. $(this) 和 this 关键字在 jQuery 中有何不同？（答案如下）

　　这对于很多 jQuery 初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

　　12. 你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href? (答案)

　　attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接，然后你可以应用attr()方法来获得他们的href属性的值。下面的代码会找到页面中所有的链接并返回href值：

1 2 3

$('a').each(function(){    alert($(this).attr('href')); });

　　13. 你如何使用jQuery设置一个属性值? (答案)

　　前面这个问题之后额外的一个后续问题是，attr()方法和jQuery中的其它方法一样，能力不止一样. 如果你在调用attr()的同时带上一个值 例如. attr(name, value), 这里name是属性的名称，value是属性的新值。

　　14. jQuery中 detach() 和 remove() 方法的区别是什么? (答案)

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

　　15. 你如何利用jQuery来向一个元素中添加和移除CSS类? (答案)

　　通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态，等等.

　　16. 使用 CDN 加载 jQuery 库的主要优势是什么 ? (答案)

　　这是一个稍微高级点儿的jQuery问题。好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

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

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

　　18. jQuery 中的方法链是什么？使用方法链有什么好处？

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

　　19. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

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

　　20. 哪种方式更高效：document.getElementbyId("myId") 还是 $("#myId")？

 

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

  　jQuery 面试问题和答案

　　JavaScript 是客户端脚本的标准语言，而 jQuery 使得编写 JavaScript 更加简单。你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到的 JavaScript 库之一，并且现在已经很少有不用jQuery 而使用原生 JavaScript 的新项目了。这对于作为一个 Java web 开发者的你而言意味着你会在一场Java web开发面试中发现许多jQuery的面试问题.

　　早些时候，绝大部分都是 HTTP, HTML, CSS 以及 JavaScript，但最近开始，除了 JavaScript 基础之外，人们也希望知道你是否熟悉 jQuery。这16个jQuery的问题是为web开发者准备的，且也能够非常方便你在参加一次电话或者视频一轮的面试之前纠正一些关键的概念。如果你是  jQuery 新手，那么它也能够帮助你更加好的理解基础知识，并激励你去发现更多东西。

　　1. jQuery 库中的 $() 是什么？（答案如下）

　　$() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解 jQuery。

　　2. 网页上有 5 个

元素，如何使用 jQuery来选择它们？（答案）

　　另一个重要的 jQuery 问题是基于选择器的。jQuery 支持不同类型的选择器，例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你可以用标签选择器来选择所有的 div 元素。jQuery 代码：$("div")，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。

　　3. jQuery 里的 ID 选择器和 class 选择器有何不同？（答案）

　　如果你用过 CSS，你也许就知道 ID 选择器和 class 选择器之间的差异，jQuery 也同样如此。ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。在面试过程中，你有很大几率会被要求使用 ID 选择器和 class 选择器来写代码。下面的 jQuery 代码使用了 ID 选择器和 class 选择器：

1 2	$('#LoginTextBox')  // Returns element wrapped as jQuery object with id='LoginTextBox' $('.active') // Returns all elements with CSS class active.

　　正如你所见，从语法角度来说，ID 选择器和 class 选择器的另一个不同之处是，前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。

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

　　这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。你需要知道如何为按钮设置事件并执行hide() 方法，代码如下所示：

1 2 3

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

　　我喜欢这个问题，因为很贴近实际使用，代码也不复杂。

　　5.  $(document).ready() 是个什么函数？为什么要用它？(answer)

　　这个问题很重要，并且常常被问到。 ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。需要进一步了解的用户可以点击 answer链接查看详细讨论。

　　6. JavaScript window.onload 事件和 jQuery ready 函数有何不同？（答案）

　　这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

　　另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

　　7. 如何找到所有 HTML select 标签的选中项？（答案如下）

　　这是面试里比较棘手的 jQuery 问题之一。这是个基础的问题，但是别期望每个 jQuery 初学者都知道它。你能用下面的 jQuery 选择器获取所有具备 multiple=true 的 标签的选中项：

1	$('[name=NameOfSelectedTag] :selected')

　　这段代码结合使用了属性选择器和 :selected 选择器，结果只返回被选中的选项。你可按需修改它，比如用 id 属性而不是 name 属性来获取

标签。

　　8. jQuery 里的 each() 是什么函数？你是如何使用它的？（答案如下）

　　each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找出所有选中项，然后我们在 alert 框中用 each() 方法来一个个打印它们，代码如下：

1 2 3

$('[name=NameOfSelectedTag] :selected').each(function(selected) {     alert($(selected).text()); });

　　其中 text() 方法返回选项的文本。

　　9. 你是如何将一个 HTML 元素添加到 DOM 树中的？（答案如下）

　　你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。

　　10. 你能用 jQuery 代码选择所有在段落内部的超链接吗？（答案略）

　　这是另一个关于选择器的 jQuery 面试题。就像其他问题那样，只需一行 jQuery 代码就能搞定。你可以使用下面这个 jQuery 代码片段来选择所有嵌套在段落（

标签）内部的超链接（标签）……

　　11. $(this) 和 this 关键字在 jQuery 中有何不同？（答案如下）

　　这对于很多 jQuery 初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

　　12. 你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href? (答案)

　　attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接，然后你可以应用attr()方法来获得他们的href属性的值。下面的代码会找到页面中所有的链接并返回href值：

1 2 3

$('a').each(function(){    alert($(this).attr('href')); });

　　13. 你如何使用jQuery设置一个属性值? (答案)

　　前面这个问题之后额外的一个后续问题是，attr()方法和jQuery中的其它方法一样，能力不止一样. 如果你在调用attr()的同时带上一个值 例如. attr(name, value), 这里name是属性的名称，value是属性的新值。

　　14. jQuery中 detach() 和 remove() 方法的区别是什么? (答案)

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

　　15. 你如何利用jQuery来向一个元素中添加和移除CSS类? (答案)

　　通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态，等等.

　　16. 使用 CDN 加载 jQuery 库的主要优势是什么 ? (答案)

　　这是一个稍微高级点儿的jQuery问题。好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

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

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

　　18. jQuery 中的方法链是什么？使用方法链有什么好处？

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

　　19. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

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

　　20. 哪种方式更高效：document.getElementbyId("myId") 还是 $("#myId")？

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

 

 

 

 

 

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

2016年09月14日 15:02:11

• 9534

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：
第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都是浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。
第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。
这篇文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
    问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
    碰到频率:100%
    解决方案：css里    *{margin:0;padding:0;}
    备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
    问题症状:常见症状是ie6中后面的一块被顶到下一行
    碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
    解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
    备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
    问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
    碰到频率：60%
    解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
    备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）
    问题症状：ie6里的间距比超过设置的间距
    碰到几率：20%
    解决方案：在display:block;后面加入display:inline;display:table;
    备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
浏览器兼容问题五：图片默认有间距
    问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
    碰到几率：20%
    解决方案：使用float属性为img布局
    备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
浏览器兼容问题六：标签最低高度设置min-height不兼容
    问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
    碰到几率：5%
    解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七：透明度的兼容css设置
方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
/* css hack*/
我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码ie不兼容，然后用hack来解决。不过hacker还是非常好用的。
使用hacker 我可以吧浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）
ie6认识的hacker 是下划线_ 和星号 *
ie7 遨游认识的hacker是星号 * （包括上面问题6中的 !important也算是hack的一种。不过实用性较小。）
比如这样一个css设置 height:300px;*height:200px;_height:100px;
ie6浏览器在读到 height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当ie6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，ie6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
ie7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px；
剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。
因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
 

最后说一下，严谨型的开发人员会有一套合适自己的RESET.CSS。结合自己的经验尽量规避容易出现不兼容的问题。以减少hack的使用，尽量符合W3C的标准。

 

项目经验：天天有课

写点有些咯搜，为了让你易用理解，你自己进行删减，排版等。这里你的组长是兰瑞智，他是这个产品的WEB前端的开发，与产品经理助理，很多产品的需求实现上他都干了包括原型的设计，角色你就是他的手下，WEB前端实习生和产品经理助理。把这个复制到WPS里整理完，再弄上去。

 

正文：

我在2016年上3月至10月做为实习生参与哈尔滨布卡网络科技公司的【天天有课】产品研发。因为该产品是商业项目（2016年10月上线），能让我学到很多学校里学不到的东西。这个产品【天天有课】O2O模式，是针对小、初、高课外补习的教育平台，即线上选择教师与课程进行购买，线下实地授课的经营模式；产品分为：家长端、教师端。

 

产品运用技术：

服务器（生产环境）：（服务器这块有两个，一个生产环境，一个测试环境，都是在阿里购买的服务器。这块我不懂，你问一下大可，他可能知道怎么描述）

数据库：MySQL

前台：Android、iOS、Web

后台：Java

 

开发人员：

产品经理1人；设计美工2人；后台+数据库7人；Android与iOS各3个；WEB前端3人。我担当WEB前端实习生与产品助理（经常与我的组长和产品经理讨论需求实现）

 

作为一个实习生，我的主要工作是根据组长的安排编写‘家长端’手机页面（主要是微信内嵌浏览器的兼容），不需要考虑太多的内核问题，基本是样式与特效的实现，还有给后台传数据（这里我不会描述，注意这里一般会问到传数据的格式、报文头之类的问题，你也可以不写你传过数据，实习生没让你干）。有时还做为产品助理与组长和产品经理商讨产品需求问题（因为中间有改动过需求发生）。最后测试环节没有参与。

 

收获：

真正参与一个产品的开发过程，了解到一个产品开发所涉及到的很多问题（比如这个产品因为时间紧，没有把原型设计、交互问题完全弄完再开发，而是完成三分之二左右就进行技术开发了，造成后续交互问题大量发生，甚至改动过业务流程），让我在编写时效率更高，知道怎么避免常见问题的发生，同时也理解产品经理的工作，知道怎么与设计沟通，让开发效率更高。经过这个实习，我在技术上与项目开发日常工作中成长很多。

 

注意：这里面最好举一个关于技术的小例子，你怎么出现问题，怎么解决问题。

 

让你懂的：什么是业务流程：比如在京东买东西，是选好商品先添加购物车，再在购物车里去结算，下单，付款，付款结束，形成有效订单，这就是业务流程，这里有一个地方动一下，整个基本就全动了，就得改业务流程，前后台都得动，数据库也得动。

 

咱们的业务流程改动是：家长选老师，选课，购买课时数量*单价，付款，形成有效订单，然后根据时间来判断上课数量进行结束，教师可以从【天天有课】把课时费提走。改后为：选老师，选课，只能购买1课时数量*单价，形成有效订单并绑定教师与家长关系，实地上课，根据绑定关系继续以后实地上课付款。这是让你懂的，一量别人问到，你得说明白。

 

 

开发时遇到的问题及解决办法

1、让容器内文字不管是单行还是多行始终垂直居中

解决：css无法直接控制，用js实现

 

2、IE上超链接使用绝对定位后失效

解决办法：
（1）使用position:relative而不是position:absolute；
（2）添加背景色；
（3）添加透明的背景图片，gif或png，但会增加无意义的http请求；
（4）使用background:url(about:blank)，最佳方案。

 

3、IE6/7/8/9不支持placeholder的两种解决办法

（1）使用input的value作为显示文本

（2）不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面

或者，也可以用这种方式：

 

 

4、IE9以下浏览器不支持background-size属性

三种解决方法：

（1）使用滤镜，但是不能指定任意大小background百分比，要用绝对路径的图片；

（2）引入htc文档，可指定百分比，相对路径

（3）将图片大小变化成实用大小。

 

 5、关于移动端字体问题

• 各个手机系统有自己的默认字体，且都不支持微软雅黑
• 如无特殊需求，手机端无需定义中文字体，使用系统默认
• 英文字体和数字字体可使用 Helvetica ，三种系统都支持

代码：

/* 移动端定义字体的代码 */

body{font-family:Helvetica;}

 

6、ie7下，a下的span手型指针消失的问题

这是ie7的一个bug，二种解决办法：
（1）a标签里面文字链接不要用span包裹，用em或其他标签；
（2）给a标签多加一个样式：cursor: pointer;

 

7、IE7下不支持对block元素的inline-block

对元素设置 _zoom:1; *display:inline;即可

 

 

 

项目中遇到的bug（web前端-持续更新）

input放在a标签里面单击不能获取input的光标（IE环境下）

双击才可以获得焦点，目前有的解决方案：

• 不要给a标签添加href属性；
• 不要在外面套上a标签。

隐藏input标签的光标

项目需求：input值json加载，只读+光标隐藏，通用的解决方案有其他标签模拟，但是不能改input 
所以解决方案为给input加下面这两个属性：

//只读 

readonly="readonly" 

//隐藏光标

unselectable="on"

• 1
• 2
• 3
• 4

返回私有数组

返回数组的一个副本，这样改动就不会影响原数组，只是副本而已

    var array = (function () {

       var days = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];

        return {

            getDays: function () {

                return days.slice();

            }

        }

    })()

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

jquery选择器的扩展

//jQuery contains 选择器，对Contains查找的内容不区分大小写

jQuery.expr[':'].Contains = function (a, i, m) {

    return jQuery(a).text().toUpperCase()

        .indexOf(m[3].toUpperCase()) >= 0;

};

• 1
• 2
• 3
• 4
• 5

例子

<div>johndiv>

<div>Johndiv>

<div>hey hey JOHN hey heydiv>

• 1
• 2
• 3

$('div:Contains("john")') //会选择到两个div

• 1

当一个变量被声明后，扩充其属性并不会改变原数据类型

var a = 'foo'; 

a[1] = 'O'; 

console.log(0.1+0.2==0.3||a); //'foo'

• 1
• 2
• 3

闭包是函数的嵌套定义，而不是函数的嵌套调用

function foo(){

    console.log(a);

}

function bar () {

    var a = 3; 

    foo(); 

}

var a = 2;

bar(); //2

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

DOMContentLoaded兼容IE9以下版本

//jQuery的实现

      // Mozilla, Opera and webkit nightlies currently support this event

      if ( document.addEventListener ) {

          // Use the handy event callback

          document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

          // A fallback to window.onload, that will always work

          window.addEventListener( "load", jQuery.ready, false );

          // If IE event model is used

      } else if ( document.attachEvent ) {

          // ensure firing before onload,

          // maybe late but safe also for iframes

          document.attachEvent( "onreadystatechange", DOMContentLoaded );

          // A fallback to window.onload, that will always work

          window.attachEvent( "onload", jQuery.ready );

          // If IE and not a frame

          // continually check to see if the document is ready

          var toplevel = false;

          try {

              toplevel = window.frameElement == null;

          } catch(e) {}

          if ( document.documentElement.doScroll && toplevel ) {

              doScrollCheck();

          }

      }

        //函数DOMContentLoaded的赋值

        if ( document.addEventListener ) {

            DOMContentLoaded = function() {

                document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );

                jQuery.ready();

            };

        } else if ( document.attachEvent ) {

            DOMContentLoaded = function() {

                // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).

                if ( document.readyState === "complete" ) {

                    document.detachEvent( "onreadystatechange", DOMContentLoaded );

                    jQuery.ready();

                }

            };

        }

// The DOM ready check for Internet Explorer

        function doScrollCheck() {

            if ( jQuery.isReady ) {

                return;

            }

            try {

                // If IE is used, use the trick by Diego Perini

                // http://javascript.nwbox.com/IEContentLoaded/

                document.documentElement.doScroll("left");

            } catch(e) {

                setTimeout( doScrollCheck, 1 );

                return;

            }

            // and execute any waiting functions

            jQuery.ready();

        }

//网友的实现

    // @win window reference

    // @fn function reference

    function contentLoaded(win, fn) {

        var done = false, top = true,

                doc = win.document,

                root = doc.documentElement,

                modern = doc.addEventListener,

                add = modern ? 'addEventListener' : 'attachEvent',

                rem = modern ? 'removeEventListener' : 'detachEvent',

                pre = modern ? '' : 'on',

                init = function(e) {

                    if (e.type == 'readystatechange' && doc.readyState != 'complete') {

                        return;

                    }

                    //load事件在win上，移除事件监听(readystatechange, DOMContentLoaded, load)

                    (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);

                    //保证fn只执行一次

                    if (!done && (done = true)) fn.call(win, e || e.type);

                },

                poll = function() {

                    try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }

                    init('poll');

                };

        if (doc.readyState == 'complete') fn.call(win, 'lazy');

        else {

            if (!modern && root.doScroll) {

                try { top = !win.frameElement; } catch(e) { }

                if (top) poll();

            }

            doc[add](pre + 'DOMContentLoaded', init, false); //触发时，doc.readyState为'interactive'

            doc[add](pre + 'readystatechange', init, false); //会触发两次，readystatechange先触发，再触发DOMContentLoaded, 最后才是load

            win[add](pre + 'load', init, false);

        }

    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112

document.querySelectorAll和getElementsByTagName的区别

//html代码

<ul>

    <li>a</li>

    <li>b</li>

    <li>c</li>

</ul>

//script代码

    var ul = document.querySelector('ul');

    var li = ul.querySelectorAll('li'),

            tagLi = ul.getElementsByTagName('li'); //动态取值 

    ul.appendChild(document.createElement('li'));

    console.log(li.length); //3   li.toString()为[object NodeList]

    console.log(tagLi.length); //4 tagLi.toString()为[object HTMLCollection]

 

Web前端开发的问题汇总

 河南码农教育 2015-08-25 10:53:12

我在平时工作中经常会遇到一些小问题，我将这些问题汇总到了一起，具体如何收集的已经记不清楚了，我将这些问题总结起来，希望对以后的工作能够带来便利和帮助。
1）.margin-top,margin-bottom不能正常显示时
一.有时会遇到外层中的子层使用margin-top不管用的情况；这里我们需要在子层的前后加上一个
   div{height:0;overflow:hidden;}
例
CSS样式表中：
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解决方法：在P标签前后各加2个空的div：

二.网页中头部，中部，底部的居底部有时给个margin-bottom:10px;不管用也是要给个清除属性的.clear{clear:both;font-size:0;line-height:0;}在底部

下加个

2）.div层中高度自适应问题
    网页前端科技人员在设计网页时不可能知道客户在要他们自己的网站内容页里加多少文字或图片内容
    这时我们就不能规定div层的高度，为此应写成min-height:200px;height:auto!important;height:
    200px;overflow:visible;这样ie7,ff,ie6浏览器的高度自适应问题就解决了，这些在
    http://www.xueshengshu.com/网站中用到最多了。
3）.div层中子层的居底部对齐问题
    div中的定位问题有很多也很麻烦，但弄懂了就OK了，在一个大的div层中如何让子层的内容居底部
    对齐就涉及到了position定位问题；
    例
    div层#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
    div子层#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
    100px},最近写的网站中http://www.msgc.net.cn/就用到了
4）.div层中清除clear属性的一小部分应用
   在div中一个大的层里面有很多子层，若是加上边框在ie7、ie6中或许会正常显示，但是在ff中可能
   只会成一条线了，此时在最外层的后面加上

或者设 .wrapfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
 }后在每个浮动外框调用wrapfix；http://www.xueshengshu.com学生书网里用到最多了。
5）.解决IE8下div移位、错位等兼容性问题
   在标签后面的第一句话加上就OK了
6）.单行文字居中与字体样式问题
   在div中一个层中只有一行文字，要让这层中的文字居中，可设line-height的高度和层的高度一样，注意这一层中的文字不能换行，此外，设了line-height时再给定字体样式font:bold 14px "宋体";这时要把font:bold 14px "宋体";放在line-height的前面，否则字体样式不显示文字也不居中；或者将font:bold 14px "宋体";改成font-size:16px;font-weight:bold;font-family:"宋体";就OK了。
7）.鼠标滑上去的特殊效果
 往往为了达到显眼的效果，我们会写到一些好看的效果，方法一在样式表中写：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul标签中调用即可方法二：在样式表中写上：.hover img{filter:alpha(opacity=40);}在div中调用οnmοuseοver="this.className='hover'"οnmοuseοut="this.className=this.classtype"即可
8）.IE6中高度不对问题
 今天在div中给定了高度为1px,其它浏览器显示正常，可是ie6中显示的高度就不对了，这时我给样式表中加了个font-size:0px;line-height:0px;就好了
9）.ul在外框里margin-top不起作用的问题
 在div大框子里用了ul作导航的时候为了合ul层居中显示，设ul的样式表为margin-top:-15px不起作用了，此时应该将div大框设定高度后给个line-height与height一样的高度，ul层就自动居中了。
例如http://www.hopes-home.cn/main.aspx
10）.ff中margin-top有时不起作用的问题
 今天头晕脑涨的把这问题给解决了，这几天写标网都有累似问题，可是一直都是换个写法解决的，今天的这个办法也不只可行试试还是可以的，在一个div外框层中给个宽度例如，#div_wrap{width:280px;height:100%;}
其次在这个框子里设一个.div_top{widh:100%;font:bold12px "宋体";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
 最后在这个div_center里套个ul li时经常会在ff中出问题，也就是在div_top与div_center中莫名的多了几个像素的空格，这时给ul样式表设个display:inline-table即可；
11）.list-style-image的用法
div中经常用到新闻列表前面有图标的样式，有两种简单的方法
一.可以写成ul.menu{width:100%;} ul.menuli{background:url(em_img/small_icon.jpg) 5px center no-repeat;list-style-position:inside;padding-left:18px;}即可在各浏览器正常显示
二. 可以设ul.menu{width:80%;} ul.menuli{list-style-image:url(em_img/small_icon.jpg); }
此时新闻列表前的小图标即可在ie6，ie7，ie8,ff中都正常显示但，ie6需要不断的刷新才能正常显示小图标；
 
12）.
IE6 li:hover兼容问题
］>

13）.ie6下支持position:absolute;
最近写一个短信平台的页面用到的底部固定的层，在ff和ie7,ie8下都是好的，可到ie6下就不行了，转了整个地球终于出来了：
background-attachment:fixed; }
 #bottomNav {background-color:#096; z-index:999; position:fixed; bottom:0; left:0;width:100%; _position:absolute;
 _top: expression_r(documentElement.scrollTop+ documentElement.clientHeight-this.offsetHeight); overflow:visible; }
样式表中调用即可！详细请见“高度自适应屏幕尺寸！”
14）.border:none;与border:0;的区别
1.性能差异
【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。
【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在
【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏
总结：
1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。
2. 如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可
对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。
15）.ie下。png的图片不会有灰色背景出现
注：首推PNG8，即使在IE6中它的透明背景也能被正确显示。PNG8使用的技巧是，输出时把“杂边”设置为和背景接近的颜色
1.几经周折终于把ie6下.png有色图问题解决了，原来IE6.0原本支持png8的索引色透明度，但不支持png或8位以上的alpha 透明度，在IE6.0下，非PNG8格式的透明图片部分，会显示为淡淡的灰绿色。在网页中头部加个代码即可！
2.在样式里写#png-container{
width: 300px;
height: 150px;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imgs/logoB.png',sizingMethod='crop');border:1px solid red;display:block;
}到页面中调用

注意图片要保存为png-8格式的才行！
3. 将背景图片写成style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imgs/dialog/da_fr.png',sizingMethod='scale');background:url(../imgs/dialog/da_fr.png) no-repeat!important;_background: none transparent scroll repeat 0% 0%;);"即可。ff、ie7、ie6下都不会有灰色背景了,这个怎么又失灵了，唉害得我纠结了好几天！。
16）.表格自动换行
唉，最讨厌表格了，可是编辑软件平台有很多报表要用到表格来写，搞的我郁闷半死，要想让表格里td的内容到了一定宽度自动换行就要先设一个全局样式table{table-layout:fixed;}
td{word-break: break-all; word-wrap:break-word;};
17）.iframe高度自适应
给div加一个样式style="position:relative;"
再给iframe 加一个样式如下，只有把iframe定义成绝对定位后，才能自适应高度
style="position:absolute; height:100%;"
18）.ie8下input的bug
我滴个孩来！一个小的两个input输入框，一个是文本框，一个是按钮，却怎么也接不到一起去，可把我给急坏了，这小问题花了我差不多一下午的时间，纠结半天终于给弄出来了，但不知原因，这么写就对了！
要定义input{ vertical-align:middle;}即可！
19）.按钮的链接路径
编写网页前台时会碰到按钮的链接路径怎么给的问题！只要在button里加个οnclick="window.location.href='orderCheck.htm‘"即可！
Add toCart
20）.图片加alt好处
网页中 中的alt是很重要的，这涉及到网页的亲和力问题（http://www.yixieshi.com/ucd/9345.html），网页中的图片若是不加alt在图片没加载出来的时候会什么信息也看不到，加了alt则在加载不出来图片的时候显示图片的信息便于用户查看信息！
21）.
去除chrome浏览器下input和textarea点击选中框
取消chrome下input和textarea的聚焦边框：
input,button,select,textarea{outline:none}
取消chrome下textarea可拖动放大：
textarea{resize:none}
最后，写在一起，重置input和textarea的默认样式：
input,button,select,textarea{outline:none}
textarea{resize:none}
 
21）.页面中流动条问题
打开一个空白页面，观察浏览器右侧，会发现IE浏览器会有一段滚动条的槽道，而Firefox浏览器下没有。
22). 手机, Adroid2.2, 平板电脑, 浏览器, mobile safari
最近给平板电脑做页面，经历了一番探索，搞定了。
下面来说说我的解决方案。


测试设备：
   GT-P1000 三星平板电脑（其实为大号手机）
   操作系统：android2.1
   浏览器：Mobile Safari/533.1
   User Agent打印结果：
       Mozilla/5.0 (Linux; U; Android 2.1;zh-cn; GT-P1000 Build/FROYO) AppleWebKit/533
.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1


1. 在jsp页面顶上增加以下文档类型声明：
Java代码
http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
http://www.w3.org/1999/xhtml">



      如果不加上文档类型声明的话，在浏览器里打开页面后，页面会根据移动设备屏幕的大小自动缩放页面，并且当点击输入框时，页面会自动放大，特别难看。加上声明之后，页面会展现原始大小，手指也可以拖动屏幕进行页面放大。

2. 普通的网页字体大小，在移动设备浏览器上看到的效果是字体变小
所以css的字体大小要做大一点。

我是研究了雅虎移动版的网站：
http://hk.m.yahoo.com/

23）.页面中流动条问题
 
网页中改变input输入框的背景时，当输入的文字超过一定数字时，背景图片会跑，这时只要限定input的maxlength就行了！
 
24）.input在google浏览器下若用背景图片写并且点击上去有效果的话会掉下来
解决的办法是将input里的value=""中加一个空格！ 即写成value=" "
25）.解决ff下面td的换行问题

abcdefghigklmnopqrstuvwxyz1234567890
abcdefghigklmnopqrstuvwxyz1234567890


26)巧妙clearfix解决css浮动问题
如何用clear来解决css浮动问题，应该是众多前端开发人员所关心的问题，是clear还是clearfix，其实我们最终一个目的就是让浮动产生更多的影响，最为一个前端人员，我们有必要深入研究和探讨...
万能float闭合，得知很多朋友都在使用下面的通用解决办法：
1.clear{clear:both;height:0;overflow:hidden;}
上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div。
 
最优浮动闭合方案（这是我们推荐的）：
1.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
2.clearfix{*+height:1%;}
用法很简单，在浮动元素的父云素上添加class="clearfix"。你会发现这个办法也有个弊端，但的确是小问题。改变css写法就ok了：
1.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
2.clearfix{*+height:1%;}
以上写法就避免了改变html结构，直接用css解决了。
很拉轰的浮动闭合办法：
1.clearfix{overflow:auto;_height:1%}
这种办法是我看国外的一篇文章得到的方案，测试了，百试不爽，真的很简单，很给力。喜欢的同学也可以试试这个办法。
 
这种方法是端友radom提供的，测试通过：
1.clearfix{overflow:hidden;_zoom:1;}
chrome下input[type=text]的placeholder不垂直居中的问题解决
line-height: normal;
line-height: 22px\9;
去掉超链接或按钮点击时的虚框线
a,a:hover,input,button{outline:none;blur:expression_r(this.onFocus=this.blur());} input:active {outline:none;}input::-moz-focus-inner{border:0px}
 
修改select默认的样式
select{background:none;width:400px;border:1pxsolid #d8d8d8;}
option{vertical-align: middle;}