三、jQuery
1、jQuery介绍
什么是jQuery?**
jQuery,顾名思义,就是js和查询(Query),它就是辅助JavaScript开发的js类库。
jQuery核心思想!!!
它的核心思想是write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。
jQuery流行程度:
jQuery现在已经成为最流行的JavaScript类库,在世界前10000个访问最多的网站中,有超过百分之五十五在使用jQuery。
jQuery的好处!!!
jQuery是免费的、开源的,jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
2、jQuery的初体验!!!
需求:使用jQuery给一个按钮绑定单击事件。
1 |
|
1 | 常见问题 |
3、jQuery核心函数
1 | $是jQuery的核心函数,能完成jQuery的很多功能。 $()就是调用$这个函数 |
传入参数为[函数]时:在文档加载完成后执行这个函数,相当于window.onload=function(){}
传入参数为[HTML字符串]时:根据这个字符串创建元素节点对象
传入参数为[选择器字符串]时:
1
2
3$("#id属性值"); id选择器,根据id查询标签对象
$("标签名"); 标签名选择器,根据指定的标签名查询标签对象
$(".class属性值"); 类型选择器,可以根据class属性查询标签对象传入参数为 [DOM对象]时:会把这个DOM对象转换成jQuery对象
1 |
|
4、jQuery对象和dom对象区分
4.1、什么是jQuery对象,什么是dom对象
dom对象
- 通过getElementById查询出来的标签对象是dom对象
- 通过getElementsByName查询出来的标签对象是dom对象
- 通过getElementsByTagName查询出来的标签对象是dom对象
- 通过createElement()方法创建的对象,是dom对象
jQuery对象
- 通过jQuery提供的API创建的对象,是jQuery对象
- 提供jQuery包装的dom对象,也是jQuery对象
- 提供jQuery提供的API查询到的对象,也是jQuery对象
4.2、 JQuery对象的本质是什么?
JQuery对象是DOM对象的数组 + JQuery提供的一系列功能函数。
4.3、 JQuery对象和Dom对象使用的区别?
JQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用JQuery对象的属性和方法
4.4、DOM对象和JQuery对象互相转换
DOM对象转化为JQuery对象(重点)
- 先有DOM对象
- $(DOM对象)就可以转换成为JQuery对象
JQuery对象转化为DOM对象(重点)
- 先有JQuery对象
- JQuery对象[下标取出相应的DOM对象]
5、JQuery选择器(重点)
5.1、基本选择器(重点)
#id id选择器:根据id查找标签对象
.class class选择器:根据class查找标签对象
element element选择器:根据标签名查找标签对象
*选择器:表示任意的,所有的元素
selector1,selector2 组合选择器:合并选择器 1,选择器2的结果并返回
1 |
|
5.2、层级选择器(重点)
ancestor descendant 后代选择器:在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器:在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器:匹配所有紧接在prev元素后的next元素
prev ~ siblings 之后的兄弟元素选择器:匹配prev元素之的所有siblings元素
1 |
|
5.3、过滤选择器
基本过滤器:
:first 获取第一个元素
:last 获取最后一个元素
:not(selector) 取出所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素,从0开始计数
:odd 匹配所有索引值为奇数的元素,从0开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
: It(index) 匹配所有小于给定索引值的元素
:header 匹配如h1,h2,h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:focus
1 |
|
内容过滤器:
:contains(test) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
1 |
|
5.4 可见性过滤器
:hidden 匹配所有不可见元素,或者type为hidden的元素
:visible 匹配所有的可见元素
1 |
|
5.5、属性过滤器
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不包含指定的属性,或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是包含某些值的元素
[ attrSel1 ][ attrSel2 ][attrSelN] 复合属性选择器,需要同时满足多个条件时使用
1 |
|
5.6、子元素过滤器
:nth-child
1 | 匹配其父元素下的第N个子或奇偶元素 |
:first-child 匹配第一个子元素 ‘:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
: last-child 匹配最后一个子元素 ‘:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
: only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配
如果父元素中含有其他元素,那将不会被匹配。
5.7、表单过滤器:
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有的密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素,或者type为hidden的元素
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
:selected 匹配所有选中的option元素
1 |
|
6、JQuery元素筛选
eq()获取给定索引的元素,功能和:eq()一样
first()获取第一个元素,功能和:first一样
last()获取最后一个元素,功能和:last一样
filter(exp)留下匹配的元素
is()判断是否匹配给定的选择器,只要有一个匹配就返回true
has(exp)返回包含有匹配选择器的元素的元素,功能跟:has一样
not(exp)删除匹配选择器的元素,功能与:not()一样
children(exp) 返回匹配给定选择器的子元素,功能和parent>child一样
find(exp)返回匹配给定选择器的后代元素,功能跟ancestor descendant一样
next()返回当前元素的下一个兄弟元素,功能跟prev+next一样
nextAll()返回当前元素后面所有的兄弟元素,功能跟prev~sibling一样
nextUntil()返回当前元素到指定匹配的元素为止的后面元素,往后数的区间
parent() 返回父元素
prev(exp)返回当前元素的上一个兄弟元素
prevall()返回当前元素前面所有的兄弟元素
prevUntil(exp)返回当前元素到指定匹配的元素为止的前面元素,往前数的区间
sibling(exp)返回所有兄弟元素,无论前后
add()把add匹配的选择器的元素添加到当前JQuery对象中
1 |
|
7、JQuery的属性操作
1 | html():它可以设置和获取起始标签和结束标签中的内容,跟dom属性innerHTML一样 |
1 |
|
注意:
val方法可以同时设置多个表单项的选中状态
1 |
|
attr() 可以设置和获取属性值,不推荐操作checked、readonly、selected、disabled等等。
attr方法设置和获取自定义的属性值。
prop() 可以设置和获取属性的值,只推荐操作checked、readonly、selected、disabled等等。
1 |
|
8、JQuery练习一
1 |
|
9、DOM的增删改
9.1、内部插入
appendTo():a.appendTo(b)把a插入到b资源末尾,成为最后一个子元素
prependTo():a.appendTo(b)把a插入到b资源末尾,成为第一个子元素
9.2、外部插入
insertAfter():a.insertAfter(b),得到ba,两者是平级
insertBefore():a.insertAfter(b),得到ab,两者是平级
9.3、替换
replaceWith():a.replaceWith(b)用b替换掉a
replaceAll():a.replaceAll(b)用a替换掉所有的b
9.4、删除
remove():a.remove()删除a标签
empty():a.empty()清空a标签里的内容
10、JQuery练习二
1、从左到右练习
1 |
|
2、动态添加、删除表格记录
1 |
|
11、CSS样式操作
1 | addClass()添加样式 |
1 |
|