1、jquery的简介
2、jquery的选择器
3、jquery的dom操作
4、jquery的表单校验
一、jquery简介
1、jquery概述
jquery是一个优秀的javascript的轻量级框架，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案。jquery的宗旨是write less do more
2、jquery的下载与配置
下载：www.jquery.com
配置： (1) 将下载的jquery放到工程中，一般放到webRoot下
(2) 在html页面中将jquery进行引入
栗子： <script type="text/javascript" src="jquery-1.4.2.min.js></script>
3、快速入门
需求：完成下拉框的二级联动(js和jquery两种方式)
总结：(1) js对象与jquery对象之间的转换
约定jquery对象变量的形式：$变量名
js对象转成jquery对象：$(js对象)
jquery对象转成js对象：jquery对象[0] 或者 jquery对象.get(0);
(2) 页面加载完毕事件window.onload 和 $(document).ready() 的区别??
A、window.onload方法会等页面全部元素（包括图片等）加载完毕在加载js，$(document).ready()只是页面元素加载完毕即可
B、window.onload方法只能写一个，写多个也是只运行一个；而$(document).ready方法可以书写多个，且都执行
C、window.onload没有简写，而$(document).ready(function(){})可简写为$(function(){});
(3) 事件的写法
js事件的写法：js对象.事件 = 函数;
jsNode.onclick = function(){} element.onchange = function(){}
jquery的写法：jquery对象.事件(function(){});
jqueryObj.click(function(){}); element.change(function(){});
二、jquery选择器 $("选择器")
1、基本选择器
"基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素的id, class 和标签
名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用)."
(1) 元素选择器
元素选择器就是html已经定义的标签元素,例如 div, input, a等等
语法：$("html标签名") ------ html标签名称{css}
示例：<div id="mydiv"> <div> <div></div> </div> <div> <div id="yourdiv"> <span>我是span<span> <div> <span>我是span</span> $("div")
(2) id选择器
通过html中标签的id属性的值来定位元素对象的
语法：$("#id的属性值")
示例：<div id="mydiv"> <div>我是div</div> </div> <div id="yourdiv"> <div> $("#mydiv")
(3) 类选择器
"这个标签是直接选择html代码中class=""myClass""的元素或元素组( 因为在同一html页面中
class是可以存在多个同样值的 )"
语法：$(".class的属性值")
示例：<div id="mydiv" class="myClass"> <div>我是div</div> </div> <div id="yourdiv" class="myClass"><div> $(".myClass")
(4) 通配符选择器
匹配所有的页面元素
语法：$("*")
示例：<body>
<div>
<span></span>
</div>
<div>
<form>
<input type="text"/>
</form>
</div>
</body>
$("*")
(5) 并列选择器
将每一个选择器匹配到的元素合并后一起返回，你可以指定任意多个选择器
语法：$("selector1, selector2... ... selectorN")
示例：<div id="mydiv"> <span></span> </div> <select class="myclass"></select> <span></span> <textarea class="myclass"></textarea> <div> <div> <div class="myclass"> </div> </div> </div> $("span,#mydiv,.myclass")
2、属性选择器
(1) 包含某属性
html元素中包含有这个属性即可，无论此属性值是什么
语法：$("基本选择器[attribute]")
示例：<div name="gender">我是div1</div> <div name="address">我是div2</div> $("div[name]")
(2) 某属性等于某属性值
html元素中包含有这个属性并且属性等于属性值
语法：$("基本选择器[attribute=value]")
示例：<div name="gender">我是div1</div> <div name="address">我是div2</div> $("div[name='gender']")
(3) 某属性不等于某属性值
html元素中包含有这个属性并且属性不等于属性值
语法：$("基本选择器[attribute!=value]")
示例：<div name="gender">我是div1</div> <div name="address">我是div2</div> <div>我是div3</div> $("div[name!='gender']")
(4) 某属性以某属性值开头
html元素中包含有这个属性并且属性是以某个字符开头的
语法：$("基本选择器[attribute^=value]")
示例：<div name="gender">我是div1</div> <div name="address">我是div2</div> <div name="gen8">我是div3</div> $("div[name^='gen']")
(5) 某属性以某属性值结尾
html元素中包含有这个属性并且属性是以某个字符结尾的
语法：$("基本选择器[attribute$=value]")
示例：<div name="gender">我是div1</div> <div name="address">我是div2</div> <div name="worker">我是div3</div> $("div[name$='er']")
(6) 某属性的属性值包含某些字符
html元素中包含有这个属性并且属性的属性值含有指定的某些字符
语法：$("基本选择器[attribute*=value]")
示例：<div name="gender">我是div1</div> <div name="nde ">我是div2</div> <div name="ande">我是div3</div> $("div[name*='nde']")
注意：如需多个属性条件可以一次排列使用，如：$("div[id][name='gender'][class='myclass']...")
3、层级选择器
(1) 祖先选择器
在给定的祖先元素下匹配所有后代元素.这个要与下面讲的"parent > child"区分开
语法：$("ancestor descendant")
示例：<div id="mydiv"> <form> <input type="text"/> </from> </div> <div id="yourdiv"> <form> <input type="text"/> </from> </div> $("#mydiv form input")
(2) 父子选择器
在给定的父元素下匹配所有子元素，注意：要区分好后代元素与子元素
语法：$("parent>child")
示例：<div id="mydiv"> <div> <div></div> </div> </div> <div id="yourdiv"> <div> <div></div> </div> </div> $("#mydiv>div")
(3) 相邻选择器
匹配紧接在指定元素后的元素
语法：$("pre+next")
示例：<div> <form> <input type="text"/> <select></select> <input type="text"/> <textarea class="myclass"></textarea> <select></select> </form> </div> $("input+select")
(4) 兄弟选择器(后面)
匹配紧接在指定元素后的元素
语法：$("pre~next")
示例：<div> <form> <input type="text"/> <select></select> <input type="text"/> <textarea class="myclass"></textarea> <select></select> </form> </div> $("input~select")
"注意：此选择器只能选择指定元素后的兄弟节点，如想获得指定元素的所有兄弟节点使用 siblings()方法 例如：$(""#mydiv"").siblings()"
4、过滤选择器
(1) 基础过滤选择器
:first 匹配某集合元素的第一个元素
:last 匹配某集合元素的最后一个元素
:not(selecter) 匹配某集合元素不包含某个元素
:even 匹配某集合元素的偶数元素 索引从0开始 忽视层级层级关系
:odd 匹配某集合元素的奇数元素 索引从0开始
:eq(index) 匹配某集合元素的第index个元素
:gt(index) 匹配某集合元素索引大于第index的元素 ------> <
:lt(index) 匹配某集合元素索引小于第index的元素
:header 固定写法 匹配标题元素
:animated 固定写法 匹配正在执行动画的元素
(2) 内容过滤选择器
:contains(text) 匹配某包含text内容的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selecter) 匹配含有某选择器的元素
:parent 匹配含有子元素或者文本的元素
(3) 可见度过滤选择器
:hidden 匹配所有的不可见元素
:visible 匹配所有的可见元素
注意：遍历jquery集合的方法
第一种：jquery集合对象.each(function(index,domElement));
其中：index代表集合中每个对象的脚标，domElement代表集合中的每个js对象
示例：
第二种：$.each(jquery集合对象,function(index,domElement){});
其中：index代表集合中每个对象的脚标，domElement代表集合中的每个js对象
示例：
(4)子元素过滤选择器
:nth-child(index/even/odd) 匹配其父元素下的第N个子或奇偶元素
注意：此选择器的第几个是从1开始的
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:only-child 匹配只有一个子元素
(5) 表单属性过滤选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括option)
:selected 匹配所有选中的option元素
三、jquery的Dom操作
1、内部插入节点
append(content) :向每个匹配的元素的内部的结尾处追加内容 ----appnedChild
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content):向每个匹配的元素的内部的开始处插入内容
prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
2、外部插入节点
after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素的后面
insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素的前面
3、属性操作
获得属性值：attr("属性名称")
修改属性值：attr("属性名称"，"属性值")
增加属性： attr("属性名称"，"属性值")
删除属性： removeAttr("属性名称")
注意：jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(),height(), width(), css() 等
4、创建节点
$("<li/>") == $("<li></li>")
注意：
(1) html标签的写法 要不写开始关闭<li></li> 要不写自闭标签<li/>
(2) 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中
5、删除节点
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素.
当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用"
empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)
6、复制节点
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为(事件)
clone(true): 复制元素的同时也复制元素中的的事件
7、替换节点
replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
replaceAll(): 颠倒了的 replaceWith() 方法
8、样式操作
追加样式：addClass()
移除样式：removeClass()：从匹配的元素中删除全部或指定的 class
切换样式：toggleClass()：控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式：hasClass()判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
四、jquery表单验证
jquery有很多丰富的插件供用户使用，表单验证插件就是其中一款,使用此插件可以很方便的
对表单进行校验并可以自定义提示信息，自定义校验方法等操作"
导入插件的步骤：
(1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中
(2) 编写js代码对表单进行验证
表单验证的格式：
$("form表单的选择器").validate(json数据格式); //键值对 键：值（{}）
json数据格式：
{
rules:{
表单项name值:校验规则，
表单项name值:校验规则... ...
},
messages:{
表单项name值:错误提示信息，
表单项name值:错误提示信息... ...
}
}
其中：校验规则，可以是一个也可以是多个，如果是多个使用json格式
常用校验规则如下：
注意：当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置
自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此
信息自动显示出来，jquery验证插件会自动帮助我们控制它的显示与隐藏"
<lable for="html元素name值" class="error" style="display:none">错误信息</lable>
如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了
如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：
自定义校验规则步骤如下：
(1) 使用$.validator.addMethod("校验规则名称",function(value,element,params)){}
(2) 在rules中通过校验规则名称使用校验规则
(3) 在messages中定义该规则对应的错误提示信息
其中： value是校验组件的value值
element是校验组件的节点对象
params是校验规则的参数
相关书籍链接地址【ps：仅供学习交流，严禁商务，如有侵权，概不负责】
链接: https://pan.baidu.com/s/1dEGFbZN 密码: acnq
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
