Jquery与JS结合学习笔记

站长苏飞

一.选择器

[HTML] 纯文本查看 复制代码

//1.选择body选择其它的可以直接使用这个方法，一定要加上*而且中间要有空格;
$("body *"）
 
//2.选择带名称的直接使用;
$("#名称必须是ID") 
 
//3.这样是选择名称为classname的所有样式;
$(".classname") 

二.方法
1.在这里我们先来说一下Ajax方法吧 在介绍使用之前我们先来了解一下关于这方面的W3c给的标准吧请看下面

1. w3cJqueryAjax标准
   
2. 
   
3. 参数
   
4. options
   
5. 类型：Object
   
6. 
   
7. 可选。AJAX 请求设置。所有选项都是可选的。
   
8. async
   
9. 类型：Boolean
   
10. 
    
11. 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
    
12. 
    
13. 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
    
14. beforeSend(XHR)
    
15. 类型：Function
    
16. 
    
17. 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
    
18. 
    
19. XMLHttpRequest 对象是唯一的参数。
    
20. 
    
21. 这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
    
22. cache
    
23. 类型：Boolean
    
24. 
    
25. 默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
    
26. 
    
27. jQuery 1.2 新功能。
    
28. complete(XHR, TS)
    
29. 类型：Function
    
30. 
    
31. 请求完成后回调函数 (请求成功或失败之后均调用)。
    
32. 
    
33. 参数： XMLHttpRequest 对象和一个描述请求类型的字符串。
    
34. 
    
35. 这是一个 Ajax 事件。
    
36. contentType
    
37. 类型：String
    
38. 
    
39. 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
    
40. 
    
41. 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
    
42. context
    
43. 类型：Object
    
44. 
    
45. 这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
    
46. 
    
47. 就像这样：
    
48. $.ajax({ url: "test.html", context: document.body, success: function(){
    
49.         $(this).addClass("done");
    
50.       }});
    
51. dataObject
    
52. 类型：String
    
53. 
    
54. 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
    
55. dataFilter
    
56. 类型：Function
    
57. 
    
58. 给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
    
59. dataType
    
60. 类型：String
    
61. 
    
62. 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
    
63. •"xml": 返回 XML 文档，可用 jQuery 处理。
    
64. •"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
    
65. •"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
    
66. •"json": 返回 JSON 数据 。
    
67. •"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
    
68. •"text": 返回纯文本字符串
    
69. error
    
70. 类型：Function
    
71. 
    
72. 默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
    
73. 
    
74. 有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
    
75. 
    
76. 如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
    
77. 
    
78. 这是一个 Ajax 事件。
    
79. global
    
80. 类型：Boolean
    
81. 
    
82. 是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
    
83. ifModified
    
84. 类型：Boolean
    
85. 
    
86. 仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
    
87. jsonp
    
88. 类型：String
    
89. 
    
90. 在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
    
91. jsonpCallback
    
92. 类型：String
    
93. 
    
94. 为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
    
95. password
    
96. 类型：String
    
97. 
    
98. 用于响应 HTTP 访问认证请求的密码
    
99. processData
    
100. 类型：Boolean
     
101. 
     
102. 默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
     
103. scriptCharset
     
104. 类型：String
     
105. 
     
106. 只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
     
107. success
     
108. 类型：Function
     
109. 
     
110. 请求成功后的回调函数。
     
111. 
     
112. 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
     
113. 
     
114. 这是一个 Ajax 事件。
     
115. traditional
     
116. 类型：Boolean
     
117. 
     
118. 如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
     
119. timeout
     
120. 类型：Number
     
121. 
     
122. 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
     
123. type
     
124. 类型：String
     
125. 
     
126. 默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
     
127. url
     
128. 类型：String
     
129. 
     
130. 默认值: 当前页地址。发送请求的地址。
     
131. username
     
132. 类型：String
     
133. 
     
134. 用于响应 HTTP 访问认证请求的用户名。
     
135. xhr
     
136. 类型：Function
     
137. 
     
138. 需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
     
139. 
     
140. 
     
141. 回调函数
     
142. 
     
143. 如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
     
144. 
     
145. beforeSend
     
146. 
     
147. 在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
     
148. 
     
149. error
     
150. 
     
151. 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
     
152. 
     
153. dataFilter
     
154. 
     
155. 在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
     
156. 
     
157. success
     
158. 
     
159. 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
     
160. 
     
161. complete
     
162. 
     
163. 当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
     
164. 
     
165. 
     
166. 数据类型
     
167. 
     
168. $.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。
     
169. 
     
170. 通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text。
     
171. 
     
172. 其中，text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。
     
173. 
     
174. 注意：我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。
     
175. 
     
176. 如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。
     
177. 
     
178. 如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。如果浏览器不支持，则使用一个函数来构建。
     
179. 
     
180. JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback，可以通过设置 $.ajax() 的 jsonp 参数。
     
181. 
     
182. 注意：JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。
     
183. 
     
184. 如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了 <script> 标签而不是 XMLHttpRequest 对象。这种情况下，$.ajax() 不再返回一个 XMLHttpRequest 对象，并且也不会传递事件处理函数，比如 beforeSend。
     
185. 
     
186. 
     
187. 发送数据到服务器
     
188. 
     
189. 默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST 方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。
     
190. 
     
191. data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。
     
192. 
     
193. 
     
194. 高级选项
     
195. 
     
196. global 选项用于阻止响应注册的回调函数，比如 .ajaxSend，或者 ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在 ajaxSend 里禁用这个。
     
197. 
     
198. 如果服务器需要 HTTP 认证，可以使用用户名和密码可以通过 username 和 password 选项来设置。
     
199. 
     
200. Ajax 请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过 jQuery.ajaxSetup 来全局设定，很少为特定的请求重新设置 timeout 选项。
     
201. 
     
202. 默认情况下，请求总会被发出去，但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果，可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置 ifModified 为 true。
     
203. 
     
204. scriptCharset 允许给 <script> 标签的请求设定一个特定的字符集，用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时，这特别好用。
     
205. 
     
206. Ajax 的第一个字母是 asynchronous 的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax() 的 async 参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成 false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。
     
207. 
     
208. $.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象，但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的 .abort() 可以在请求完成前挂起请求。

复制代码

例子

[HTML] 纯文本查看 复制代码

//newbtn事件
    $("#newbtn").click(function () {
        var strdomin = sethead($.trim($("#site").val()));
        $.ajax({
            type: "post",
            timeout: "3000",
            contentType: "application/json; charset=utf-8",
            url: "hander/ContraryFriend.ashx",
            data: { domain: $.trim($("#site").val()), strdo: "cfquery" },
            beforeSend: function () {
                $("#show").html(loadimage);
            },
            success: function (msg) {
                $("#show").html(msg);
            },
            error: function (ms) {
                $("#show").html("未查询到反链！！！");
            }
        });
    });

三.常用的例子实现多个输入框同时输入的方法

[HTML] 纯文本查看 复制代码

//-----------------------------------------实现多个输入框同时输入的方法-----------------------------------------------
function getid(id) {
    return (typeof id == 'string') ? document.getElementById(id) : id
};
//关闭输入法
function closeIME(e) {
    var obj = e.target ? e.target : e.srcElement;
    obj.style.imeMode = 'disabled';
}
function OnPaste(e) {
    var obj = e.target ? e.target : e.srcElement;
    setTimeout("MoveHttp('" + obj.id + "')", 100);
}
function MoveHttp(id) {
    var val = getid(id).value;
    val = val.replace("http://", "");
    if (val[val.length - 1] == '/') {
        val = val.substring(0, val.length - 1);
    }
    getid(id).value = val;
}
function OnKeyup(e) {
    var obj = e.target ? e.target : e.srcElement;
    setTimeout("addInput('" + obj.id + "')", 200);
}
function addInput(id) {
    var obj = getid(id);
    //如果是一个没有True的input不执行
    if (obj.getAttribute('url') == 'true') {
        if (obj.value.indexOf('。') > 0) {
            obj.value = obj.value.replace('。', '.');
        }
        var tags = document.getElementsByTagName('input');
        for (var i = 0; i < tags.length; i++) {
            if (tags.getAttribute('url') == 'true' && tags != obj) {
                tags.value = obj.value;
            }
        }
    }
}
function BoxShowUrls(e) {
    BoxShow(e);
}
function Init() {
    $(":text").each(function () {
        $(this).bind("keyup", OnKeyup);
        //        $(this).bind("focus", closeIME);
        $(this).bind("paste", OnPaste);
        $(this)[0].setAttribute('autocomplete', 'off');
    });
}

把上面的JS原版不动的放到你的页面里然后在页面的最后调用如下

[HTML] 纯文本查看 复制代码

<script type="text/javascript"> Init();</script>

　　如果你想让那个输入框有这样的效果就在那个输入框的标签里加上url="true"如下
?
<input id="txtFriendslink" url="true" name="word" type="text" class="clchinput" />

　　这样效果就可以实现了，大家试试吧

四.js分析Http请求地址的方式

[HTML] 纯文本查看 复制代码

//QueryString =
//  {
//      data: {},
//      Initial: function () {
//          var aPairs, aTmp;
//          var queryString = new String(window.location.search);
//          queryString = queryString.substr(1, queryString.length); //remove "?"   
//          aPairs = queryString.split("&");
//          for (var i = 0; i < aPairs.length; i++) {
//              aTmp = aPairs.split("=");
//              this.data[aTmp[0]] = aTmp[1];
//          }
//      },
//      GetValue: function (key) {
//          return this.data[key];
//      }
//  }

把这个直接放在JS文件里，不要放在方法 里面
在使用的地方调用如下

[HTML] 纯文本查看 复制代码

////先调用才能使用QueryString
    //    QueryString.Initial();
var url=queryString.split("/");
   //先调用才能使用QueryString
    QueryString.Initial();
    var text = QueryString.GetValue('domain');
    var left = QueryString.GetValue('left');

当然如果你的URl是重写后的可以这样写

[HTML] 纯文本查看 复制代码

var aPairs, aTmp;
    var queryString = new String(window.location.href);
    queryString = queryString.substr(1, queryString.length); //remove "?"   
    aPairs = queryString.split("/");
    var text = aPairs[aPairs.length - 1];