

首页  思维导图  详情



Jquery基础

2018-06-29 10:36:14   11  举报





AI智能生成

jquery 基础 jquery 基础 jquery 基础

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>

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>工厂函数$()用于获取或创建节点</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>var mail= $("#mail").val();</div><div><br></div><div>if (mail === "") {</div><div>     alert("Email不能为空");</div><div>     return false;</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>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。

 Collect

Get Started

WeChat基础算法

 Collect

Get Started

JAVA面试宝典基础版

 Collect

Get Started

jQuery

 Collect

Get Started

Jquery 基础知识点总结





0 条评论

下一页