Jquery
1.jquery的介绍和使用
1.1 介绍
jQuery内部封装了原生的js代码,还添加了很多额外的功能,能够让你通过书写更少的代码,完成js操作,类似python里面的模块,在前端叫‘类库’;jquery的宗旨是:write less to more!!
1.2 使用
下载:https://jquery.com/download/
下载压缩版本,ctrl+s保存到本地,然后导入到html页面
1.2.1 版本
目前主要使用的是3.几版本的jquery,目前主要维护的版本,不兼容ie678浏览器
1.2.2 导入
1)在html里的head标签里添加
<script src='url'><script>
2)使用CDN分发:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""前提是你的计算机必须要有网络"""
1.2.3 jquery的核心
$ 符号在jquery中代表对jquery对象的引用,通过$ 符号可以调用jquery提供的方法等。只有jquery对象才能调用jquery提供的方法。
$<==>jquery
1.3 DON对象和jquery对象
1.3.1 DOM对象
通过js方式获取的元素对象(document)
1.3.2jquery对象
通过jquery方法获取的元素对象,返回的是jquery包装集
1.3.3 两种对象的相互转换
DOM对象转jquery对象
var divDOM = document.getElementById('#d1') // 获取DOM对象
mydiv = $(divDOM) // 转成jquery对象
jquery对象转DOM对象
var divjquery = $('#d1'); // 获取jquery对象
var divDOM1 = divjquery[0]; // 转成DOM对象
2.jquery的选择器
2.1 基础选择器
1.基础选择器
// id选择器
$('#d1')
// class选择器
$('.c1')
// 标签选择器
$('span')
// 通用选择器
$('*')
// 组合选择器
$('div.c1')、$('div#d1')、$('#d1,.c1,p') # 并列+混用
2.2层次选择器
$('div span') # 后代选择器-选择父元素的子子孙孙
$('div>span') # 子代选择器--选择父元素所在第一代指定元素
$('div+span') # 相邻选择器--选择元素的下一个指定元素(类似找相邻的兄弟)
$('div~span') # 同辈选择器--选择元素的下面的所有指定元素
2.3 表单选择器
:input 查找所有的input元素:$(:input);注意会匹配所有的input、textarea、select和button元素
:text 查找所有的文本框元素
:password 查找所有密码框元素
:file 查找所有文件域元素
:radio 查找所有单选框元素
:checkbox 查找所有多选框元素
:submit 查找所有提交按钮元素
:reset 查找所有重置按钮元素
:button 查找所有按钮元素
:image 查找所有图片按钮元素
3.jquery的DOM操作
jquery也提供了对于HTML的节点操作(什么是节点?HTML中所有的标签都可以称之为节点),并且在原生的js上进行了优化,使我们使用起来更加的方便
常用的操作有:查找元素(选择器已经实现)、操作元素的属性、操作元素的样式、操作元素的内容、创建元素、添加元素、删除元素、遍历元素,以上的操作只能jquery对象使用!!!
3.1 操作元素的属性
获取属性、设置属性、移除属性—->第一步都是先查询元素
补充:元素属性的分类:
1.固有属性:id、name、clss、style、a标签的href、img的src等等
2.返回值是boolean的属性:checked、selected、disabled等等
3.自定义属性:用户自己定义的属性
3.1.1 获取属性
有attr(‘属性名’)和prop(‘属性名’)两种方法
区别:
如果是固有属性,两种方法均可以操作;
如果是自定义属性,attr方法可以获取,prop方法不可以操作;
如果返回值是boolean的属性:若设置了属性值,attr返回具体的值;prop返回true;若没有设置,attr返回undefined,prop返回false。
语法:
var name = $('#aa').attr('name');
3.1.2 设置属性
有attr(‘属性名’,‘属性值’)和prop(‘属性名’,‘属性值’)两种方法
3.1.3 移除属性
remove(‘属性名’)
3.2 操作元素的样式
元素的样式其实也是一种属性,也可以用attr方法操作,但是由于样式特别多,我们还提供了许多其他方法操作样式。
方法 | 说明 |
---|---|
attr(‘class’) | 获取class的值,即样式名称 |
attr(‘class’,‘样式名’) | 修改class的属性值,即修改样式(原本样式被覆盖) |
addClass(‘样式名’) | 添加样式,原本的样式被保留,如果有相同样式,则会以样式中后定义的为准 |
css() | 添加具体的样式 |
removClass(‘样式名’) | 移除样式名称 |
css的具体语法:
css(‘具体样式名’,‘样式值’) 设置单个样式
css({‘具体样式名’:‘样式值’,‘样式名2’:‘样式值’})
3.3 操作元素的内容
对于元素,我们可以操作其内容、值,甚至是html
方法 | 说明 |
---|---|
html() | 获取元素的html内容 |
html(‘html内容’) | 设置元素的html内容 |
text() | 获取元素的文本内容,不包含html |
text(‘text内容’) | 设置元素的文本内容,不包含html |
val() | 获取元素的值 |
val“值” | 设置元素的值 |
注意:html和text都是针对非表单元素,val针对的是表单元素
那么什么是表单元素?什么是非表单元素呢?
表单元素:文本框text、密码框password、单选框radio、复选框等等
非表单元素:div、span、p、ol、ul等等
3.4 创建元素
在jquery中创建元素很简单,直接使用核心函数即可:
语法为:$(‘元素内容’);
$('<p>this is my</p>')
3.5 添加元素
1.前追加子元素
法一:$(‘指定元素’).prepend(‘内容’) #在指定元素内部的最前面添加内容,该内容可以是字符串、html和jquery对象
法二:$(‘内容’).prependto(‘指定元素’) #把内容追加到指定元素的最前面,该内容可以是字符串、html和jquery对象
2.后追加子元素
法一:$(‘指定元素’).append(‘内容’) #在指定元素的最后面添加内容,该内容可以是字符串、html和jquery对象
法二:$(‘内容’).appendto(‘指定元素’) #把内容追加到指定元素最的后面,该内容可以是字符串、html和jquery对象
3.前追加同级元素
$(‘指定元素’).before(‘内容’) #在指定元素的前面追加内容
4.后追加同级元素
$(‘指定元素’).after(‘内容’) #在指定元素的后面追加内容
注: 在添加元素的时候,如果添加的元素不存在,此时会将元素追加到指定位置;如果需要添加的元素存在,会将存在的元素剪切到需要追加的位置。
3.6 删除元素
1.remove()方法
$(‘需要删除的元素’).remove() #该方法是删除元素和其对应的子元素,标签和内容一起删除
2.empty()方法
$(‘需要删除的元素’).empty() #该方法是只清空元素中的内容
3.7 遍历元素
each()方法
$('.green').each(function (index,element){
console.log(index);
console.log(element);
console.log(this);
})
#1.先查找可迭代的jquery对象$('.green')
#2.然后调用each()方法,参数function为遍历时的回调函数,function里面有两个默认参数(不用也可以不写),参数分别是index为遍历元素的序列化,从0开始;element:为当前的元素,此时为dom元素。
#3.还有一个this,是指里面的每一个元素,等同于element。
4.jquery的事件
4.1 ready加载事件
ready加载事件又称预加载事件,它是指当整个html页面(dom结构)加载完毕之后再开始执行的事件;类似于js中的load事件。
语法:
$(document).ready(function(){
需要执行的操作
});
简写:
$(function(){
需要执行的操作
});
4.2 绑定事件
为被选元素添加一个或者多个事件处理程序,并规定事件发生时运行的函数
语法:
$(selector).bind(eventType [,eventDate],handler(eventobject));
eventType:是一个字符串类型的事件类型,就是你需要绑定的事件
[,eventDate]:传递的参数,格式为{名:值,名2:值2}
handler(eventobject):该事件触发执行的函数;
绑定单个事件
$('元素').bind('事件类型',function(){
...
})
直接绑定单个事件
$('元素').事件名(function(){
...
})
同时为多个事件绑定一个函数
$('元素').bind('事件类型1' '事件类型2',function(){
...
})
为元素绑定多个事件并设置对应函数
法一:$('元素').bind('事件类型1' ,function(){
...
}).bind('事件类型2',function(){
})...
法二:$('元素').bind('事件类型1':function(){
...
},'事件类型2':function(){
})
直接绑定多个事件
$('元素').事件名(function(){
}).事件名(function(){
})
常用事件介绍
常用事件:
onload:当页面加载完毕后立即触发
onblur:元素失去焦点
onfocus:元素获得焦点
onclick:鼠标点击某个对象
onchange:用户改版域内容(如下拉框的选项被修改了)
onmousemove:鼠标移动到某个元素身上
onmouseout:鼠标从某个元素上离开
onkeyup:某个键盘的健被松开
onkeydown:某个键盘的健被按下
change:文本域变化事件,当文本域变化是触发
5.jquery的ajax
jquery调用ajax的方法:
格式:$.ajax({});
参数:
type:请求的方式get、post(小写)
url:"" 请求的地址,不写默认为当前地址
async:是否异步,默认为true表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:function(date){}; data是形参名,请求成功时调用此函数
error:请求失败时调用此函数