web前端知识2

jquery 常用方法&ajaxJquery中,(document).ready()是什么意思？和window.onload的区别？还有其他什么写法或者替代方法？(document).ready() html结构已完全加载时，脚本就可以运行。window.onload 直到所有的东西都加载完成，如图像已被完全接收前，此事件不会被触发。 如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。().ready(handler)，(handler)node.html()和node.text()的区别? $(“body”).html(“

hello

“);//加一个li标签 $(“body”).text(“

hello

“);//加一个字符串”

hello

”.extend的作用和用法?.extend是把将两个或更多对象的内容合并到第一个对象。var object = .extend(,object1,object2);object2若和object1有相同的属性就会把object1的属性覆盖，若有object1没有的属性就会加上。JQuery的链式调用是什么？简单来说就是方法的返回值不是undefined而是this，这些方法每一个都返回该对象，所以调用返回的结果可以被下一次调用所用。(“body”).on(“click”,function () { console.log(1); }).on(“mouseenter”,function () { console.log(2); }).html(“

hello

“).attr(“class”,”body”).css({ border: “1px solid #000”, height: “500px” }).addClass(“ct”).removeClass(“body”).append(“

hello

“)jquery DOM&事件1.说说库和框架的区别？类库就是一些类的集合，只要我们将一些可以复用的类集中放到一个Library中，我们就可以称其为一个类库。类库中的许多元素（如类、结构、接口、枚举、委托等）之间可能有一些关联，但这些关联通常用于支持一个类概念或接口概念的完整表达。框架的第一含义是一个骨架，它封装了某领域内处理流程的控制逻辑！所以我们经常说框架是一个半成品的应用。由于领域的种类是如此众多，所以框架必须具有针对性，比如，专门用于解决底层通信的框架，或专门用于医疗领域的框架。框架中也包含了很多元素，但是这些元素之间关系的紧密程度要远远大于类库中元素之间的关系。框架中的所有元素都为了实现一个共同的目标而相互协作。2.jquery 能做什么？主要是用来操作DOM，方法简单实用还保证兼容性。让前端开发者从兼容性中解放出来，将时间花在业务逻辑上。网页上的特效基本上都能用jquery实现。3.jquery 对象和 DOM 原生对象有什么区别？如何转化？DOM 原生对象无法使用jquery的函数jquery 对象也无法使用DOM 原生对象的方法和属性jquery 对象转为DOM 原生对象：(“.ct”)[0]∗DOM原生对象转为jquery对象：用个(“.ct”)[0]∗DOM原生对象转为jquery对象：用个()包起来，比如(this)vara=document.getElementById(“header”);(a);//这就是jquery对象了4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？.bind()方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象中当前选中的元素，所以，在.bind()绑定事件的时候，这些元素必须已经存在。unbind()是bind()逆向操作，从每一个匹配的元素中删除绑定的事件。.delegate()已经被.on()方法取代。但是，对于早期版本，它仍然是使用事件代理（委派）最有效的方式。.live()这个方法提供了一种手段，将委托的事件处理程序附加到一个页面的document元素，从而简化了在页面上动态添加的内容上事件处理的使用。.on()是官方推荐的方法，提供绑定事件处理的所有功能，可以添加事件代理..off()是unbind()是bind()逆向操作，解除事件绑定。 on的事件代理 (“body”).on(“click”,”.btn”,function()console.log($(this));//此时的$(this)指的是类为btn的对象)5.jquery如何展示/隐藏元素？∗.hide(speed,callback)隐藏对象,callback是在动画完成时执行的函数∗.show(speed,callback)显示对象6.jQuery动画如何使用？.animate(params,[speed],[callback])需要注意的是：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin−left.(‘#clickme’).click(function() { (‘#book’).animate({
    opacity: 0.25,
    height: ‘50px’
  }, 5000, function() {
  });
});
7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

