jQuery.nicescroll 中文API

合集下载

jquery.cookie使用方法(中文详细版)

jquery.cookie使用方法(中文详细版)

jquery.cookie使用方法一个轻量级的cookie插件,可以读取、写入、删除cookie。

jquery.cookie.js的配置首先包含jQuery的库文件,在后面包含jquery.cookie.js的库文件。

使用方法新添加一个会话cookie:创建一个cookie并设置有效时间为7天:创建一个cookie并设置cookie的有效路径:读取cookie:删除cookie,通过传递null作为cookie的值即可:相关参数的解释定义cookie的有效时间,值可以是一个数字(从创建cookie时算起,以天为单位)或一个Date对象。

如果省略,那么创建的cookie是会话cookie,将在用户退出浏览器时被删除。

默认情况:只有设置cookie的网页才能读取该cookie。

定义cookie的有效路径。

默认情况下,该参数的值为创建cookie的网页所在路径(标准浏览器的行为)。

如果你想在整个网站中访问这个cookie需要这样设置有效路径:path: '/'。

如果你想删除一个定义了有效路径的cookie,你需要在调用函数时包含这个路径:$.cookie('the_cookie', null, { path: '/' });。

默认值:创建cookie的网页所拥有的域名。

默认值:false。

如果为true,cookie的传输需要使用安全协议(HTTPS)。

默认值:false。

默认情况下,读取和写入cookie的时候自动进行编码和解码(使用encodeURIComponent编码,decodeURIComponent解码)。

要关闭这个功能设置raw: true即可。

jq confirm animation用法

jq confirm animation用法

一、概述jq confirm animation(jQuery确认动画)是一种常见的网页交互效果,它通过jQuery库实现了在用户执行确认操作时显示动画效果的功能。

这种动画效果能够增强用户操作的可视化体验,使网页交互更加生动和直观。

在实际的网页开发中,使用jq confirm animation可以为用户提供更好的操作提示和反馈,提高用户体验。

二、 jq confirm animation的基本用法1. 引入jQuery库在使用jq confirm animation之前,首先需要在网页中引入jQuery 库。

可以通过CDN引入,也可以将jQuery库文件下载到本地并引入。

2. 编写HTML结构在网页的HTML结构中,需要创建一个触发jq confirm animation的元素,通常是一个按钮或者信息。

例如:```<button id="confirmBtn">确认按钮</button>```3. 编写JavaScript代码接下来,在网页中编写JavaScript代码,使用jQuery库的方法来实现jq confirm animation。

代码如下:```// 当确认按钮被点击时$("#confirmBtn").click(function() {// 显示动画效果$(this).animate({opacity: 0.5}, 500, function() {// 确认操作var result = confirm("确认执行此操作吗?");// 根据用户的确认结果进行相应的处理if (result) {// 执行操作// ...} else {// 取消操作// ...}// 恢复按钮的显示$(this).animate({opacity: 1}, 500);});});```在上面的例子中,点击确认按钮时会先显示一个动画效果,然后弹出确认对话框,根据用户的选择进行相应的处理,最后恢复按钮的显示状态。

jquery confirm的用法

jquery confirm的用法

jQuery Confirm 是一个基于 jQuery 的插件,它提供了一种简单而有效的方式来创建和显示确认对话框。

