面试题js,jq(2)

 jq事件中的on有哪些作用？

答：绑定事件，事件委托，传递数据，注册自定义事件，绑定多个事件

 跨域方式有哪些？

1.使用cors ,  2.使用ajax的jsonp ,  3.使用jQuery的jsonp插件

 # 7.  js中如何利用 DOM 操作元素来改变元素里面的内容？二者区别是？

dom.innerText = '内容'
 
 dom.innerHTML = '内容'
 
 text只能改变文本,html还能改变标签

# 8.  通过js修改元素属性的两种方式是什么？

    dom.setAttribute('type','值')
 
    dom.removeAttribute('type')

# 9.  js如何设置属性？（内置属性和自定义属性）

设置属性 .setAttribute("属性","值")
 
<img src="a.jpg">
var img = ...
img.src = 'b.png';

# 10.  js如何获取属性？（内置属性和自定义属性）

获取属性 .getAttribute("属性")

<img src="a.jpg">

var img = ...

console.log(img.src)

请说出三种减低页面加载时间的方法

1.尽量减少页面中重复的HTTP请求数量

2.服务器开启gzip压缩

3. css样式的定义放置在文件头部

4. Javascript脚本放在文件末尾

5.压缩合并Javascript、CSS代码

6.使用多域名负载网页内的多个文件、图片

描述下拉加载的开发思路？

        1.只要上拉, 触发 上拉加载的方法,就让page页+1;  然后调用接口 将页码传过去,拿到数据 追加到 数组中,刷新数据

      2.只要下拉刷新,就让 让 page=1, 请求接口将page传递到后台,拿到数据后,首先将之前存储数据的数组清空,清空,清空,然后再把数据添加带该数组中,刷新数据.   
 

 前端性能优化方式？分别从页面方面和服务器方面描述

网络优化

减少 http 请求数，css，js, image 等文件压缩合并，合理设置 http 请求缓存。
样式放头部，脚本放底部。
使用 CDN。
按需加载，显示进度条或者 loading

css优化

避免使用 CSS 表达式
尽可能减少CSS选择器的层级
减少 TABLE 布局
移除空的样式
图片在加载前提前指定宽高或者脱离文档流，可避免加载后的重新计算导致的页面回流；

JS优化

减少闭包的使用。过多使用闭包会产生很多不销毁的内存，内存过多会导致内存溢出。
避免使用iframe, iframe 会嵌入其它页面，父页面渲染的时候，同时渲染子页面，渲染进度会变慢。
减少 dom 操作，减少页面重绘和重排。使用 css3 动画
尽可能使用事件委托。事件委托可以给动态元素绑定事件，而且基于事件委托实现，整体性能会比一个一个绑定事件高50%。
注意防抖和节流

图片优化：

不用图片，尽量用 css3 代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用 CSS 达成。
使用矢量图 SVG 替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持 SVG 了，所以可放心使用！
使用恰当的图片格式。我们常见的图片格式有 JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于 JPEG。而修饰图片通常更适合用无损压缩的 PNG。GIF 基本上除了 GIF 动画外不要使用。且动画的话，也更建议用 video 元素和视频格式，或用 SVG 动画取代。
按照 HTTP 协议设置合理的缓存。
使用字体图标 webfont、CSS Sprites 等。
用 CSS 或 JavaScript 实现预加载。WebP 图片格式能给前端带来的优化。
WebP 支持无损、有损压缩，动态、静态图片，压缩比率优于 GIF、JPEG、JPEG2000、PG 等格式，非常适合用于网络等图片传输。

图片懒加载与预加载:

图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 data-src 里面，等某些事件触发的时候(比如滚动到底部，点击加载图片)再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载

图片预加载，是指在一些需要展示大量图片的网站，实现图片的提前加载。从而提升用户体验。常用的方式有两种，一种是隐藏在 css 的 background 的 url 属性里面，一种是通过 javascript 的 Image 对象设置实例对象的 src 属性实现图片的预加载。相关代码如下：

图片转为base64格式:

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址;

提升性能: 网页上的每一个图片，都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地.减少https请求。

加密: 让用户一眼看不出图片内容 , 只能看到编码。

方便引用: 在多个文件同时使用某些图片时, 可以把图片转为base64格式的文件, 把样式放在全局中, 比如common.css, 以后在用的时候就可以直接加类名, 二不需要多层找文件路径, 会提升效率

选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

1

$("p")

在页面中选取所有 <p> 元素

id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

1	$("#test")

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

1	$(".test")

事件处理

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

1	$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

1 2 3

$("p").click(function(){     // 动作触发后执行的代码!! }); 常用的 jQuery 事件方法 $(document).ready() $(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在jQuery 语法章节中已经提到过。 click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。 M M M在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素： 1 2 3 $("p").click(function(){     $(this).hide(); }); dblclick() 当双击元素时，会发生 dblclick 事件。 dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数： 1 2 3 $("p").dblclick(function(){     $(this).hide(); }); mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件。 mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。 1 2 3 $("#p1").mouseenter(function(){     alert("You entered p1!"); }); mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。 mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数： 1 2 3 $("#p1").mouseleave(function(){     alert("Bye! You now leave p1!"); }); mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。 mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数： 1 2 3 $("#p1").mousedown(function(){     alert("Mouse down over p1!"); }); mouseup() 当在元素上松开鼠标按钮时，会发生 mouseup 事件。 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数： 1 2 3 $("#p1").mouseup(function(){     alert("Mouse up over p1!"); }); hover() hover()方法用于模拟光标悬停事件。 当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）。 1 2 3 4 5 6 $("#p1").hover(function(){     alert("You entered p1!");     },     function(){     alert("Bye! You now leave p1!"); }); focus() 当元素获得焦点时，发生focus事件。 当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点。 focus()方法触发 focus 事件，或规定当发生focus事件时运行的函数。 1 2 3 $("input").focus(function(){     $(this).css("background-color","#cccccc"); }); blur() 当元素失去焦点时，发生 blur 事件。 blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数： 1 2 3 $("input").blur(function(){     $(this).css("background-color","#ffffff"); });