获取内部内容.html()，文本内容.text(); 
设置的话就是在括号内输入参数, 
html(‘立刻抢购‘) 
text(‘立刻抢购’)
8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？(“input”).val();//获取表单用户输入内容,加参数即可设置内容(‘ct′).attr(‘class′);//获取class属性(‘ct’).attr(‘class’,’hello’);//设置class属性为helloajaxajax 是什么？有什么作用？异步的JS和XML通过后台与服务器进行少量的数据交换，AJAX可以实现网页的异步更新，即不重新加载整个页面的情况下，对网页的某部分进行更新。JS只有单线程，但是却有一颗异步的心。为什么JavaScript可以表现出‘多线程’的特点？这其实也是一个错误的问题，能够实现多线程的其实是浏览器进程，它至少有7个以上不同的线程，核心线程有两个，一是浏览器引擎线程，二是渲染引擎线程。而JavaScript引擎线程、网络请求线程、html解析线程、UI线程也都是渲染引擎线程的子线程。[为什么Web前端语言只有JavaScript?—知乎](https://www.zhihu.com/question/24149238/answer/66223440)前后端开发联调需要注意哪些事情？问题的核心就是数据交给谁去处理。数据交给后台处理，这是模式一，数据交给前端处理，这是模式二，数据交给前端分层处理，这是模式三。三种模式没有优劣之分，其使用还是得看具体场景。 既然都是数据的问题，数据从哪里来？这个问题又回到了接口。 * 接口文档由谁来撰写和维护？ * 接口信息的改动如何向前后端传递？ * 如何根据接口规范拿到前后端可用的测试数据？ * 使用哪种接口？JSON，JSONP？ * JSONP 的安全性问题如何处理？后端接口完成前如何 mock 数据？[Mock.js—生成随机数据，拦截 Ajax 请求](http://mockjs.com/) [mock.js-无需等待，让前端独立于后端进行开发](http://cnodejs.org/topic/53f718218f44dfa3511af923)点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?[怎样防止重复发送 Ajax 请求？](https://www.zhihu.com/question/19805411)还是老师的方法好，上了一个状态锁。触发AJAX前先上锁，之后用户再怎么点击都不会触发AJAX，直至代码执行完。用户体验感好。代码封装一个 ajax 函数，能通过如下方式调用function ajax(opts){ var xmlhttp = new XMLHttpRequest(); var len = “”; for(var k in opts.data){ len =len + k+”=”+opts.data[k]+”&”; } len = len.substr(0,len.length-1); if(opts.type.toLowerCase()===”get”){ opts.url = opts.url+”?”+len; xmlhttp.open(opts.type, opts.url,true); xmlhttp.send(); } if(opts.type.toLowerCase()===”post”) { xmlhttp.open(opts.type, opts.url, true); xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”); xmlhttp.send(len); } xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState===4&&xmlhttp.status===200){ var json = JSON.parse(xmlhttp.responseText); opts.success(json); } if(xmlhttp.readyState===4&&xmlhttp.status===404){ opts.error(); } } } document.querySelector(‘#btn’).addEventListener(‘click’, function(){ ajax({ url: ‘getData.php’, //接口地址 type: ‘get’, // 类型， post 或者 get, data: { username: ‘xiaoming’, password: ‘abcd1234’ }, success: function(ret){ console.log(ret); // {status: 0} }, error: function(){ console.log(‘出错了’) } }) });简单描述下web 服务器、PHP、数据库、浏览器是如何实现动态网站的?首先浏览器会拿着用户输入的URL地址寻找对应的IP地址；一层层向上找，先是从浏览器自己的缓存找，找不到就从操作系统缓存找，路由器缓存找，ISP，DNS缓存中找，根域名服务器中找。找到IP后，打包Http请求，创建TCP链接，链接端口为80端口。服务器找到了PHP文件，但是自己无法解析，交给php应用服务器解析；php应用服务器通过SQL语句操作SQL数据库，将数据生成html静态代码。浏览器接收服务器端的html静态代码，然后解读代码，最终将网页呈现出来。2.常见的 WEB 服务器有哪些？1.IIS IIS（Internet信息服务）英文InternetInformationServer的缩写。它是微软公司主推的服务器。IIS的特点具有：安全性，强大，灵活。2.Tomcat Tomcat是Apache软件基金会（ApacheSoftwareFoundation）的Jakarta项目中的一个核心项目，由Apache、Sun和其他一些公司及个人共同开发而成。Tomcat技术先进、性能稳定，而且免费，因而深受Java爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web应用服务器。 3.Zeus Zeus是一个运行于Unix下的非常优秀的Web服务器，据说性能超过Apache，是效率最高的Web服务器之一。 4.Nginx Nginx不仅是一个小巧且高效的HTTP服务器，也可以做一个高效的负载均衡反向代理，通过它接受用户的请求并分发到多个Mongrel进程可以极大提高Rails应用的并发能力。 5.Apache Apache是世界使用排名第一的Web服务器软件。它几乎可以运行在所有的计算机平台上。由于Apache是开源免费的，因此有很多人参与到新功能的开发设计，不断对其进行完善。Apache的特点是简单、速度快、性能稳定，并可做代理服务器来使用。 6.Lighttpd Lighttpd是由德国人JanKneschke领导开发的，基于BSD许可的开源WEB服务器软件，其根本的目的是提供一个专门针对高性能网站，安全、快速、兼容性好并且灵活的webserver环境。具有非常低的内存开销，CPU占用率低，效能好，以及丰富的模块等特点。支持FastCGI,CGI,Auth,输出压缩(outputcompress),URL重写,Alias等重要功能。3.打开浏览器，在地址栏输入 http://jirengu.com 页面展现了饥人谷官网的信息，整个过程发生了什么？（饥人谷官网后台语言 php,web服务器 nginx，数据库 mysql）首先浏览器会拿着用户输入的URL寻找对应的IP地址；一层层向上找，先是从浏览器自己的缓存找，找不到就从操作系统缓存找，路由器缓存找，ISP，DNS缓存中找，根域名服务器中找。找到IP地址后，打包Http请求（包括请求的方式，浏览器的版本，cookies），创建TCP链接，如果失败，报错404;。nginx服务器拿到请求后，交给80端口进程处理，nginx服务器找到了PHP文件，但是自己无法解析，交给php应用服务器解析；php应用服务器通过SQL语句操作MYSQL数据库，将数据生成html静态代码，交给nginx服务器；服务器nginx把获取到的全部数据打包再传回浏览器；浏览器接收服务器端的html静态代码，然后解析HTML生成DOM树，解析CSS生成渲染树，根据HTML代码中的链接下载并解析JavaScript代码，下载与渲染同时进行，最终将网页呈现出来。Dom、事件1.dom对象的innerText和innerHTML有什么区别innerText显示的是元素对象的文本节点的文字部分内容。innerHTML显示的是元素对象的HTML结构字符串格式。两者都可以被赋值新的字符串，从而改变元素对象相应的内容。

