标签：jQuery 知识点 eg 元素 selector 语法 css
一. 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格式不正确\n必须包含@");
return false;
}
if (mail.indexOf(".") == -1) {
alert("Email格式不正确\n必须包含.");
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,知识点,eg,元素,selector,语法,css 来源： https://www.cnblogs.com/unique1/p/13284532.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。