jquery 的几个问题

1.jq的预加载？与window.onload 区别？
2.jq与js对象的互相转换；
3.jq的链式调用什么意思？
4.jq的事件监听
5.jq的on 、live、delegat、bind 区别？
6.jq的ajax;
7.如何解决$符号的冲突？
8.jq需不需要做兼容？

9:学习新框架的方法;看api.再看...
;

1:$(function(){

})==window.onload=function(){
}

3.点点点。thiｓ的指向．没人调用就指向ｗｉｎｄｏｗ．
ｆａｄｅ　ｉｎ　／ｏｕｔ　不占位置；

1：jq的$(function(){})也就是$(document).ready(function(){})的简写，与之对应的原生js的window.onload事件，这俩者之间到底有什么区别呢？
$(function () {
console.log("ready执行");
});

$(function() {
console.log("ready1执行");
});

window.onload = function () {
console.log('load执行');
};
window.onload = function () {
console.log('load1执行');
}

$(function () {
console.log("ready执行");
});

$(function() {
console.log("ready1执行");
});

window.onload = function () {
console.log('load执行');
};
window.onload = function () {
console.log('load1执行');
}

我们来看一下控制台中输出的结果：
这里写图片描述
这里可以看出两点不同：
1.$(function(){})不会被覆盖，而window.onload会被覆盖，个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中，在对应时机一次出队。
2. $(function(){})在window.onload执行前执行的，$(function(){})类似于原生js中的DOMContentLoaded事件，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

DOM文档加载步骤：
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕，执行window.onload

（2）：
1.JQuery 转 JS：
$().get(0)
$()[0]

2. JS 转 JQuery:

$(js对象)

相互转换,是为了调对方对象的属性或方法.

(3):
jquery中链式调用原理
1.链式调用

$("#mybtn").css("width","100px")

.css("height","100px")

.css("background","red");

2.在对属性进行操作时建议使用JSON形式控制样式

$("#mybtn").css({
width:200,
height:"200",
"background-color":"red"
})

3.事件中this的指向
//事件中this的指向
//JQuery中提示了一个方法,该方法可以将原生JS元素对象转换成JQ对象
//语法结构:$(原生JS元素对象)
console.log($(this).html());
//css方法若传递一个参数可以获取属性名的属性值
//当使用JQ中的方法取值是一般都无法进行链式调用,
//原因是方法内部return的已经不是JQ实例本身了
var $result1 = $("div").css("width");
console.log($result1);

实现链式的基本条件就是要实例对象先创建好，调用自己的方法。

链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this，把对象再返回回来，对象就可以继续调用方法，实现链式操作了。

4.以下是链式调用原理::return this;

(4):
jquery中四种事件监听的区别
2017年08月06日 23:20:18
阅读数：14230
我们知道jquery提供了四种事件监听方式，分别是bind、live、delegate、on,下面就分别对这四种事件监听方式分析。

已知有4个列表元素:

　　列表元素1

　　列表元素2

　　列表元素3

　　列表元素4

1.bind

bind(type,[data],function(eventObject)) bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，

参数函数如下：

type:事件类型，如click、change、mouseover等；

data:传入监听函数的参数，通过event.data取到；

function:监听函数，可传入event对象，这里的event是jquery封装的event对象。

源码:

bind: function( types, data, fn ) {

return this.on( types, null, data, fn );

}

可以看到内部是调用了on方法。

bind的特点就是会把监听器绑定到目标元素上，有一个邦一个，在页面上的元素不会动态添加的时候使用它没有什么问题。

但如果列表中动态增加一个“列表5”，点击它是没有反应的，必须再bind一次才行。

测试代码：

           $(function(){
           $('div').bind('click',function(){
               if($(this).text()=='列表4'){
                   $(this).after('<div>列表5</div>');
               }
               alert($(this).text());

           })
       })
注意：jquery中append()和after()方法都可以添加元素，不同之处是append()是在要添加元素的末尾（在元素内）添加，而after()是在要添加的元素之后（在元素外）。

2.live

live(type, [data], fn)

live的参数和bind一样，它又有什么蹊跷呢，我们还是先瞄一眼源码：

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

}

可以看到live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。

通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）,

使用事件委托的优点一目了然，新添加的元素不必再绑定一次监听器。

