运行结果
这是我等下要发的代码。首先去了解Jquery的Apl:APL代码。
<!DOCTYPE html> <html class="no-js loading-process" lang="zh"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="keywords" content="jQuery,API,中文,jquery api,1.11,chm,手册,教程,文档"/> <meta name="description" content="jQuery API 1.x - 3.x 中文在线版，jQuery API 中文最新版，jQuery 是一个兼容多浏览器的 JavasSript 框架，核心理念是 - write less, do more。jQuery API 中文文档(适用jQuery 1.0 - jQuery 3.x)."/> <meta name="robots" content="all"> <meta name="renderer" content="webkit"> <meta name="author" content="Shifone -https://jquery.cuishifeng.cn" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm</title> <link rel="shortcut icon" href="/images/favicon.ico" /> <link rel="stylesheet" href="https://jquery.cuishifeng.cn/css/index_60ed4de.css" /> </head> <body class="loading-process"> <!--[if lt IE 9]> <div class="browser-happy"> <div class="content"> <p>作为前端开发人员，还用这么low的浏览器，再不更新会遭鄙视的～～</p> <p>本站不支持IE9以下浏览器访问！</p> <a href="https://browsehappy.com/">立即更新</a> <img src="https://jquery.cuishifeng.cn/images/logo_4fa80ea.jpg" alt="logo" style="display: none;"> </div> </div> <![endif]--> <div class="main-loading" id="main-loading" > <div class="loading-con"> <div class="loading-circle"></div> <img src="https://jquery.cuishifeng.cn/images/head_4fa80ea.jpg" title="jquery api" alt="jquery api"> </div> </div> <div class="main-container"> <div class="top-head-img"><a href="https://www.h5ds.com?from=cuishifeng" target="_blank" class="top-item" ref="nofollow" id="top-item">在线H5/图片/GIF制作工具~</a></div><div class="dialog-panel" id="dig-tenxun"><div class="dialog-main"><div class="modal-header"><h4>阿里云&腾讯云双11促销</h4><a href="javascript:void(0);" class="close" title="不再显示" id="pop-close">×</a></div><div class="modal-body"><div class="modal-item" style="padding-left: 0"><p>一年一度阿里云和腾讯云双11促销又来了，今年给力到极致~</p><table style="width: 100%; text-align: center"><tr><td>阿里云</td><td>腾讯云</td></tr><tr><td><p>1核2G <span>69一年</span></p><p>2核4G <span>188一年</span></p><p>2核4G <span>567三年</span></p></td><td><p>1核2G <span>70一年</span></p><p>2核4G <span>268一年</span></p><p>4核8G <span>628一年</span></p></td></tr><tr><td><p style="text-align: center"><a href="https://www.aliyun.com/minisite/goods?taskPkg=1111ydsrwb&pkgSid=75025&recordId=1505182&userCode=kzf1dv8g" target="_blank">点我围观阿里云~</a></p></td><td><p style="text-align: center"><a href="https://cloud.tencent.com/act/cps/redirect?redirect=1575&cps_key=04104b2e2a7f55c4eeec099031427302&from=console" target="_blank">点我围观腾讯云~</a></p></td></tr></table><p>PS: 以上优惠针对新用户，但是腾讯云老用户可通过上述链接重新注册个账号即可享受新用户优惠~</p></div></div></div></div> <header class="main-header clearfix"> <h1>jQuery API 3.5.1 速查表 --作者：<a href="https://www.cuishifeng.cn" target="_blank">Shifone</a> <a class="source" href="https://jquery.cuishifeng.cn/source.html" target="_blank">源码下载</a></h1> </header><!-- main top header --> <div id="main-wraper" class="main-wraper"> <div id="col-list"> <div class="col-item"> <h2>选择器</h2> <ul> <li> <h3>基本</h3> <ul> <li><a href="id.html">#id</a></li> <li><a href="element.html">element</a></li> <li><a href="class.html">.class</a></li> <li><a href="all.html">*</a></li> <li><a href="multiple.html">selector1,selector2,selectorN</a></li> </ul> </li> <li> <h3>层级</h3> <ul> <li><a href="descendant.html">ancestor descendant</a></li> <li><a href="child.html">parent > child</a></li> <li><a href="next_1.html">prev + next</a></li> <li><a href="siblings_1.html">prev ~ siblings</a></li> </ul> </li> <li> <h3>基本筛选器</h3> <ul> <li><a href="first_1.html">:first</a></li> <li><a href="not_1.html">:not(selector)</a></li> <li><a href="even.html">:even</a></li> <li><a href="odd.html">:odd</a></li> <li><a href="eq_1.html">:eq(index)</a></li> <li><a href="gt.html">:gt(index)</a></li> <li><a href="lang.html">:lang</a><sup>1.9+</sup></li> <li><a href="last_1.html">:last</a></li> <li><a href="lt.html">:lt(index)</a></li> <li><a href="header.html">:header</a></li> <li><a href="animated.html">:animated</a></li> <li><a href="focus_1.html">:focus</a></li> <li><a href="root.html">:root</a><sup>1.9+</sup></li> <li><a href="target.html">:target</a><sup>1.9+</sup></li> </ul> </li> <li> <h3>内容</h3> <ul> <li><a href="contains.html">:contains(text)</a></li> <li><a href="empty_1.html">:empty</a></li> <li><a href="has_1.html">:has(selector)</a></li> <li><a href="parent_1.html">:parent</a></li> </ul> </li> <li> <h3>可见性</h3> <ul> <li><a href="hidden_1.html">:hidden</a></li> <li><a href="visible.html">:visible</a></li> </ul> </li> <li> <h3>属性</h3> <ul> <li><a href="attributeHas.html">[attribute]</a></li> <li><a href="attributeEquals.html">[attribute=value]</a></li> <li><a href="attributeNotEqual.html">[attribute!=value]</a></li> <li><a href="attributeStartsWith.html">[attribute^=value]</a></li> <li><a href="attributeEndsWith.html">[attribute$=value]</a></li> <li><a href="attributeContains.html">[attribute*=value]</a></li> <li><a href="attributeMultiple.html">[attrSel1][attrSel2][attrSelN]</a></li> </ul> </li> <li> <h3>子元素</h3> <ul> <li><a href="firstChild.html">:first-child</a></li> <li><a href="firstOfType.html">:first-of-type</a><sup>1.9+</sup></li> <li><a href="lastChild.html">:last-child</a></li> <li><a href="lastOfType.html">:last-of-type</a><sup>1.9+</sup></li> <li><a href="nthChild.html">:nth-child</a></li> <li><a href="nthLastChild.html">:nth-last-child()</a><sup>1.9+</sup></li> <li><a href="nthLastOfType.html">:nth-last-of-type()</a><sup>1.9+</sup></li> <li><a href="nthOfType.html">:nth-of-type()</a><sup>1.9+</sup></li> <li><a href="onlyChild.html">:only-child</a></li> <li><a href="onlyOfType.html">:only-of-type</a><sup>1.9+</sup></li> </ul> </li> <li> <h3>表单</h3> <ul> <li><a href="input.html">:input</a></li> <li><a href="text_1.html">:text</a></li> <li><a href="password.html">:password</a></li> <li><a href="radio.html">:radio</a></li> <li><a href="checkbox.html">:checkbox</a></li> <li><a href="submit_1.html">:submit</a></li> <li><a href="image.html">:image</a></li> <li><a href="reset.html">:reset</a></li> <li><a href="button.html">:button</a></li> <li><a href="file_1.html">:file</a></li> </ul> </li> <li> <h3>表单对象属性</h3> <ul> <li><a href="enabled_1.html">:enabled</a></li> <li><a href="disabled_1.html">:disabled</a></li> <li><a href="checked_1.html">:checked</a></li> <li><a href="selected_1.html">:selected</a></li> </ul> </li> <li> <h3>混淆选择器</h3> <ul> <li><a href="jQuery.escapeSelector.html">$.escapeSelector(selector)</a><sup>3.0+</sup></li> </ul> </li> </ul> </div> <div class="col-item"> <h2>核心</h2> <ul> <li> <h3>jQuery 核心函数</h3> <ul> <li><a href="jQuery_selector_context.html">jQuery([sel,[context]])</a> <li><a href="jQuery_html_ownerDocument.html">jQuery(html,[ownerDoc])</a><sup>1.8*</sup></li> <li><a href="jQuery_callback.html">jQuery(callback)</a></li> <li><del><a href="jQuery.holdReady.html">jQuery.holdReady(hold)</a></del><sup>3.2-</sup></li> <li><a href="jQuery_readyException.html">jQuery.readyException( error )</a><sup>3.1+</sup></li> </ul> </li> <li> <h3>jQuery 对象访问</h3> <ul> <li><a href="each.html">each(callback)</a></li> <li><del><a href="size.html">size()</a></del><sup>1.8-</sup></li> <li><a href="length.html">length</a></li> <li><a href="selector.html">selector</a></li> <li><a href="context.html">context</a></li> <li><a href="get.html">get([index])</a></li> <li><a href="index_1.html">index([selector|element])</a></li> </ul> </li> <li> <h3>数据缓存</h3> <ul> <li><a href="data.html">data([key],[value])</a></li> <li><a href="removeData.html">removeData([name|list])</a><sup>1.7*</sup></li> <li><del><a href="jQuery.data.html">$.data(ele,[key],[val])</a></del><sup>1.8-</sup></li> </ul> </li> <li> <h3>队列控制</h3> <ul> <li><a href="queue.html" title="queue(element,[queueName])">queue(e,[q])</a></li> <li><a href="dequeue.html" title="dequeue([queueName])">dequeue([queueName])</a></li> <li><a href="clearQueue.html" title="clearQueue([queueName])">clearQueue([queueName])</a></li> </ul> </li> <li> <h3>插件机制</h3> <ul> <li><a href="jQuery.fn.extend.html">jQuery.fn.extend(object)</a></li> <li><a href="jQuery.extend_object.html">jQuery.extend(object)</a></li> </ul> </li> <li> <h3>多库共存</h3> <ul> <li><a href="jQuery.noConflict.html" title="jQuery.noConflict([extreme])">jQuery.noConflict([ex])</a></li> </ul> </li> </ul> </div> <div class="col-item" > <h2>ajax</h2> <ul> <li> <h3>ajax 请求</h3> <ul> <li><a href="jQuery.Ajax.html">$.ajax(url,[settings])</a></li> <li><a href="jQuery.get.html">$.get(url,[data],[fn],[type])</a></li> <li><a href="jQuery.getJSON.html">$.getJSON(url,[data],[fn])</a></li> <li><a href="jQuery.getScript.html">$.getScript(url,[callback])</a></li> <li><a href="jQuery.post.html">$.post(url,[data],[fn],[type])</a></li> </ul> </li> <li> <h3>ajax 事件</h3> <ul> <li><a href="ajaxComplete.html">ajaxComplete(callback)</a></li> <li><a href="ajaxError.html">ajaxError(callback)</a></li> <li><a href="ajaxSend.html">ajaxSend(callback)</a></li> <li><a href="ajaxStart.html">ajaxStart(callback)</a></li> <li><a href="ajaxStop.html">ajaxStop(callback)</a></li> <li><a href="ajaxSuccess.html">ajaxSuccess(callback)</a></li> </ul> </li> <li> <h3>其它</h3> <ul> <li><a href="load.html">load(url,[data],[callback])</a></li> <li><a href="jQuery.ajaxPrefilter.html">$.ajaxPrefilter([type],fn)</a></li> <li><a href="jQuery.ajaxSetup.html">$.ajaxSetup([options])</a></li> <li><a href="serialize.html">serialize()</a></li> <li><a href="serializeArray.html">serializeArray()</a></li> </ul> </li> </ul> </div> <div class="col-item"> <h2>属性</h2> <ul> <li> <h3>属性</h3> <ul> <li><a href="attr.html" title="attr(name|properties|key,value|fn)">attr(name|pro|key,val|fn)</a></li> <li><a href="removeAttr.html">removeAttr(name)</a></li> <li><a href="prop.html" title="prop(name|properties|key,value|fn)">prop(n|p|k,v|f)</a></li> <li><a href="removeProp.html">removeProp(name)</a></li> </ul> </li> <li> <h3>CSS 类</h3> <ul> <li><a href="addClass.html">addClass(class|fn)</a></li> <li><a href="removeClass.html">removeClass([class|fn])</a></li> <li><a href="toggleClass.html">toggleClass(class|fn[,sw])</a></li> </ul> </li> <li> <h3>HTML代码/文本/值</h3> <ul> <li><a href="html.html">html([val|fn])</a></li> <li><a href="text.html">text([val|fn])</a></li> <li><a href="val.html">val([val|fn|arr])</a></li> </ul> </li> </ul> </div> <div class="col-item"> <h2>CSS</h2> <ul> <li> <h3>CSS</h3> <ul> <li><a href="css.html" title="css(name|properties|[,value|fn])">css(name|pro|[,val|fn])</a><sup>1.9*</sup></li> <li><a href="jQuery.cssHooks.html">jQuery.cssHooks</a></li> </ul> </li> <li> <h3>位置</h3> <ul> <li><a href="offset.html">offset([coordinates])</a></li> <li><a href="position.html">position()</a></li> <li><a href="scrollTop.html">scrollTop([val])</a></li> <li><a href="scrollLeft.html">scrollLeft([val])</a></li> </ul> </li> <li> <h3>尺寸</h3> <ul> <li><a href="height.html">height([val|fn])</a></li> <li><a href="width.html">width([val|fn])</a></li> <li><a href="innerHeight.html">innerHeight()</a></li> <li><a href="innerWidth.html">innerWidth()</a></li> <li><a href="outerHeight.html">outerHeight([options])</a></li> <li><a href="outerWidth.html">outerWidth([options])</a></li> </ul> </li> </ul> </div> <div class="col-item"> <h2>文档处理</h2> <ul> <li> <h3>内部插入</h3> <ul> <li><a href="append.html">append(content|fn)</a></li> <li><a href="appendTo.html">appendTo(content)</a></li> <li><a href="prepend.html">prepend(content|fn)</a></li> <li><a href="prependTo.html">prependTo(content)</a></li> </ul> </li> <li> <h3>外部插入</h3> <ul> <li><a href="after.html">after(content|fn)</a></li> <li><a href="before.html">before(content|fn)</a></li> <li><a href="insertAfter.html">insertAfter(content)</a></li> <li><a href="insertBefore.html">insertBefore(content)</a></li> </ul> </li> <li> <h3>包裹</h3> <ul> <li><a href="wrap.html" title="wrap(html|element|fn)">wrap(html|ele|fn)</a></li> <li><a href="unwrap.html">unwrap()</a></li> <li><a href="wrapAll.html" title="wrapall(html|element)">wrapAll(html|ele)</a></li> <li><a href="wrapInner.html" title="wrapInner(html|element|fn)">wrapInner(html|ele|fn)</a></li> </ul> </li> <li> <h3>替换</h3> <ul> <li><a href="replaceWith.html">replaceWith(content|fn)</a></li> <li><a href="replaceAll.html">replaceAll(selector)</a></li> </ul> </li> <li> <h3>删除</h3> <ul> <li><a href="empty.html">empty()</a></li> <li><a href="remove.html">remove([expr])</a></li> <li><a href="detach.html">detach([expr])</a></li> </ul> </li> <li> <h3>复制</h3> <ul> <li><a href="clone.html">clone([Even[,deepEven]])</a></li> </ul> </li> </ul> </div> <div class="col-item"> <h2>事件</h2> <ul> <li> <h3>页面载入</h3> <ul> <li><a href="ready.html">ready(fn)</a></li> </ul> </li> <li> <h3>事件处理</h3> <ul> <li><a href="on.html" title="on(events,[selector],[data],fn)">on(eve,[sel],[data],fn)</a><sup>1.7+</sup></li> <li><a href="off.html" title="off(events,[selector],[data],fn)">off(eve,[sel],[fn])</a><sup>1.7+</sup></li> <li><del><a href="bind.html">bind(type,[data],fn)</a></del><sup>3.0-</sup></li> <li><a href="one.html">one(type,[data],fn)</a></li> <li><a href="trigger.html">trigger(type,[data])</a></li> <li><a href="triggerHandler.html">triggerHandler(type, [data])</a></li> <li><del><a href="unbind.html" title="unbind(type,[data|fn])">unbind(t,[d|f])</a></del><sup>3.0-</sup></li> </ul> </li> <li> <h3>事件委派</h3> <ul> <li><del><a href="live.html">live(type,[data],fn)</a></del><sup>1.7-</sup></li> <li><del><a href="die.html">die(type,[fn])</a></del><sup>1.7-</sup></li> <li><del><a href="delegate.html" title="delegate(selector,[type],[data],fn)">delegate(s,[t],[d],fn)</a></del><sup>3.0-</sup></li> <li><del><a href="undelegate.html" title="undelegate([selector,[type],fn])">undelegate([s,[t],fn])</a></del><sup>3.0-</sup></li> </ul> </li> <li> <h3>事件切换</h3> <ul> <li><a href="hover.html">hover([over,]out)</a></li> <li><a href="toggle.html">toggle([spe],[eas],[fn])</a><sup>1.9*</sup></li> </ul> </li> <li> <h3>事件</h3> <ul> <li><a href="blur.html">blur([[data],fn])</a></li> <li><a href="change.html">change([[data],fn])</a></li> <li><a href="click.html">click([[data],fn])</a></li> <li><a href="dblclick_1.html">dblclick([[data],fn])</a></li> <li><del><a href="error.html">error([[data],fn])</a></del><sup>1.8-</sup></li> <li><a href="focus.html">focus([[data],fn])</a></li> <li><a href="focusin.html">focusin([data],fn)</a></li> <li><a href="focusout.html">focusout([data],fn)</a></li> <li><a href="keydown.html">keydown([[data],fn])</a></li> <li><a href="keypress.html">keypress([[data],fn])</a></li> <li><a href="keyup.html">keyup([[data],fn])</a></li> <li><a href="mousedown.html">mousedown([[data],fn])</a></li> <li><a href="mouseenter.html">mouseenter([[data],fn])</a></li> <li><a href="mouseleave.html">mouseleave([[data],fn])</a></li> <li><a href="mousemove.html">mousemove([[data],fn])</a></li> <li><a href="mouseout.html">mouseout([[data],fn])</a></li> <li><a href="mouseover.html">mouseover([[data],fn])</a></li> <li><a href="mouseup.html">mouseup([[data],fn])</a></li> <li><a href="resize.html">resize([[data],fn])</a></li> <li><a href="scroll.html">scroll([[data],fn])</a></li> <li><a href="select.html">select([[data],fn])</a></li> <li><a href="submit.html">submit([[data],fn])</a></li> <li><del><a href="unload.html">unload([[data],fn])</a></del><sup>1.8-</sup></li> </ul> </li> </ul> </div> <div class="col-item"> <h2>效果</h2> <ul> <li> <h3>基本</h3> <ul> <li><a href="show.html" title="show([speed,[easing],[fn]])">show([s,[e],[fn]])</a></li> <li><a href="hide.html" title="hide([speed,[easing],[fn]])">hide([s,[e],[fn]])</a></li> <li><a href="toggle.html" title="toggle([speed],[easing],[fn])">toggle([s],[e],[fn])</a></li> </ul> </li> <li> <h3>滑动</h3> <ul> <li><a href="slideDown.html" title="slideDown([speed],[easing],[fn])">slideDown([s],[e],[fn])</a></li> <li><a href="slideUp.html" title="slideUp([speed,[easing],[fn]])">slideUp([s,[e],[fn]])</a></li> <li><a href="slideToggle.html" title="slideToggle([speed],[easing],[fn])">slideToggle([s],[e],[fn])</a></li> </ul> </li> <li> <h3>淡入淡出</h3> <ul> <li><a href="fadeIn.html" title="fadeIn([speed],[easing],[fn])">fadeIn([s],[e],[fn])</a></li> <li><a href="fadeOut.html" title="fadeOut([speed],[easing],[fn])">fadeOut([s],[e],[fn])</a></li> <li><a href="fadeTo.html" title="fadeTo([[speed],opacity,[easing],[fn]])">fadeTo([[s],o,[e],[fn]])</a></li> <li><a href="fadeToggle.html" title="fadeToggle([speed,[easing],[fn]])">fadeToggle([s,[e],[fn]])</a></li> </ul> </li> <li> <h3>自定义</h3> <ul> <li><a href="animate.html" title="animate(params,[speed],[easing],[fn])">animate(p,[s],[e],[fn])</a><sup>1.8*</sup></li> <li><a href="stop.html" title="stop([clearQueue],[jumpToEnd])">stop([c],[j])</a><sup>1.7*</sup></li> <li><a href="delay.html" title="delay(duration,[queueName])">delay(d,[q])</a></li> <li><a href="finish.html" title="finish([queue])">finish([queue])</a><sup>1.9+</sup></li> </ul> <li> <h3>设置</h3> <ul> <li><a href="jQuery.fx.off.html">jQuery.fx.off</a></li> <li><del><a href="jQuery.fx.interval.html">jQuery.fx.interval</a></del><sup>3.0-</sup></li> </ul> </li> </ul> </div> <div class="col-item"> <h2>工具</h2> <ul> <li> <h3>浏览器及特性检测</h3> <ul> <li><del><a href="jQuery.support.html">$.support</a></del><sup>1.9-</sup></li> <li><del><a href="jQuery.browser.html">$.browser</a></del><sup>1.9-</sup></li> <li><a href="jQuery.browser.version.html">$.browser.version</a></li> <li><del><a href="jQuery.boxModel.html">$.boxModel</a></del></li> </ul> </li> <li> <h3>数组和对象操作</h3> <ul> <li><a href="jQuery.each.html">$.each(object,[callback])</a></li> <li><a href="jQuery.extend.html">$.extend([d],tgt,obj1,[objN])</a></li> <li><a href="jQuery.grep.html">$.grep(array,fn,[invert])</a></li> <li><del><a href="jQuery.sub.html">$.sub()</a></del><sup>1.9-</sup></li> <li><a href="jQuery.when.html">$.when(deferreds)</a></li> <li><a href="jQuery.makeArray.html">$.makeArray(obj)</a></li> <li><a href="jQuery.map.html">$.map(arr|obj,callback)</a></li> <li><a href="jQuery.inArray.html">$.inArray(val,arr,[from])</a></li> <li><a href="jQuery.toArray.html">$.toArray()</a></li> <li><a href="jQuery.merge.html">$.merge(first,second)</a></li> <li><del><a href="jQuery.unique.html">$.unique(array)</a></del><sup>3.0-</sup></li> <li><a href="jQuery.uniqueSort.html">$.uniqueSort(array)</a><sup>3.0+</sup></li> <li><del><a href="jQuery.parseJSON.html">$.parseJSON(json)</a></del><sup>3.0-</sup></li> <li><a href="jQuery.parseXML.html">$.parseXML(data)</a></li> </ul> </li> <li> <h3>函数操作</h3> <ul> <li><a href="jQuery.noop.html">$.noop</a> <li><a href="jQuery.proxy.html">$.proxy(function,context)</a></li> </ul> <li> <h3>测试操作</h3> <ul> <li><a href="jQuery.contains.html" title="$.contains(container,contained)">$.contains(c,c)</a></li> <li><a href="jQuery.type.html">$.type(obj)</a></li> <li><del><a href="jQuery.isArray.html">$.isArray(obj)</a></del><sup>3.2-</sup></li> <li><del><a href="jQuery.isFunction.html">$.isFunction(obj)</a></del><sup>3.3-</sup></li> <li><a href="jQuery.isEmptyObject.html">$.isEmptyObject(obj)</a></li> <li><a href="jQuery.isPlainObject.html">$.isPlainObject(obj)</a></li> <li><del><a href="jQuery.isWindow.html">$.isWindow(obj)</a></del><sup>3.3-</sup></li> <li><a href="jQuery.isNumeric.html">$.isNumeric(value)</a><sup>1.7+</sup></li> </ul> </li> <li> <h3>字符串操作</h3> <ul> <li><a href="jQuery.trim.html">$.trim(str)</a></li> </ul> </li> <li> <h3>URL</h3> <ul> <li><a href="jQuery.param.html">$.param(obj,[traditional])</a></li> </ul> </li> <li> <h3>插件编写</h3> <ul> <li><a href="jQuery.error.html">$.error(message)</a></li> <li><a href="jquery.html">$.fn.jquery</a></li> </ul> </li> </ul> </div> <div class="col-item"> <h2>筛选</h2> <ul> <li> <h3>过滤</h3> <ul> <li><a href="eq.html">eq(index|-index)</a></li> <li><a href="first.html">first()</a></li> <li><a href="last.html">last()</a></li> <li><a href="hasClass.html">hasClass(class)</a></li> <li><a href="filter.html" title="filter(expr|object|element|fn)">filter(expr|obj|ele|fn)</a></li> <li><a href="is.html" title="is(expr|object|element|fn)">is(expr|obj|ele|fn)</a></li> <li><a href="map.html">map(callback)</a></li> <li><a href="has.html" title="has(expr|element)">has(expr|ele)</a></li> <li><a href="not.html" title="not(expr|element|fn)">not(expr|ele|fn)</a></li> <li><a href="slice.html" title="slice(start,[end])">slice(start,[end])</a></li> </ul> </li> <li> <h3>查找</h3> <ul> <li><a href="children.html">children([expr])</a></li> <li><a href="closest.html" title="closest(expr,[context]|object|element)">closest(e|o|e)</a><sup>1.7*</sup></li> <li><a href="find.html" title="find(expr|object|element)">find(e|o|e)</a></li> <li><a href="next.html">next([expr])</a></li> <li><a href="nextAll.html">nextAll([expr])</a></li> <li><a href="nextUntil.html" title="nextUntil([expr|element][,filter])">nextUntil([e|e][,f])</a></li> <li><a href="offsetParent.html">offsetParent()</a></li> <li><a href="parent.html">parent([expr])</a></li> <li><a href="parents.html">parents([expr])</a></li> <li><a href="parentsUntil.html" title="parentsUntil([expr|element][,filter])">parentsUntil([e|e][,f])</a></li> <li><a href="prev.html">prev([expr])</a></li> <li><a href="prevAll.html">prevAll([expr])</a></li> <li><a href="prevUntil.html" title="prevUntil([expr|element][,filter])">prevUntil([e|e][,f])</a></li> <li><a href="siblings.html">siblings([expr])</a></li> </ul> </li> <li> <h3>串联</h3> <ul> <li><a href="add.html" title="add(expr|element|html|object[,context])">add(e|e|h|o[,c])</a><sup>1.9*</sup></li> <li><del><a href="andSelf.html">andSelf()</a></del><sup>1.8-</sup></li> <li><a href="addBack.html">addBack()</a><sup>1.9+</sup></li> <li><a href="contents.html">contents()</a></li> <li><a href="end.html">end()</a></li> </ul> </li> </ul> </div> <div class="col-item"> <h2>事件对象</h2> <ul> <li><a href="event.currentTarget.html">eve.currentTarget</a></li> <li><a href="event.data.html">eve.data</a></li> <li><a href="event.delegateTarget.html">eve.delegateTarget</a><sup>1.7+</sup></li> <li><a href="event.isDefaultPrevented.html">eve.isDefaultPrevented()</a></li> <li><a href="event.isImmediatePropagationStopped.html" title="event.isImmediatePropagationStopped">eve.isImmediatePropag...()</a></li> <li><a href="event.isPropagationStopped.html">eve.isPropagationStopped()</a></li> <li><a href="event.namespace.html">eve.namespace</a></li> <li><a href="event.pageX.html">eve.pageX</a></li> <li><a href="event.pageY.html">eve.pageY</a></li> <li><a href="event.preventDefault.html">eve.preventDefault()</a></li> <li><a href="event.relatedTarget.html">eve.relatedTarget</a></li> <li><a href="event.result.html">eve.result</a></li> <li><a href="event.stopImmediatePropagation.html" title="event.stopImmediatePropagation">eve.stopImmediatePro...()</a></li> <li><a href="event.stopPropagation.html">eve.stopPropagation()</a></li> <li><a href="event.target.html">eve.target</a></li> <li><a href="event.timeStamp.html">eve.timeStamp</a></li> <li><a href="event.type.html">eve.type</a></li> <li><a href="event.which.html">eve.which</a></li> </ul> </div> <div class="col-item" > <h2>延迟对象</h2> <ul> <li><a href="deferred.done.html" title="deferred.done(doneCallbacks[,doneCallbacks])">def.done(d,[d])</a></li> <li><a href="deferred.fail.html">def.fail(failCallbacks)</a></li> <li><del><a href="deferred.isRejected.html">def.isRejected()</a></del><sup>1.7-</sup></li> <li><del><a href="deferred.isResolved.html">def.isResolved()</a></del><sup>1.7-</sup></li> <li><a href="deferred.reject.html">def.reject(args)</a></li> <li><a href="deferred.rejectWith.html" title="deferred.rejectWith(context,[args])">def.rejectWith(c,[a])</a></li> <li><a href="deferred.resolve.html">def.resolve(args)</a></li> <li><a href="deferred.resolveWith.html" title="deferred.resolveWith(context,[args])">def.resolveWith(c,[a])</a></li> <li><del><a href="deferred.then.html" title="deferred.then(doneCallbacks,failCallbacks[, progressCallbacks])">def.then(d[,f][,p])</a></del><sup>1.8*</sup></li> <li><a href="deferred.promise.html" title="deferred.promise([type],[target])">def.promise([ty],[ta])</a></li> <li><del><a href="deferred.pipe.html" title="deferred.pipe([doneFilter],[failFilter],[progressFilter])">def.pipe([d],[f],[p])</a></del><sup>1.8-</sup></li> <li><a href="deferred.always.html" title="deferred.always(alwaysCallbacks,[alwaysCallbacks])">def.always(al,[al])</a></li> <li><a href="deferred.notify.html">def.notify(args)</a><sup>1.7+</sup></li> <li><a href="deferred.notifyWith.html" title="deferred.notifyWith(context,[args])">def.notifyWith(c,[a])</a><sup>1.7+</sup></li> <li><a href="deferred.progress.html" title="deferred.progress(progressCallbacks)">def.progress(proCal)</a><sup>1.7+</sup></li> <li><a href="deferred.state.html">def.state()</a><sup>1.7+</sup></li> </ul> </div> <div class="col-item" > <h2>回调函数</h2> <ul> <li><a href="callbacks.add.html">cal.add(callbacks)</a><sup>1.7+</sup></li> <li><a href="callbacks.disable.html">cal.disable()</a><sup>1.7+</sup></li> <li><a href="callbacks.empty.html">cal.empty()</a><sup>1.7+</sup></li> <li><a href="callbacks.fire.html">cal.fire(arguments)</a><sup>1.7+</sup></li> <li><a href="callbacks.fired.html">cal.fired()</a><sup>1.7+</sup></li> <li><a href="callbacks.fireWith.html" title="callbacks.fireWith([context] [, args])">cal.fireWith([c] [,a])</a><sup>1.7+</sup></li> <li><a href="callbacks.has.html">cal.has(callback)</a><sup>1.7+</sup></li> <li><a href="callbacks.lock.html">cal.lock()</a><sup>1.7+</sup></li> <li><a href="callbacks.locked.html">cal.locked()</a><sup>1.7+</sup></li> <li><a href="callbacks.remove.html">cal.remove(callbacks)</a><sup>1.7+</sup></li> <li><a href="jQuery.callbacks.html">$.callbacks(flags)</a><sup>1.7+</sup></li> </ul> </div> <div class="col-item" > <h2>其它</h2> <ul> <li><a href="regexp.html">正则表达式</a></li> <li><a href="html5.html">HTML5速查表</a></li> <li><a href="https://jquery.cuishifeng.cn/source.html" target="_blank">源码下载</a></li> </ul> </div> </div> <!-- #col-list end --> </div><!-- main-wraper end --> <footer id="footer-con" class="footer" > <p id="footer">Copyright © <a href="https://www.cuishifeng.cn" target="_blank">Shifone</a> 2012 - 2020 All rights reserved. <a target="_blank" href="https://www.miitbeian.gov.cn/">苏ICP备17065895号-1</a> <a href="https://www.cuishifeng.cn/cooperate.html" target="_blank" style="margin-left: 30px;">广告合作</a> </p> </footer> </div><!-- main -container end --> <aside class="left-panel left-panel-hide" id="left-panel"><div class="auto-query-con"><input type="text" name="query" id="autoquery" placeholder="请输入关键字"></div><nav class="navigation"><ul id="main-menu" class="main-menu"><li class="" id="menu-home"><a class="menu-title" id="dashboard-menu" href="index.html"><i class="fa fa-home"></i><span class="nav-label">Dashboard</span></a></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">核心</span></a><ul class="sub-menu"><li><a href="jQuery_selector_context.html">jQuery([sel,[context]])</a></li><li><a href="jQuery_html_ownerDocument.html">jQuery(html,[ownerDoc])</a><sup>1.8*</sup></li><li><a href="jQuery_callback.html">jQuery(callback)</a></li><li><a href="jQuery.holdReady.html"><del>jQuery.holdReady(hold)</del></a><sup>3.2-</sup></li><li><a href="jQuery_readyException.html">jQuery.readyException(error)</a><sup>3.1+</sup></li><li><a href="each.html">each(callback)</a></li><li><a href="size.html"><del>size()</del></a><sup>1.8-</sup></li><li><a href="length.html">length</a></li><li><a href="selector.html">selector</a></li><li><a href="context.html">context</a></li><li><a href="get.html">get([index])</a></li><li><a href="index_1.html">index([selector|element])</a></li><li><a href="data.html">data([key],[value])</a></li><li><a href="removeData.html">removeData([name|list])</a><sup>1.7*</sup></li><li><a href="jQuery.data.html"><del>$.data(ele,[key],[val])</del></a><sup>1.8-</sup></li><li><a href="queue.html" title="queue(element,[queueName])">queue(e,[q])</a></li><li><a href="dequeue.html" title="dequeue([queueName])">dequeue([queueName])</a></li><li><a href="clearQueue.html" title="clearQueue([queueName])">clearQueue([queueName])</a></li><li><a href="jQuery.fn.extend.html">jQuery.fn.extend(object)</a></li><li><a href="jQuery.extend_object.html">jQuery.extend(object)</a></li><li><a href="jQuery.noConflict.html" title="jQuery.noConflict([extreme])">jQuery.noConflict([ex])</a></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">选择器</span></a><ul class="sub-menu"><li><a href="id.html">#id</a></li><li><a href="element.html">element</a></li><li><a href="class.html">.class</a></li><li><a href="all.html">*</a></li><li><a href="multiple.html">selector1,selector2,selectorN</a></li><li><a href="descendant.html">ancestor descendant</a></li><li><a href="child.html">parent > child</a></li><li><a href="next_1.html">prev + next</a></li><li><a href="siblings_1.html">prev ~ siblings</a></li><li><a href="first_1.html">:first</a></li><li><a href="not_1.html">:not(selector)</a></li><li><a href="even.html">:even</a></li><li><a href="odd.html">:odd</a></li><li><a href="eq_1.html">:eq(index)</a></li><li><a href="gt.html">:gt(index)</a></li><li><a href="lang.html">:lang</a><sup>1.9+</sup></li><li><a href="last_1.html">:last</a></li><li><a href="lt.html">:lt(index)</a></li><li><a href="header.html">:header</a></li><li><a href="animated.html">:animated</a></li><li><a href="focus_1.html">:focus</a><sup>1.6+</sup></li><li><a href="root.html">:root</a><sup>1.9+</sup></li><li><a href="target.html">:target</a><sup>1.9+</sup></li><li><a href="contains.html">:contains(text)</a></li><li><a href="empty_1.html">:empty</a></li><li><a href="has_1.html">:has(selector)</a></li><li><a href="parent_1.html">:parent</a></li><li><a href="hidden_1.html">:hidden</a></li><li><a href="visible.html">:visible</a></li><li><a href="attributeHas.html">[attribute]</a></li><li><a href="attributeEquals.html">[attribute=value]</a></li><li><a href="attributeNotEqual.html">[attribute!=value]</a></li><li><a href="attributeStartsWith.html">[attribute^=value]</a></li><li><a href="attributeEndsWith.html">[attribute$=value]</a></li><li><a href="attributeContains.html">[attribute*=value]</a></li><li><a href="attributeMultiple.html">[attrSel1][attrSel2][attrSelN]</a></li><li><a href="firstChild.html">:first-child</a></li><li><a href="firstOfType.html">:first-of-type</a><sup>1.9+</sup></li><li><a href="lastChild.html">:last-child</a></li><li><a href="lastOfType.html">:last-of-type</a><sup>1.9+</sup></li><li><a href="nthChild.html">:nth-child</a></li><li><a href="nthLastChild.html">:nth-last-child</a><sup>1.9+</sup></li><li><a href="nthLastOfType.html">:nth-last-of-type</a><sup>1.9+</sup></li><li><a href="nthOfType.html">:nth-of-type</a><sup>1.9+</sup></li><li><a href="onlyChild.html">:only-child</a></li><li><a href="onlyOfType.html">:only-of-type</a><sup>1.9+</sup></li><li><a href="input.html">:input</a></li><li><a href="text_1.html">:text</a></li><li><a href="password.html">:password</a></li><li><a href="radio.html">:radio</a></li><li><a href="checkbox.html">:checkbox</a></li><li><a href="submit_1.html">:submit</a></li><li><a href="image.html">:image</a></li><li><a href="reset.html">:reset</a></li><li><a href="button.html">:button</a></li><li><a href="file_1.html">:file</a></li><li><a href="enabled_1.html">:enabled</a></li><li><a href="disabled_1.html">:disabled</a></li><li><a href="checked_1.html">:checked</a></li><li><a href="selected_1.html">:selected</a></li><li><a href="jQuery.escapeSelector.html">$.escapeSelector(selector)</a><sup>3.0+</sup></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">Ajax</span></a><ul class="sub-menu"><li><a href="jQuery.Ajax.html">$.ajax(url,[settings])</a></li><li><a href="jQuery.get.html">$.get(url,[data],[fn],[type])</a></li><li><a href="jQuery.getJSON.html">$.getJSON(url,[data],[fn])</a></li><li><a href="jQuery.getScript.html">$.getScript(url,[callback])</a></li><li><a href="jQuery.post.html">$.post(url,[data],[fn],[type])</a></li><li><a href="ajaxComplete.html">ajaxComplete(callback)</a></li><li><a href="ajaxError.html">ajaxError(callback)</a></li><li><a href="ajaxSend.html">ajaxSend(callback)</a></li><li><a href="ajaxStart.html">ajaxStart(callback)</a></li><li><a href="ajaxStop.html">ajaxStop(callback)</a></li><li><a href="ajaxSuccess.html">ajaxSuccess(callback)</a></li><li><a href="jQuery.ajaxPrefilter.html">$.ajaxPrefilter([type],fn)</a></li><li><a href="jQuery.ajaxSetup.html">$.ajaxSetup([options])</a></li><li><a href="load.html">load(url,[data],[callback])</a></li><li><a href="serialize.html">serialize()</a></li><li><a href="serializeArray.html">serializeArray()</a></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">属性</span></a><ul class="sub-menu"><li><a href="attr.html" title="attr(name|properties|key,value|fn)">attr(name|pro|key,val|fn)</a></li><li><a href="removeAttr.html">removeAttr(name)</a></li><li><a href="prop.html" title="prop(name|properties|key,value|fn)">prop(n|p|k,v|f)</a><sup>1.6+</sup></li><li><a href="removeProp.html">removeProp(name)</a><sup>1.6+</sup></li><li><a href="addClass.html">addClass(class|fn)</a></li><li><a href="removeClass.html">removeClass([class|fn])</a></li><li><a href="toggleClass.html">toggleClass(class|fn[,sw])</a></li><li><a href="html.html">html([val|fn])</a></li><li><a href="text.html">text([val|fn])</a></li><li><a href="val.html">val([val|fn|arr])</a></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">CSS</span></a><ul class="sub-menu"><li><a href="css.html" title="css(name|properties|[,value|fn])">css(name|pro|[,val|fn])</a><sup>1.9*</sup></li><li><a href="jQuery.cssHooks.html">jQuery.cssHooks</a></li><li><a href="offset.html">offset([coordinates])</a></li><li><a href="position.html">position()</a></li><li><a href="scrollTop.html">scrollTop([val])</a></li><li><a href="scrollLeft.html">scrollLeft([val])</a></li><li><a href="height.html">height([val|fn])</a></li><li><a href="width.html">width([val|fn])</a></li><li><a href="innerHeight.html">innerHeight()</a></li><li><a href="innerWidth.html">innerWidth()</a></li><li><a href="outerHeight.html">outerHeight([options])</a></li><li><a href="outerWidth.html">outerWidth([options])</a></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">文档处理</span></a><ul class="sub-menu"><li><a href="append.html">append(content|fn)</a></li><li><a href="appendTo.html">appendTo(content)</a></li><li><a href="prepend.html">prepend(content|fn)</a></li><li><a href="prependTo.html">prependTo(content)</a></li><li><a href="after.html">after(content|fn)</a></li><li><a href="before.html">before(content|fn)</a></li><li><a href="insertAfter.html">insertAfter(content)</a></li><li><a href="insertBefore.html">insertBefore(content)</a></li><li><a href="wrap.html" title="wrap(html|element|fn)">wrap(html|ele|fn)</a></li><li><a href="unwrap.html">unwrap()</a></li><li><a href="wrapAll.html" title="wrapall(html|element)">wrapall(html|ele)</a></li><li><a href="wrapInner.html" title="wrapInner(html|element|fn)">wrapInner(html|ele|fn)</a></li><li><a href="replaceWith.html">replaceWith(content|fn)</a></li><li><a href="replaceAll.html">replaceAll(selector)</a></li><li><a href="empty.html">empty()</a></li><li><a href="remove.html">remove([expr])</a></li><li><a href="detach.html">detach([expr])</a></li><li><a href="clone.html">clone([Even[,deepEven]])</a></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">筛选</span></a><ul class="sub-menu"><li><a href="eq.html">eq(index|-index)</a></li><li><a href="first.html">first()</a></li><li><a href="last.html">last()</a></li><li><a href="hasClass.html">hasClass(class)</a></li><li><a href="filter.html" title="filter(expr|object|element|fn)">filter(expr|obj|ele|fn)</a></li><li><a href="is.html" title="is(expr|object|element|fn)">is(expr|obj|ele|fn)</a><sup>1.6*</sup></li><li><a href="map.html">map(callback)</a></li><li><a href="has.html" title="has(expr|element)">has(expr|ele)</a></li><li><a href="not.html" title="not(expr|element|fn)">not(expr|ele|fn)</a></li><li><a href="slice.html" title="slice(start,[end])">slice(start,[end])</a></li><li><a href="children.html">children([expr])</a></li><li><a href="closest.html" title="closest(expr,[context]|object|element)">closest(e|o|e)</a><sup>1.7*</sup></li><li><a href="find.html" title="find(expr|object|element)">find(e|o|e)</a><sup>1.6*</sup></li><li><a href="next.html">next([expr])</a></li><li><a href="nextAll.html">nextAll([expr])</a></li><li><a href="nextUntil.html" title="nextUntil([expr|element][,filter])">nextUntil([e|e][,f])</a><sup>1.6*</sup></li><li><a href="offsetParent.html">offsetParent()</a></li><li><a href="parent.html">parent([expr])</a></li><li><a href="parents.html">parents([expr])</a></li><li><a href="parentsUntil.html" title="parentsUntil([expr|element][,filter])">parentsUntil([e|e][,f])</a><sup>1.6*</sup></li><li><a href="prev.html">prev([expr])</a></li><li><a href="prevAll.html">prevAll([expr])</a></li><li><a href="prevUntil.html" title="prevUntil([expr|element][,filter])">prevUntil([e|e][,f])</a><sup>1.6*</sup></li><li><a href="siblings.html">siblings([expr])</a></li><li><a href="add.html" title="add(expr|element|html|object[,context])">add(e|e|h|o[,c])</a></li><li><a href="andSelf.html">andSelf()</a></li><li><a href="addBack.html">addBack()</a><sup>1.9+</sup></li><li><a href="contents.html">contents()</a></li><li><a href="end.html">end()</a></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">事件</span></a><ul class="sub-menu"><li><a href="ready.html">ready(fn)</a></li><li><a href="on.html" title="on(events,[selector],[data],fn)">on(eve,[sel],[data],fn)</a><sup>1.7+</sup></li><li><a href="off.html" title="off(events,[selector],[data],fn)">off(eve,[sel],[fn])</a><sup>1.7+</sup></li><li><a href="bind.html"><del>bind(type,[data],fn)</del></a><sup>3.0-</sup></li><li><a href="one.html">one(type,[data],fn)</a></li><li><a href="trigger.html">trigger(type,[data])</a></li><li><a href="triggerHandler.html">triggerHandler(type, [data])</a></li><li><a href="unbind.html" title="unbind(type,[data|fn])"><del>unbind(t,[d|f])</del></a><sup>3.0-</sup></li><li><a href="live.html"><del>live(type,[data],fn)</del></a><sup>1.7-</sup></li><li><a href="die.html"><del>die(type,[fn])</del></a><sup>1.7-</sup></li><li><a href="delegate.html" title="delegate(selector,[type],[data],fn)"><del>delegate(s,[t],[d],fn)</del></a><sup>3.0-</sup></li><li><a href="undelegate.html" title="undelegate([selector,[type],fn])"><del>undelegate([s,[t],fn])</del></a><sup>3.0-</sup></li><li><a href="hover.html">hover([over,]out)</a></li><li><a href="toggle.html">toggle(fn, fn2, [fn3, fn4, ...])</a></li><li><a href="blur.html">blur([[data],fn])</a></li><li><a href="change.html">change([[data],fn])</a></li><li><a href="click.html">click([[data],fn])</a></li><li><a href="dblclick_1.html">dblclick([[data],fn])</a></li><li><a href="error.html"><del>error([[data],fn])</del></a><sup>1.8-</sup></li><li><a href="focus.html">focus([[data],fn])</a></li><li><a href="focusin.html">focusin([data],fn)</a></li><li><a href="focusout.html">focusout([data],fn)</a></li><li><a href="keydown.html">keydown([[data],fn])</a></li><li><a href="keypress.html">keypress([[data],fn])</a></li><li><a href="keyup.html">keyup([[data],fn])</a></li><li><a href="mousedown.html">mousedown([[data],fn])</a></li><li><a href="mouseenter.html">mouseenter([[data],fn])</a></li><li><a href="mouseleave.html">mouseleave([[data],fn])</a></li><li><a href="mousemove.html">mousemove([[data],fn])</a></li><li><a href="mouseout.html">mouseout([[data],fn])</a></li><li><a href="mouseover.html">mouseover([[data],fn])</a></li><li><a href="mouseup.html">mouseup([[data],fn])</a></li><li><a href="resize.html">resize([[data],fn])</a></li><li><a href="scroll.html">scroll([[data],fn])</a></li><li><a href="select.html">select([[data],fn])</a></li><li><a href="submit.html">submit([[data],fn])</a></li><li><a href="unload.html"><del>unload([[data],fn])</del><sup>1.8-</sup></a></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">效果</span></a><ul class="sub-menu"><li><a href="show.html" title="show([speed,[easing],[fn]])">show([s,[e],[fn]])</a></li><li><a href="hide.html" title="hide([speed,[easing],[fn]])">hide([s,[e],[fn]])</a></li><li><a href="toggle.html" title="toggle([speed],[easing],[fn])">toggle([s],[e],[fn])</a></li><li><a href="slideDown.html" title="slideDown([speed],[easing],[fn])">slideDown([s],[e],[fn])</a></li><li><a href="slideUp.html" title="slideUp([speed,[easing],[fn]])">slideUp([s,[e],[fn]])</a></li><li><a href="slideToggle.html" title="slideToggle([speed],[easing],[fn])">slideToggle([s],[e],[fn])</a></li><li><a href="fadeIn.html" title="fadeIn([speed],[easing],[fn])">fadeIn([s],[e],[fn])</a></li><li><a href="fadeOut.html" title="fadeOut([speed],[easing],[fn])">fadeOut([s],[e],[fn])</a></li><li><a href="fadeTo.html" title="fadeTo([[speed],opacity,[easing],[fn]])">fadeTo([[s],o,[e],[fn]])</a></li><li><a href="fadeToggle.html" title="fadeToggle([speed,[easing],[fn]])">fadeToggle([s,[e],[fn]])</a></li><li><a href="animate.html" title="animate(params,[speed],[easing],[fn])">animate(p,[s],[e],[fn])</a><sup>1.8*</sup></li><li><a href="stop.html" title="stop([clearQueue],[jumpToEnd])">stop([c],[j])</a><sup>1.7*</sup></li><li><a href="delay.html" title="delay(duration,[queueName])">delay(d,[q])</a></li><li><a href="finish.html" title="finish([queue])">finish([queue])</a><sup>1.9+</sup></li><li><a href="jQuery.fx.off.html">jQuery.fx.off</a></li><li><a href="jQuery.fx.interval.html"><del>jQuery.fx.interval</del></a><sup>3.0-</sup></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">工具</span></a><ul class="sub-menu"><li><a href="jQuery.support.html"><del>$.support</del></a><sup>1.9-</sup></li><li><a href="jQuery.browser.html"><del>$.browser</del></a><sup>1.9-</sup></li><li><a href="jQuery.browser.version.html">$.browser.version</a></li><li><a href="jQuery.boxModel.html"><del>$.boxModel</del></a></li><li><a href="jQuery.each.html">$.each(object,[callback])</a></li><li><a href="jQuery.extend.html">$.extend([d],tgt,obj1,[objN])</a></li><li><a href="jQuery.grep.html">$.grep(array,fn,[invert])</a></li><li><a href="jQuery.sub.html"><del>$.sub()</del></a><sup>1.9-</sup></li><li><a href="jQuery.when.html">$.when(deferreds)</a></li><li><a href="jQuery.makeArray.html">$.makeArray(obj)</a></li><li><a href="jQuery.map.html">$.map(arr|obj,callback)</a><sup>1.6*</sup></li><li><a href="jQuery.inArray.html">$.inArray(val,arr,[from])</a></li><li><a href="jQuery.toArray.html">$.toArray()</a></li><li><a href="jQuery.merge.html">$.merge(first,second)</a></li><li><a href="jQuery.unique.html"><del>$.unique(array)</del></a><sup>3.0-</sup></li><li><a href="jQuery.uniqueSort.html">$.uniqueSort(array)</a><sup>3.0+</sup></li><li><a href="jQuery.parseJSON.html"><del>$.parseJSON(json)</del></a><sup>3.0-</sup></li><li><a href="jQuery.parseXML.html">$.parseXML(data)</a></li><li><a href="jQuery.noop.html">$.noop</a></li><li><a href="jQuery.proxy.html">$.proxy(function,context)</a></li><li><a href="jQuery.contains.html" title="$.contains(container,contained)">$.contains(c,c)</a></li><li><a href="jQuery.type.html">$.type(obj)</a></li><li><a href="jQuery.isArray.html"><del>$.isArray(obj)</del></a><sup>3.2-</sup></li><li><a href="jQuery.isFunction.html"><del>$.isFunction(obj)</del></a><sup>3.3-</sup></li><li><a href="jQuery.isEmptyObject.html">$.isEmptyObject(obj)</a></li><li><a href="jQuery.isPlainObject.html">$.isPlainObject(obj)</a></li><li><a href="jQuery.isWindow.html"><del>$.isWindow(obj)</del></a><sup>3.3-</sup></li><li><a href="jQuery.isNumeric.html">$.isNumeric(value)</a><sup>1.7+</sup></li><li><a href="jQuery.trim.html">$.trim(str)</a></li><li><a href="jQuery.param.html">$.param(obj,[traditional])</a></li><li><a href="jQuery.error.html">$.error(message)</a></li><li><a href="jquery.html">$.fn.jquery</a></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">事件对象</span></a><ul class="sub-menu"><li><a href="event.currentTarget.html">eve.currentTarget</a></li><li><a href="event.data.html">eve.data</a></li><li><a href="event.delegateTarget.html">eve.delegateTarget</a><sup>1.7+</sup></li><li><a href="event.isDefaultPrevented.html">eve.isDefaultPrevented()</a></li><li><a href="event.isImmediatePropagationStopped.html" title="event.isImmediatePropagationStopped">eve.isImmediatePropag...()</a></li><li><a href="event.isPropagationStopped.html">eve.isPropagationStopped()</a></li><li><a href="event.namespace.html">eve.namespace</a></li><li><a href="event.pageX.html">eve.pageX</a></li><li><a href="event.pageY.html">eve.pageY</a></li><li><a href="event.preventDefault.html">eve.preventDefault()</a></li><li><a href="event.relatedTarget.html">eve.relatedTarget</a></li><li><a href="event.result.html">eve.result</a></li><li><a href="event.stopImmediatePropagation.html" title="event.stopImmediatePropagation">eve.stopImmediatePro...()</a></li><li><a href="event.stopPropagation.html">eve.stopPropagation()</a></li><li><a href="event.target.html">eve.target</a></li><li><a href="event.timeStamp.html">eve.timeStamp</a></li><li><a href="event.type.html">eve.type</a></li><li><a href="event.which.html">eve.which</a></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">延迟对象</span></a><ul class="sub-menu"><li><a href="deferred.done.html" title="deferred.done(doneCallbacks[,doneCallbacks])">def.done(d,[d])</a></li><li><a href="deferred.fail.html">def.fail(failCallbacks)</a></li><li><a href="deferred.isRejected.html"><del>def.isRejected()</del></a><sup>1.7-</sup></li><li><a href="deferred.isResolved.html"><del>def.isResolved()</del></a><sup>1.7-</sup></li><li><a href="deferred.reject.html">def.reject(args)</a></li><li><a href="deferred.rejectWith.html" title="deferred.rejectWith(context,[args])">def.rejectWith(c,[a])</a></li><li><a href="deferred.resolve.html">def.resolve(args)</a></li><li><a href="deferred.resolveWith.html" title="deferred.resolveWith(context,[args])">def.resolveWith(c,[a])</a></li><li><a href="deferred.then.html" title="deferred.then(doneCallbacks,failCallbacks[, progressCallbacks])">def.then(d[,f][,p])</a><sup>1.8*</sup></li><li><a href="deferred.promise.html" title="deferred.promise([type],[target])">def.promise([ty],[ta])</a><sup>1.6+</sup></li><li><a href="deferred.pipe.html" title="deferred.pipe([doneFilter],[failFilter],[progressFilter])"><del>def.pipe([d],[f],[p])</del></a><sup>1.8-</sup></li><li><a href="deferred.always.html" title="deferred.always(alwaysCallbacks,[alwaysCallbacks])">def.always(al,[al])</a><sup>1.6+</sup></li><li><a href="deferred.notify.html">def.notify(args)</a><sup>1.7+</sup></li><li><a href="deferred.notifyWith.html" title="deferred.notifyWith(context,[args])">def.notifyWith(c,[a])</a><sup>1.7+</sup></li><li><a href="deferred.progress.html" title="deferred.progress(progressCallbacks)">def.progress(proCal)</a><sup>1.7+</sup></li><li><a href="deferred.state.html">def.state()</a><sup>1.7+</sup></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">回调函数</span></a><ul class="sub-menu"><li><a href="callbacks.add.html">cal.add(callbacks)</a><sup>1.7+</sup></li><li><a href="callbacks.disable.html">cal.disable()</a><sup>1.7+</sup></li><li><a href="callbacks.empty.html">cal.empty()</a><sup>1.7+</sup></li><li><a href="callbacks.fire.html">cal.fire(arguments)</a><sup>1.7+</sup></li><li><a href="callbacks.fired.html">cal.fired()</a><sup>1.7+</sup></li><li><a href="callbacks.fireWith.html" title="callbacks.fireWith([context] [, args])">cal.fireWith([c] [,a])</a><sup>1.7+</sup></li><li><a href="callbacks.has.html">cal.has(callback)</a><sup>1.7+</sup></li><li><a href="callbacks.lock.html">cal.lock()</a><sup>1.7+</sup></li><li><a href="callbacks.locked.html">cal.locked()</a><sup>1.7+</sup></li><li><a href="callbacks.remove.html">cal.remove(callbacks)</a><sup>1.7+</sup></li><li><a href="jQuery.callbacks.html">$.callbacks(flags)</a><sup>1.7+</sup></li></ul></li><li class="has-submenu"><a class="menu-title" href="javascript:void(0);"><i class="fa fa-leaf"></i> <span class="nav-label">其它</span></a><ul class="sub-menu"><li><a href="regexp.html">正则表达式</a></li><li><a href="html5.html">HTML5速查表</a></li><li><a href="https://jquery.cuishifeng.cn/source.html">源码下载</a></li></ul></li><!-- <li> <a class="menu-title" href="https://www.cuishifeng.cn/go/card" target="_blank"> <i class="fa fa-card"></i> <span class="nav-label">信用卡优惠</span> </a> </li> --><li><a class="menu-title" href="https://www.cuishifeng.cn/go/aliyun" target="_blank"><i class="fa fa-leaf"></i> <span class="nav-label">阿里云一折主机</span></a></li><li><a class="menu-title" href="https://www.cuishifeng.cn/go/tencent" target="_blank"><i class="fa fa-leaf"></i> <span class="nav-label">腾讯云秒杀</span></a></li><!-- <li> <a class="menu-title" href="https://www.cuishifeng.cn/go/tao" target="_blank"> <i class="fa fa-user"></i> <span class="nav-label">淘宝内部优惠券</span> </a> </li> --><li><a class="menu-title" href="https://css.cuishifeng.cn" target="_blank"><i class="fa fa-leaf"></i> <span class="nav-label">CSS速查手册</span></a></li></ul></nav></aside><!-- left aside end --> <script src="https://jquery.cuishifeng.cn/js/jquery-3.2.1_b5dbe7b.js"></script> <script src="https://jquery.cuishifeng.cn/js/jquery.autocomplete_2e9587b.js"></script> <script src="https://jquery.cuishifeng.cn/js/jquery.mousewheel_dcccae2.js"></script> <script src="https://jquery.cuishifeng.cn/js/jquery.mCustomScrollbar_12eb4de.js"></script> <script src="https://jquery.cuishifeng.cn/js/jquery.swiper_a82c373.js"></script> <script src="https://jquery.cuishifeng.cn/js/shifone.index_03edf2f.js"></script> <div class="tongji"> <script>"use strict";var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?bbcf1c00c855ede39d5ad2eac08d2ab7";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();</script> </div> </body> </html>
这是Jquery的字典。
综合案例面面俱到效果图如下所示。
在上面的图上本人用了三个页面分述了Jquery选择器，Jquery事件，Jquery效果。
本人展示的是部分内容下面是第一部分代码展示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.6.js"></script> <title>筛选选择器</title> <style> *{ background-image: linear-gradient(0deg, white, whitesmoke); font-size: 23px; font-weight: bolder; border: lavender 1px; } </style> </head> <body> <div class="father"> <div class="son">我是father的儿子div1</div> <div class="son">我是father的女儿div3</div> </div> <div class="father"> <div class="son">我是father的儿子div2</div> </div> <div class="nav"> <p>这是nav的儿子</p> <div class="b"> <p class="c">这是nav的孙子1</p> <p class="e">这是nav的孙子2</p> <p >这是nav的孙子3</p> <p class="f">这是nav的孙子4</p> <p >这是nav的孙子34</p> <p >这是nav的孙子44</p> <p class="a">这是nav的孙女</p> </div> <a href="">儿子</a> <hr> <a href="选择器主窗口.html">点击这里回到主界面</a> </div> <script> $(function () { /*$('*').css("font-size","30px");*/ //父paarent $('.son').parent().css("color","red"); $('.son').parent().css("font-size","23px"); console.log($('p').parent()); console.log($('p').parents()); //查找p的父级 //2子 $('.a').parent().css("color","red"); $('.a').parent().css("background-color","yellow"); $('div.b>p').css("color","red"); $('div.b>p').css("font-size","32px"); $('div.b>p.c').css("color","pink"); $('div.b>p.e').css("color","green"); $("div.b>p.c:first").css("background", "red"); $("div.b>p.c:first").css("font-size", "100px"); $("div.b>p.f.first").css("font-size", "100px"); $("div:eq(3)").css("background", "brown"); /* $('.nav').find('div:eq(0)').css("background-color", "pink");*/ console.log($('div')); console.log($('.nav>div')); console.log($('.nav>div').children()); /* console.log($('.nav>div').children('div')); console.log($('.nav>div').children('div').children());*/ $('.nav').children("a").css("font-size","60px"); $('nav>div').children('p').css("color","red"); }); //fond </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筛选选择器</title> <style> *{ background-image: linear-gradient(0deg, white, whitesmoke); font-size: 23px; font-weight: bolder; border: lavender 1px; } </style> <script src="jquery-3.6.js"></script> <body> <ol> <li>borther元素1</li> <li>borther元素2</li> <li >borther元素3</li> <li>borther元素4</li> <li>borther元素5</li> <li>borther元素6</li> <li>borther元素11</li> <li>borther元素21</li> <li >borther元素31</li> <li>borther元素41</li> <li>borther元素51</li> <li>borther元素61</li> <a href="#">borther元素7</a> </ol> <ul> <li>borther元素8</li> <li>borther元素9</li> <li>borther元素10</li> <li>borther元素11</li> <li>borther元素12</li> <li class="items">borther元素13</li> <li>borther元素18</li> <li>borther元素19</li> <li>borther元素110</li> <li>borther元素111</li> <li>borther元素112</li> <li>borther元素113</li> <a href="#">borther元素14</a> </ul> <div class="current">current</div> <div> not current</div> <hr> <a href="选择器主窗口.html">点击这里回到主界面</a> <script> $(function () { /*$('*').css("font-size","45px"); $('ul li ').css("color","red"); $('ul li ').css("font-size","50px"); $('ul li ').css("background-color","yellow"); $('ol li.item').css("color","red"); $('div.current:first').css("color","green"); $('div:last').hasClass('current').css("color","blue"); $('ul.li').nextAll().css("color","green"); */ var idx =2; $('ol li ').eq(idx).css("background-color","red"); $('ul li:eq('+idx+')').css("background-color","pink"); $('ul li.items').siblings().css("color","red"); /* console.log($('div:first')).hasClass('current');*/ /* console.log($('div:last')).hasClass('current');*/ }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> *{ background-image: linear-gradient(0deg, white, whitesmoke); font-size: 23px; font-weight: bolder; border: lavender 1px; } div, span, p { width: 200px; height: 150px; margin: 1px; background: yellow; border: #000 5px solid; float: left; font-size: 17px; font-family: Verdana; /* border-radius: 50%;*/ } div.mini { width: 60px; height: 60px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script src="jquery-3.6.js"></script> <title>基本选择器</title> </head> <body> <script> $(document).ready(function () { //1.选择 id 为 one 的元素 "background-color","#bbffaa" $("#btn1").click(function () { $("#one").css("background-color","red"); $("#one").css("color","white"); }) //2.选择 class 为 mini 的所有元素 $("#btn2").click(function () { $(".mini").css("background-color"," pink"); $(".mini").css("color"," red"); }) $("#btn3").click(function () { //3.选择 元素名是 div 的所有元素 $("div").css("background-color","orange"); $("div").css("color","pink"); }) //4.选择所有的元素 $("#btn4").click(function () { $("*").css("background-color","yellow"); $("*").css("font-size","20px"); }) //5.选择所有的 span 元素和id为two的元素 $("#btn5").click(function () { $("span,#two").css("background-;color","green"); $("span,#two").css("color","cyan"); }) }); </script> <input type="button" value="选择 id 为 one 的元素" id="btn1" /> <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /> <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /> <input type="button" value="选择 所有的元素" id="btn4" /> <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /> <br> <div class="one" id="one">1001 id 为 one,class 为 one 的div <div class="mini">class为mini1002</div> </div> <div class="one" id="two" title="test">1003 id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other1004</div> <div class="mini" title="test">class为mini,title为test1005</div> </div> <div class="one">1006 <div class="mini">class为mini1007</div> <div class="mini">class为mini1008</div> <div class="mini">class为mini1009</div> <div class="mini">1010</div> </div> <div class="one"> <div class="mini">class为mini1011</div> <div class="mini">class为mini1012</div> <div class="mini">class为mini1013</div> <div class="mini" title="tesst">class为mini,title为tesst1014</div> </div> <div style="display:none;" class="none">style的display为"none"的div1015</div> <div class="hide">class为"hide"的div1016</div> <div> 包含input的type为"hidden"的div1017<input type="hidden" size="8"> </div> <span class="one" id="span">^1018^span元素^^</span> </body> <hr> <hr> <a href="选择器主窗口.html">点击这里回到主界面</a> <script type="text/javascript"> $(document).ready(function(){ //1.选择 body 内的所有 div 元素 $("#btn1").click(function(){ $("body div").css("background", "pink"); $("body div").css("color", "red"); }); //2.在 body 内, 选择div子元素 $("#btn2").click(function(){ $("body>div").css("background", "yellow"); $("body>div").css("color", "white"); }); //3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function(){ $("#one+div").css("background", "red"); $("#two+div").css("background", "red"); }); //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn4").click(function(){ $("#one~div").css("background", "blue"); }); }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <script src="jquery-3.6.js"></script> <style type="text/css"> *{ background-image: linear-gradient(0deg, white, whitesmoke); font-size: 23px; font-weight: bolder; border: lavender 1px; } div, span, p { width: 140px; height: 190px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript"> $(document).ready(function(){ //1.选择 body 内的所有 div 元素 $("#btn1").click(function(){ $("body div").css("background", "pink"); $("body div").css("color", "red"); }); //2.在 body 内, 选择div子元素 $("#btn2").click(function(){ $("body>div").css("background", "yellow"); $("body>div").css("color", "white"); }); //3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function(){ $("#one+div").css("background", "red"); $("#two+div").css("background", "red"); }); //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn4").click(function(){ $("#one~div").css("background", "blue"); }); }); </script> </head> <body> <!-- <div> <h1>层级选择器:根据元素的层级关系选择元素</h1> ancestor descendant ： parent > child ： prev + next ： prev ~ siblings ： </div> --> <input type="button" value="选择 body 内的所有 div 元素" id="btn1" /> <input type="button" value="在 body 内, 选择div子元素" id="btn2" /> <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /> <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /> <br><br> <div class="one" id="one">1001 id 为 one,class 为 one 的div <div class="mini">class为mini1002</div> </div> <div class="one" id="two" title="test">1003 id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other1004</div> <div class="mini" title="test">class为mini,title为test1005</div> </div> <div class="one">1006 <div class="mini">class为mini1007</div> <div class="mini">class为mini1008</div> <div class="mini">class为mini1009</div> <div class="mini">1010</div> </div> <div class="one">1011 <div class="mini">class为mini1012</div> <div class="mini">class为mini1013</div> <div class="mini">class为mini1014</div> <div class="mini" title="tesst">class为mini,title为tesst1015</div> </div> <div style="display:none;" class="none">style的display为"none"的div1016</div> <div class="hide">class为"hide"的div1017</div> <div> 包含input的type为"hidden"的div 1018<input type="hidden" size="8"> </div> <span id="span">^^span元素^^1019</span> <hr> <a href="选择器主窗口.html">点击这里回到主界面</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内容过滤选择器</title> <script src="jquery-3.6.js"></script> <style type="text/css"> *{ background-image: linear-gradient(0deg, white, whitesmoke); font-size: 23px; font-weight: bolder; border: lavender 1px; } div, span, p { width: 200px; height: 200px; margin: 1px; background: deepskyblue; border: #000 2px solid; float: left; font-size: 17px; font-family: Verdana; border-radius: 10%; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); $("#btn1").slideToggle("slow",anmateIt) $("#btn2").slideToggle("slow",anmateIt) $("div:contains('di')").slideToggle("slow",anmateIt) } anmateIt(); }); /** :contains(text) :empty :has(selector) :parent */ $(document).ready(function(){ //1.选择 含有文本 'di' 的 div 元素 $("#btn1").click(function(){ $("div:contains('di')").css("background", "red"); }); //2.选择不包含子元素(或者文本元素) 的 div 空元素 $("#btn2").click(function(){ $("div:empty").css("background", "pink"); }); //3.选择含有 class 为 mini 元素的 div 元素 $("#btn3").click(function(){ $("div:has('.mini')").css("background", "gray"); }); //4.选择含有子元素(或者文本元素)的div元素 $("#btn4").click(function(){ $("div:parent").css("background", "orange"); }); }); </script> </head> <body> <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /> <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /> <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /> <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" /> <br><br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test1</div> <div class="mini" title="other">class为mini,title为other2</div> <div class="mini" title="test">class为mini,title为test3</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> <div class="mini"></div> <div class="mini">2</div> <div class="mini"></div> <div class="mini"></div> <div class="mini"></div> </div> <div class="one" > <div class="mini" >class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <div id="mover">正在执行动画的div元素.</div> <hr> <a href="选择器主窗口.html">点击这里回到主界面</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可见性过滤选择器</title> <script src="jquery-3.6.js"></script> <style type="text/css"> *{ background-image: linear-gradient(0deg, white, whitesmoke); font-size: 23px; font-weight: bolder; border: lavender 1px; } div, span, p { width: 140px; height: 300px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); }); /** :hidden :visible */ $(document).ready(function(){ //1.选取所有可见的 div 元素 $("#btn1").click(function(){ $("div:visible").css("background", "pink"); }); //2.选择所有不可见的 div 元素 //不可见：display属性设置为none，或visible设置为hidden $("#btn2").click(function(){ $("div:hidden").show("slow").css("background", "yellow"); $("div:hidden").show("slow").css("color", "red"); }); //3.选择所有不可见的 input 元素 $("#btn3").click(function(){ alert($("input:hidden").attr("value")); }); }); </script> <body> <input type="button" value="选取所有可见的 div 元素" id="btn1"> <input type="button" value="选择所有不可见的 div 元素" id="btn2" /> <input type="button" value="选择所有不可见的 input 元素" id="btn3" /> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"> </div> <div id="mover">正在执行动画的div元素.</div> <hr> <a href="选择器主窗口.html">点击这里回到主界面</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性过滤选择器</title> <script src="jquery-3.6.js"></script> <style type="text/css"> *{ background-image: linear-gradient(0deg, white, whitesmoke); font-size: 23px; font-weight: bolder; border: lavender 1px; } div,span,p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript"> /** [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN] */ $(function() { //1.选取含有 属性title 的div元素 $("#btn1").click(function() { $("div[title]").css("background", "pink"); }); //2.选取 属性title值等于'test'的div元素 $("#btn2").click(function() { $("div[title='test']").css("background", "red"); }); //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中) $("#btn3").click(function() { $("div[title!='test']").css("background", "green"); }); //4.选取 属性title值 以'te'开始 的div元素 $("#btn4").click(function() { $("div[title^='te']").css("background", "yellow"); }); //5.选取 属性title值 以'est'结束 的div元素 $("#btn5").click(function() { $("div[title$='est']").css("background", "orange"); }); //6.选取 属性title值 含有'es'的div元素 $("#btn6").click(function() { $("div[title*='es']").css("background", "cyan"); }); //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素 $("#btn7").click(function() { $("div[id][title*=es]").css("background", "#bbffaa"); }); //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素 $("#btn8").click(function() { $("div[title!='test'][title]").css("background", "#bbffaa"); }); }); </script> </head> <body> <input type="button" value="选取含有 属性title 的div元素." id="btn1" /> <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" /> <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" /> <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" /> <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" /> <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" /> <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7" /> <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" /> <br> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display: none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" value="123456789" ; font-size="8"> </div> <div id="mover">正在执行动画的div元素.</div> <hr> <a href="选择器主窗口.html">点击这里回到主界面</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单对象属性过滤选择器</title> <style> *{ background-image: linear-gradient(0deg, white, whitesmoke); font-size: 23px; font-weight: bolder; border: lavender 1px; } </style> <script src="jquery-3.6.js"></script> <script type="text/javascript"> $(function(){ /** :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 表单对象的属性 :enabled :disabled :checked :selected */ //1.对表单内 可用input 赋值操作 $("#btn1").click(function(){ $(":enabled").val("New Value"); }); //2.对表单内 不可用input 赋值操作 $("#btn2").click(function(){ $(":disabled").val("New Value Too"); }); //3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数 $("#btn3").click(function(){ alert($(":checkbox:checked").size()) }); //4.获取多选框，每个选中的value值 $("#btn4").click(function(){ var str = ""; var eles = $(":checkbox:checked"); console.log(eles); for(var i=0;i<eles.size();i++){ str += "【"+$(eles[i]).val()+"】"; } alert(str) }); //5.获取下拉框选中的内容 $("#btn5").click(function(){ var str = ""; //注意这个选择器的特殊，因为select里面的option是真正的被选择项， //所以 :selected 选择器和 select[name='test']选择器的关系是子父关系 //必须按照基本选择器选择后代的方法选 var els = $(":selected"); console.log(els); for(var i=0;i<els.size();i++){ str += "【"+$(els[i]).val()+"】"; } alert(str) }); }) </script> </head> <body> <h3>表单对象属性过滤选择器</h3> <button id="btn1">对表单内 可用input 赋值操作.</button> <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /> <button id="btn3">获取多选框选中的个数.</button> <button id="btn4">获取多选框选中的内容.</button><br /><br /> <button id="btn5">获取下拉框选中的内容.</button><br /><br /> <form id="form1" action="#"> 可用元素: <input name="add" value="可用文本框1"/><br> 不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br> 可用元素: <input name="che" value="可用文本框2"/><br> 不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br> <br> 多选框: <br> <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 <input type="checkbox" name="newsletter" value="test2" />test2 <input type="checkbox" name="newsletter" value="test3" />test3 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 <input type="checkbox" name="newsletter" value="test5" />test5 <br><br> 下拉列表1: <br> <select name="test" multiple="multiple" style="height: 100px" id="sele1"> <option>浙江</option> <option selected="selected">辽宁</option> <option>北京</option> <option selected="selected">天津</option> <option>广州</option> <option>湖北</option> </select> <br><br> 下拉列表2: <br> <select name="test2"> <option>浙江</option> <option>辽宁</option> <option selected="selected">北京</option> <option>天津</option> <option>广州</option> <option>湖北</option> </select> </form> <hr> <a href="选择器主窗口.html">点击这里回到主界面</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.6.js"></script> <style> *{ background-image: linear-gradient(0deg, white, whitesmoke); font-size: 20px; text-shadow: 1px 1px 1px pink; font-weight: bolder; border: lavender 1px; } .top{ height: auto; width: 100%; margin-left: 0; background-color: paleturquoise; /* position: fixed;*/ top: 2px; margin-bottom: 6%; } .top.li{ width: auto; list-style-type: none; white-space: nowrap; overflow: hidden; margin-left: 6%; padding: 0px; } .top li a{ display: block; color: #FF0000; background-color: whitesmoke; text-align: center; font-size: 18px; padding: 4px; overflow: hidden; text-decoration: none; } #panel,#flip { padding:5px; text-align:center; border-radius: 9%; background-color: paleturquoise; border:solid 3px #c3c3c3; font-size: 16px; } #panel { padding:50px; display:none; font-size: 29px; color:black; } .qw{ text-align: center; } </style> <title>主界面</title> </head> <body> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); $(document).click(function () { $("#panel").css("font-size","26px"); alert("欢迎来到Hellow World see you 程序员") }) }); </script> <h1 style="text-align: center">主界面运行窗口</h1> <div id="flip">点我，显示或隐藏面板。</div> <div id="panel"> 选择器<br> 1) $('#id') id选择器<br> <hr> 2) $('.class') css选择器,class类名<br> <hr> 3) $('element') 标签选择器，例如p,h1,div<br> <hr> 4) $('*') 全选择器,可选择所有的html标签(影响范围较大甚用)<br> <hr> 5) $('sele1,sele2') 用‘,'逗号隔开可以选择多个不同元素有相同效果的选择器<br> <hr> 6) $('div p') 层次选择器,常用的选择器,例如div下面的p标签<br> <hr> 7） $('div>p') 与上一个层次选择器差不多,但是div下面有子元素,子元素下还有孙元素,该选择器只能选子元素<br> <hr> 8） $('div+p') 该选择器用得很少表示div相邻下一个选择器,(必须是相同层次元素并且紧挨的）<br> <hr> 9) $('div~p') 在相同阶段的元素从div开始一直到该阶段尾部所有的p标签被选中,不包括往下元素的为p子元素<br> <hr> 10） $('div:first') 过滤选择器,:first用:与父级元素连接,选择的第一个div元素;<br> <hr> 11） $('div:last') 过滤选择器;:last方法与上一样不过是选择最后一个div元素;<br> <hr> 12） $('li:eq(1)') 该选择器也是过滤选择器;用‘:eq()'连接,括号内输入数字选择从0开始,0代表第一位;<br> <hr> 13) $('li:contains("text")') 该选择器可选择如:li里面文字中所有text的所有元素包括li下的子元素带有text都被选中text可以是自己所需要的关键字;('text')需要加单或双引号,因为它是字符串而不是变量<br> <hr> 14) $('li:has("p")') 该选择器与层次选择器效果差不多也是选择li以下的所有p标签可被继承;<br> <hr> 15) $('div:hidden') :hidden该选择器可以选择一些display:none;隐藏的选择器<br> <hr> 16) $('span:visible') 与:hidden恰恰相反将所有span标签都选中,但display:none的span属性不选中<br> <hr> 17) $('li[title=book]') 属性选择器,选中li里属性为title=book的元素;<br> <hr> 18) $('li[title!=book]') 与上一个相反选中li内title不为,不等于book的元素;<br> <hr> 19) $('li[title*=k]') 属性选择器,选择所有li内,全部title中带有k字的元素;<br> <hr> 20) $('li:first-child') 子元素过滤器;:first过滤器可以获取指定父元素的首个子元素,并不是一个集合.只是一个li下的首个子元素并不是所有的li下的子元素.而first-child获得每个父元素返回的首个子元素;<br> <hr> 21) $('li:last-child') 与上过滤选择器一样,last:child会获得每个父元素返回的最后一个子元素;<br> <hr> 22) $('form :input') 表单选择器所包含的有input,select,button,textarea,<br> <hr> 23) $('form :text') 表单文本选择器,该选择器只包含<input type='text'>类型做选择<br> <hr> 24) $('form :password') 表单密码选择器,同样也只包含input内 type='password'类型,<br> <hr> 25) $('form :radio') 单选按钮选择器,同样也只包含input内type =' radio'类型,26) $('form :checkbox') 复选框选择器,同样也只包含input内type='checkbox'类型<br> <hr> 27) $('form :submit') 提交按钮选择器,包含input内type="submit"和button类型,<br> <hr> 28) $('form :image') 图像域选择器.只有input内的src才能生效。如在form内添加img src将不会受到影响<br> <hr> 29) $('form :button') 表单按钮选择器.包含input内type='button'与<button></button>有效<br> <hr> 30) $('form :checked') 选中状态选择器,带有选择框radio,checkbox都将被选中;<br> <hr> 31) $('form :selected') 下选框选中选择器,只能获取select下拉列表中全部处于选中状态的option选择器;<br> <hr> 鼠标事件单机 click() mouseenter() () hide() dblclick() mouseleave ()<br> <hr> 键盘单机 keypress() keydown() keyup ()<br> <hr> 表单单机 submit() change() focus blur()<br> <hr> 文档窗口事件 scroll() resize ()<br> <hr> </div> <hr> <div class="top"> <center> <ol> <li><a href="选择器1.html">选择器1</a></li> <li><a href="选择器2.html">选择器2</a></li> <li><a href="选择器3.html">选择器3</a></li> <li><a href="选择器4.html">选择器4</a></li> <li><a href="选择器5.html">选择器5</a></li> <li><a href="选择器6.html">选择器6</a></li> <li><a href="选择器7.html">选择器7</a></li> <li><a href="筛选选择器.html">筛选选择器</a></li> <li><a href="筛选选择器1.html">筛选选择器</a></li> </ol> </center> </div> </body> </html>
