投稿
  1. 首页
  2. html-js-css

前端之jQuery框架全面教程一小时速成常用点整合 【附代码、前端必备之一】

qq网吧网关 • 2022-6-10 • html-js-css • 阅读 113

前端之jQuery框架全面教程一小时速成常用点整合 【附代码、前端必备之一】,第1张

jQuery 目录1、选择器和事件2、html2.1获得内容 - text()、html() 以及 val()2.2设置text()、val()、html()2.3添加元素2.4删除元素2.5 *** 作css类 3、jQuery方法（详细补充）3.1选择器3.2事件方法3.3html/css方法3.4遍历方法3.5ajax方法3.6其他 4、jQuery插件4.1 vaildate4.2 cookie 5、效果5.1 hide和show5.2 slide 滑动
学完JavaScript之后最后再学习一下jQuery，jQuery是js的库，拓展了许多语法，弥补了许多原生js的缺点；同时bootstrap框架也是基于jQuery设计的，因此学习jQuery还是很有必要的。

目录 1、选择器和事件

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些 *** 作。

基础语法： $(selector).action()

美元符号定义 jQuery

选择符（selector）“查询"和"查找” HTML 元素

jQuery 的 action() 执行对元素的 *** 作

实例:

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有

元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的

元素

$(“#test”).hide() - 隐藏 id=“test” 的元素

$(function(){
 
   // 开始写 jQuery 代码...
 
});

jQuery 选择器允许您对 HTML 元素组或单个元素进行 *** 作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素 元素
$(“*”)选取所有元素在线实例
$(this)选取当前 HTML 元素在线实例
$(“p.intro”)选取 class 为 intro 的

元素

在线实例
$(“p:first”)选取第一个

元素

在线实例
$(“ul li:first”)选取第一个 元素的第一个 元素在线实例
$(“ul li:first-child”)选取每个 元素的第一个 元素在线实例
$(“[href]”)选取带有 href 属性的元素在线实例
$(“a[target=‘_blank’]”)选取所有 target 属性值等于 “_blank” 的 元素在线实例
$(“a[target!=‘_blank’]”)选取所有 target 属性值不等于 “_blank” 的 元素在线实例
$(“:button”)选取所有 type=“button” 的 元素 和 在线实例
$(“tr:even”)选取偶数位置的
在线实例
$(“tr:odd”)选取奇数位置的

在事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。

常见 DOM 事件：

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
hover
2、html 2.1获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM *** 作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); 
$("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

$("#btn1").click(function(){ alert("值为: " + $("#test").val()); });

尝试一下 »

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值

$("button").click(function(){
  alert($("#runoob").attr("href"));
});
2.2设置text()、val()、html()

设置内容

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("Hello world!");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

回调函数

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello world! (index: " + i + ")"; 
    });

$("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); });

尝试一下 »

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

$("button").click(function(){ $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" }); });
2.3添加元素

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

2.4删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

2.5 *** 作css类

jQuery 拥有若干进行 CSS *** 作的方法。我们将学习下面这些：

addClass(“类名”) - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换 *** 作

css() - 设置或返回样式属性

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({“propertyname”:“value”,“propertyname”:“value”,…});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

$("p").css({"propertyname"})  /*返回css属性值*/
$("p").css({"background-color":"yellow","font-size":"200%"});
3、jQuery方法（详细补充） 3.1选择器 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
选择器实例选取
*$(“*”)所有元素
#id$(“#lastname”)id=“lastname” 的元素
.class$(“.intro”)class=“intro” 的所有元素
.class,.class$(“.intro,.demo”)class 为 “intro” 或 “demo” 的所有元素
element$(“p”)所有

元素

el1,el2,el3$(“h1,div,p”)所有 、 和

元素

:first$(“p:first”)第一个

元素

:last$(“p:last”)最后一个

元素

:even$(“tr:even”)所有偶数
:odd$(“tr:odd”)所有奇数
:first-child$(“p:first-child”)属于其父元素的第一个子元素的所有

元素

:first-of-type$(“p:first-of-type”)属于其父元素的第一个

元素的所有

元素

:last-child$(“p:last-child”)属于其父元素的最后一个子元素的所有

元素

:last-of-type$(“p:last-of-type”)属于其父元素的最后一个

元素的所有

元素

:nth-child(n)$(“p:nth-child(2)”)属于其父元素的第二个子元素的所有

元素

:nth-last-child(n)$(“p:nth-last-child(2)”)属于其父元素的第二个子元素的所有

元素，从最后一个子元素开始计数

:nth-of-type(n)$(“p:nth-of-type(2)”)属于其父元素的第二个

元素的所有

元素

:nth-last-of-type(n)$(“p:nth-last-of-type(2)”)属于其父元素的第二个

元素的所有

元素，从最后一个子元素开始计数

:only-child$(“p:only-child”)属于其父元素的唯一子元素的所有

元素

:only-of-type$(“p:only-of-type”)属于其父元素的特定类型的唯一子元素的所有

元素

child">parent > child$(“div > p”) 元素的直接子元素的所有

元素

parent descendant$(“div p”) 元素的后代的所有

元素

element + next$(“div + p”)每个 元素相邻的下一个

元素

element ~ siblings$(“div ~ p”) 元素同级的所有

元素

:eq(index)$(“ul li:eq(3)”)列表中的第四个元素（index 值从 0 开始）
:gt(no)$(“ul li:gt(3)”)列举 index 大于 3 的元素
:lt(no)$(“ul li:lt(3)”)列举 index 小于 3 的元素
:not(selector)$(“input:not(:empty)”)所有不为空的输入元素
:header$(“:header”)所有标题元素 , …
:animated$(“:animated”)所有动画元素
:focus$(“:focus”)当前具有焦点的元素
:contains(text)$(“:contains(‘Hello’)”)所有包含文本 “Hello” 的元素
:has(selector)$(“div:has§”)所有包含有

元素在其内的 元素

:empty$(“:empty”)所有空元素
:parent$(“:parent”)匹配所有含有子元素或者文本的父元素。
:hidden$(“p:hidden”)所有隐藏的

元素

:visible$(“table:visible”)所有可见的表格
:root$(“:root”)文档的根元素
:lang(language)$(“p:lang(de)”)所有 lang 属性值为 “de” 的

元素

[attribute]$(“[href]”)所有带有 href 属性的元素
[attribute=value]$(“[href=‘default.htm’]”)所有带有 href 属性且值等于 “default.htm” 的元素
[attribute!=value]$(“[href!=‘default.htm’]”)所有带有 href 属性且值不等于 “default.htm” 的元素
[attribute[ = ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / s e l − a t t r i b u t e − e n d − v a l u e . h t m l " =](https://www.runoob.com/jquery/sel-attribute-end-value.html " =](https://www.runoob.com/jquery/sel−attribute−end−value.html"=")value]KaTeX parse error: Undefined control sequence: \[ at position 3: ("\̲[̲href=‘.jpg’]")所有带有 href 属性且值以 “.jpg” 结尾的元素
[attribute[=](https://www.runoob.com/jquery/sel-attribute-prefix-value.html "=")value]$("[title=‘Tomorrow’]")所有带有 title 属性且值等于 ‘Tomorrow’ 或者以 ‘Tomorrow’ 后跟连接符作为开头的字符串
[attribute^=value]$(“[title^=‘Tom’]”)所有带有 title 属性且值以 “Tom” 开头的元素
[attribute~=value]$(“[title~=‘hello’]”)所有带有 title 属性且值包含单词 “hello” 的元素
[attribute*=value]$(“[title*=‘hello’]”)所有带有 title 属性且值包含字符串 “hello” 的元素
[name=value][name2=value2]KaTeX parse error: Undefined control sequence: \[ at position 9: ( "input\̲[̲id]\[name=‘man’]" )带有 id 属性，并且 name 属性以 man 结尾的输入框
:input$(“:input”)所有 input 元素
:text$(“:text”)所有带有 type=“text” 的 input 元素
:password$(“:password”)所有带有 type=“password” 的 input 元素
:radio$(“:radio”)所有带有 type=“radio” 的 input 元素
:checkbox$(“:checkbox”)所有带有 type=“checkbox” 的 input 元素
:submit$(“:submit”)所有带有 type=“submit” 的 input 元素
:reset$(“:reset”)所有带有 type=“reset” 的 input 元素
:button$(“:button”)所有带有 type=“button” 的 input 元素
:image$(“:image”)所有带有 type=“image” 的 input 元素
:file$(“:file”)所有带有 type=“file” 的 input 元素
:enabled$(“:enabled”)所有启用的元素
:disabled$(“:disabled”)所有禁用的元素
:selected$(“:selected”)所有选定的下拉列表元素
:checked$(“:checked”)所有选中的复选框选项
.selector$(selector).selector在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target$( “p:target” )选择器将选中ID和URI中一个格式化的标识符相匹配的

元素

3.2事件方法

事件方法触发器或添加一个函数到被选元素的事件处理程序。

下面的表格列出了所有用于处理事件的 jQuery 方法。

方法描述
bind()向元素添加事件处理程序
blur()添加/触发失去焦点事件
change()添加/触发 change 事件
click()添加/触发 click 事件
dblclick()添加/触发 double click 事件
delegate()向匹配元素的当前或未来的子元素添加处理程序
die()在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error()在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget在事件冒泡阶段内的当前 DOM 元素
event.data包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented()返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace返回当事件被触发时指定的命名空间
event.pageX返回相对于文档左边缘的鼠标位置
event.pageY返回相对于文档上边缘的鼠标位置
event.preventDefault()阻止事件的默认行为
event.relatedTarget返回当鼠标移动时哪个元素进入或退出
event.result包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()阻止其他事件处理程序被调用
event.stopPropagation()阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target返回哪个 DOM 元素触发事件
event.timeStamp返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type返回哪种事件类型被触发
event.which返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey事件触发时 META 键是否被按下
focus()添加/触发 focus 事件
focusin()添加事件处理程序到 focusin 事件
focusout()添加事件处理程序到 focusout 事件
hover()添加两个事件处理程序到 hover 事件
keydown()添加/触发 keydown 事件
keypress()添加/触发 keypress 事件
keyup()添加/触发 keyup 事件
live()在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load()在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown()添加/触发 mousedown 事件
mouseenter()添加/触发 mouseenter 事件
mouseleave()添加/触发 mouseleave 事件
mousemove()添加/触发 mousemove 事件
mouseout()添加/触发 mouseout 事件
mouseover()添加/触发 mouseover 事件
mouseup()添加/触发 mouseup 事件
off()移除通过 on() 方法添加的事件处理程序
on()向元素添加事件处理程序
one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
[ . p r o x y ( ) ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / e v e n t − p r o x y . h t m l " .proxy()](https://www.runoob.com/jquery/event-proxy.html " .proxy()](https://www.runoob.com/jquery/event−proxy.html".proxy()")接受一个已有的函数，并返回一个带特定上下文的新的函数
ready()规定当 DOM 完全加载时要执行的函数
resize()添加/触发 resize 事件
scroll()添加/触发 scroll 事件
select()添加/触发 select 事件
submit()添加/触发 submit 事件
toggle()在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger()触发绑定到被选元素的所有事件
triggerHandler()触发绑定到被选元素的指定事件上的所有函数
unbind()从被选元素上移除添加的事件处理程序
undelegate()从现在或未来的被选元素上移除事件处理程序
unload()在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
contextmenu()添加事件处理程序到 contextmenu 事件
[ . h o l d R e a d y ( ) ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / e v e n t − h o l d r e a d y . h t m l " .holdReady()](https://www.runoob.com/jquery/event-holdready.html " .holdReady()](https://www.runoob.com/jquery/event−holdready.html".holdReady()")用于暂停或恢复.ready() 事件的执行
3.3html/css方法

下面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法。

下面的方法适用于 HTML 和 XML 文档。除了：html() 方法。

方法描述
addClass()向被选元素添加一个或多个类名
after()在被选元素后插入内容
append()在被选元素的结尾插入内容
appendTo()在被选元素的结尾插入 HTML 元素
attr()设置或返回被选元素的属性/值
before()在被选元素前插入内容
clone()生成被选元素的副本
css()为被选元素设置或返回一个或多个样式属性
detach()移除被选元素（保留数据和事件）
empty()从被选元素移除所有子节点和内容
hasClass()检查被选元素是否包含指定的 class 名称
height()设置或返回被选元素的高度
html()设置或返回被选元素的内容
innerHeight()返回元素的高度（包含 padding，不包含 border）
innerWidth()返回元素的宽度（包含 padding，不包含 border）
insertAfter()在被选元素后插入 HTML 元素
insertBefore()在被选元素前插入 HTML 元素
offset()设置或返回被选元素的偏移坐标（相对于文档）
offsetParent()返回第一个定位的祖先元素
outerHeight()返回元素的高度（包含 padding 和 border）
outerWidth()返回元素的宽度（包含 padding 和 border）
position()返回元素的位置（相对于父元素）
prepend()在被选元素的开头插入内容
prependTo()在被选元素的开头插入 HTML 元素
prop()设置或返回被选元素的属性/值
remove()移除被选元素（包含数据和事件）
removeAttr()从被选元素移除一个或多个属性
removeClass()从被选元素移除一个或多个类
removeProp()移除通过 prop() 方法设置的属性
replaceAll()把被选元素替换为新的 HTML 元素
replaceWith()把被选元素替换为新的内容
scrollLeft()设置或返回被选元素的水平滚动条位置
scrollTop()设置或返回被选元素的垂直滚动条位置
text()设置或返回被选元素的文本内容
toggleClass()在被选元素中添加/移除一个或多个类之间切换
unwrap()移除被选元素的父元素
val()设置或返回被选元素的属性值（针对表单元素）
width()设置或返回被选元素的宽度
wrap()在每个被选元素的周围用 HTML 元素包裹起来
wrapAll()在所有被选元素的周围用 HTML 元素包裹起来
wrapInner()在每个被选元素的内容周围用 HTML 元素包裹起来
[ . e s c a p e S e l e c t o r ( ) ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / h t m l − e s c a p e S e l e c t o r . h t m l " .escapeSelector()](https://www.runoob.com/jquery/html-escapeSelector.html " .escapeSelector()](https://www.runoob.com/jquery/html−escapeSelector.html".escapeSelector()")转义CSS选择器中有特殊意义的字符或字符串
[ . c s s H o o k s ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / h t m l − c s s h o o k s . h t m l " .cssHooks](https://www.runoob.com/jquery/html-csshooks.html " .cssHooks](https://www.runoob.com/jquery/html−csshooks.html".cssHooks")提供了一种方法通过定义函数来获取和设置特定的CSS值
3.4遍历方法
方法描述
add()把元素添加到匹配元素的集合中
addBack()把之前的元素集添加到当前集合中
andSelf()在版本 1.8 中被废弃。addBack() 的别名
children()返回被选元素的所有直接子元素
closest()返回被选元素的第一个祖先元素
contents()返回被选元素的所有直接子元素（包含文本和注释节点）
each()为每个匹配元素执行函数
end()结束当前链中最近的一次筛选 *** 作，并把匹配元素集合返回到前一次的状态
eq()返回带有被选元素的指定索引号的元素
filter()把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find()返回被选元素的后代元素
first()返回被选元素的第一个元素
has()返回拥有一个或多个元素在其内的所有元素
is()根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true
last()返回被选元素的最后一个元素
map()把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象
next()返回被选元素的后一个同级元素
nextAll()返回被选元素之后的所有同级元素
nextUntil()返回介于两个给定参数之间的每个元素之后的所有同级元素
not()从匹配元素集合中移除元素
offsetParent()返回第一个定位的父元素
parent()返回被选元素的直接父元素
parents()返回被选元素的所有祖先元素
parentsUntil()返回介于两个给定参数之间的所有祖先元素
prev()返回被选元素的前一个同级元素
prevAll()返回被选元素之前的所有同级元素
prevUntil()返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings()返回被选元素的所有同级元素
slice()把匹配元素集合缩减为指定范围的子集
3.5ajax方法

AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

下面的表格列出了所有的 jQuery AJAX 方法：

方法描述
[** . a j a x ( ) ∗ ∗ ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / a j a x − a j a x . h t m l " .ajax()**](https://www.runoob.com/jquery/ajax-ajax.html " .ajax()∗∗](https://www.runoob.com/jquery/ajax−ajax.html".ajax()")执行异步 AJAX 请求
$.ajaxPrefilter()在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项
[** . a j a x S e t u p ( ) ∗ ∗ ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / a j a x − a j a x s e t u p . h t m l " .ajaxSetup()**](https://www.runoob.com/jquery/ajax-ajaxsetup.html " .ajaxSetup()∗∗](https://www.runoob.com/jquery/ajax−ajaxsetup.html".ajaxSetup()")为将来的 AJAX 请求设置默认值
$.ajaxTransport()创建处理 Ajax 数据实际传送的对象
[** . g e t ( ) ∗ ∗ ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / a j a x − g e t . h t m l " .get()**](https://www.runoob.com/jquery/ajax-get.html " .get()∗∗](https://www.runoob.com/jquery/ajax−get.html".get()")使用 AJAX 的 HTTP GET 请求从服务器加载数据
[** . g e t J S O N ( ) ∗ ∗ ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / a j a x − g e t j s o n . h t m l " .getJSON()**](https://www.runoob.com/jquery/ajax-getjson.html " .getJSON()∗∗](https://www.runoob.com/jquery/ajax−getjson.html".getJSON()")使用 HTTP GET 请求从服务器加载 JSON 编码的数据
[ . g e t S c r i p t ( ) ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / a j a x − g e t s c r i p t . h t m l " .getScript()](https://www.runoob.com/jquery/ajax-getscript.html " .getScript()](https://www.runoob.com/jquery/ajax−getscript.html".getScript()")使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
[ . p a r a m ( ) ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / a j a x − p a r a m . h t m l " .param()](https://www.runoob.com/jquery/ajax-param.html " .param()](https://www.runoob.com/jquery/ajax−param.html".param()")创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
[ . p o s t ( ) ] ( h t t p s : / / w w w . r u n o o b . c o m / j q u e r y / a j a x − p o s t . h t m l " .post()](https://www.runoob.com/jquery/ajax-post.html " .post()](https://www.runoob.com/jquery/ajax−post.html".post()")使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete()规定 AJAX 请求完成时运行的函数
ajaxError()规定 AJAX 请求失败时运行的函数
ajaxSend()规定 AJAX 请求发送之前运行的函数
ajaxStart()规定第一个 AJAX 请求开始时运行的函数
ajaxStop()规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess()规定 AJAX 请求成功完成时运行的函数
load()从服务器加载数据，并把返回的数据放置到指定的元素中
serialize()编码表单元素集为字符串以便提交
serializeArray()编码表单元素集为 names 和 values 的数组
3.6其他

https://www.runoob.com/jquery/jquery-ref-misc.html

4、jQuery插件 4.1 vaildate

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

默认校验规则

序号规则描述
1required:true必须输入的字段。
2remote:“check.php”使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6dateISO:true必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7number:true必须输入合法的数字（负数，小数）。
8digits:true必须输入整数。
9creditcard:必须输入合法的xyk号。
10equalTo:“#field”输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串（上传文件的后缀）。
12maxlength:5输入长度最多是 5 的字符串（汉字算一个字符）。
13minlength:10输入长度最小是 10 的字符串（汉字算一个字符）。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min:10输入值不能小于 10。
//1、将校验规则写到控件中
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
尝试一下 »

2、将校验规则写到 js 代码中
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字符组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字符"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字符",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
     }
    })
});
//messages 处，如果某个控件没有 message，将调用默认的信息

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>
4.2 cookie

jQuery 可以通过 jquery.cookie.js 插件来 *** 作 Cookie。

官方地址：http://plugins.jquery.com/cookie/

Github 地址：https://github.com/carhartl/jquery-cookie

使用 jquery.cookie.js 之前需要先引入 jQuery：

我们可以使用第三方资源库引入这两个文件：

使用方法

创建 cookie：

$.cookie('name', 'value');

如果未指定过期时间，则会在关闭浏览器时过期。

创建 cookie，并设置 7 天后过期：

$.cookie('name', 'value', { expires: 7 });

创建 cookie，并设置 cookie 的有效路径，路径为网站的根目录：

$.cookie('name', 'value', { expires: 7, path: '/' });

注： 在默认情况下，只有设置 cookie 的网页才能读取该 cookie。如果想让一个页面读取另一个页面设 置的cookie，必须设置 cookie 的路径。cookie 的路径用于设置能够读取 cookie 的顶级目录。将这 个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。

读取 cookie：

$.cookie('name'); // => "value" $.cookie('nothing'); // => undefined

读取所有的 cookie 信息：

$.cookie(); // => { "name": "value" }

删除 cookie：

// cookie 删除成功返回 true，否则返回 false $ .removeCookie(‘name’); // => true $.removeCookie(‘nothing’); // => false // 写入使用了 path时，读取也需要使用相同的属性 (path, domain) $ .cookie(‘name’, ‘value’, { path: ‘/’ }); // 以下代码【删除失败】 $.removeCookie(‘name’); // => false // 以下代码【删除成功】 $.removeCookie(‘name’, { path: ‘/’ }); // => true

注意： 删除 cookie 时，必须传递用于设置 cookie 的完全相同的路径，域及安全选项。

实例:

$(document).ready(function(){ $.cookie('name', 'runoob'); // 创建 cookie name = $.cookie('name'); // 读取 cookie $("#test").text(name); $.cookie('name2', 'runoob2', { expires: 7, path: '/' }); name2 = $.cookie('name2'); $("#test2").text(name2); });

https://blog.csdn.net/chenyonken/article/details/80978322?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164940422916780265453303%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164940422916780265453303&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~hot_rank-1-80978322.142^v7^control,157^v4^new_style&utm_term=jQuery常用插件&spm=1018.2226.3001.4187

5、效果 5.1 hide和show

语法:

**$(selector).hide(speed,callback); **

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$("button").click(function(){
  $("p").hide(1000);
});

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$ (“button”).click(function(){ $(“p”).toggle(); });

语法:

$(selector).toggle(speed,callback);

5.2 slide 滑动

**$(selector).slideUp(speed,callback); **

$(selector).slideDown(speed,callback);

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1297286.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
qq网吧网关 qq网吧网关 一级用户组
0 0
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表（0条）

保存