将上面代码中的bind改为live后，点击列表5就可以弹出“列表5”了。

注意：live方法在在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除，官方建议使用on代替。

测试代码：

   $(function(){
           $('div').live('click',function(){
               if($(this).text()=='列表4'){
                   $(this).after('<div>列表5</div>');
               }
               alert($(this).text());
           })
       })
3.delegate
将监听事件绑定在就近的父级元素上，
源码: delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，

并规定当这些事件发生时运行的函数。
这下，我们的选择又多了一些灵活性，不单可以利用事件委托，还可以选择委托的对象。
代码，实现效果，点击div，两个p标签的文字颜色都发生变化。

<div>
       <p>div内的p标签</p>
   </div>
   <p>div外的p标签</p>
       $(function(){
           $('div').delegate('p','click',function(){
               $('p').css('color','blue');

           });
4、on
on(type,[selector],[data],fn)
参数与delegate差不多但还是有细微的差别，首先type与selector换位置了，其次selector变为了可选项。
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
代码，实现效果同上，把delegate改为on，第一个参数为click，第二个参数p可写可不写，第三个参数同上。

   $(function(){
           $('div').on('click','p',function(){
               $('p').css('color','red');
           });

(5):
ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

js的ajax与jq的ajax总结

原生ajax原理及应用
ajax基础

1.什么是服务器：网页浏览过程分析，浏览器服务器文件localhost/文件.txt，这种方式和用路径在浏览器上打开的方式是不同的，前者是在服务器上

2.ajax：Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术
通俗的来讲：

（1）没用AJAX的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新

（2）用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷。

（3）AJAX的缺点：前进后退按钮被破坏，搜索引擎支持不够，开发调试工具缺乏

与传统的web应用比较

（1）传统的web应用：

传统的Web应用交互由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

（2）ajax：

AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的Web Service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了

Ajax相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

同步过程

这里写图片描述

异步过程

这里写图片描述

同步：脚本会停留并等待服务器发送回复然后再继续

异步：脚本允许页面继续其进程并处理可能的回复

异步更新是后台和服务器进行少量数据交换，即不重新加载整个网页就可以对网页的某部分进行更新。而AJAX减少了用户的等待时间。展示给用户的还是同一个页面，用户感觉页面刷新，也看不到到JavaScript后台进行的发送请求和接受响应。

同步和异步之间相差一个XMLHttpRequest（XHR）的对象，来让后台与服务器之间交换数据，并同时对网页进行部分更新（即异步请求，局部刷新）

跨域：不同的域之间相互请求资源

ajax的跨域问题：

默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源，这种安全策略可以预防某些恶意行为。

实现合理的跨域请求对开发某些浏览器应用程序至关重要。

主要有以下几种方法：

a.CORS，跨域资源共享，定义了必须在访问跨域资源时，浏览览器与服务器该如何沟通，基本思想是，使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是否成功。注意，请求和响应都不包含cookie信息。IE8通过XDomainRequest对象支持CORS，其它浏览器通过XHR对象原生支持CORS。

b.JSONP，填充式JSON，应用JSON的一种新方法。
它是被包含在函数调用中的JSON，例如，
callback（{“name”： “abc”}）；
JSONP由两部分组成，毁掉函数和数据。毁掉函数是当响应到来时应该在页面中调用的函数。数据时传入毁掉函数中的JSON数据。

JSONP只支持 “GET” 请求，但不支持 “POST” 请求。

var eleScript= document.createElement("script"); //创建一个script元素

eleScript.type = "text/javascript"; //声明类型、

eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性引入跨域访问的url

document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素

ajax实现的步骤

创建XHR对象，也就是创建一个异步调用对象
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新
如何使用XHR

①创建XHR对象
1
2
var request = new XMLHttpRequest();

注意ie5和ie6不支持
（
兼容方法：var request = new ActiveXObject("Microsoft.XMLHTTP");
）

②进行HTTP请求
1
2
http是一种无状态协议（服务端不保留相关信息，无记忆），可以使浏览器从服务器请求信息和服务

HTTP请求

完整请求过程：

这里写图片描述

将以上分为两个过程：请求和响应

a.请求过程
1.http请求的方法，如GET或者POST请求
2.正在请求的URL地址（发出请求的地址）
3.请求头，如客户端环境的信息，身份验证信息等
4.请求体，包含客户提交的查询字符串信息，表单信息等

（请求头和请求体之间有一个空行，表示请求头已经结束，开始运行请求体）

请求方法：

GET：用于获取数据（如：浏览贴子）的默认方法，多用于查询，用url传递参数，任何人可见。

POST：用于上传数据（如：用户注册），用于修改服务器资源，对数量无限制

GET、POST的区别 :

GET在url里传送数据：安全性低、容量小

POST安全性一般、容量几乎无限

GET便于分享（商品地址和url有关），适合获取，且会缓存

POST更适合上传（图片等）

b.响应组成
1.一个数字和文字组成的状态码，用来显示请求成功还是失败
2.响应头，包含服务器类型、日期类型、内容类型、长度等
3.响应体即相应正文

③XMLHttpRequest请求

方法一、open（method，url，async）

method:发送请求方法（ GET、POST不分大小写）

url:请求地址（相对地址或者绝对地址）

async:请求异步（即true）或者同步(false),默认异步

方法二、send(string)发送到服务器

get时参数不写或者null

post时参数必须填写

例子

request.open("GET","get.php",ture);
request.send();
//get.php地址

//创建王二狗
request.open("POST","create.php",ture);

//设置http头信息，发送表单。setRequestHeader必须在open和send中间
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=王二狗&sex=男")；

③XMLHttpRequest响应

属性

这里写图片描述

readystate属性：监听这个属性来判断事件是否响应完成，并取得成功

这里写图片描述

重要

例子：（php不想看）

查询员工信息，可以通过输入员工编号查询员工基本信息

新建员工信息，包含员工姓名，员工编号，员工姓名，员工职位

（需要用php页面实现查询员工和新建员工的后台接口）

服务端由php实现

客户端实现

<h1>员工查询</h1>
<label>请输入员工编号：</label>
<input type="text" id="keyword"/>
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName"/><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber"/><br>
<label>请输入员工性别：</label>
<select id="staffSex">
<option>男</option>
<option>女</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob"/><br>
<button id="save">保存</button>
<p id="createResult"></p>

jQuery的ajax
Jquery是将原生的Javascript封装好了成为了一个库,

jquery.ajax([settings])

1.type:类型，“POST”或 “GET”,默认为“GET”

2.url : 发送请求的地址

3.data：是一个对象，连同请求发送到服务器的数据

4.dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”

5.success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串

6.error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。

将js的ajax进行jq的改进

//引入jquery
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
//初始化jquery
$(document).ready(function(){
//GET请求
$("#search").click(function(){
//$.ajax是对js中代码的封装，仅需要配置一些属性
$.ajax({
type:"GET",
url:"service.php?number="+$("#keyword").val(),
dataType:"json",
success:function(data){
if(data.success){
$("#searchResult").html(data.msg);
}else{
$("#searchResult").html("出现错误："+data.msg);
}
},
error:function(jqXHR){
alert("发生错误："+jqXHR.status);
}
});
});

//post请求
$("#save").click(function(){
$.ajax({
type:"POST",
url:"service.php",
dataType:"json",
//不用拼成url格式，直接用json拼写
data:{
name:$("#staffName").val(),
number:$("#staffNumber").val(),
sex:$("#staffSex").val(),
job:$("#staffJob").val(),
},
success:function(data){
if(data.success){
$("#createResult").html(data.msg);
}else{
$("#createResult").html("出现错误："+data.msg);
}
},
error:function(jqXHR){
alert("发生错误："+jqXHR.status);
}
});
});

});
</script>

在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

jQuery使用$符号作为 jQuery 的简介方式。换种方式$是JQuery的别名。

Ajax是一种技术，而JQuery只是实现了这种技术的一种方式，当然还有别的方式，可以实现AJAx这种技术。

(7)

一.当jquery在common.js之前引入
方法1：将$改写为jQuery

方法：这种情况需要jQuery.noConflict();让出$符号的使用权限，通过上述的自定义别名的方式即可解决

(8):可以不见兼容。ie8以下的；

（9）jq.js（未压缩.可用性高。加载慢）和js.min.js（压缩后的开发的。）

$.ajax({

url:"json.txt",

succ:function(date){

}

})

$.get("json1.txt")

#(head).load("wenjian")//公用头部；

$.entend{

}

猜你喜欢