下面是 jQuery Confirm 的基本用法:1. 引入 jQuery 和 jQuery Confirm 插件的 JavaScript 文件:html复制代码<script src="jquery.js"></script><script src="jquery.confirm.js"></script>2. 在需要使用确认对话框的地方,调用 confirm() 方法,传入提示消息和确认按钮的文本:javascript复制代码if (!confirm('确定要删除该文件吗?')) {return false;}3. 可以使用一些可选参数来自定义确认对话框的样式和行为:javascript复制代码$.confirm({title: '提示', // 标题message: '确定要删除该文件吗?', // 提示消息buttons: {确定: {text: '确定', // 按钮文本key: 'enter', // 按下回车键触发确认按钮点击事件className: 'btn-primary', // 按钮样式类名callback: function () {// 点击确定按钮后的回调函数// 执行删除文件的操作}},取消: {text: '取消', // 按钮文本key: 'esc', // 按下Esc键触发取消按钮点击事件className: 'btn-default'// 按钮样式类名}}});以上是 jQuery Confirm 的基本用法,可以结合自己的需求进行定制化使用。

黑马程序员UI教程:网页滚动自定义条美化

黑马程序员UI教程:网页滚动自定义条美化

jquery.nicescroll.js是一个jquery 插件,需要jquery库的支持,它能够轻松的美化浏览器默认的滚动条,支持水平滚动条。

甚至于强大到它支持盒子、Iframe、文本区域、和文档页滚动条。

那么下面我们来看看兼容性如何:浏览器兼容:火狐4 +,Chrome 5 + Safari 4 + (win/mac),Opera 10 + IE 6+。

移动端兼容:iPad Iphone、Android 2.2 +,黑莓手机与Playbook (WebWorks/表OS)、Windows Phone 7.5 芒果和Windows Phone 8。

兼容性说完后下面我们正式的来学习如何使用吧!使用方法:它是一个jquery 的插件,您需要在代码中引用jquery库从1.5.x 以上版本。

HTML首先我们在#wrap加入一定高度的内容。

一定要出现滚动条,不然看不到效果。

接着我们引入jQuery库和nicescroll插件:jQuery调用niceScroll 滚动条插件非常简单:$('#wrap).niceScroll({cursorcolor: "#ccc",//#CCC 光标颜色cursoropacitymax: 1, //改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备cursorwidth: "5px", //像素光标的宽度cursorborder: "0", // 游标边框css定义cursorborderradius: "5px",//以像素为光标边界半径autohidemode: false //是否隐藏滚动条});以上是盒子显示滚动条的方法,网页滚动条的方法也是一模一样,只需要改变选择的对象即可。

iScroll5 API速查随记

iScroll5 API速查随记

iScroll5 API速查随记版本针对IScroll的优化。

为了达到更高的性能,IScroll分为了多个版本。

你可以选择最适合你的版本。

目前我们有以下版本:∙IScroll.js,这个版本是常规应用的脚本。

它包含大多数常用的功能,有很高的性能和很小的体积。

∙iscroll-lite.js,精简版本。

它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。

但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版是又小又快的解决方案。

∙iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。

如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。

(我正在做更多的测试,这可能最终在常规iscroll.js脚本,请留意)。

∙iscroll-zoom.js,在标准滚动功能上增加缩放功能。

∙iscroll-infinite.js,可以做无限缓存的滚动。

处理很长的列表的元素为移动设备并非易事。

iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。

入门IScroll是一个类,每个需要使用滚动功能的区域均要进行初始化。

每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。

尽可能保持DOM结构的简洁。

iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。

最佳的html结构如下:<div id="wrapper"><ul><li>...</li><li>...</li>...</ul></div>iScroll作用于滚动区域的外层。

在上面的例子中,UL元素能进行滚动。

只有容器元素的第一个子元素能进行滚动,其他子元素完全被忽略。

最基本的脚本初始化的方式如下:<script type="text/java script">var myScroll = new IScroll('#wrapper');</script>第一个参数可以是滚动容器元素的DOM选择器字符串,也可以是滚动容器元素的引用对象。

jquery的异步请求方法

jquery的异步请求方法

jquery的异步请求方法
jQuery是一个流行的JavaScript库,它提供了许多方便的方法来处理异步请求。

其中最常用的异步请求方法是`$.ajax()`。

这个方法允许你向服务器发送HTTP请求,并在请求完成后处理服务器的响应。

使用`$.ajax()`方法时,你可以传入一个包含请求参数的JavaScript对象,比如`url`、`type`(请求类型,比如GET或POST)、`data`(要发送的数据)等。

你还可以指定`success`和`error`回调函数,分别用于处理请求成功和失败时的情况。

除了`$.ajax()`方法外,jQuery还提供了一些简化的方法来处理常见的异步请求,比如`$.get()`和`$.post()`。

这些方法分别用于发送GET和POST请求,相对于`$.ajax()`来说更简洁易用。

另外,jQuery还提供了`$.getJSON()`方法用于发送GET请求并期望服务器返回JSON格式的数据,以及`$.ajaxSetup()`方法用于全局设置Ajax请求的默认参数。

在处理异步请求时,除了使用jQuery提供的方法,你还可以考
虑使用ES6的Promise对象或者`fetch` API来进行异步请求。

这些方法相对于jQuery来说更加现代化和灵活,但需要更多的学习和理解。

总的来说,jQuery的异步请求方法提供了便捷的方式来处理Ajax请求,但随着现代Web开发的发展,你可能也需要考虑使用其他更先进的技术来处理异步请求。

希望这些信息能够帮助你更全面地了解jQuery的异步请求方法。

jQuery API文档

jQuery  API文档

jQuery APITraversing > Miscellaneous Traversing.add()Add elements to the set of matched elements.Traversing > Miscellaneous Traversing.addBack()Add the previous set of elements on the stack to the current set, optionally filtered by a selector.Attributes | Manipulation > Class Attribute | CSS.addClass()Adds the specified class(es) to each of the set of matched elements. Manipulation > DOM Insertion, Outside.after()Insert content, specified by the parameter, after each element in the set of matched elements.Ajax > Global Ajax Event Handlers.ajaxComplete()Register a handler to be called when Ajax requests complete. This is an AjaxEvent.Ajax > Global Ajax Event Handlers.ajaxError()Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.Ajax > Global Ajax Event Handlers.ajaxSend()Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.Ajax > Global Ajax Event Handlers.ajaxStart()Register a handler to be called when the first Ajax request begins. This is an Ajax Event.Ajax > Global Ajax Event Handlers.ajaxStop()Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.Ajax > Global Ajax Event Handlers.ajaxSuccess()Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.Selectors > BasicAll Selector (“*”)Selects all elements.Deprecated > Deprecated 1.8 | Traversing > Miscellaneous Traversing.andSelf()Add the previous set of elements on the stack to the current set. Effects > Custom.animate()Perform a custom animation of a set of CSS properties.Selectors > Basic Filter | Selectors > jQuery Extensions:animated SelectorSelect all elements that are in the progress of an animation at the time the selector is run.Manipulation > DOM Insertion, Inside.append()Insert content, specified by the parameter, to the end of each element in the set of matched elements.Manipulation > DOM Insertion, Inside.appendTo()Insert every element in the set of matched elements to the end of the target.Attributes | Manipulation > General Attributes.attr()Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element. Selectors > AttributeAttribute Contains Prefix Selector [name|="value"]Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).Selectors > AttributeAttribute Contains Selector [name*="value"]Selects elements that have the specified attribute with a value containing the a given substring.Selectors > AttributeAttribute Contains Word Selector [name~="value"]Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.Selectors > AttributeAttribute Ends With Selector [name$="value"]Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.Selectors > AttributeAttribute Equals Selector [name="value"]Selects elements that have the specified attribute with a value exactly equal to a certain value.Selectors > Attribute | Selectors > jQuery ExtensionsAttribute Not Equal Selector [name!="value"]Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.Selectors > AttributeAttribute Starts With Selector [name^="value"]Selects elements that have the specified attribute with a value beginning exactly with a given string.Manipulation > DOM Insertion, Outside.before()Insert content, specified by the parameter, before each element in the set of matched elements.Events > Event Handler Attachment.bind()Attach a handler to an event for the elements.Events > Form Events | Forms.blur()Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.Selectors > Form | Selectors > jQuery Extensions:button SelectorSelects all button elements and elements of type button.Callbacks Objectcallbacks.add()Add a callback or a collection of callbacks to a callback list. Callbacks Objectcallbacks.disable()Disable a callback list from doing anything more.Callbacks Objectcallbacks.disabled()Determine if the callbacks list has been disabled.Callbacks Objectcallbacks.empty()Remove all of the callbacks from a list.Callbacks Objectcallbacks.fire()Call all of the callbacks with the given argumentsCallbacks Objectcallbacks.fired()Determine if the callbacks have already been called at least once. Callbacks Objectcallbacks.fireWith()Call all callbacks in a list with the given context and arguments. Callbacks Objectcallbacks.has()Determine whether a supplied callback is in a listCallbacks Objectcallbacks.lock()Lock a callback list in its current state.Callbacks Objectcallbacks.locked()Determine if the callbacks list has been locked.Callbacks Objectcallbacks.remove()Remove a callback or a collection of callbacks from a callback list. Events > Form Events | Forms.change()Bind an event handler to the “change” JavaScript event, or trigger that event on an element.Selectors > Form | Selectors > jQuery Extensions:checkbox SelectorSelects all elements of type checkbox.Selectors > Form:checked SelectorMatches all elements that are checked or selected.Selectors > HierarchyChild Selector (“parent > child”)Selects all direct child elements specified by “child” of elements specified by “parent”.Traversing > Tree Traversal.children()Get the children of each element in the set of matched elements, optionally filtered by a selector.Selectors > BasicClass Selector (“.class”)Selects all elements with the given class.Effects > Custom | Data | Utilities.clearQueue()Remove from the queue all items that have not yet been run.Events > Mouse Events.click()Bind an event handler to the “click” JavaScript event, or trigger that event on an element.Manipulation > Copying.clone()Create a deep copy of the set of matched elements.Traversing > Tree Traversal.closest()For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.Selectors > Content Filter:contains() SelectorSelect all elements that contain the specified text.Traversing > Miscellaneous Traversing.contents()Get the children of each element in the set of matched elements, including text and comment nodes.Deprecated > Deprecated 1.10 | Internals | Properties > Properties of jQuery Object Instances .contextThe DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.CSS | Manipulation > Style Properties.css()Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.Data | Miscellaneous > Data Storage.data()Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.Events > Mouse Events.dblclick()Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.Deferred Objectdeferred.always()Add handlers to be called when the Deferred object is either resolved or rejected.Deferred Objectdeferred.done()Add handlers to be called when the Deferred object is resolved. Deferred Objectdeferred.fail()Add handlers to be called when the Deferred object is rejected. Deferred Object | Deprecated > Deprecated 1.7deferred.isRejected()Determine whether a Deferred object has been rejected.Deferred Object | Deprecated > Deprecated 1.7deferred.isResolved()Determine whether a Deferred object has been resolved.Deferred Objectdeferred.notify()Call the progressCallbacks on a Deferred object with the given args. Deferred Objectdeferred.notifyWith()Call the progressCallbacks on a Deferred object with the given context and args.Deferred Object | Deprecated > Deprecated 1.8deferred.pipe()Utility method to filter and/or chain Deferreds.Deferred Objectdeferred.progress()Add handlers to be called when the Deferred object generates progress notifications.Deferred Objectdeferred.promise()Return a Deferred’s Promise object.Deferred Objectdeferred.reject()Reject a Deferred object and call any failCallbacks with the given args. Deferred Objectdeferred.rejectWith()Reject a Deferred object and call any failCallbacks with the given context and args.Deferred Objectdeferred.resolve()Resolve a Deferred object and call any doneCallbacks with the given args. Deferred Objectdeferred.resolveWith()Resolve a Deferred object and call any doneCallbacks with the given context and args.Deferred Objectdeferred.state()Determine the current state of a Deferred object.Deferred Objectdeferred.then()Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.Effects > Custom.delay()Set a timer to delay execution of subsequent items in the queue. Events > Event Handler Attachment.delegate()Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. Effects > Custom | Data | Utilities.dequeue()Execute the next function on the queue for the matched elements. Selectors > HierarchyDescendant Selector (“ancestor descendant”)Selects all elements that are descendants of a given ancestor. Manipulation > DOM Removal.detach()Remove the set of matched elements from the DOM.Deprecated > Deprecated 1.7 | Events > Event Handler Attachment | Removed.die()Remove event handlers previously attached using .live() from the elements.Selectors > Form:disabled SelectorSelects all elements that are disabled.Miscellaneous > Collection Manipulation | Traversing.each()Iterate over a jQuery object, executing a function for each matched element.Selectors > BasicElement Selector (“element”)Selects all elements with the given tag name.Manipulation > DOM Removal.empty()Remove all child nodes of the set of matched elements from the DOM. Selectors > Content Filter:empty SelectorSelect all elements that have no children (including text nodes). Selectors > Form:enabled SelectorSelects all elements that are enabled.Traversing > Miscellaneous Traversing.end()End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.Traversing > Filtering.eq()Reduce the set of matched elements to the one at the specified index. Selectors > Basic Filter | Selectors > jQuery Extensions:eq() SelectorSelect the element at index n within the matched set.Events > Browser Events | Deprecated > Deprecated 1.8.error()Bind an event handler to the “error” JavaScript event.Selectors > Basic Filter | Selectors > jQuery Extensions:even SelectorSelects even elements, zero-indexed. See also odd.Events > Event Objectevent.currentTargetThe current DOM element within the event bubbling phase.Events > Event Objectevent.dataAn optional object of data passed to an event method when the current executing handler is bound.Events > Event Object | Eventsevent.delegateTargetThe element where the currently-called jQuery event handler was attached. Events > Event Objectevent.isDefaultPrevented()Returns whether event.preventDefault() was ever called on this event object.Events > Event Objectevent.isImmediatePropagationStopped()Returns whether event.stopImmediatePropagation() was ever called on this event object.Events > Event Objectevent.isPropagationStopped()Returns whether event.stopPropagation() was ever called on this event object.Events > Event Objectevent.metaKeyIndicates whether the META key was pressed when the event fired. Events > Event ObjectspaceThe namespace specified when the event was triggered.Events > Event Objectevent.pageXThe mouse position relative to the left edge of the document.Events > Event Objectevent.pageYThe mouse position relative to the top edge of the document.Events > Event Objectevent.preventDefault()If this method is called, the default action of the event will not be triggered.Events > Event Objectevent.relatedTargetThe other DOM element involved in the event, if any.Events > Event Objectevent.resultThe last value returned by an event handler that was triggered by this event, unless the value was undefined.Events > Event Objectevent.stopImmediatePropagation()Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.Events > Event Objectevent.stopPropagation()Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.Events > Event Objectevent.targetThe DOM element that initiated the event.Events > Event Objectevent.timeStampThe difference in milliseconds between the time the browser created the event and January 1, 1970.Events > Event Objectevent.typeDescribes the nature of the event.Events > Event Objectevent.whichFor key or mouse events, this property indicates the specific key or button that was pressed.Effects > Fading.fadeIn()Display the matched elements by fading them to opaque.Effects > Fading.fadeOut()Hide the matched elements by fading them to transparent.Effects > Fading.fadeTo()Adjust the opacity of the matched elements.Effects | Effects > Fading.fadeToggle()Display or hide the matched elements by animating their opacity. Selectors > Form | Selectors > jQuery Extensions:file SelectorSelects all elements of type file.Traversing > Filtering.filter()Reduce the set of matched elements to those that match the selector or pass the func tion’s test.Traversing > Tree Traversal.find()Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.Effects > Custom.finish()Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.Traversing > Filtering.first()Reduce the set of matched elements to the first in the set.Selectors > Child Filter:first-child SelectorSelects all elements that are the first child of their parent.Selectors > Child Filter:first-of-type SelectorSelects all elements that are the first among siblings of the same element name.Selectors > Basic Filter | Selectors > jQuery Extensions:first SelectorSelects the first matched element.Events > Form Events | Forms.focus()Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.Selectors > Basic Filter | Selectors > Form:focus SelectorSelects element if it is currently focused.Events > Form Events.focusin()Bind an event handler to the “focusin” event.Events > Keyboard Events | Events > Mouse Events.focusout()Bind an event handler to the “focusout” JavaScript event.Miscellaneous > DOM Element Methods.get()Retrieve the DOM elements matched by the jQuery object.Selectors > Basic Filter | Selectors > jQuery Extensions:gt() SelectorSelect all elements at an index greater than index within the matched set. Traversing > Filtering.has()Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.Selectors > AttributeHas Attribute Selector [name]Selects elements that have the specified attribute, with any value.Selectors > Content Filter | Selectors > jQuery Extensions:has() SelectorSelects elements which contain at least one element that matches the specified selector.Attributes | Manipulation > Class Attribute | CSS.hasClass()Determine whether any of the matched elements are assigned the given class.Selectors > Basic Filter | Selectors > jQuery Extensions:header SelectorSelects all elements that are headers, like h1, h2, h3 and so on.CSS | Dimensions | Manipulation > Style Properties.height()Get the current computed height for the first element in the set of matched elements or set the height of every matched element.Selectors > jQuery Extensions | Selectors > Visibility Filter:hidden SelectorSelects all elements that are hidden.Effects > Basics.hide()Hide the matched elements.Events > Mouse Events.hover()Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.Attributes | Manipulation > DOM Insertion, Inside.html()Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.Selectors > BasicID Selector (“#id”)Selects a single element with the given id attribute.Selectors > Form | Selectors > jQuery Extensions:image SelectorSelects all elements of type image.Miscellaneous > DOM Element Methods.index()Search for a given element from among the matched elements.CSS | Dimensions | Manipulation > Style Properties.innerHeight()Get the current computed height for the first element in the set of matched elements, including padding but not border.CSS | Dimensions | Manipulation > Style Properties.innerWidth()Get the current computed width for the first element in the set of matched elements, including padding but not border.Selectors > Form | Selectors > jQuery Extensions:input SelectorSelects all input, textarea, select and button elements.Manipulation > DOM Insertion, Outside.insertAfter()Insert every element in the set of matched elements after the target. Manipulation > DOM Insertion, Outside.insertBefore()Insert every element in the set of matched elements before the target. Traversing > Filtering.is()Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.CorejQuery()Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.Internals | Properties > Properties of jQuery Object Instances.jqueryA string containing the jQuery version number.Ajax > Low-Level InterfacejQuery.ajax()Perform an asynchronous HTTP (Ajax) request.Ajax > Low-Level InterfacejQuery.ajaxPrefilter()Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().Ajax > Low-Level InterfacejQuery.ajaxSetup()Set default values for future Ajax requests. Its use is not recommended. Ajax > Low-Level InterfacejQuery.ajaxTransport()Creates an object that handles the actual transmission of Ajax data. Deprecated > Deprecated 1.3 | UtilitiesjQuery.boxModelDeprecated in jQuery 1.3 (see jQuery.support). States if the current page, in the user’s browser, is being rendered using the W3C CSS Box Model. Deprecated > Deprecated 1.3 | Properties > Properties of the Global jQuery Object | UtilitiesjQuery.browserContains flags for the useragent, read from erAgent. This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead. Callbacks ObjectjQuery.Callbacks()A multi-purpose callbacks list object that provides a powerful way to manage callback lists.UtilitiesjQuery.contains()Check to see if a DOM element is a descendant of another DOM element. CSSjQuery.cssHooksHook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.Data | UtilitiesjQuery.data()Store arbitrary data associated with the specified element and/or return the value that was set.Deferred ObjectjQuery.Deferred()A constructor function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.Data | UtilitiesjQuery.dequeue()Execute the next function on the queue for the matched element.UtilitiesjQuery.each()A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function’s arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.InternalsjQuery.error()Takes a string and throws an exception containing it.UtilitiesjQuery.extend()Merge the contents of two or more objects together into the first object. UtilitiesjQuery.fn.extend()Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.Effects > Custom | Properties > Properties of the Global jQuery ObjectjQuery.fx.intervalThe rate (in milliseconds) at which animations fire.Effects > Custom | Properties > Properties of the Global jQuery ObjectjQuery.fx.offGlobally disable all animations.Ajax > Shorthand MethodsjQuery.get()Load data from the server using a HTTP GET request.Ajax > Shorthand MethodsjQuery.getJSON()Load JSON-encoded data from the server using a GET HTTP request.Ajax > Shorthand MethodsjQuery.getScript()Load a JavaScript file from the server using a GET HTTP request, then execute it.UtilitiesjQuery.globalEval()Execute some JavaScript code globally.UtilitiesjQuery.grep()Finds the elements of an array which satisfy a filter function. The original array is not affected.DatajQuery.hasData()Determine whether an element has any jQuery data associated with it. CorejQuery.holdReady()Holds or releases the execution of jQuery’s ready event.UtilitiesjQuery.inArray()Search for a specified value within an array and return its index (or -1 if not found).UtilitiesjQuery.isArray()Determine whether the argument is an array.UtilitiesjQuery.isEmptyObject()Check to see if an object is empty (contains no enumerable properties). UtilitiesjQuery.isFunction()Determine if the argument passed is a Javascript function object.UtilitiesjQuery.isNumeric()Determines whether its argument is a number.UtilitiesjQuery.isPlainObject()Check to see if an object is a plain object (created using “{}” or “new Object”).UtilitiesjQuery.isWindow()Determine whether the argument is a window.UtilitiesjQuery.isXMLDoc()Check to see if a DOM node is within an XML document (or is an XML document). UtilitiesjQuery.makeArray()Convert an array-like object into a true JavaScript array.UtilitiesjQuery.map()Translate all items in an array or object to new array of items. UtilitiesjQuery.merge()Merge the contents of two arrays together into the first array.Core | Miscellaneous > Setup MethodsjQuery.noConflict()Relinquish jQuery’s control of the $ variable.UtilitiesjQuery.noop()An empty function.UtilitiesjQuery.now()Return a number representing the current time.Miscellaneous > Collection Manipulation | Forms | Ajax > Helper FunctionsjQuery.param()Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.UtilitiesjQuery.parseHTML()Parses a string into an array of DOM nodes.UtilitiesjQuery.parseJSON()Takes a well-formed JSON string and returns the resulting JavaScript object.UtilitiesjQuery.parseXML()Parses a string into an XML document.Ajax > Shorthand MethodsjQuery.post()Load data from the server using a HTTP POST request.Events > Event Handler Attachment | UtilitiesjQuery.proxy()Takes a function and returns a new one that will always have a particular context.Data | UtilitiesjQuery.queue()Show or manipulate the queue of functions to be executed on the matched element.Data | UtilitiesjQuery.removeData()Remove a previously-stored piece of data.Core | Deprecated > Deprecated 1.7 | RemovedjQuery.sub()Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.Properties > Properties of the Global jQuery Object | UtilitiesjQuery.supportA collection of properties that represent the presence of different browser features or bugs. Intended for jQuery’s internal use; specific properties may be removed when they are no longer needed internally toimprove page startup performance. For your own project’sfeature-detection needs, we strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support.UtilitiesjQuery.trim()Remove the whitespace from the beginning and end of a string.UtilitiesjQuery.type()Determine the internal JavaScript [[Class]] of an object.UtilitiesjQuery.unique()Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.Core | Deferred ObjectjQuery.when()Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.Events > Keyboard Events.keydown()Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.Events > Keyboard Events.keypress()Bind an event handler to the “keypress” JavaSc ript event, or trigger that event on an element.Events > Keyboard Events.keyup()Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.Selectors > Basic Filter:lang() SelectorSelects all elements of the specified language.Traversing > Filtering.last()Reduce the set of matched elements to the final one in the set. Selectors > Child Filter:last-child SelectorSelects all elements that are the last child of their parent.Selectors > Child Filter:last-of-type SelectorSelects all elements that are the last among siblings of the same element name.Selectors > Basic Filter | Selectors > jQuery Extensions:last SelectorSelects the last matched element.Properties > Properties of jQuery Object Instances.lengthThe number of elements in the jQuery object.Deprecated > Deprecated 1.7 | Events > Event Handler Attachment | Removed.live()Attach an event handler for all elements which match the current selector, now and in the future.Ajax > Shorthand Methods.load()Load data from the server and place the returned HTML into the matched element.Deprecated > Deprecated 1.8 | Events > Document Loading.load()Bind an event handler to the “load” JavaScript ev ent.Selectors > Basic Filter | Selectors > jQuery Extensions:lt() SelectorSelect all elements at an index less than index within the matched set. Traversing > Filtering.map()Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.Events > Mouse Events.mousedown()。

jquery的api以及用法总结-数据操作事件

jquery的api以及用法总结-数据操作事件

jquery的api以及⽤法总结-数据操作事件数据1. .data()在匹配元素上存储任意相关数据或返回匹配的元素集合中的第⼀个元素的给定名称的数据存储的值.data(obj) ⼀个⽤于更新数据的键/值对.data()⽅法允许我们再dom元素上绑定任意类型的数据,避免了循环引⽤的内存的泄露风险从div元素存储然后找回⼀个值此例中可以将#log内存储的数据分别提取到span中<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test', {first: 16,last: 'jianmei',});//将test的first内容添加到#log上$('span:first').text($('#log').data('test').first);$('span:last').text($('#log').data('test').last);2. .removeData()在元素上移除绑定的数据.removeData([name]),要移除的存储数据名.removeData([list]),⼀个数组或者空间分隔的字符串命名要删除的数据块<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test1', {first: 16,});$('#log').data('test2', {last: 'jianmei',});$('span:first').text($('#log').data('test1').first);//移除绑定在#log上的test1数据$('#log').removeData('test2');$('span:last').text($('#log').data('test2').last);操作拷贝.clone 创建⼀个匹配的元素集合的深度拷贝副本.clone()⽅法深度复制所有匹配的元素集合,包括所有匹配元素,元素的下级元素,⽂字节点当和插⼊⽅法联合使⽤的时候,.clone()对于复制页⾯上的元素很⽅便__注意__:当使⽤clone的时候,在将它插⼊到⽂档之前,我们可以修改克隆后的元素或者元素内容复制所有的b元素然后将他们插⼊到所有的段落中<b>hello</b><p>have a good day</p>// prependTo是将元素插⼊到前⾯// $('b').clone().prependTo('p');// appendTo是将元素插⼊到后⾯,就是添加的意思$('b').clone().appendTo('p');DOM插⼊、包裹1. .wrap()在集合中匹配的每⼀个元素周围包裹⼀个html结构在所有的p外⾯包裹⼀层div,此例中会有两个div<p>have a good day</p><p>have a nice day</p>//在p外⾯包裹⼀个class为demo的div$('p').wrap("<div class = 'demo'></div>")2. wrapAll()在集合中所有匹配元素的外⾯包裹⼀个html元素,此例中只有⼀个包裹在两个p元素怒外⾯的div,div的数量只有⼀个 <p>have a good day</p><p>have a nice day</p>// 与wrap不同的是wrap是在匹配符合的每⼀个元素外⾯都要加⼀个div// ⽽wrapAll只在所有匹配的元素外⾯加⼀层div$('p').wrapAll("<div class = 'demo'></div>")3. wrapInner()在匹配元素⾥的内容外包⼀层结构选择所有的段落,包裹每⼀个匹配元素的内容注意:wrap和wrapInner都是包裹每⼀个匹配的元素但是不同的是wrap是在选择的每⼀个元素外包裹⼀层,但是wrapInner是在选择的每个元素的内容外包裹⼀层<p>have a good day</p><p>have a nice day</p>//包裹的是内容have a good day$('p').wrapInner("<div class = 'demo'></div>")DOM插⼊,内部插⼊1. append()在每个匹配元素⾥⾯的末尾处插⼊参数内容// 在div内插⼊p$('div').append($('b'));2. appendTo()将匹配的元素插⼊到⽬标元素的最后⾯<b>hello</b><div class="demo"></div>// 将p插⼊到div内$('b').appendTo($('.demo'));3. html()获取集合中第⼀个匹配元素的html内容或者设置每⼀个匹配元素的html内容<div class="demo">123</div><div class="demo">123</div><div class="demo">123</div>// 如果添加的是空的字符串,则代表清空div内的内容// $('.demo').html('');// 向div内添加内容$('.demo').html('jianmei');4.prepend()将参数内容插⼊到每个匹配元素的前⾯(元素内部)<b>hello</b><div class="demo">123</div>// 在div内插⼊b// b元素的内容会放在原本div内容的前⾯,跟append是相反的$('.demo').prepend($('b'));5. prependTo()将所有元素插⼊到⽬标前⾯(元素内)<b>hello</b><div class="demo">123</div>// 将b插⼊到div内$('b').prependTo($('.demo'));6. text()得到匹配元素集合中每个元素的⽂本内容,包括他们的后代,或者设置匹配元素集合中每⼀个元素的⽂本内容为指定的⽂本内容 <p>have a good day</p><p>have a nice day</p>// 在段落p中添加⽂本$('p').text('jianmeinew text');DOM插⼊、外部插⼊1、after()在匹配元素集合中的每个元素后⾯插⼊参数所指定的内容,作为其兄弟节点<div class="demo">123</div><div class="demo">123</div>// 在demo类之后插⼊p标签// $('.demo').after('<p>jianmei</p>')// 在demo类后插⼊所有的p$('.demo').after($('p'));2、 before和after的理论是⼀样的,根据参数的设定,在匹配的元素前⾯插⼊内容,外部插⼊// 在demo类之前插⼊p标签$('.demo').before('<p>jianmei</p>')3、 insertAfter和after是⼀样的功能,主要是插⼊内容和⽬标的位置不同,//将p插⼊到demo类之后$('p').insertAfter('.demo');4、同理可知insertBefore的原理// 将p插⼊demo类之前$('p').insertBefore('.demo');DOM移除1、 detach(),从DOM中去掉所有匹配的元素detach和remove⽅法⼀样,除了deach保存所有jquery数据和被移⾛的元素相关联当需要移⾛⼀个数据,不久⼜将该元素插⼊DOM时,常⽤此⽅法。

jQuery_EasyUI API 中文帮助手册1.24

jQuery_EasyUI API 中文帮助手册1.24

jQuery EasyUI中文帮助手册目录jQuery EasyUI中文帮助手册 (1)API版本:1.2.4 ........................................................... 错误!未定义书签。

1. 基本 (4)1.1 语法解析 (4)语法解析 (4)1.2 简单载入器 (4)简单载入器 (4)1.3 一般拖动 (6)可拖动 (6)1.4 拖动至容器 (7)拖动至容器 (7)1.5 缩放 (8)缩放 (8)1.6 分页 (9)分页 (9)1.7 搜索框 (11)搜索框 (11)1.8 进度条 (13)进度条 (13)2. 布局管理器 (14)2.1 控制面板 (14)2.2 选项卡 (20)选项卡切换 (20)2.3 可伸缩面板 (24)可伸缩面板 (24)2.4 布局面板 (27)布局面板 (27)3. 菜单和按钮 (30)3.1 菜单 (30)菜单 (30)3.2 链接按钮 (33)链接按钮 (33)3.3 菜单按钮 (34)菜单按钮 (34)3.4 分隔按钮 (35)分隔按钮 (35)4. 表单 (36)4.1 表单 (36)表单 (36)4.2 表单验证 (38)表单验证 (38)4.3 自定义组合框 (40)自定义组合框 (40)4.4 可装载组合框 (42)可装载组合框 (42)4.5 组合树 (45)组合树 (45)4.6 组合表格 (46)组合表格 (46)4.7 数字验证框 (48)数字验证框 (48)4.8 日期组合框 (49)日期组合框 (49)4.9 日期时间组合框 (51)日期时间组合框 (51)4.10 日历 (53)日历 (53)4.11 调节器 (54)调节器 (54)4.12 数字调节器 (56)数字调节器 (56)4.13 时间调节器 (57)时间调节器 (57)5. 窗口 (58)5.1 窗口 (58)窗口 (58)5.2 对话窗口 (60)对话窗口 (60)5.3 消息窗口 (61)消息窗口 (61)6. 数据表格和树形菜单 (63)6.1 数据表格 (63)数据表格 (63)6.2 属性表格 (73)属性表格 (73)6.3 树形菜单 (74)树形菜单 (74)6.4 树形表格 (80)树形表格 (80)1.基本1.1语法解析语法解析使用方法属性事件方法1.2简单载入器简单载入器使用方法属性名称 类型描述默认值modules (模块) object (对象) 预定义模块。

jqueryapi调用

jqueryapi调用

jqueryapi调⽤
本框架内置组件以及部分插件都可以通过jquery选择器进⾏API调⽤,⽀持链式操作,如下⽰例。

<script type="text/javascript">
$("a.api-test").click(function(){
$(this).dialog({id:'myid',url:'doc/mydialog.html',title:'测试弹框'}).text('OK');
});
</script>
<a href="javascript:;" class="api-test">测试API</a>
使⽤的选择器是符合jquery规则的选择器。

点击后的结果是:打开⼀个ID为“mydialog”的弹出窗⼝,然后修改该选择器的值为“OK”。

组件的初始化:
本框架的内置组件通过如下⽅式初始化以及调⽤开放的⽅法。

$(selector).datepicker():以默认初始值创建⼀个⽇期选择器。

(部分组件不⽀持默认创建,例如navtab、dialog)$(selector).dialog({id:'mydialog',url:'mydialog.html',title:'我的弹框'}); 通过初始值创建⼀个弹框$(selector).dialog('refresh','mydialog'); 调⽤dialog组件的刷新⽅法,⽅法后加上相关参数。

jQuery custom content scroller 中文API

jQuery custom content scroller 中文API

set_width: false Set the width of your content (overwrites CSS width), value in pixels (integer) or percentage (string).设置宽度:或为数字或为数字+单位的字符串set_height: false Set the height of your content (overwrites CSS height), value in pixels (integer) or percentage (string).设置高度(固定):或为数字或为数字+单位的字符串horizontalScroll: Boolean Add horizontal scrollbar (default is vertical), values: true, false.是否显示水平滚动条:默认只显示垂直滚动条,默认值:fasle 不显示scrollInertia: Integer Scrolling inertia (easing), value in milliseconds (0 for no scrolling inertia).滚动量:单位毫秒;0 无滚动量;(每次滚动滚动条惯性滚动距离)mouseWheel: Boolean Mouse-wheel support, values: true, false. 是否提供鼠标滚轴支持默认值truemouseWheelPixels: "auto" Mouse-wheel scrolling pixels amount, value in pixels (integer) or “auto”(script calculates and sets pixels amount according to content length).每次滚动量(即页面高度):auto 自动计算autoDraggerLength: Boolean Auto-adjust scrollbar height/width according to content, values: true, false.自动计算滚动条宽高默认trueautoHideScrollbar: Boolean Automatically hide the scrollbar when idle or mouse is not over the content.自动隐藏滚动条(当容器内容不足以出现滚动条时):默认truescrollButtons:{enable: Boolean } Scroll buttons support, values: true, false.是否有滚动条按钮(即上下箭头):默认值falsescrollButtons:{scrollType: String } Scroll buttons scroll type, values: "continuous" (scroll continuously while pressing the button), "pixels" (scroll by a fixed number of pixels on each click)See both scroll types in action.点击按钮,滚动条滚动类型:pixels –只有点击时才触发滚动,continuous –长按按钮,连续滚动;默认continuousscrollButtons:{scrollSpeed: "auto" Scroll buttons continuous scrolling speed, integer value or “auto” (script calculates and sets the speed according} to content length).滚动速度:auto 自动计算,数值越大越快,滚动速度跟长度相关scrollButtons:{scrollAmount: Integer } Scroll buttons pixels scrolling amount, value in pixels. 点击或长按,每次滚动条位移量:值为数字+单位的字符串advanced:{updateOnBrowserResize: Boolean} Update scrollbars on browser resize (for fluid content blocks & layouts based on percentages), values: true, false. Set to false only when your content has fixed dimensions.浏览器窗口变化,重新调整滚动条长度等信息:默认值false; 只有在尺寸固定的时候才有作用advanced:{updateOnContentResize: Boolean} Auto-update scrollbars on content resize (useful when adding/changing content programmatically), values: true, falseSetting this to true makes the script check for content length changes (every few milliseconds) and automatically call plugin’s update method to adjust the scrollbar accordingly.自动根据内容调整滚动条:trueadvanced:{autoExpandHorizontalScro ll: Boolean} Auto-expanding content’s width on horizontal scrollbars, values: true, falseSet to true if you have horizontal scrollbar on content that will change on-the-fly. Demo contains blocks with images and horizontal scrollbars that use this option parameter. 自动根据内容调整横向滚动条:trueadvanced:{autoScrollOnFocus: Boolean} Auto-scrolling on elements that have focus (e.g. scrollbar automatically scrolls-to form textfields when the TAB key is pressed), values: true, false.让滚动条具有焦点,使用tab让可以聚焦;(无障碍页面非常必须)advanced:{ normalizeMouseWheelDelta: Boolean } Normalize mouse-wheel delta (-1/1), values: true, false. 标准化鼠标(是否只支持标准化鼠标)contentTouchScroll: Boolean Additional scrolling method by touch-swipe content (for touch enabled devices), values: true, false.是否支持触摸板(触摸板手势等)callbacks:{onScrollStart: function(){}} User defined callback function, triggered on scroll start event. You can call your own function(s) each time a scroll event begins (callbacks demo). Example:callbacks:{onScrollStart:function(){console.log("scrolling started...");}}callback事件:开始滚动callbacks:{onScroll: function(){} } User defined callback function, triggered on scroll event. Call your own function(s) each time a scroll event completes (callbacks demo). Example:callbacks:{onScroll:function(){console.log("content scrolled...");}}callback事件:滚动结束时触发callbacks:{onT otalScroll: User defined callback function, triggered when scroll end-limit is reached (callbacks demo). Example:function(){} } callbacks:{onT otalScroll:function(){console.log("scrolled to end of content."); }}callback事件:触底callbacks:{onT otalScrollBack: function(){}} User defined callback function, triggered when scroll beginning is reached (callbacks demo). Example: callbacks:{onT otalScrollBack:function(){console.log("scrolled back to the beginning of content.");}}callback事件:触顶callbacks:{onT otalScrollOffset: Scroll end-limit offset, value in pixels (see example).与onTotalScrollBack配合使用,若则滚动条不必滚动到底部Integer } 触发事件,只需滚动到位移量为onTotalScrollOffset 所设置的值的位置就会触发事件callbacks:{onT otalScrollBackOffset:Integer } Scroll beginning offset, value in pixels. 原理与如上callbacks:{whileScrolling: function(){}} User defined callback function, triggered while scrolling (callbacks demo). Example:callbacks:{whileScrolling:function(){console.log("scrolling...");}}callback:滚动时触发theme: String Set a scrollbar ready-to-use theme (see all themes). 样式。

jquery获取URL中参数解决中文乱码问题的两种方法

jquery获取URL中参数解决中文乱码问题的两种方法

jquery获取URL中参数解决中⽂乱码问题的两种⽅法从A页⾯通过url传参到B页⾯时,解析url参数可以⽤下⾯两种⽅法:复制代码代码如下:function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]); return null;}这样调⽤:复制代码代码如下:alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2"));alert(GetQueryString("参数名3"));复制代码代码如下:<span style="font-size: 16px;"><Script language="javascript">function GetRequest() {var url = location.search; //获取url中"?"符后的字串var theRequest = new Object();if (url.indexOf("?") != -1) {var str = url.substr(1);strs = str.split("&");for(var i = 0; i < strs.length; i ++) {theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);}}return theRequest;}</Script></span>复制代码代码如下:<Script language="javascript">var Request = new Object();Request = GetRequest();var 参数1,参数2,参数3,参数N;参数1 = Request['参数1'];参数2 = Request['参数2'];参数3 = Request['参数3'];参数N = Request['参数N'];</Script>如果参数中含有中⽂字符,注意转编码和解码:复制代码代码如下:<span style="font-size:18px;">1.传参页⾯Javascript代码:<script type=”text/javascript”>function send(){var url = "test01.html";var userName = $("#userName").html();window.open(encodeURI(url + "?userName=" + userName)); }</script>2. 接收参数页⾯:test02.html<script>var urlinfo = window.location.href;//获取urlvar userName = urlinfo.split(“?”)[1].split(“=”)[1];//拆分url得到”=”后⾯的参数$(“#userName”).html(decodeURI(userName));</script></span>。