点我

var text = document.querySelector(".d1").innerText; var html = document.querySelector(".d1").innerHTML; console.log(text);//"点我" console.log(html);//"点我"

2.elem.children和elem.childNodes的区别？

elem.children只包括子元素对象。
elem.childNodes包括所有的子元素对象和文本节点。

点我

console.log(document.querySelector(".d1").children); console.log(document.querySelector(".d1").childNodes);

3.查询元素有几种常见的方法？

五种

点我

document.querySelector("#divid"); document.querySelectorAll(".d1"); document.getElementsByClassName("d1"); document.getElementById("divid"); document.getElementsByTagName("div");4.如何创建一个元素？如何给元素设置属性？document.createElement创造新元素，setAttribute设置属性，appendChild，insertBefore将新元素添加进去。5.元素的添加、删除？

点我

var p = document.createElement("p"); p.setAttribute("id","pid"); p.setAttribute("class","p1"); p.innerText = "我是p"; document.querySelector(".d1").appendChild(p); var a = document.querySelector('a'); document.querySelector(".d1").removeChild(a);6.DOM0 事件和DOM2级在事件监听使用方式上有什么区别DOM0 是以改变onclick属性的值的方式绑定监听事件函数，只能绑定一个监听函数。 DOM2级 将监听属性和监听函数作为参数传递，以函数的方式绑定。可以绑定多个监听函数。

点我

