jQuery入门看这一篇就够了

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery入门看这一篇就够了，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含19836字，纯文字阅读大概需要29分钟。

内容图文

一.选择器

1.基本

$("#myDiv");

$("div");

$(".myClass");

$("*")

$("div,span,p.myClass")

2.层级

$("form input")

$("form > input")

$("label + input")

$("form ~ input")

3.基本筛选器

$('li:first');

$("input:not(:checked)")

$("tr:even")

$("tr:odd")

$("tr:eq(1)")

$("tr:gt(0)")

$("p:lang(it)")

$('li:last')

$("tr:lt(2)")

$(":header").css("background", "#EEE");

$("div:not(:animated)").animate({ left: "+=20" }, 1000);

$("input:focus")

$(":root")

4.内容

$("div:contains('John')")

$("td:empty")

$("div:has(p)")

$("td:parent")

5.可见性

$("tr:hidden")

$("tr:visible")

6.属性

$("div[id]")

$("input[name='newsletter']")

$("input[name!='newsletter']")

$("input[name^='news']")

$("input[name$='letter']")

$("input[name*='man']")

$("input[id][name$='man']")

7.子元素

$("ul li:first-child")

$("span:first-of-type");

$("ul li:last-child")

$("ul li:nth-child(2)")

$("ul li:nth-last-child(2)");

$("ul li:nth-last-of-type(2)");

$("span:nth-of-type(2)");

$("ul li:only-child")

8.表单

$(":input")

$(":text")

$(":password")

$(":radio")

$(":checkbox")

$(":submit")

$(":image")

$(":reset")

$(":button")

$(":file")

9.表单对象属性

$("input:enabled")

$("input:disabled")

$("input:checked")

$("select option:selected")

10.混淆选择器

$( "div" ).find( "." + $.escapeSelector( ".box" ) );

 二.属性

1属性

$("img").attr("src");

$("img").attr({ src: "test.jpg", alt: "Test Image" });

$("img").attr("src","test.jpg");

$("img").attr("title", function() { return this.src });

$("img").removeAttr("src");

$("input[type='checkbox']").prop("checked");

$("input[type='checkbox']").prop({disabled: true});

$("input[type='checkbox']").prop("disabled", true);

$("input[type='checkbox']").prop("checked", function( i, val ) {return !val;});

$para.removeProp("luggageCode");

2.CSS类

$("p").addClass("selected");

$('ul li:last').addClass(function() {return 'item-' + $(this).index();});

$("p").removeClass();

$('li:last').removeClass(function() {return $(this).prev().attr('class');});

$("p").toggleClass("selected");

3.HTML代码/文本/值

$('p').html();

$("p").html("Hello <b>world</b>!");

$("p").text("Hello world!");

三.CSS

 1.CSS

$("p").css("color");

$("p").css({ "color": "#ff0011", "background": "blue" });

$("p").css("color","red");

2.位置

var offset = p.offset();

$("p:last").offset({ top: 10, left: 30 });

var position = p.position();

$("div.demo").scrollTop(300);

$("p:first").scrollLeft()

$("div.demo").scrollLeft(300);

3.尺寸

$("p").height();

$("p").height(20);

$("p").width(20);

$("p:first").innerHeight()

四.文档处理

1.内部插入

$("p").append("<b>Hello</b>");

$("p").appendTo("div");

$("p").prepend("<b>Hello</b>");

$("p").prependTo("#foo");

2.外部插入

$("p").after("<b>Hello</b>");

$("p").before("<b>Hello</b>");

$("p").insertAfter("#foo");

$("p").insertBefore("#foo");

 3.包裹

$("p").wrap("<div class='wrap'></div>");

$("p").unwrap()

$("p").wrapAll("<div></div>");

$("p").wrapInner("<b></b>");

4.替换

$("p").replaceWith("<b>Paragraph. </b>");

$("<b>Paragraph. </b>").replaceAll("p");

5.删除

$("p").empty();

$("p").remove();

$("p").detach();

 6.复制

$("b").clone().prependTo("p");

 五.筛选

1.过滤

$("p").eq(1)

$('li').first()

$('li').last()

$("p").filter(".selected")

$("input[type='checkbox']").parent().is("form")

$('li').has('ul')

$("p").not( $("#selected")[0] )

$("p").slice(0, 1)

