Jquery基础

Jquery 基础

6字真言（找到它，操作它）

如何通过Jquery找到html标签

基本选择器

标签选择器\telement\t根据给定的标签名匹配元素\t$(\"h2\" )选取所有h2元素

类选择器\t.class\t根据给定的class匹配元素\t$(\" .title\")选取所有class为title的元素

ID选择器\t#id\t根据给定的id匹配元素\t$(\" #title\")选取id为title的元素

全局选择器\t*\t匹配所有元素\t$(\"*\" )选取所有元素

层次选择器

后代选择器\tancestor descendant\t选取ancestor元素里的所有descendant（后代）元素\t$(\"#menu span\" )选取#menu下的<span>元素

子选择器\tparent>child\t选取parent元素下的child（子）元素\t$(\" #menu>span\" )选取#menu的子元素<span>

相邻元素选择器\tprev+next\t选取紧邻prev元素之后的next元素\t$(\" h2+dl \" )选取紧邻<h2>元素之后的同辈元素<dl>

同辈元素选择器\tprev~sibings\t选取prev元素之后的所有siblings元素\t$(\" h2~dl \" )选取<h2>元素之后所有的同辈元素<dl>

属性选择器

[attribute^=value]\t选取给定属性是以某些特定值开始的元素\t$(\" [href^='en']\" )选取href属性值以en开头的元素

[attribute$=value]\t选取给定属性是以某些特定值结尾的元素\t$(\" [href$='.jpg']\" )选取href属性值以.jpg结尾的元素

[attribute*=value]\t选取给定属性是以包含某些值的元素\t$(\" [href* ='txt']\" )选取href属性值中含有txt的元素

基本过滤选择器

:eq(index)\t选取索引等于index的元素（index从0开始）\t$(\"li:eq(1)\" )选取索引等于1的<li>元素

:gt(index)\t选取索引大于index的元素（index从0开始）\t$(\" li:gt(1)\" )选取索引大于1的<li>元素（注：大于1，不包括1）

:lt(index)\t选取索引小于index的元素（index从0开始）\t$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）

:header\t选取所有标题元素，如h1~h6\t$(\":header\" )选取网页中所有标题元素

:focus\t选取当前获取焦点的元素\t$(\":focus\" )选取当前获取焦点的元素

:animated\t选择所有动画\t$(\":animated\" )选取当前所有动画元素

可见性过滤选择器

:visible\t选取所有可见的元素\t$(\":visible\" )选取所有可见的元素

:hidden\t选取所有隐藏的元素\t$(\":hidden\" ) 选取所有隐藏的元素

jQuery操作页面元素

jQuery操作css

使用addClass( )方法为元素添加样式

使用css( )方法设置元素样式

css(\"属性\

css({\"属性1\":\"属性值1\

使用removeClass()方法为元素删除样式

height([value]) \t设置或返回匹配元素的高度

width([value]) \t设置或返回匹配元素的宽度

offset([value]) \t返回以像素为单位的top和left坐标。仅对可见元素有效

offsetParent( ) \t返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素

position( ) \t返回第一个匹配元素相对于父元素的位置

scrollLeft([position]) \t参数可选。设置或返回匹配元素相对滚动条左侧的偏移

scrollTop([position]) \t参数可选。设置或返回匹配元素相对滚动条顶

jQuery操作html

HTML代码操作html()可以对HTML代码进行操作，类似于JS中的innerHTML

取值$(\"div.left\").html()

赋值 $(\"div.left\").html(\"<div class='content'>…</div>\");

标签内容操作text()可以获取或设置元素的文本内容

取值 $(\"div.left\").text();

赋值 $(\"div.left\").text(\"hello World\");

属性值操作val()可以获取或设置元素的value属性值

取值  $(this).val();

$(this).val(\"value\");

创建节点

工厂函数$()用于获取或创建节点$(element)：把DOM节点转化成jQuery节点$(html)：使用HTML字符串创建jQuery节点var $newNode1=$(\"<li>你喜欢哪些冬季运动项目？</li>\");

插入节点

append(content)  $(A).append(B)表示将B追加到A中                 如：$(\"ul\").append($newNode1);

appendTo(content) \t$(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo(\"ul\"); 

prepend(content) \t$(A). prepend (B)表示将B前置插入到A中如：$(\"ul\"). prepend ($newNode1); 

prependTo(content) \t$(A). prependTo (B)表示将A前置插入到B中如：$newNode1. prependTo (\"ul\"); 

after(content) \t$(A).after (B)表示将B插入到A之后如：$(\"ul\").after($newNode1); 

insertAfter(content) \t$(A). insertAfter (B)表示将A插入到B之后如：$newNode1.insertAfter(\"ul\"); 

before(content) \t$(A). before (B)表示将B插入至A之前如：$(\"ul\").before($newNode1); 

insertBefore(content) \t$(A). insertBefore (B)表示将A插入到B之前如：$newNode1.insertBefore(\"ul\"); 

删除节点

remove()：删除整个节点  $(selector).remove([expr]);

empty()：清空节点内容  $(selector).empty();

替换节点

<p>Hello</p><p>cruel</p><p>World</p>$(\"p\").replaceWith(\"<b>Paragraph. </b>\");

<p>Hello</p><p>cruel</p><p>World</p>$(\"<b>Paragraph. </b>\").replaceAll(\"p\");

复制节点

clone()用于复制某个节点$(selector).clone([includeEvents]) ;

jQuery操作属性

attr()用来获取与设置元素属性

取值 $(\"img\").attr(\"src\");

赋值 $(\"img\").attr({ src: \"test.jpg\

removeAttr()用来删除元素的属性

<img src=\"test.jpg\"/>$(\"img\").removeAttr(\"src\");

遍历元素

children()方法可以用来获取元素的所有子元素var $section =$(\"section\").children();

遍历同辈元素

next([expr]) \t用于获取紧邻匹配元素之后的元素$(\"li:eq(1)\").next().addClass(\"orange\"); 

prev([expr]) \t用于获取紧邻匹配元素之前的元素$(\"li:eq(1)\").prev().addClass(\"orange\"); 

slibings([expr]) \t用于获取位于匹配元素前面和后面的所有同辈元素$(\"li:eq(1)\").siblings().addClass(\"orange\"); 

遍历父元素

parent()：获取元素的父级元素$(\"li:eq(1)\").parent().addClass(\"orange\");

parents()：元素元素的祖先元素 $(\"li:eq(1)\").parents().addClass(\"orange\");

each遍历

$(\"img\").each(function(i){ this.src = \"test\" + i + \".jpg\"; });

$(\"ul>li\").each(function(){\t\t\t\talert($(this).text());\t\t\t});

其他遍历

find() 搜索所有与指定表达式匹配的元素。$(\"p\").find(\"span\");

筛选出与指定表达式匹配的元素集合。<p>Hello</p><p>Hello Again</p><p class=\"selected\">And Again</p>$(\"p\").filter(\".selected\")

jQuery中的事件

基础事件

鼠标事件

click( ) \t触发或将函数绑定到指定元素的click事件

mouseover( ) \t触发或将函数绑定到指定元素的mouseover事件

mouseout( ) \t触发或将函数绑定到指定元素的mouseout事件

mouseenter( ) \t触发或将函数绑定到指定元素的mouseenter事件 

mouseleave( ) \t触发或将函数绑定到指定元素的mouseleave事件 

键盘事件

keydown( ) \t触发或将函数绑定到指定元素的keydown事件

keyup( ) \t触发或将函数绑定到指定元素的keyup事件

keypress( ) \t触发或将函数绑定到指定元素的keypress事件

表单事件

 change() 当元素的值发生改变时，会发生 change 事件。$(\"input[type='text']\").change( function() {  // 这里可以写些验证代码});

focus()  当元素获得焦点时，触发 focus 事件。$(\"input[type=text]\").focus(function(){  this.blur();});

submit() 当提交表单时，会发生 submit 事件。$(\"form\").submit( function () {  return false;} );

复合事件

hover()    一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法$(\"td\").hover(  function () {    $(this).addClass(\"hover\

toggle()  用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。$(\"td\").toggle(  function () {    $(this).addClass(\"selected\

jQuery中的动画

控制元素显示与隐藏

show() 控制元素的显示$(\"p\").show()$(\"p\").show(\"fast\

hide( )控制元素的隐藏$(\"p\").hide()$(\"p\").hide(\"fast\

改变元素的透明度

fadeIn()可以通过改变元素的透明度实现淡入效果$(\"p\").fadeIn(\"slow\");(\"p\").fadeIn(\"fast\

fadeOut()可以通过改变元素的透明度实现淡出效果$(\"p\").fadeOut(\"slow\");$(\"p\").fadeOut(\"fast\

改变元素高度

slideDown() 可以使元素逐步延伸显示 $(\"p\").slideDown();$(\"p\").slideDown(\"fast\

slideUp()则使元素逐步缩短直至隐藏$(\"p\").slideUp(\"slow\");$(\"p\").slideUp(\"fast\

自定义动画

jQuery表单验证

Jquery表单验证核心

submit() 当提交表单时，会发生 submit 事件。

$(\"form\").submit( function () {  return false;//不提交表单  return true;//提交表单} );

非空验证

var mail= $(\"#mail\").val();if (mail === \"\") {     alert(\"Email不能为空\");     return false;}

长度验证

var pwd= $(\"#pwd\").val();if(pwd.length<6){    alert(\"密码必须等于或大于6个字符\");    return false;}

正则表达式验证

邮箱正则验证

验证手机号

function isPhoneNo(phone) { var pattern = /^1[34578]\\d{9}$/; return pattern.test(phone); }

验证身份证

function isCardNo(card) { var pattern = /(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/; return pattern.test(card); }

验证中文名称

正则表达式

/…/\t代表一个模式的开始和结束

^\t匹配字符串的开始

$\t匹配字符串的结束

\\s\t任何空白字符

\\S\t任何非空白字符

\\d\t匹配一个数字字符，等价于[0-9]

\\D\t除了数字之外的任何字符，等价于[^0-9]

\\w\t匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]

\\W\t任何非单字字符，等价于[^a-zA-z0-9_]

.\t除了换行符之外的任意字符

{n}\t匹配前一项n次

HTML5的方式验证表单

HTML5验证属性

placeholder\t提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失

required\t规定输入域不能为空

pattern\t规定验证input域的模式（正则表达式）

validity 对象

$(document).ready(function(){    $(\"#submit\").click(function(){        var u=document.getElementById(\"uName\");        if(u.validity.valueMissing==true){            u.setCustomValidity(\"昵称不能为空\");        }        else if(u.validity.patternMismatch==true){            u.setCustomValidity(\"昵称必须是6~10位的英文和数字\");        }        else{            u.setCustomValidity(\"\");        }        var pwd=document.getElementById(\"pwd\");        if(pwd.validity.valueMissing==true){            pwd.setCustomValidity(\"密码不能为空\");        }        else if(pwd.validity.patternMismatch==true){            pwd.setCustomValidity(\"密码必须是6~16位的英文和数字\");        }        else{            pwd.setCustomValidity(\"\");        }        var email=document.getElementById(\"email\");        if(email.validity.valueMissing==true){            email.setCustomValidity(\"邮箱不能为空\");        }        else if(email.validity.typeMismatch==true){            email.setCustomValidity(\"邮箱格式不正确\");        }        else{            email.setCustomValidity(\"\");        }    })})

valueMissing\t表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false。

typeMismatch\t输入值与type类型不匹配。HTML 5新增的表单类型如email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。

patternMismatch\t输入值与pattern特性的正则表达式不匹配。如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true，否则返回false。

tooLong\t输入的内容超过了表单元素的maxLength 特性限定的字符长度。虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制。如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false。

rangeUnderflow\t输入的值小于min特性的值。如果输入的数值小于最小值，则rangeUnderflow属性返回true，否则返回false。

rangeOverflow\t输入的值大于max特性的值。如果输入的数值大于最大值，则rangeOverflow属性返回true，否则返回false。

stepMismatch\t输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false

customError\t使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity(\"\")会清除自定义的错误信息，此时customError属性值为false。