jQuery知识点
Posted unique1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery知识点相关的知识，希望对你有一定的参考价值。
一. jQuery基础及选择器
1.补充：
jQuery是js的类库
（1）jQuery的设计思想：write less,do more
（2）jQuery的优势：
1》体积小 2》强大的选择器 3》出色的DOM封装
4》可靠的事件处理机制 5》出色的浏览器兼容性
2.在页面中引入jQuery
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
3.ready()方法
《1》 使用jQuery弹出提示框
eg：<script>
$(document).ready(function() {
alert("我的第一个jQuery示例！");
});
</script>
《2》window.onload与$(document).ready()类似，但也区别：
window.onload $(document).ready()
必须等待网页中所有的内容 网页中所有DOM文档结构绘制完毕后即刻执行，可能
执行时机 加载完毕后(包括图片、flash、 与DOM元素关联的内容(图片、flash、视频等)
视频等)才能执行 并没有加载完
编写个数 同一页面不能同时编写多个 同一个页面能同时编写多个
简化写法 无 $(function(){ //执行的代码})；
4.jQuery语法规则
(1)工厂函数$():将DOM对象转化为jQuery对象
（2）选择器selector:获取需要操作的DOM元素
（3）方法action():jQuery中提供的方法，其中包括绑定事件处理的方法
语法：$(selector).action();
5.jQuery操作页面元素
（1）使用addClass()方法为元素添加样式
语法：jQuery 对象.addClass([样式名])；
eg:$("tr:odd").addClass("odd");
（2）使用css()方法设置元素样式
语法：
css("属性","属性值")；【设置一个css属性】
css({"属性1":"属性值1","属性2","属性值2"....});【同时设置多个css属性】
eg：$(this).css({"background":"#c81623"});
（3）使用show()、hide()方法设置元素的显示和隐藏
语法：
$(selector).show();
eg: $(this).children("div").show();
$(selector).hide();
eg:$(this).children("div").hide();
6.jQuery代码风格
（1）"$"等同于"jQuery"
eg:$(document).ready()等同于jQuery(document).ready()
$(function(){...})等同于jQuery (function(){...})
(2)链式操作：对一个对象进行多重操作，并将操作结果返回给该对象
eg:
$("h2").css("background-color","#ccffff").next().css("display","block");
(3)隐式迭代
eg:
$(document).ready(function() {
$("li").css({"font-weight":"bold","color":"red"});
});
总结：1)DOM对象：直接使用JavaScript获取节点对象
2)jQuery对象：使用jQuery包装产生的能够使用jQuery中的方法对象
3）DOM对象转jQuery对象：使用$(DOM对象)
eg：var txtName=document.geElement("txtName");
var $txtName=$(txtName);
4)jQuery对象转DOM对象：
方法1：通过index的方法得到相应的DOM对象
方法2：通过get（index）方法得到相应的DOM对象
7.jQuery选择器分类
（1）基本选择器
eg：$("h1").css("color", "blue"); //标签选择器
$(".price").css({"background":"#efefef","padding":"5px"}); //类选择器
$("#author").css("clor", " #083499"); //id选择器
$(".intro,dt,dd").css("color", " #ff0000"); //并集选择器
$("*").css("font-weight", "bold"); //全局选择器
（2）层次选择器
eg：
$(".textRight p").css("color","red"); //后代选择器
$(".textRight>p").css("color", "red"); //子选择器
$("h1+p").css("text-decoration", "underline"); //相邻元素选择器
$("h1~p").css("text-decoration", "underline"); //同辈元素选择器
（3）属性选择器
eg：
$("#news a[class]").css("background","#c9cbcb");//a标签带有class属性
$("#news a[class=‘hot‘]").css("background", "#c9cbcb"); // class为hot
$("#news a[class!=‘hot‘]").css("background", "#c9cbcb");// class不为hot
$("#news a[href^=‘www‘]").css("background","#c9cbcb");//以www开头
$("#news a[href$=‘html‘]").css("background", "#c9cbcb");//以html结尾
$("#news a[href*=‘k2‘]").css("background","#c9cbcb"); //包含"k2"的元素
（4）基本过滤选择器
:eq(index): 选取索引等于index的元素（index从0开始）
eg:$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index) :选取索引大于index的元素（index从0开始）
eg: $("li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index): 选取索引小于index的元素（index从0开始）
eg:$("li:lt(1) " )选取索引小于1的<li>元素（注：小于1，不包括1）
:header :选取所有标题元素，如h1~h6 $(":header" )选取网页中所有标题元素
:focus 选取当前获取焦点的元素 $(":focus" )选取当前获取焦点的元素
:animated 选择所有动画 $(":animated" )选取当前所有动画元素
eg：
// 标题元素
$(".contain :header").css({"background":"#2a65ba",…});
// 第一个、最后一个元素
$(".contain li:first").css({"font-size":"16px",…});
$(".contain li:last").css("border","none");
// 偶数、奇数元素
$(".contain li:even").css("background","#f0f0f0");
$(".contain li:odd").css("background","#cccccc");
// 小于、大于某个索引值
$(".contain li:lt(2)").css({"color":"#708b02"});
$(".contain li:gt(3)").css({"color":"#b66302"});
8.可见性过滤选择器
通过元素显示状态来选取元素
语法 描述 示例
:visible 选取所有可见的元素 $(":visible")选取所有可见的元素
:hidden 选取所有隐藏的元素 $(":hidden") 选取所有隐藏的元素
eg：
$("p:hidden").show();
$("p:visible").hide();
二.jQuery中的事件与动画
1.jQuery事件(jQuery事件使对javascript事件的封装)
jQuery中事件分类：
<1>基础事件：（1）鼠标事件
（2）键盘事件
（3）window事件
（4）表单事件
<2>复合事件：（1）鼠标光标悬停
（2）鼠标连续点击
2.鼠标事件：
click():单击鼠标时
mouseover():鼠标指针移过时
mouseout():鼠标指针移出时
mouseenter():鼠标指针进入时
mouseleave():鼠标指针离开时
3.鼠标事件方法的区别：
1》 mouseover()、mouseeter()的区别：
相同点：鼠标进入被选元素时会触发
不同点：鼠标在其被选元素的子元素上来回进入时：
触发mouseover() 不触发mouseenter()
2》mouseout()、mouseleave()的区别
相同点:鼠标离开被选元素时会被触发
不同点：鼠标在其被选元素的子元素上来回离开时：
触发mouseout()、不触发mouseleave()
4.键盘事件(用户每次按下或者释放键盘上的键时都会产生事件)
常见的键盘事件：
keydown():按下键盘时
keyup():释放按键时
keypress():产生可打印的字符时
5.绑定事件
（1）绑定事件使用bind()方法
语法：bind(type,[data],fn);
解释：type：事件的类型，主要包括click、mosuover、mouseout等基础事件，还有自定义事件
[data]:可选函数 fn:处理函数
（2）绑定单个事件
eg:
$(".on").bind("mouseover",function () {
$(".topDown").show();
});
（3）同时绑定多个事件
eg:
$(".top-m .on").bind({
mouseover:function () {
$(".topDown").show();
},
mouseout:function () {
$(".topDown").hide();
}
});
6.移除事件
(1)移除事件使用unbind()方法
语法：unbind([type],[fn]);
注意：
当unbind()不带参数时，表示移除所绑定的全部事件
7.复合事件
(1)hover():moseover与mouseout事件的组合
语法：hover(enter,leave);
eg:$(".top-m .on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
);
(2)toggle方法：
1>toggle()方法用于模拟鼠标连续click事件
语法：toggle(fn1,fn2,....fnN);
eg: $("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
2>toggle():不带参数时，相当于show()和hide()方法的作用
toggleClass()可以对样式进行切换
语法：toggle();
eg:$("input").click(function () {
$("p").toggle();
})
语法：toggleClass(className);
eg： $("input").click(function(){$("p").toggleClass("red");})
8.toggle( )和toggleClass( )总结：
（1）toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
（2）toggle( )不带参数时是实现对象在显示和隐藏状态之间切换
（3）toggleClass( )实现对象在添加样式和移除样式之间切换
9.jQuery动画效果
1>控制元素显示与隐藏
show():控制元素的显示 hide():控制元素的隐藏
语法：$(selector).show([speed],[callback]);
eg： $(".topDown").show(40);
$(selector).hide([speed],[callback]);
eg: $(".topDown").hide("fast");
解释：[speed]: 可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
[callback]:可选。show函数执行完之后，要执行的函数
2>改变元素的透明度
fadeIn( )和fadeOut( )可以通过改变元素的透明度实现淡入淡出效果
语法：$(selector).fadeIn([speed],[callback]);
eg: $("img").fadeIn("slow");
$(selector).fadeOut([speed],[callback])；
eg: $("img").fadeOut(1000);
3>改变元素高度
slideDown( )可以使元素逐步延伸显示
slideUp( )则使元素逐步缩短直至隐藏
语法：$(selector).slideUp ([speed],[callback]);
eg:$(".txt").slideUp(500,function () {
$(".txt").css("color","pink");
});
$(selector).slideDown ([speed],[callback]);
eg: $(".txt").slideDown("normal");
4>自定义动画
语法：$(selector). animate({params},speed,callback);
{params:必须定义成动画css属性}
eg：$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000).animate({top: "200px" , width :"200px"}, 3000 ).fadeOut("slow");
10.动画中用法和异同
(1)show()与hide()
它们的方法都是用于显示或隐藏页面中的元素
语法：$(selector).hide(speed,[callback])
$(selector).show(speed,[callback]
三.jQuery操作DOM
一. 1.获取元素
语法：css(name);
eg: $(this).css("color");
2.追加样式
语法：$(selector).addClass(class);或者$(selector).addClass(class，class2，classN);
eg：$("p").addClass("content border");
3.移除样式
语法：$(selector).removeClass(class);或者$(selector).removeClass(class，class2，classN);
eg：$("p").removeClass("content text");
4.toggleClass切换样式
语法：$(selector),toggleClass(class);
eg:$("p").toggleClass("content border");
5.hasClass()方法判断是否包含有指定样式
语法：$(selector).hasClass(class);
eg: $("h2").mouseover(function() {
if(!$("p").hasClass("content ")){
$("p").addClass("content ");
}
});
$("h2").mouseout(function() {
if($("p").hasClass("content ")) {
$("p").removeClass("content ");
}
});
二.内容操作
1.html()可以对HTML代码进行操作，相当于js的innerHTML
1>获取元素中html代码
语法：$("div.left").html();
2>设置元素中html代码
语法：$("div.left").html("<div class=‘content‘>...</div>");
eg: $("p").html("李小佳，啊哈哈<br>");
注意：html()方法可以将标签自动转换为其他不会显示在文本上
2.text()标签内容操作可以获取或设置元素文本内容
1>获取元素文本内容
语法：$("div.left").text();
2>设置元素的文本内容
语法：$("div.left").html("<div class=‘content‘>...</div>");
eg: $("p").text("李小佳，啊哈哈<br>");
注意：text()方法只会识别文本，不会将标签转换为其他，会显示出来
3.html()与text()的区别：
html()：获取指定标签中的内容（能将标签一起获取）
text()：获取纯文本内容（不能获取标签）
三.属性值操作
1.val():获取或设置元素value属性值
1>获取元素值
语法： $(this).val();
2>设置元素值
语法：$(this).val(value);
eg: $(this).val("电风扇");
四.节点操作
1.创建节点元素
工厂函数$()用于获取或创建节点
1>$(selector):通过选择器获取节点
2>$(element):把DOM节点转换成jQuery节点
3>$(html):使用HTML字符串创建jQuery节点
eg：
var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title=‘last‘>北京申办冬奥会是再合适不过了！</li>");
2.插入节点
eg： var $newNode1=$("<li>lxj</li>");
var $newNode2=$("<li title=‘last‘>lxj1</li>");
$("ul").append($newNode1);
$("ul").prepend($newNode2);
var $newNode3=$("<li>lxj2</li>");
var $newNode4=$("<li>lxj3</li>");
$("li").after($newNode3);
$("li").before($newNode4);
3.删除节点
1>remove():删除整个节点
语法：$(selector).remove([expr]);
eg：$(".gameList li:eq(1)").remove();
2>empty():清空节点内容，不会将格式删除
语法：$(selector).empty();
eg: $(".gameList li:eq(1)").empty();
4.替换节点
replaceWith()、replaceAll()用于替换某个节点
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
注意： 选择到节点，然后替换我们刚才创建的节点
$(".gameList li:eq(2)").replaceWith($newNode1);
注意：在创建的节点上，替换指定位置
$ ($newNode1).replaceAll(".gameList li:eq(2)");
5.复制节点(clone)
语法：$(selector).clone([includeEvents]);
eg: $(".gameList li:eq(1)").click(function () {
$(this).clone(true).appendTo(".gameList");
})
/*如果clone值为true可以在复制的基础上还能再复制
* 如果为false就可以复制一次*/
$(".gameList li:eq(2)").click(function () {
$(this).clone(false).appendTo(".gameList");
})
五.属性操作
1.attr()用来获取与设置元素属性
语法：
$(selector).attr([name]) ;
或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;
eg: $(".contain img").attr({width:"200",height:"80"});
2.删除元素属性(removeAttr)
语法：$(selector).removeAttr(name) ;
eg: $(".contain img").removeAttr("alt");
六.节点遍历
1.children()方法遍历所有子元素
语法：$(selector).children([expr]);
eg: var $section=$("section").children();
alert($section.length);
2.遍历同辈元素
(1)next():获取相邻元素之后的元素
eg：$("li:eq(1)").next().addClass("orange");
(2)prev():获取相邻元素之前的元素
eg：$("li:eq(1)").prev().addClass("orange");
(3)slibings():获取元素前面和后面的所有同辈元素
eg：$("li:eq(1)").siblings().addClass("orange");
3.遍历前辈元素
parent():获取父级元素
eg：$("li:eq(1)").parent().addClass("orange");
parents()：获取祖先元素
eg：$("li:eq(1)").parents().addClass("orange");
4.其它遍历方法
each():规定为每个匹配元素规定运行的函数
语法：$(selector).each(function(index,element));
eg: $("img").click(function () {
$("li").each(function () {
var str=$(this).text()+"<br>";
$("section").append(str);
})
})
end():结束当前链条中最近的筛选操作，将匹配元素集还原为之前的状态
eg：
$(".contain :header").css({"background":"#2a65ba","color":"blue"});
$(".gameList li").first().css("background","yellow").end().last().css("background","red");
$(".gameList li:last").css("border","none");
注意：想要在first方法后用last实现必须使用end方法将结果集返回第一个元素在进行操作
四.表单的验证及正则表达式
一.表单验证
1.表单验证的好处：
减轻服务器的压力 保证输入的数据符合要求
2.常用的表单验证：
日期格式
元素是否为空
用户名和密码
E-mail地址
身份证号
二.验证表单内容
1.用String对象验证邮箱
eg：
$("form").submit(function(){
var mail = $("#myform :text").val();
if (mail=="") { //检测Email是否为空
alert("Email不能为空");
return false;
}
indexOf（）：查找某个指定字符串在首次出现的位置
if (mail.indexOf("@") == -1) {
alert("Email格式不正确
必须包含@");
return false;
}
if (mail.indexOf(".") == -1) {
alert("Email格式不正确
必须包含.");
return false;
}
return true;
})
2.文本框内容验证
（1）.length长度验证
eg：if(pwd.length<6){
alert("密码必须等于或大于6个字符");
return false;
}
（2）判断字符串是否有数字
使用for循环和substring方法依次截取单个字符，再判断每个字符是否是数字
eg：
for (var i = 0; i < user.length; i++) {
var j = user.substring(i, i + 1);
if (isNaN(j) == false) {
alert("姓名中不能包含数字");
return false;
}
}
三.表单验证的事件和方法
事件：
（1）onblur：失去焦点，当光标离开某个文本框时触发
（2）onfocus：获得焦点，当光标进入某个文本框时触发
方法：
（1）blur（）：从文本域中移开焦点
（2）focus（）：再文本域中设置焦点，获得光标
（3）select（）：选取文本域中的内容，突出显示输入区域的内容
四.校验提示特效
eg：if (!checkPass()) flag=false;
if (!checkRePass()) flag=false;
五.文本框输入提示特效
eg：$("#repwd").blur(checkRePass);
$("#user").blur(checkUser);
六.正则表达式
1.为什么需要正则表达式？
简洁的代码
严谨的验证文本框中的内容
生产环境中更为常用的方式
2.定义正则表达式
1》普通方式
语法：var reg=/表达式/附加参数；
eg：var reg=white/g；
2》构造函数
语法：var reg=new RegExp("表达式"，"附加参数");
eg:var reg=new RegExp("white","g");
3.表达式的模式
1》简单模式（只能表示具体的匹配）
eg：var reg=/china/
2》符合模式（可以使用通配符表达更为抽象的规则模式）
eg：var reg=/^w+@w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
4.RegExp对象
1》方法
exec():检索字符中是正则表达式的匹配，返回找到的值，并确定其位置
test():检索字符串中指定的位置，返回true或fasle
2》属性
global：RegExp对象是否具有标志g，表示全局匹配
ignoreCase：RegExp对象是否具有标志i，表示不区分大小写
multiline：RegExp对象是否具有标志m，表示多行匹配
5.String对象
match():找到一个或多个正则表达式的匹配
search():检索与正则表达式相匹配的值
replace():替换与正则表达式匹配的字符串
split():把字符串分割位字符串数组
6.正则表达式符号
/..../:代表一个模式的开始和结束
^:字符串的开始 $:字符串的结束 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方式验证表单
1.HTML5新增验证属性
placeholder：提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失
required：规定输入域不能为空
pattern：规定验证input域的模式（正则表达式）
eg：<input type="text" id="uName"
placeholder="英文、数字长度为6-10个字符"
required pattern="[a-zA-Z0-9]{6,10}" />
<input type="password" id="pwd"
placeholder="长度为6-16个字符"
required pattern="[a-zA-Z0-9]{6,16}"/>
2.validityState对象的validity属性：
stepMismatch：输入的值不符合step特性所推算出的规则
例如：范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其它数值均无法通过
stepMismatch：使用自定义的验证错误提示信息，使用setCustomValidity()方法自定义错误提示信息
tooLong：输入的内容超过了表单元素的maxlength特定限定字符的长度
rangUnderflow：输入的值小于min特性的值
例如：如果输入的数值小于最小值，则返回true，否则返回fasle
rangeOverflow：输入的值大于max特性的值
valueMissing：表单元素设置了required特性，则为必填项
typeMismatch：输入值与type类型不匹配
patternMismatch：输入值与pattern特性的正则表达式不匹配
以上是关于jQuery知识点的主要内容，如果未能解决你的问题，请参考以下文章