当前位置: 开发笔记 > 编程语言 > 正文

jQuery写得更少,做得更多

作者：蜜爱女_201 | 来源：互联网 | 2023-09-04 01:42

http:baike.baidu.comview1020297.htm事实上我用了很多次jQuery了，但是我都没有发现，好神奇，去百度百科补一下jQuery的基础知识：最常使用的

http://baike.baidu.com/view/1020297.htm

事实上我用了很多次jQuery了，但是我都没有发现，好神奇，去百度百科补一下jQuery的基础知识：

最常使用的jQuery基础方法是.ready()方法

$(document).ready(function(){//script goes here

});

当dom加载完就可以执行（比window.onload更早）。在同一个页面里可以多次出现.ready()。

选择器

jQuery 使用 sizzle引擎，支持css选取，Xpath选取等方式。$("p") 选取全部

元素。$("p.intro") 选取所有包含class为"intro"的

元素。$("#demo") 选取 id为"demo" 的元素。$("[href]") 选取所有带有 href 属性的元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。$("[href^='/imgaes/']") 选取所有 href 值以 /imgaes/" 开头的元素。$("p.intro") 所有 class="intro" 的

元素元素选择器$(".intro") 所有 class="intro" 的元素类选择器$("#intro") id="intro" 的第一个元素 id 选择器更多详细信息请参见jQuery API的Selectors部分。

事件处理

直接绑定指定事件，事件类型即方法名，支持click、focus、blur、submit等。$("#button").click(function(){//script goes here});用on来绑定事件，off来解绑事件，第一个参数为事件名，第二个参数为回调函数。1.7.2版本开始支持。$("#button").on('click',function(){//script goes here});在1.7.1或更早版本，需要用bind/unbind（常规绑定），live/die（预绑定）来替代on/off。更多详细信息请参见jQuery API的Events部分。jQuery还支持如下方法:.blur() 表单元素失去焦点。.change() 表单元素的值发生变化.click() 鼠标单击.dblclick() 鼠标双击.focus() 表单元素获得焦点.focusin() 子元素获得焦点.focusout() 子元素失去焦点.hover() 同时为mouseenter和mouseleave事件指定处理函数.keydown() 按下键盘（长时间按键，只返回一个事件）.keypress() 按下键盘（长时间按键，将返回多个事件）.keyup() 松开键盘.load() 元素加载完毕.mousedown() 按下鼠标.mouseenter() 鼠标进入（进入子元素不触发）.mouseleave() 鼠标离开（离开子元素不触发）.mousemove() 鼠标在元素内部移动.mouseout() 鼠标离开（离开子元素也触发）.mouseover() 鼠标进入（进入子元素也触发）.mouseup() 松开鼠标.ready() DOM加载完成.resize() 浏览器窗口的大小发生改变.scroll() 滚动条的位置发生变化.select() 用户选中文本框中的内容.submit() 用户递交表单.toggle() 根据鼠标点击的次数，依次运行多个函数.unload() .当用户离开页面时，会发生 unload 事件。[1]

动态特效

$("#msg").show("fast");$("#msg").hide("slow");$("#msg").fadeIn();$("#msg").fadeOut();淡入淡出$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。滑动$(selector).slideDown(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。动画$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。以上代码实现一个id为Msg的jQuery对象的渐入和淡出。函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为ms。更多详细信息请参见jQuery API的Effects部分。

5AJAX

使用jquery实现ajax方式如下

$.ajax({async : false,type: "POST",url: "example.php",data: "name=John&location=Boston"}).done(function(msg){alert("Data Saved: " + msg);}).fail(function(xmlHttpRequest,statusText,errorThrown) {alert("Your form submission failed.\n\n"+ "XML Http Request: " + JSON.stringify(xmlHttpRequest)+ ",\nStatus Text: " + statusText+ ",\nError Thrown: " + errorThrown);});这个例子发送name=John和location=Boston两个数据给服务端的example.php，请求成功后会提示用户。更多详细信息请参见jQuery API的Ajax部分。async默认的设置值为true，这种情况为异步方式，就是说当 ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程）