文章目录
1.Jquery对象
1.1 Jquery的使用
- 下载Jquery的核心js文件
- 在需要使用Jquery的页面引入文件(若未引入,则报错"$ is no defined")
1.2 Dom对象与Jquery包装集对象
-
"$“代表的是Jquery对象的引用,相当于"jQuery”
注:只有Jquery对象才能使用Jquery提供的方法
-
JQuery的本质是一个数组,数组中包含了多个dom对象(document对象)
-
Jquery与Dom相互转换的格式
1.dom对象—>jQuery对象
格式:
dom对象—>$(dom对象)
2.jQuery对象—>dom对象
格式:
jQuery对象—>jQuery对象[索引]
jQuery对象—>jQuery对象.get(索引)
-
当获取元素对象,元素不存在时
通过document获取的值,返回null(通过判断返回的值是否为null,来得知元素是否存在)
通过Jquery获取的值,返回空包装集(通过判断包装集的长度length来得知元素是否存在,存在则长度至少为1)
2.Jquey选择器
2.1 基础选择器
- id选择器:$("#testDiv")——选择id为testDiv的元素(如果出现多个同名id,只会获取第一个)
- 元素名称选择器:$(".div")——选择所有div元素
- 类选择器:$(".blue")——选择所有class为blue的元素
- 通用选择器:$("*")——选择页面所有元素
- 组合选择器:$("#testDiv,span,.blue")——同时选中多个选择器匹配的元素
2.2 层次选择器
- 后代选择器:$("#parent div")——选择id为parent的元素的所有div元素
- 子代选择器:$("#parent>div")——选择id为parene的直接div子元素
- 相邻选择器:$(".blue+img")——选择css类为blue的下一个img元素(只能下一个,间隔一个不可以)
- 同辈选择器:$(".blue~img")——选择css类为blue的之后的img元素(可以不相邻,后面满足条件的都算)
2.3 表单选择器
Forms | 名称 | 举例 |
---|---|---|
表单选择器 | :input | 查找所有的input元素:$(":input"); 注意:会匹配所有的input、textarea、select和button |
文本框选择器 | :text | 查找所有文本框:$(":text") |
密码框选择器 | :password | 查找所有密码框:$(":password") |
单选按钮选择器 | :radio | 查找所有单选按钮:$(":radio") |
复选框选择器 | :checkbox | 查找所有复选框按钮:$(":checkbox") |
提交按钮选择器 | :submit | 查找所有提交按钮:$(":submit") |
图像域选择器 | :image | 查找所有图像域:$(":image") |
重置按钮选择器 | :reset | 查找所有重置按钮:$(":reset") |
按钮选择器 | :button | 查找所有按钮:$(":button") |
文件域选择器 | :file | 查找所有文件域:$(":file") |
2.4 属性选择器&过滤选择器
-
属性选择器
[属性名]——————$("[属性名]") ————————获取所有设置过指定属性名的元素
[属性名 = ’属性值‘]——$("[属性名 = ‘属性值’]")————获取所有设置过指定属性名为指定值的元素
-
过滤选择器
:checked————$(":checked")————获取选中状态为选中的元素(单选框,复选框)
:selected————$(":selected")————获取选中状态为选中的元素(下拉框)
:gt(index)————$(":gt(index)") ———获取下标大于指定值的元素
:eq(index)————$(":eq(index)")———获取下标等于指定值的元素
:odd ——————$(":odd") —————获取所有的奇数下标
:even ——————$(":even") —————获取所有的偶数下标
注:可以嵌套使用(如:$(":radio[属性名 = ‘属性值’]:checked") )
3.Jquery Dom操作
jQuery提供了对HTML节点的操作,常用的操作有:查找元素(选择器已经实现);创建节点对象;访问和设置节点对象的值,以及属性;添加节点;删除、添加、修改、设定节点的css样式等。
注意:以下的操作方式只适用于jQuery对象
3.1 操作元素的属性
3.1.1 获取属性
方法 | 说明 | 举例 |
---|---|---|
attr(属性名称) | 获取指定的属性值,操作checkbox时, 选择返回checked,没有选中返回underfined | attr(‘checked’) attr(‘name’) |
prop(属性名称) | 获取具有true和false两个属性的属性值 | prop(‘checked’) |
3.1.2 操作元素的属性
attr()
设置属性 ——$(“xx”).arr(“属性名”,“属性值”)
获取属性 ——var 属性值 = 对象.arr(“属性名”)
prop()
设置属性 ——对象.prop(“属性名”,“属性值”)
获取属性 ——var 属性值 = 对象.prop(“属性名”)
区别:
1.固有属性(id,class,name,style…所有元素都拥有的)
attr和prop都可以操作
2.返回值是布尔类型的属性(checked、selected、disabled)
最好使用prop操作(prop更直观更方便)
3.自定义属性(用户自定义的属性)
attr可以操作,prop不可以
总结:如果属性的返回值是布尔类型使用prop,否则使用attr。
3.1.3 移除属性
方法 | 说明 | 举例 |
---|---|---|
removeAttr(属性名) | 移除指定的属性 | removeAttr(‘checked’) |
3.2 操作元素的样式
方法 | 说明 |
---|---|
attr(“class”) | 获取class属性的值,即样式名称 |
attr(“class”,“样式名”) | 修改class属性的值,修改样式(覆盖) |
addClass(“样式名”) | 添加样式名称(追加) |
css() | 添加具体的样式 |
removeClass(class) | 移除样式名称 |
增加元素的具体样式,格式:(考虑优先级:行内样式>内部样式>外部样式)
1) css({'样式名':'样式值','样式名2':'样式值2'})
例:css({'background-color':'red','color':'#fff'})
2) css('样式名','样式值')
例:css('color','white')
3.3 操作元素的内容
对于元素还可以操作其中的内容,例如文本、值、甚至是html。
方法 | 说明 |
---|---|
html() | 获取元素的html内容 |
html(“html,内容”) | 设定元素的html内容 |
text() | 获取元素的文本内容,不包含html |
text(“text”,内容) | 设置元素的文本内容,不包含html |
val() | 获取元素的value值 |
val(“值”) | 设定元素的value值 |
操作元素的内容
val()操作表单元素的值
取值:var 值 = $(“xx”).val();
赋值: 表单元素对象.val(值);
html()操作非表单元素的内容(包含html标签)
取值:var 内容 = $(“xx”).html();
赋值: 对象.html(内容);
text()操作非表单元素的文本内容(不包含html标签)
取值:var 内容 = 对象.text();
赋值: 对象.text(内容);
3.4 创建元素
3.5 添加元素
在jQuery中创建元素很简单,直接使用核心函数即可
$('元素内容');
$('<p>this is a paragraph!</p>');
方法 | 说明 |
---|---|
prepend(content) | 在被选元素内部的开头插入元素或内容,被迫加的content参数,可以是字符、HTML元素标记。 |
$(content).prependTo(selector) | 把content元素或内容加入selector元素开头 |
append(content)(常用) | 在被选元素内部的结尾插入元素或内容,被迫加的content参数,可以是字符、HTML元素标记。 |
$(content).appendTo(selector) | 把content元素或内容插入selector元素内,默认是在尾部。 |
before() | 在元素前插入指定的元素或内容:$(selector).before(content) |
after() | 在元素前插入指定的元素或内容:$(selector).after(content) |
注:追加元素时(同级添加和子元素添加)
如果元素不存在,则创建元素,并添加
如果元素存在,则会获取已存在的元素,并剪切到新的位置
3.6 删除元素
方法 | 说明 |
---|---|
remove() | 删除所选元素或指定的子元素,包括整个标签和内容一起删。 |
empty() | 清空所选元素的内容。 |
3.7 遍历元素
each()
$(selector).each(function(index,element)):遍历元素
参数;
function
为遍历时的回调函数,
index
为遍历元素的序列号,从0开始。
element
是当前的元素,此时是dom元素。
this
是当前元素,此时是dom元素。
4.Jquery事件
4.1 ready加载事件
当HTML的文档结构加载完毕后执行
ready()类似于 onLoad()事件,可以写多个,按顺序执行,
格式:
$(document).ready(function(){定义函数})
$(function(){}) 【简略版】
4.2 bind()绑定事件
为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
$(selector).bind(eventType[,evenData].handler(eventObject));
参数介绍
eventType
:是一个字符串类型的事件类型,就是你所需要绑定的事件。(常用的有click,focus,change,blur,moueseover,mouseout)
这类型可以包括如下:
blur,focus,focusin,focusout,load,resize,scroll,unload,click,dbclick,
mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter
mouseleave,change,select,submit,keydown,keypress,keyup,error
[,evenData]
:传递的参数,格式:{键:值,键:值。。}
handler(evenObject)
:该事件触发执行的函数
绑定事件格式
绑定事件(单个)
$(选择器).bind("事件名",function(){
});
绑定事件(多个)
方式一:为某一个元素绑定不同的事件,执行不同的函数
$(选择器).bind("事件名",function(){
}).bind("事件名",function(){
});
方式二:为某一个元素绑定不同的事件,执行相同的函数(多个事件用空格隔开)
$(选择器).bind("事件名 事件名",function(){
});
方式三:为某一个元素绑定不同的事件,执行不同的函数(使用JSON对象格式)
$(选择器).bind({
"事件名",function(){
},
"事件名",function(){
}
});
如何绑定事件
1.事件源:确认给什么元素绑定事件
通过不同的选择获取对应元素
2.事件类型:给元素绑定什么事件
常用的事件名
3.执行函数:当事件触发时需要执行的函数
匿名函数 或 自定义函数
通过Jquery直接绑定事件
绑定单个事件
$(selector).事件名(函数);
绑定多个事件
$(selector).事件名(函数).事件名(函数);
声明:部分资料源自网络,如有侵权,请联系我删除!
文中如存在谬误、混淆等不足,欢迎批评指正!