document.querySelector("a").onclick = function () { console.log("点我a"); }; document.querySelector("a").addEventListener("click",function(){ console.log("点我"); });document.querySelector("a").addEventListener("click",function(){ console.log("我是a"); });7.attachEvent与addEventListener的区别attachEvent 传递的事件参数中要加上”on”，addEventListener则没有。attachEvent 绑定的监听函数里面的this指的是全局对象window。 addEventListener绑定的监听函数里面的this指的是元素对象本身。attachEvent绑定多个函数时，不会按绑定的先后顺序执行，随机的。 addEventListener绑定多个函数时，会按绑定的先后顺序执行.addEventListener有第三个参数，false是事件冒泡，true是事件捕获。 attachEvent只有事件冒泡。8.解释IE事件冒泡和DOM2事件传播机制？1. IE只支持事件冒泡，事件冒泡是指产生事件后，事件作为参数传递进触发最具体元素对象的事件监听函数，该函数开始运行。之后事件向父元素，祖先元素的监听函数传递。2. DOM2第三个参数，可以选择false或者true开启事件冒泡模式或者事件捕获模式，事件的捕获就是事件最先传递给最不具体的元素，最后才传递给最具体的元素。9.如何阻止事件冒泡？ 如何阻止默认事件？e.stopPropagation()阻止事件冒泡，e.preventDefault()阻止默认事件。代码1.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<body><ul class="ct">    <li>这里是</li>    <li>饥人谷</li>    <li>前端6班</li></ul><script>    var ul = document.querySelector(".ct");    ul.addEventListener("click",function (e) {        var e = e.target;        console.log(e.innerText);    })    </script>    2.补全代码，要求：当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.2.当点击每一个元素li时控制台展示该元素的文本内容。<ul class="ct">    <li>这里是</li>    <li>饥人谷</li>    <li>前端6班</li></ul><input class="ipt-add-content" placeholder="添加内容"/><button id="btn-add-start">开头添加</button><button id="btn-add-end">结尾添加</button><script>//todo ...</script>

• 这里是
• 饥人谷
• 前端6班

开头添加结尾添加```3.补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。 Title

• 鼠标放置查看图片1
• 鼠标放置查看图片2
• 鼠标放置查看图片3

var ul = document.querySelector(".ct"); var div = document.querySelector(".img-preview"); ul.addEventListener("click",function (e) { var e = e.target; console.log(e); div.innerHTML = ""; var img = document.createElement("img"); img.setAttribute("src",""); img.setAttribute("src",e.getAttribute("data-img")); div.appendChild(img); });

正则表达式
\d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?

\d 是数字字符，相当于[0-9]；
\w 包括字符数字和下划线，相当于[a-zA-Z0-9_]；
\s 空白字符（空格，tab,回车）；
[a-zA-Z0-9] 指小写字母，大写字母，数字；
\b 单词边界；
. 指除了换行符，结束符以外的所有字符；
* 表示匹配次数0次或多次， 相当于{0，}；
+ 表示匹配次数1次或多次，相当于{1，}；
？可选符号，表示匹配次数0次或1次，相当于{0，1}；
x{3} 表示匹配三次；
^中表示正则从字符串的开头就开始匹配，表示正则匹配字符串的结尾。^$一起用就是表示字符串的所有字符都针对这个正则进行匹配。
贪婪模式和非贪婪模式指什么?

贪婪模式就是尽可能的多匹配，也是默认模式。/#\d+/g就会把#12345全部匹配到。
非贪婪模式就是尽可能的少匹配。/#\d?/g就只会匹配到#1了。
代码题
“`写一个函数trim(str)，去除字符串两边的空白字符
var trim = function (str) {
var re = /^\s*|\s*$/g;
var result;
result = str.replace(re,”“);
return result;
};
使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正则

var hasClass = function (el,cls) {
var re1 = /^\b([\S]*)\b$/g;
if (re1.test((cls))){
var re2 = new RegExp(‘\b’+cls+’\b’,”g”);
if(re2.test(el.className)){
return true;
}
else{
return false;
}
}
else {
return “这不是一个有效的类名”;
}
};
var addClass = function (el,cls) {
if(hasClass(el,cls) === false){
el.className = el.className +” “+cls;
}
else{
return “已经存在”
}
};
var removeClass = function (el,cls) {
if(hasClass(el,cls) === true){
var re3 = new RegExp(‘\b’+cls+’\b’,”g”);
el.className = el.className.replace(re3,”“);
}
};