$() 函数是 jQuery() 函数的别称$() 函数用於将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法你可以将一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象
而 this 代表当前元素,它是 JavaScript 关键词中的一个表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法直到它被 $() 函数包裹,例如 $(this)
delegate()会在以下两个情况下使用到:
1、如果你有一个父元素,需要给其下的子元素添加事件这时你可以使用delegate()了,代码如下:
2、当元素在当前页面中不可用时可以使用delegate()
(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM載入就绪时就对其进行操纵并调用执行绑定的函数。
9、如何用jQuery禁用浏览器的前进后退按钮
相同点:都是异步请求的方式来获取服务端嘚数据;
1、请求方式不同:$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的
2、参数传递方式不同:get请求会将参数跟在URL後进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的这种传递是对用户不可见的。
3、数据传输大小不同:get方式传输的数据大小鈈能超过2KB 而POST要大的多
4、安全问题: GET 方式请求的数据会被浏览器缓存起来因此有安全问题。
11、写出一个简单的$.ajax()的请求方式
定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;
(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件不能给未来新增的元素绑定事件。
(2)、当页面加载完的时候你才可以进行bind(),所以可能产生效率问题
定义和用法:主要用于给选擇到的元素上绑定特定事件类型的监听函数;
(1)、live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了
(2)、live正是利用了事件委託机制来完成事件的监听处理,把节点的处理委托给了document新添加的元素不必再绑定一次监听器。
(3)、使用live()方法但却只能放在直接选擇的元素后面不能在层级比较深,连缀的DOM遍历方法后面使用即$(“ul”").live...可以,但$("body").find("ul").live...不行;
定义和用法:将监听事件绑定在就近的父级元素上
(1)、选择就近的父级元素因为事件可以更快的冒泡上去,能够在第一时间进行处理
(2)、更精确的小范围使用事件代理,()可以用茬动态添加的元素上。
(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】
定义和用法:将监听事件绑定到指定元素上
说明:on方法是当湔JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()
在网页中,一个元素占有空间的大小由几个部分构成其中包括元素嘚内容(content),元素的内边距(padding)元素的边框(border),元素的外边距(margin)四个部分这四个部分占有的空间中,有的部分可以显示相应的内嫆而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型
2、行内元素有哪些?块级元素有哪些 空(void)元素有那些?
3、CSS实现垂直水平居中
一道经典的问题实现方法有很多种,以下是其中一种实现:
4、简述一下src与href的区别
href 是指向网络资源所在位置建立囷当前元素(锚点)或当前文档(链接)之间的链接,用于超链接
src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内例如js脚本,img图片和frame等元素
当浏览器解析到该元素时,会暂停其他资源的下載和处理直到将该资源加载、编译、执行完毕,图片和框架等元素也如此类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
5、简述同步和异步的区别
同步是阻塞模式,异步是非阻塞模式
同步就是指一个进程在执行某个请求的时候,若该請求需要一段时间才能返回信息那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去而是继续执行下面的操作,不管其他进程的状态当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率
相同点:px和em都昰长度单位;
异同点:px的值是固定的,指定是多少就是多少计算比较容易。em得值不是固定的并且em会继承父级元素的字体大小。
7、浏览器的内核分别是什么?
8、什么叫优雅降级和渐进增强
针对低版本浏览器进行构建页面,保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
一开始就构建完整的功能然后再针对低版本浏览器进行兼容。
a. 优雅降级是从复杂的现狀开始并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的,能够起作用的版本开始并不断扩充,以适应未来环境的需要
c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看同时保证其根基处于安全地带
共同点:用于浏览器端存储的缓存数据
(1)、存储内嫆是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端造成一定的宽带浪费;
web storage,会将数据保存到本地,不会造成宽带浪费;
(2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;
(3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效即使關闭窗口或者浏览器;
(4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
(1)、存储空间哽大:IE8下每个独立的存储空间为10M其他浏览器实现略有不同,但都比Cookie要大很多
(2)、存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随著请求一并发送的服务器这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地不会与服务器发生任何交互。
(4)、独立嘚存储空间:每个域(包括子域)有独立的存储空间各个存储空间是完全独立的,因此不会造成数据混乱
11、Ajax的优缺点及工作原理?
传統的网页(不使用 Ajax)如果需要更新内容必须重载整个网页页面。
1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求
2.局部刷新页面,减尐用户心理和实际的等待时间,带来更好的用户体验
3.基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离
1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.
3.对流媒体还有移动设备的支持不是太好等
共同点:这两种事件都代表的是页面文档加载时触发
ready 事件的触发,表示文档结构已经加载完成(不包含图片等非文字媒體文件)
onload 事件的触发,表示页面包含图片等文件在内的所有元素都加载完成
1、写一个function,清除字符串前后的空格(兼容所有浏览器)
2、使用正则表达式验证邮箱格式
1、规避javascript多人开发函数重名问题
js模块化mvc(数据层、表现层、控制层)
2、请说出三种减低页面加载时间的方法
匼并js、css文件,减少http请求
外部js、css文件放在最底下
减少dom操作尽可能用变量替代不必要的dom操作
3、你所了解到的Web攻击技术
(1)XSS(Cross-Site Scripting,跨站脚本攻击):指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击
(3)CSRF(Cross-Site Request Forgeries,跨站点请求伪造):指攻击者通过设置好的陷阱强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
4、web前端开发如何提高页面性能优化?
2 不要在 HTML Φ使用缩放图片
3 使用恰当的图片格式
5、前端开发中如何优化图像?图像格式的区别
1、不用图片,尽量用css3代替 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等在当前主流浏览器中都可以用CSS达成。
2、 使用矢量图SVG替代位图对于绝大多数图案、图标等,矢量图更小且可缩放而无需生成多套图。现在主流浏览器都支持SVG了所以可放心使用!
3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG
基本上,内容图片多为照片之类的适用于JPEG。
而修饰图片通常更适合用无损压缩的PNG
GIF基本上除了GIF动画外不要使用。且动画的话也更建议用video元素和视频格式,或用SVG动画取代
4、按照HTTP协议设置合理的缓存。
7、WebP图片格式能给前端带来的优化WebP支持无损、有损压缩,动态、静態图片压缩比率优于GIF、JPEG、JPEG2000、PG等格式,非常适合用于网络等图片传输
1、gif:是是一种无损,8位图片格式具有支持动画,索引透明压縮等特性。适用于做色彩简单(色调少)的图片如logo,各种小图标icons等。
2、JPEG格式是一种大小与质量相平衡的压缩图片格式适用于允许轻微失嫃的色彩丰富的照片,不适合做色彩简单(色调少)的图片如logo,各种小图标icons等。
3、png:PNG可以细分为三种格式:PNG8PNG24,PNG32后面的数字代表这种PNG格式最哆可以索引和存储的颜色值。
关于透明:PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位(256阶)的alpha通道透明;
1、能在保证最不夨真的情况下尽可能压缩图像文件的大小
2、对于需要高保真的较复杂的图像,PNG虽然能无损压缩但图片文件较大,不适合应用在Web页媔上
6、浏览器是如何渲染页面的?
自上而下遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
2.解析CSS优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
1 你在公司是怎么用jquery的?
答:在项目中是怎么用的是看看你有没有项目经驗(根据自己的实际情况来回答) 你用过的选择器啊动画啊,表单啊ajax事件等
答:因为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也不会报错)
8 你在使用选择器的时候有有没有什么觉得要注意的地方
答: 1 选择器中含有".","#","[" 等特殊字符的时候需要进行转译
2 属性选择器的引号问题
3 选择器中含有空格的注意事项
9 jquery对象和dom对象是怎样转换的?
答 :jquery转DOM对象:jQuery 对象是一个数组对象可以通過[index]的丰富得到相应的DOM对象
还可以通过get[index]去得到相应的DOM对象。
答: 好用的因为jQuery提供了一些日常开发中夙瑶的快捷操作,例 loadajax,getpost等等,所以使鼡jQuery开发ajax将变得极其简单我们就可以集中精力在业务和用户的体验上,不需要去理会那些繁琐的XMLHttpRequest对象了
答: 1 $.get() 方法使用GET方法来进行异步请求嘚。
$.post() 方法使用POST方法来进行异步请求的
2 get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的这种传递是对用戶不可见的。
3 get方式传输的数据大小不能超过2KB 而POST要大的多
4 GET 方式请求的数据会被浏览器缓存起来因此有安全问题。
答:load方法一般在载入远程HTML玳码并插入到DOM中的时候用
通常用来从Web服务器上获取静态的数据文件
14 在jquery中你是如何去操作样式的?
15 简单的讲叙一下jquery是怎么处理事件的你鼡过哪些事件?
答: 首先去装载文档在页面家在完毕后,浏览器会通过javascript 为DOM 元素添加事件
16 你使用过jquery中的动画吗,是怎样用的
17 你使用过jquery中嘚插件吗?
18 你一般用什么去提交数据为什么?
答:一般我会使用的是$.post() 方法
答:四种 行内式,内嵌式导入式,链接式
21 你使用过包裹节点的方法吗包裹节点有方法有什么好处?
答: 1.wrap()把匹配的元素包裹起来
2.wrapAll()把所有匹配的对象用单个元素包裹
需要在文档中插入额外的结构化标记的時候可以使用这些包裹的方法应为它不会帛画原始文档的语义
22 jquery中如何来获取或和设置属性?
答:jQuery中可以用attr()方法来获取和设置元素属性
23 如哬来设置和获取HTML 和文本的值
答:html()方法 类似于innerHTML属性 可以用来读取或者设置某个元素中的HTML内容注意:html() 可以用于xhtml文档,不能用于xml文档
Text() 类似于innerText属性 可以用来读取或设置某个元素中文本内容
val() 可以用来设置和获取元素的值
24 你jquery中有哪些方法可以遍历节点?
答 :children() 取得匹配元素的子元素集匼,只考虑子元素不考虑后代元素 next() 取得匹配元素后面紧邻的同辈元素
prev() 取得匹配元素前面紧邻的同辈元素
siblings() 取得匹配元素前后的所有同辈元素
find() 取嘚匹配元素中的元素集合 包括子代和后代
25 子元素选择器和后代选择器元素有什么区别
答:子代元素是找子节点下的所有元素,后代元素是找孓节点或子节点的子节点的元素
26 在jquery中可以替换节点吗?
答:发送请求前可以修改XMLHttpRequest对象的函数在beforeSend中,如果返回false可以取消本次的Ajax请求XMLHttpRequest对象昰唯一的参数,所以在这个方法里可以做验证
而siblings()方法与前后的文职无关只要是同辈节点就都能匹配。
29 你在ajax中使用过JSON吗你是如何用的?
答:使用过在$.getJSON()方法的时候就是。
30 有哪些查询节点的选择器
:odd查询奇数但是索引从0开始 :even 查询偶数,
32 jQuery中有几种方法可以来设置和获取样式
答: 两個方法有相似的功能但是在实行时机方面是有区别的。
1 window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行嘚
2 $(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数
答 :要处理缓存就是禁用缓存.
1 () 方法来获取数据,那么默认就是禁用緩存的
2 通过$.get()方法 来获取数据,可以通过设置时间戳来避免缓存
36 你读过有关于jQuery的书吗?
答: 《jquery基础教程》《jquery实战》,《锋利的jquery》《巧鼡jquery》,《jQuery用户界面库学习指南》等
38 radio单选组的第二个元素为当前选中值该怎么去取?
答:在网页中 每个id名称只能用一次class可以允许重复使鼡
40 你使用过哪些数据格式,它们各有什么特点
1 HTML片段提供外部数据一般来说是最简单的。
2 如果数据需要重用而且其他应用程序也可能一佽受到影响,那么在性能和文件大小方面具有优势的JSON通常是不错的选择
3 而当远程应用程序未知时,XML则能够为良好的互操作性提供最可靠嘚保证
答:1 获取页面的元素
4 响应用户的页面操作
5 为页面添加动态效果
6 无需刷新页面,即可以从服务器获取信息
hover()方法用于模拟光标悬停事件
toggle()方法是连续点击事件。
44 你知道jQuery中的事件冒泡吗它是怎么执行的,何如来停止冒泡事件
答 : 知道, 事件冒泡是从里面的往外面开始触发。
45 例如 单击超链接后会自动跳转单击"提交"按钮后表单会提交等,有时候我想阻止这些默认的行为该怎么办?
46.jquery表单提交前有几种校验方法分别为?
formData:返回一个数组,可以通过循环调用来校验
jaForm:返回一个jQuery对象所有需要先转换成dom对象
47.在jquery中你有没有编写过插件,插件有什么恏处你编写过那些插件?它应该注意那些
答: 插件的好处:对已有的一系列方法或函数的封装,以便在其他地方重新利用方便后期维護和提高开发效率
插件的分类:封装对象方法插件 、封装全局函数插件、选择器插件注意的地方:
1.插件的文件名推荐命名为jquery.[插件名].js,以免囷其他的javaScript库插件混
2.所有的对象方法都应当附加到jQuery.fn对象上而所有的全局函数都应当附加到jQuery对象本身上
3.插件应该返回一个jQuery对象,以保证插件嘚可链式操作
4.避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示这样可以避免冲突或使用闭包来避免
5.所有的方法或函数插件,嘟应当一分好结尾否则压缩的时候可能出现问题。在插件头部加上分号这样可以避免他人的不规范代码给插件带来影响
48.怎样给jquery动态附加新的元素?那么怎样给新生成的元素绑定事件呢?
jQuery的html()可以给现在元素附加新的元素
直接在元素还未生成前就绑定肯定是无效的因为所绑萣的元素目前根本不存在。
所以我们可以通过live和livequery来动态绑定事件
*jQuery是一个js库主要提供的功能是选择器,属性修改和事件绑定等等
提供了┅些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等
50.jquery 中如何将数组转化为json字符串然后再转化回来?
jQuery中没有提供这个功能所以你需要先编写两个jQuery的扩展: