导图社区 Jquery基础
- 13
- 1
- 1
- 举报
Jquery基础
关于Jquery基础的思维导图， jQuery表单验证：Jquery表单验证核心、正则表达式、HTML5的方式验证表单。
编辑于2023-05-27 23:44:32 湖南- 开发
- 相似推荐
- 大纲
Jquery 基础
6字真言（找到它，操作它）
如何通过Jquery找到html标签
基本选择器
标签选择器<span> </span>element<span> </span>根据给定的标签名匹配元素<span> </span>$("h2" )选取所有h2元素
类选择器<span> </span>.class<span> </span>根据给定的class匹配元素<span> </span>$(" .title")选取所有class为title的元素
ID选择器<span> </span>#id<span> </span>根据给定的id匹配元素<span> </span>$(" #title")选取id为title的元素
并集选择器<span> </span>selector1,selector2,...,selectorN<span> </span>将每一个选择器匹配的元素合并后一起返回<span> </span>$("div,p,.title" )选取所有div、p和拥有class为title的元素
全局选择器<span> </span>*<span> </span>匹配所有元素<span> </span>$("*" )选取所有元素
<div>层次选择器<br></div>
后代选择器<span> </span>ancestor descendant<span> </span>选取ancestor元素里的所有descendant（后代）元素<span> </span>$("#menu span" )选取#menu下的<span>元素
子选择器<span> </span>parent>child<span> </span>选取parent元素下的child（子）元素<span> </span>$(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器<span> </span>prev+next<span> </span>选取紧邻prev元素之后的next元素<span> </span>$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器<span> </span>prev~sibings<span> </span>选取prev元素之后的所有siblings元素<span> </span>$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>
属性选择器
<div>[attribute^=value] 选取给定属性是以某些特定值开始的元素 $(" [href^='en']" )选取href属性值以en开头的元素<br></div>
<div>[attribute$=value] 选取给定属性是以某些特定值结尾的元素 $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素<br></div>
[attribute*=value]<span> </span>选取给定属性是以包含某些值的元素<span> </span>$(" [href* ='txt']" )选取href属性值中含有txt的元素
<div>基本过滤选择器<br></div>
:eq(index)<span> </span>选取索引等于index的元素（index从0开始）<span> </span>$("li:eq(1)" )选取索引等于1的<li>元素
<div>:gt(index) 选取索引大于index的元素（index从0开始） $(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）<br></div>
<div>:lt(index) 选取索引小于index的元素（index从0开始） $(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）<br></div>
<div><br></div><div>:header<span> </span>选取所有标题元素，如h1~h6<span> </span>$(":header" )选取网页中所有标题元素</div>
:focus<span> </span>选取当前获取焦点的元素<span> </span>$(":focus" )选取当前获取焦点的元素
<div>:animated 选择所有动画 $(":animated" )选取当前所有动画元素<br></div>
可见性过滤选择器
:visible<span> </span>选取所有可见的元素<span> </span>$(":visible" )选取所有可见的元素
<div>:hidden 选取所有隐藏的元素 $(":hidden" ) 选取所有隐藏的元素<br></div>
jQuery操作页面元素
jQuery操作css
<div>使用addClass( )方法为元素添加样式</div>
<div>使用css( )方法设置元素样式<br></div>
<div>css("属性","属性值") ;<br></div>
css({"属性1":"属性值1","属性2":"属性值2"...}) ;
<pre><code>使用removeClass()方法为元素删除样式</code></pre>
<div>height([value]) 设置或返回匹配元素的高度<br></div>
width([value]) <span> </span>设置或返回匹配元素的宽度
offset([value]) <span> </span>返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( ) <span> </span>返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( ) <span> </span>返回第一个匹配元素相对于父元素的位置
scrollLeft([position]) <span> </span>参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position]) <span> </span>参数可选。设置或返回匹配元素相对滚动条顶
jQuery操作html
HTML代码操作<br>html()可以对HTML代码进行操作，类似于JS中的innerHTML<br>
取值$("div.left").html()
赋值 $("div.left").html("<div class='content'>…</div>");
标签内容操作<br>text()可以获取或设置元素的文本内容<br>
取值 $("div.left").text();
赋值 $("div.left").text("hello World");
<div>属性值操作<br>val()可以获取或设置元素的value属性值<br></div>
取值 $(this).val();
$(this).val("value");
<div>创建节点<br></div>
<div>工厂函数$()用于获取或创建节点</div><div>$(element)：把DOM节点转化成jQuery节点</div><div>$(html)：使用HTML字符串创建jQuery节点</div><div>var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");</div>
插入节点
<div>append(content) $(A).append(B)表示将B追加到A中<br></div><div> 如：$("ul").append($newNode1);</div>
<div>appendTo(content) <span> </span>$(A).appendTo(B)表示把A追加到B中</div><div>如：$newNode1.appendTo("ul"); </div>
<div>prepend(content) <span> </span>$(A). prepend (B)表示将B前置插入到A中</div><div>如：$("ul"). prepend ($newNode1); </div><div><br></div>
<div>prependTo(content) <span> </span>$(A). prependTo (B)表示将A前置插入到B中</div><div>如：$newNode1. prependTo ("ul"); </div><div><br></div>
<div>after(content) <span> </span>$(A).after (B)表示将B插入到A之后</div><div>如：$("ul").after($newNode1); </div>
<div>insertAfter(content) <span> </span>$(A). insertAfter (B)表示将A插入到B之后</div><div>如：$newNode1.insertAfter("ul"); </div>
<div>before(content) <span> </span>$(A). before (B)表示将B插入至A之前</div><div>如：$("ul").before($newNode1); </div>
<div>insertBefore(content) <span> </span>$(A). insertBefore (B)表示将A插入到B之前</div><div>如：$newNode1.insertBefore("ul"); </div>
删除节点
remove()：删除整个节点 $(selector).remove([expr]);
empty()：清空节点内容 $(selector).empty();
替换节点
<div><p>Hello</p><p>cruel</p><p>World</p></div><div>$("p").replaceWith("<b>Paragraph. </b>");</div>
<div><p>Hello</p><p>cruel</p><p>World</p></div><div>$("<b>Paragraph. </b>").replaceAll("p");</div>
复制节点
<div>clone()用于复制某个节点</div><div>$(selector).clone([includeEvents]) ;</div>
jQuery操作属性<br>
attr()用来获取与设置元素属性
取值 <span>$("img").attr("src");</span>
赋值 <span>$("img").attr({ src: "test.jpg", alt: "Test Image" });</span>
removeAttr()用来删除元素的属性
<pre><code><img src="test.jpg"/> $("img").removeAttr("src");</code></pre>
遍历元素
<div>children()方法可以用来获取元素的所有子元素<br></div><div>var $section =$("section").children();</div>
<div>遍历同辈元素<br></div>
<div>next([expr]) 用于获取紧邻匹配元素之后的元素<br></div><div>$("li:eq(1)").next().addClass("orange"); </div>
<div>prev([expr]) <span> </span>用于获取紧邻匹配元素之前的元素</div><div>$("li:eq(1)").prev().addClass("orange"); </div>
<div>slibings([expr]) <span> </span>用于获取位于匹配元素前面和后面的所有同辈元素</div><div>$("li:eq(1)").siblings().addClass("orange"); </div>
<div>遍历父元素</div>
<div>parent()：获取元素的父级元素</div><div>$("li:eq(1)").parent().addClass("orange");</div>
<div>parents()：元素元素的祖先元素</div><div> $("li:eq(1)").parents().addClass("orange");</div>
<h2>each遍历<br></h2><h2></h2>
<pre><code>$("img").each(function(i){ this.src = "test" + i + ".jpg"; });</code></pre>
<div>$("ul>li").each(function(){</div><div><span> </span>alert($(this).text());</div><div><span> </span>});</div>
其他遍历
<div>find() 搜索所有与指定表达式匹配的元素。<br></div><div>$("p").find("span");</div>
<div>筛选出与指定表达式匹配的元素集合。</div><div><p>Hello</p><p>Hello Again</p><p class="selected">And Again</p></div><div>$("p").filter(".selected")</div>
<div>jQuery中的事件<br></div>
基础事件
鼠标事件
click( ) <span> </span>触发或将函数绑定到指定元素的click事件
mouseover( ) <span> </span>触发或将函数绑定到指定元素的mouseover事件
mouseout( ) <span> </span>触发或将函数绑定到指定元素的mouseout事件
mouseenter( ) <span> </span>触发或将函数绑定到指定元素的mouseenter事件
mouseleave( ) <span> </span>触发或将函数绑定到指定元素的mouseleave事件
键盘事件
keydown( ) <span> </span>触发或将函数绑定到指定元素的keydown事件
keyup( ) <span> </span>触发或将函数绑定到指定元素的keyup事件
keypress( ) <span> </span>触发或将函数绑定到指定元素的keypress事件
表单事件
<div> change() 当元素的值发生改变时，会发生 change 事件。</div><div>$("input[type='text']").change( function() {</div><div> // 这里可以写些验证代码</div><div>});</div>
<div>focus() 当元素获得焦点时，触发 focus 事件。</div><div>$("input[type=text]").focus(function(){</div><div> this.blur();</div><div>});</div>
<div>submit() 当提交表单时，会发生 submit 事件。<br></div><div>$("form").submit( function () {</div><div> return false;</div><div>} );</div>
复合事件
<div>hover() 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法</div><div>$("td").hover(</div><div> function () {</div><div> $(this).addClass("hover");</div><div> },</div><div> function () {</div><div> $(this).removeClass("hover");</div><div> }</div><div>);</div><div><br></div>
<div>toggle() 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。</div><div>$("td").toggle(</div><div> function () {</div><div> $(this).addClass("selected");</div><div> },</div><div> function () {</div><div> $(this).removeClass("selected");</div><div> }</div><div>);</div>
jQuery中的动画
控制元素显示与隐藏
<div>show() 控制元素的显示</div><div>$("p").show()</div><div>$("p").show("fast",function(){</div><div> $(this).text("Animation Done!");</div><div> });</div><div><br></div>
<div>hide( )控制元素的隐藏<br></div><div>$("p").hide()</div><div>$("p").hide("fast",function(){</div><div> alert("Animation Done.");</div><div> });</div>
改变元素的透明度
<div>fadeIn()可以通过改变元素的透明度实现淡入效果</div><div>$("p").fadeIn("slow");</div><div>("p").fadeIn("fast",function(){</div><div> alert("Animation Done.");</div><div> });</div>
<div>fadeOut()可以通过改变元素的透明度实现淡出效果</div><div>$("p").fadeOut("slow");</div><div>$("p").fadeOut("fast",function(){</div><div> alert("Animation Done.");</div><div> });</div>
改变元素高度
<div>slideDown() 可以使元素逐步延伸显示<br></div><div> $("p").slideDown();</div><div>$("p").slideDown("fast",function(){</div><div> alert("Animation Done.");</div><div> });</div>
<div>slideUp()则使元素逐步缩短直至隐藏</div><div>$("p").slideUp("slow");</div><div>$("p").slideUp("fast",function(){</div><div> alert("Animation Done.");</div><div> });</div>
自定义动画
<div>animate(params,[speed],[easing],[fn])用于创建自定义动画的函数。</div><div><button id="go"> Run</button></div><div><div id="block">Hello!</div></div><div>$("#go").click(function(){</div><div> $("#block").animate({ </div><div> width: "90%",</div><div> height: "100%", </div><div> fontSize: "10em", </div><div> borderWidth: 10</div><div> }, 1000 );</div><div>});</div>
jQuery表单验证
Jquery表单验证核心
<div>submit() 当提交表单时，会发生 submit 事件。</div>
<div>$("form").submit( function () {</div><div> return false;//不提交表单<br> return true;//提交表单</div><div>} );</div>
<div>非空验证</div>
<div>var mail= $("#mail").val();</div><div><br></div><div>if (mail === "") {</div><div> alert("Email不能为空");</div><div> return false;</div><div>}</div>
<div>长度验证</div>
<div>var pwd= $("#pwd").val();</div><div><br></div><div>if(pwd.length<6){</div><div> alert("密码必须等于或大于6个字符");</div><div> return false;</div><div>}</div>
正则表达式验证
<div>邮箱正则验证</div>
<div>var reg= /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;</div><div>if(reg.test(email) ==false){</div><div> $email_prompt.html("电子邮件格式不正确,请重新输入");</div><div> return false;</div><div>}</div>
<span>验证手机号 </span>
<div><code>function</code> <code>isPhoneNo(phone) { </code></div><div><code>var</code> <code>pattern = /^1[34578]\d{9}$/; </code></div><div><code>return</code> <code>pattern.test(phone); } </code></div>
<span> 验证身份证 </span>
<div><code>function</code> <code>isCardNo(card) { </code></div><div><code>var</code> <code>pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; </code></div><div><code>return</code> <code>pattern.test(card); }</code></div>
<span>验证中文名称 </span>
<div><code>function</code> <code>isChinaName(name) </code></div><div><code>{ </code><code>var</code> <code>pattern = /^[\u4E00-\u9FA5]{1,6}$/; </code></div><div><code>return</code> <code>pattern.test(name); } </code></div>
正则表达式
/…/<span> </span>代表一个模式的开始和结束
^<span> </span>匹配字符串的开始
$<span> </span>匹配字符串的结束
\s<span> </span>任何空白字符
\S<span> </span>任何非空白字符
\d<span> </span>匹配一个数字字符，等价于[0-9]
\D<span> </span>除了数字之外的任何字符，等价于[^0-9]
\w<span> </span>匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W<span> </span>任何非单字字符，等价于[^a-zA-z0-9_]
.<span> </span>除了换行符之外的任意字符
{n}<span> </span>匹配前一项n次
{n,}<span> </span>匹配前一项n次，或者多次
{n,m}<span> </span>匹配前一项至少n次，但是不能超过m次
*<span> </span>匹配前一项0次或多次，等价于{0,}
+<span> </span>匹配前一项1次或多次，等价于{1,}
？<span> </span>匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}
HTML5的方式验证表单
<div>HTML5验证属性</div>
<div>placeholder 提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失<br></div>
required<span> </span>规定输入域不能为空<br>
pattern<span> </span>规定验证input域的模式（正则表达式）
validity 对象
<div>$(document).ready(function(){</div><div> $("#submit").click(function(){</div><div> var u=document.getElementById("uName");</div><div> if(u.validity.valueMissing==true){</div><div> u.setCustomValidity("昵称不能为空");</div><div> }</div><div> else if(u.validity.patternMismatch==true){</div><div> u.setCustomValidity("昵称必须是6~10位的英文和数字");</div><div> }</div><div> else{</div><div> u.setCustomValidity("");</div><div> }</div><div><br></div><div> var pwd=document.getElementById("pwd");</div><div> if(pwd.validity.valueMissing==true){</div><div> pwd.setCustomValidity("密码不能为空");</div><div> }</div><div> else if(pwd.validity.patternMismatch==true){</div><div> pwd.setCustomValidity("密码必须是6~16位的英文和数字");</div><div> }</div><div> else{</div><div> pwd.setCustomValidity("");</div><div> }</div><div><br></div><div> var email=document.getElementById("email");</div><div> if(email.validity.valueMissing==true){</div><div> email.setCustomValidity("邮箱不能为空");</div><div> }</div><div> else if(email.validity.typeMismatch==true){</div><div> email.setCustomValidity("邮箱格式不正确");</div><div> }</div><div> else{</div><div> email.setCustomValidity("");</div><div> }</div><div><br></div><div> })</div><div>})</div><div><br></div>
valueMissing<span> </span>表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，<br>valueMissing属性会返回true，否则返回false。
typeMismatch<span> </span>输入值与type类型不匹配。HTML 5新增的表单类型如email、number、url等，<br>都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。
patternMismatch<span> </span>输入值与pattern特性的正则表达式不匹配。<br>如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true，否则返回false。
tooLong<span> </span>输入的内容超过了表单元素的maxLength 特性限定的字符长度。<br>虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制。<br>如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false。
rangeUnderflow<span> </span>输入的值小于min特性的值。如果输入的数值小于最小值，则rangeUnderflow属性返回true，否则返回false。
rangeOverflow<span> </span>输入的值大于max特性的值。如果输入的数值大于最大值，则rangeOverflow属性返回true，否则返回false。
stepMismatch<span> </span>输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，<br>这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，<br>因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false
customError<span> </span>使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：<br>setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；<br>setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。