jQuery.nicescroll中文API

jQuery.nicescroll中文API

jQuery.nicescroll中文APIjQuery.NiceScroll一个模仿ios/mobile滚动条风格美化浏览器滚动条的jQuery插件。

NiceScroll初始化声明文档1、简单模式,使用默认样式。

$(document).ready(function() {$("html").niceScroll();});2、作为实例和对象返回var nice = false;$(document).ready(function() {nice = $("html").niceScroll();});3、设置光标颜色$(document).ready(function() {$("#thisdiv").niceScroll({cursorcolor:"#00F"});});4、Div包裹,由两个div组成,第一个是包裹div,第二的才是滚动div$(document).ready(function() {$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#0 0F"}); });5、获取nicescroll对象var nice = $("#mydiv").getNiceScroll();6、隐藏滚动条$("#mydiv").getNiceScroll().hide();7、检查滚动条大小变化(当窗口大小变化时滚动条跟着变化)$("#mydiv").getNiceScroll().resize();8、滚动到指定位置$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // 沿X 轴滚动$("#mydiv").getNiceScroll(0).doScrollT op(y, duration); // 沿Y轴滚动参数一:滚动距离,正数X轴向右滚动、Y轴向下滚动,负数反之。

scrollreveal.js中文api

scrollreveal.js中文api

scrollreveal.js中⽂api // 属性:(默认)delay: 0, // 延时时间distance: '0px', // 执⾏距离duration: 600, // 执⾏时长easing: 'cubic-bezier(0.5, 0, 0, 1)', // 执⾏速度interval: 0, // 执⾏间隔(时间)opacity: 0, // 执⾏⽅式(透明度)origin: 'bottom', // 执⾏⽅式(偏移 top:⾃上⽽下,bottom:⾃下⽽上,left:⾃左往右,right:⾃右往左.)rotate: { // 执⾏⽅式(旋转)x: 0, // xy: 0, // yz: 0, // z},scale: 1, // 执⾏⽅式(缩放)cleanup: false, // 暂时不知道是什么东西container: document.documentElement, // 执⾏容器(后跟元素,填写后只有容器内的元素执⾏动画)desktop: true, // 是否在电脑上⾯执⾏mobile: true, // 是否在⼿机上⾯执⾏reset: false, // 是否重复执⾏()useDelay: 'always', // 延时执⾏⽅式(always(⼀直延时执⾏),once(只延时执⾏⼀次),onload(只在加载时延时执⾏))viewFactor: 0.0, // 视图显⽰元素百分之多少的时候执⾏动画(单位:⼩数,例:0.50 在元素展⽰超过百分之五⼗的时候,执⾏动画) viewOffset: { // 视图偏移(把视图抽象成元素移动)top: 0,right: 0,bottom: 0,left: 0,},afterReset: function (el) {}, // 重置之后(视图内看不到元素之后,退场动画执⾏结束之后)afterReveal: function (el) {}, // 执⾏之后(动画已经执⾏完毕(已完成))beforeReset: function (el) {}, // 重置之前(视图内看不到元素之后,退场动画执⾏结束之前)beforeReveal: function (el) {}, // 执⾏之前(动画开始执⾏(未完成时)) // 属性:(默认)。

网页中滚动条的设置和修改

网页中滚动条的设置和修改

⽹页中滚动条的设置和修改⼀、通过css设置滚动条在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了。

因为源代码开放的原因,市⾯上基于webkit内核的浏览器也是很难穷举完。

例如有:Google Chrome、Opera(opera最近宣布使⽤webkit内核了)、360极速浏览器,猎豹浏览器等,搜狗浏览器……下⾯我们来看⼀下webkit浏览器是如何强⼤的吧!⾸先来了解它的属性:1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度等2. ::-webkit-scrollbar-button 滚动条两端的按钮3. ::-webkit-scrollbar-track 外层轨道4. ::-webkit-scrollbar-track-piece 内层滚动槽5. ::-webkit-scrollbar-thumb 滚动的滑块6. ::-webkit-scrollbar-corner 边⾓7. ::-webkit-resizer 定义右下⾓拖动块的样式::-webkit-scrollbar :滚动条整体部分,其中的属性: width,height,background,border等。

::-webkit-scrollbar-button :滚动条两端的按钮。

可以⽤display:none让其不显⽰,也可以添加背景图⽚,颜⾊改变显⽰效果。

::-webkit-scrollbar-track :外层轨道。

可以⽤display:none让其不显⽰,也可以添加背景图⽚,颜⾊改变显⽰效果。

::-webkit-scrollbar-track-piece :内层轨道,具体区别看下⾯gif图,需要注意的就是它会覆盖第三个属性的样式。

::-webkit-scrollbar-thumb :滚动条⾥⾯可以拖动的那部分::-webkit-scrollbar-corner :边⾓,两个滚动条交汇处::-webkit-resizer :两个滚动条交汇处⽤于拖动调整元素⼤⼩的⼩控件(基本⽤不上)⼆、div定位叠加隐藏实现在页⾯中想要实现⼀个固定⼤⼩区域的内容纵向滚动,此区域的内容是动态渲染的,也就是内容可以在通过后台编辑修改。

jquery插件jquery.confirm弹出确认消息

jquery插件jquery.confirm弹出确认消息

jquery插件jquery.confirm弹出确认消息本⽂为⼤家介绍了插件jquery.confirm弹出确认消息的实现⽅法,具有⼀定的参考价值,特分享给⼤家供⼤家参考,具体内容如下实现效果:具体代码:1、插件默认参数// 默认参数$.confirm.defaults = {// 样式css: "/css/jquery.confirm/default.min.css?v=" + Math.ceil(new Date() / 86400000),// 确认框内容content: "确认吗?",// 确认按钮⽂字sureButton: "确认",// 取消按钮⽂字cancelButton: "取消",// 位置position: {},// ⾃动打开autoOpen: false,// 动画持续时间duration: 123,// 打开确认框回调onopen: emptyFn,// 单击了确认或者取消回调onclick: emptyFn,// 确认回调onsure: emptyFn,// 取消回调oncancel: emptyFn,// 关闭确认框回调onclose: emptyFn}2、插件结构与样式jquery.confirm的dom结构为:<div class="jquery_confirm____" style="display:none"><div class="jquery_confirm____body">确认框消息</div><div class="jquery_confirm____footer"><button class="button button-primary jquery_confirm____sure">确认</button><button class="button button-error jquery_confirm____cancel">取消</button></div></div>默认的插件样式基于css.3,默认的插件样式地址为default,插件样式只渲染⼀次,不会多次渲染,以第⼀次使⽤插件的样式为准。

:focusjQueryAPI1.12中文文档jQueryAPI在线手册

:focusjQueryAPI1.12中文文档jQueryAPI在线手册

:focusjQueryAPI1.12中文文档jQueryAPI在线手册返回值:jQuery:focus概述匹配当前获取焦点的元素。

如同其他伪类选择器(那些以":"开始),建议:focus前面用标记名称或其他选择;否则,通用选择("*")是不言而喻的。

换句话说,$(':focus')等同为$('*:focus')。

如果你正在寻找当前的焦点元素,$( document.activeElement )将检索,而不必搜索整个DOM树。

示例描述:添加一个"focused"的类名给那些有focus方法的元素css 代码:.focused {background: #abcdef;}html 代码:<div id="content"><input tabIndex="1"><input tabIndex="2"><select tabIndex="3"><option>select menu</option></select><div tabIndex="4">a div</div></div>jQuery 代码:$( "#content" ).delegate( "*", "focus blur", function( event ) { var elem = $( this );setTimeout(function() {elem.toggleClass( "focused", elem.is( ":focus" ) ); }, 0);});。

jquery-confirm使用方法

jquery-confirm使用方法

jquery-confirm使⽤⽅法简要教程jquery-confirm是⼀款功能强⼤的对话框和确认框插件。

它提供多种内置的主题效果,可以实现ajax远程加载内容,提供动画效果和丰富的配置参数等。

它的特点还有:可以使⽤键盘控制对话框。

通过ajax加载对话框的内容。

可以在指定时间之后⾃动关闭对话框。

提供丰富的参数和回调函数。

使⽤⽅法基本调⽤$.confirm({confirm: function(){console.log('the user clicked confirm');},cancel: function(){console.log('the user clicked cancel');}});全局默认参数jconfirm.defaults = {title: 'Hello',content: 'Are you sure to continue?',contentLoaded: function(){},icon: '',confirmButton: 'Okay',cancelButton: 'Close',confirmButtonClass: 'btn-default',cancelButtonClass: 'btn-default',theme: 'white',animation: 'zoom',closeAnimation: 'scale',animationSpeed: 500,animationBounce: 1.2,keyboardEnabled: false,rtl: false,confirmKeys: [13], // ENTER keycancelKeys: [27], // ESC keycontainer: 'body',confirm: function () {},cancel: function () {},backgroundDismiss: false,autoClose: false,closeIcon: null,columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',onOpen: function(){},onClose: function(){},onAction: function(){}};配置参数jquery-confirm插件的可⽤配置参数有:参数类型默认值描述title String'Hello'对话框的标题content String,Function'Are you sure tocontinue?'对话框的内容,也可以通过⼀个函数返回ajax内容contentLoaded function function(){}如果通过url前缀来调⽤内容,如url:/xyz,该参数将是回调函数icon String''标题前⾯的图标confirmButton String'Okay'确认按钮的⽂本cancelButton String'Close'取消按钮的⽂本confirmButtonClass String'btn-default'确认按钮的的classcancelButtonClass String'btn-default'取消按钮的classtheme String'white'对话框的颜⾊主题,可选值有:'white', 'black', 'material' , 'bootstrap'animation String'zoom'打开对话框时的动画效果。

jQuery EasyUI 官方API

jQuery EasyUI 官方API

jQuery EasyUI 官方API文档中文版文档EasyUI每个组件的属性,方法和事件。

用户可以很容易地扩展他们。

属性所有的属性都定义在jQuery.fn.{plugin}.defaults里面。

例如,对话框属性定义在jQuery.fn.dialog.defaults里面。

事件所有的事件(回调函数)也都定义在jQuery.fn.{plugin}.defaults里面。

方法调用方法的语法:$('selector').plugin('method', parameter);解释:∙selector是jQery对象选择器。

∙plugin是插件的名称。

∙method是相应插件现有的方法。

∙parameter是参数对象,可以是一个对象、字符串等。

所有方法都定义在jQuery.fn.{plugin}.methods。

每个方法都有2个参数:jq 和param。

第一个参数'jq'是必须的,这是指的jQuery对象。

第二个参数'param'是指传入方法的实际参数。

例如,为dialog组件扩展一个方法名为'mymove',代码如下:现在你可以调用'mymove'方法将对话框移动到指定位置:jQuery EasyUI 入门指南下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。

一旦你导入了EasyUI必须的文件,你就可以通过标记或Javascript定义一个EasyUI组件。

例如:定义一个带可折叠功能的面板,你需要写的HTML代码如下:当通过标记创建一个组件的时候从1.3版开始'data-options'属性可以用来支持HTML5兼容属性名称。

所以你可以改写上面的代码为:下面的代码演示了如何创建一个组合框,并绑定onSelect事件。

相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

jQuery.NiceScroll
一个模仿ios/mobile滚动条风格美化浏览器滚动条的jQuery插件。

NiceScroll初始化声明文档
1、简单模式,使用默认样式。

$(document).ready(function() {
$("html").niceScroll();
});
2、作为实例和对象返回
var nice = false;
$(document).ready(function() {
nice = $("html").niceScroll();
});
3、设置光标颜色
$(document).ready(function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
});
4、Div包裹,由两个div组成,第一个是包裹div,第二的才是滚动div
$(document).ready(function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"}); });
5、获取nicescroll对象
var nice = $("#mydiv").getNiceScroll();
6、隐藏滚动条
$("#mydiv").getNiceScroll().hide();
7、检查滚动条大小变化(当窗口大小变化时滚动条跟着变化)
$("#mydiv").getNiceScroll().resize();
8、滚动到指定位置
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // 沿X轴滚动 $("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // 沿Y轴滚动
参数一:滚动距离,正数X轴向右滚动、Y轴向下滚动,负数反之。

参数二:滚动持续时间
9、配置参数
$("#thisdiv").niceScroll({
cursorcolor:"#424242", // 设置光标颜色
cursoropacitymin:0, // 设置非活动状态光标透明度,取值范围0-1,默认为0。

cursoropacitymax:1, //设置活动状态光标透明度,取值范围0-1,默认为1。

cursorwidth:"5px", //设置光标宽度
cursorborder:"1px solid #fff",// 设置光标边框
cursorborderradius:"5px", //设置光标圆角,默认5px
zindex:"auto" | <number>, // 设置滚动条的层数值
scrollspeed:60, //滚动速度,单位秒
mousescrollstep:40, //每次滚动距离
touchbehavior:false, //设置触摸滑动。

默认值false
hwacceleration:true, //使用硬件加速滚动支持
boxzoom:false, // 设置是否可以放大容器,默认值false
dblclickzoom:true, //双击放大/缩小容器(当boxzoom为true有效)。

默认值为true gesturezoom:true, // 是否支持手指缩进或放大容器(当boxzoom为true并且在touch设备上)
grabcursorenabled:true//设置是否显示为grab(手掌)状态(当touchbehavior=true生效) autohidemode:true, // 怎样隐藏滚动条,可能的值有:
true | // 当不滚动隐藏
"cursor" | //仅光标隐藏
false | // 不隐藏
"leave" | // 当光标离开容器时隐藏
"hidden" | // 总是隐藏
"scroll", //仅滚动时显示
background:"", // 设置滚动条背景颜色
iframeautoresize:true, // 当框架载入时自动设置大小
cursorminheight:32, // 设置光标最小大小
preservenativescrolling:true, //设置是否可以使用鼠标滚动, 冒泡鼠标滚动事件
railoffset:false, //添加滚动位移
bouncescroll:false, // 设置是否显示反弹(需要硬件支持)
spacebarenabled:true, // 设置是否支持空格键滚动
railpadding: { top:0, right:0, left:0, bottom:0 }, // 设置滚动条距离边框的距离disableoutline:true, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll禁用nicesroll容器选中时chrome浏览器默认产生轮廓线(黄色高亮)
horizrailenabled:true, //设置nicescroll是否美化水平滚动条
railalign: right, //滚动条水平对齐方式
railvalign: bottom, // 滚动条垂直对齐方式
enabletranslate3d:true, // 设置nicescroll是否可以使用CSS translate属性滚动内容enablemousewheel:true, // 设置nicescroll是否可以管理鼠标事件
enablekeyboard:true, //设置nicescroll是否可以管理键盘事件
smoothscroll:true, //平滑滚动
sensitiverail:true, // 点击滚动条,滚动到指定位置
enablemouselockapi:true, // 可以使用鼠标扑捉API(在对象拽托存在一些问题)*这一句蒙的can use mouse caption lock API (same issue on object dragging)
cursorfixedheight:false, //设置固定高度游标
hidecursordelay:400, //设置光标隐藏延迟时间
directionlockdeadzone:6, //不懂 dead zone in pixels for direction lock activation nativeparentscrolling:true, // 不懂detect bottom of content and let parent to scroll, as native scroll does
enablescrollonselection:true, // 设置选择文本时是否自动滚动
cursordragspeed:0.3, // 设置选中文本时光标滚动速度
rtlmode:"auto", //水平滚动条从左方开始
cursordragontouch:false, // touch设备上鼠标展现拽托状态drag cursor in touch / touchbehavior mode also
oneaxismousemode:"auto", // it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse
scriptpath:""// define custom path for boxmode icons ("" => same script path)。

相关文档
最新文档