首页  思维导图  详情

Jquery基础

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





AI智能生成

jquery 基础 jquery 基础 jquery 基础

jquery 基础

前端开发

作者其他创作

大纲/内容

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

如何通过Jquery找到html标签

基本选择器

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

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

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

并集选择器 selector1,selector2,...,selectorN 将每一个选择器匹配的元素合并后一起返回 $("div,p,.title" )选取所有div、p和拥有class为title的元素

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

层次选择器

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

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

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

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

属性选择器

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

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

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

基本过滤选择器

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

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

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

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

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

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

可见性过滤选择器

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

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

jQuery操作页面元素

jQuery操作css

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

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

css("属性","属性值") ;

css({"属性1":"属性值1","属性2":"属性值2"...}) ;

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

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

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

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

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

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

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

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

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) $(A).appendTo(B)表示把A追加到B中

如：$newNode1.appendTo("ul");

prepend(content) $(A). prepend (B)表示将B前置插入到A中

如：$("ul"). prepend ($newNode1);

prependTo(content) $(A). prependTo (B)表示将A前置插入到B中

如：$newNode1. prependTo ("ul");

after(content) $(A).after (B)表示将B插入到A之后

如：$("ul").after($newNode1);

insertAfter(content) $(A). insertAfter (B)表示将A插入到B之后

如：$newNode1.insertAfter("ul");

before(content) $(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

insertBefore(content) $(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", alt: "Test Image" });

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

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

遍历元素

children()方法可以用来获取元素的所有子元素

var $section =$("section").children();

遍历同辈元素

next([expr]) 用于获取紧邻匹配元素之后的元素

$("li:eq(1)").next().addClass("orange");

prev([expr]) 用于获取紧邻匹配元素之前的元素

$("li:eq(1)").prev().addClass("orange");

slibings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素

$("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(){

alert($(this).text());

});

其他遍历

find() 搜索所有与指定表达式匹配的元素。

$("p").find("span");

筛选出与指定表达式匹配的元素集合。

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

$("p").filter(".selected")

jQuery中的事件

基础事件

鼠标事件

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

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

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

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

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

键盘事件

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

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

keypress( ) 触发或将函数绑定到指定元素的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");

function () {

$(this).removeClass("hover");

}

);

toggle() 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

$("td").toggle(

function () {

$(this).addClass("selected");

function () {

$(this).removeClass("selected");

}

);

jQuery中的动画

控制元素显示与隐藏

show() 控制元素的显示

$("p").show()

$("p").show("fast",function(){

$(this).text("Animation Done!");

});

hide( )控制元素的隐藏

$("p").hide()

$("p").hide("fast",function(){

alert("Animation Done.");

});

改变元素的透明度

fadeIn()可以通过改变元素的透明度实现淡入效果

$("p").fadeIn("slow");

("p").fadeIn("fast",function(){

alert("Animation Done.");

});

fadeOut()可以通过改变元素的透明度实现淡出效果

$("p").fadeOut("slow");

$("p").fadeOut("fast",function(){

alert("Animation Done.");

});

改变元素高度

slideDown() 可以使元素逐步延伸显示

$("p").slideDown();

$("p").slideDown("fast",function(){

alert("Animation Done.");

});

slideUp()则使元素逐步缩短直至隐藏

$("p").slideUp("slow");

$("p").slideUp("fast",function(){

alert("Animation Done.");

});

自定义动画

animate(params,[speed],[easing],[fn])用于创建自定义动画的函数。

<div id="block">Hello!</div>

$("#go").click(function(){

$("#block").animate({

width: "90%",

height: "100%",

fontSize: "10em",

borderWidth: 10

}, 1000 );

});

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;

}

正则表达式验证

邮箱正则验证

var reg= /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;

if(reg.test(email) ==false){

$email_prompt.html("电子邮件格式不正确,请重新输入");

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); }

验证中文名称

function isChinaName(name)

{ var pattern = /^[\u4E00-\u9FA5]{1,6}$/;

return pattern.test(name); }

正则表达式

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

^ 匹配字符串的开始

$ 匹配字符串的结束

\s 任何空白字符

\S 任何非空白字符

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

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

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

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

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

{n} 匹配前一项n次

{n,} 匹配前一项n次，或者多次

{n,m} 匹配前一项至少n次，但是不能超过m次

* 匹配前一项0次或多次，等价于{0,}

+ 匹配前一项1次或多次，等价于{1,}

？匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

HTML5的方式验证表单

HTML5验证属性

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

required 规定输入域不能为空

pattern 规定验证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 表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，
valueMissing属性会返回true，否则返回false。

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

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

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

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

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

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

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