2.查找

$("div").children()

$("div").children(".selected")

$("li:first").closest(["ul", "body"]);

$("p").find("span")

$("p").next(".selected")

$("div:first").nextAll()

$("p").parent(".selected")

$("span").parents("p")

$("p").prev(".selected")

$("div:last").prevAll()

$("div").siblings(".selected")

3.串联

$("p").add("span")

?

$("p").contents()

$("p").find("span").end()

六.核心

七.事件

1.事件处理

2.事件切换

3.事件

blur([[data],fn])：当元素失去焦点时触发 blur 事件

change([[data],fn])：当元素的值发生改变时，会发生 change 事件

click([[data],fn])：触发每一个匹配元素的click事件

dblclick([[data],fn])：当双击元素时，会发生 dblclick 事件

focus([[data],fn])：当元素获得焦点时，触发 focus 事件

focusin([data],fn)：当元素获得焦点时，触发 focusin 事件

focusout([data],fn)：当元素失去焦点时触发 focusout 事件

keydown([[data],fn])：当键盘或按钮被按下时，发生 keydown 事件

keypress([[data],fn])：当键盘或按钮被按下时，发生 keypress 事件

keyup([[data],fn])：当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上

mousedown([[data],fn])：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件

mouseenter([[data],fn])：当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用

mouseleave([[data],fn])：当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

mousemove([[data],fn])：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mouseout([[data],fn])：当鼠标指针从元素上移开时，发生 mouseout 事件。

mouseover([[data],fn])：当鼠标指针位于元素上方时，会发生 mouseover 事件。

mouseup([[data],fn])：当在元素上放松鼠标按钮时，会发生 mouseup 事件。

resize([[data],fn])：当调整浏览器窗口的大小时，发生 resize 事件。

scroll([[data],fn])：当用户滚动指定的元素时，会发生 scroll 事件。

select([[data],fn])：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

submit([[data],fn])：当提交表单时，会发生 submit 事件。

八.事件对象

eve.currentTarget：在事件冒泡阶段中的当前DOM元素

eve.data：当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind。

eve.delegateTarget：当currently-called的jQuery事件处理程序附加元素。

eve.isDefaultPrevented()：根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。

eve.isImmediatePropag...()：根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。

eve.isPropagationStopped()：根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。

eve.namespace：当事件被触发时此属性包含指定的命名空间。

eve.pageX：鼠标相对于文档的左边缘的位置。

eve.pageY：鼠标相对于文档的顶部边缘的位置。

eve.preventDefault()：阻止默认事件行为的触发。

eve.relatedTarget：在事件中涉及的其它任何DOM元素。

eve.result：这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。

eve.stopImmediatePro...()：阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

eve.stopPropagation()：防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

eve.target：最初触发事件的DOM元素。

eve.timeStamp：这个属性返回事件触发时距离1970年1月1日的毫秒数。

eve.type

eve.which：针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。

九.回调函数

cal.add(callbacks)：回调列表中添加一个回调或回调的集合。

cal.disable()：禁用回调列表中的回调

cal.empty()：从列表中删除所有的回调.

cal.fire(arguments)：禁用回调列表中的回调

cal.fired()：用给定的参数调用所有的回调。

cal.fireWith([c] [,a])：访问给定的上下文和参数列表中的所有回调

cal.has(callback)：确定是否提供的回调列表

cal.lock()：锁定在其当前状态的回调列表。

cal.locked()：确定是否已被锁定的回调列表。

cal.remove(callbacks)：删除回调或回调回调列表的集合。

$.callbacks(flags)：一个多用途的回调列表对象，提供了强大的的方式来管理回调函数列表。

十.效果

基本

show([s,[e],[fn]])：显示隐藏的匹配元素。

hide([s,[e],[fn]])：隐藏显示的元素

toggle([s],[e],[fn])：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

滑动

slideDown([s],[e],[fn])：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

slideUp([s,[e],[fn]])：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

slideToggle([s],[e],[fn])：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

淡入淡出

fadeIn([s],[e],[fn])：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

fadeOut([s],[e],[fn])：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

fadeTo([[s],o,[e],[fn]])：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

fadeToggle([s,[e],[fn]])：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

自定义

animate(p,[s],[e],[fn])：用于创建自定义动画的函数。

stop([c],[j])：停止所有在指定元素上正在运行的动画。

delay(d,[q])：设置一个延时来推迟执行队列中之后的项目。

finish([queue])：停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

设置

jQuery.fx.off：关闭页面上所有的动画。

jQuery.fx.interval：设置动画的显示帧速。

十一.工具

浏览器及特性检测

$.support：一组用于展示不同浏览器各自特性和bug的属性集合。

$.browser：浏览器内核标识。依据 navigator.userAgent 判断。

$.browser.version：浏览器渲染引擎版本号。

$.boxModel：当前页面中浏览器是否使用标准盒模型渲染页面。

数组和对象操作

$.each(object,[callback])：通用遍历方法，可用于遍历对象和数组。

$.extend([d],tgt,obj1,[objN])：用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

$.grep(array,fn,[invert])：使用过滤函数过滤数组元素。

$.sub()：可创建一个新的jQuery副本，不影响原有的jQuery对像。

$.when(deferreds)：提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件。

$.makeArray(obj)：将类数组对象转换为数组对象。

$.map(arr|obj,callback)：将一个数组中的元素转换到另一个数组中。

$.inArray(val,arr,[from])：确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。

$.toArray()：把jQuery集合中所有DOM元素恢复成一个数组。

$.merge(first,second)：合并两个数组

$.unique(array)：删除数组中重复元素。

$.uniqueSort(array)：$.uniqueSort()函数通过搜索的数组对象，排序数组，并移除任何重复的节点。 

$.parseJSON(json)：接受一个JSON字符串，返回解析后的对象。

$.parseXML(data)：解析一个字符串到一个XML文件。

函数操作

$.noop：一个空函数

$.proxy(function,context)：返回一个新函数，并且这个函数始终保持了特定的作用域。

测试操作

$.contains(c,c)：一个DOM节点是否包含另一个DOM节点。

$.type(obj)：检测obj的数据类型。

$.isArray(obj)：测试对象是否为数组。

$.isFunction(obj)：测试对象是否为函数。

$.isEmptyObject(obj)：测试对象是否是空对象（不包含任何属性）。

$.isPlainObject(obj)：测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。

$.isWindow(obj)：测试对象是否是窗口（有可能是Frame）。

$.isNumeric(value)：确定它的参数是否是一个数字。

字符串操作

$.trim(str)：去掉字符串起始和结尾的空格。

URL

$.param(obj,[traditional])：将表单元素数组或者对象序列化。是.serialize()的核心方法。

插件编写

$.error(message)：接受一个字符串，并且直接抛出一个包含这个字符串的异常。

$.fn.jquery：代表 jQuery 版本号的字符串。

十二.延迟对象

def.done(d,[d])：当延迟成功时调用一个函数或者数组函数.

def.fail(failCallbacks)：当延迟失败时调用一个函数或者数组函数.。

def.isRejected()：确定延迟对象是否已被拒绝。

def.isResolved()：确定延迟对象是否已得到解决。

def.reject(args)：拒绝延迟对象，并根据给定的参数调用任何失败的回调函数。

def.rejectWith(c,[a])：拒绝延迟的对象，并根据给定的上下文和参数调用任何失败的回调函数。。

def.resolve(args)：解决递延对象，并根据给定的参数调用任何完成的回调函数。

def.resolveWith(c,[a])：解决递延对象，并根据给定的上下文和参数调用任何完成的回调函数。

def.then(d[,f][,p])：添加处理程序被调用时，递延对象得到解决或者拒绝。

def.promise([ty],[ta])：返回一个 Promise 对象用来观察当某种类型的所有行动绑定到集合，排队与否还是已经完成。

def.pipe([d],[f],[p])：筛选器和/或链Deferreds的实用程序方法。

def.always(al,[al])：当递延对象是解决或拒绝时被调用添加处理程序。

def.notify(args)：调用一个给定args的递延对象上的进行中的回调 （progressCallbacks）

def.notifyWith(c,[a])：去掉字符串起始和结尾的空格。

def.progress(proCal)：当Deferred对象时生成进度通知时添加被访问处理程序。

def.state()：确定一个Deferred对象的当前状态。

内容总结

以上是互联网集市为您收集整理的jQuery入门看这一篇就够了全部内容，希望文章能够帮你解决jQuery入门看这一篇就够了所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端