JQuery的概述
特点
- 链式调用 :所有对象的方法返回的都是对象本身,也就是说没有返回值(里面所有的方法返回的都是一个jquery对象)
- 丰富的选择器和筛选器
- 良好的动画兼容(动画库很强大 借助了animated.js (主要css3的动画))
- 拥有便捷的插件扩展机制和丰富的插件
JQuery的简单入门
- dom对象转为jQuery对象,将dom对象传入jQuery的函数
- 将jQuery对象转为dom对象,使用下标获取对应的dom元素
//需要先引用<script src="./jquery.min.js"></script>
<div class="box"></div>
<script>
// jQuery对象使用$符号获取jquery对象或者使用jquery获取
console.log(jQuery()); //S.fn.init
console.log($()); //S.fn.init
//获取dom元素,原生获取,得到dom对象
let box = document.querySelector('.box')
console.log(box); //<div class="box"></div>
// 通过jquery获取dom元素,得到jquery对象
// jquery对象无法调用dom中的内容,反之也不可以
console.log($('.box')); //S.fn.init [div.box, prevObject: S.fn.init(1)]
// jquery对象和dom对象间的转换
// jquery对象转dom对象
let toElement = $('.box')[0]
console.log(toElement); //<div class="box"></div>
// dom对象转jquery对象
console.log($(box)); //S.fn.init [div.box]
console.log(jQuery(box)); //S.fn.init [div.box]
</script>
jQuery的选择器
- 所有css选择器都可以使用
- 新增相关选择器(odd even first last eq)
odd:根据下标,获取下标为奇数的元素,返回jquery对象
even:根据下标,获取下标为偶数的元素,返回jquery对象
first:获取第一个元素,返回jquery对象
last:获取最后一个元素,返回jquery对象
eq:获取指定下标的元素,返回jquery对象
//使用jquery获取对应的元素
console.log($('#box'));//S.fn.init(1)
console.log($('li:odd')); //根据下标 获取下标为奇数的
console.log($('li:even')); //根据下标 获取下标为偶数的
console.log($('li:first-child()'));
console.log($('li:first')); //获取第一个
console.log($('li:last')); //获取最后一个
console.log($("li:eq(2)"));
//隔行变色
let odd = $('li:odd')
let even = $('li:even')
//length获取里面元素的个数
for (var i = 0; i < odd.length; i++) {
odd[i].style.backgroundColor = 'red'
}
for (var i = 0; i < even.length; i++) {
even[i].style.backgroundColor = 'yellow'
}
jQuery的筛选器
- 它是用于筛选获取的元素的
- 它可以根据条件(根据选择器)及关系筛选(节点关系)
相关筛选器
- eq :筛选对应下标的元素
- last :筛选最后一个
- first :筛选第一个
- parent :父元素
- children :子元素
- siblings :兄弟元素
- prev :前面的兄弟
- next :后面的兄弟
- prevAll :前面的所有兄弟
- nextAll :后面的所有兄弟
- find :查找子元素内容
<div>
<ul>
<li>1</li>
<li class="box">2</li>
<li>3
<p></p>
<a href="#"></a>
<span></span>
</li>
<li class="box">4</li>
</ul>
</div>
<script>
// 获取元素进行筛选
console.log($('ul>li').eq(2)); //得到第三个li
console.log($('ul>li').first()); //获取第一个
console.log($('ul>li').last()); //获取最后一个
//父子关系
console.log($('ul>li').eq(2).parent('div'));
//获取符合选择器的父元素 (不符合就没有),拿不到
console.log($('ul>li').eq(2).parent());
//获取对应的父元素
console.log($('ul>li').eq(2).children());
//获取所有的子元素
console.log($('ul>li').eq(2).children('a'));
//获取所有的子元素a
//兄弟关系
console.log($('ul>li:eq(2)').children().eq(1).siblings('span'));
//获取第三个li的第二个子元素的所有span的兄弟
console.log($('ul>li:eq(2)').children().eq(1).siblings());
//获取第三个li的第二个子元素的所有的兄弟
console.log($('ul>li:eq(2)').prev());
//获取第三个li的前一个元素
console.log($('ul>li:eq(2)').prev('.box'));
//获取第三个li的前一个box元素(符合条件才返回结果)
console.log($('ul>li:eq(2)').next());
//获取第三个li的后一个box元素(符合条件才返回结果)
console.log($('ul>li:eq(2)').next('.box'));
//获取第三个li的后一个box元素(符合条件才返回结果)
console.log($('ul>li:eq(2)').nextAll());
//获取第三个li后面的所有
console.log($('ul>li:eq(2)').nextAll('.box'));
//获取第三个li后面的所有
console.log($('ul>li:eq(2)').prevAll());
//获取第三个li前面的所有
console.log($('ul>li:eq(2)').prevAll('.box'));
//获取第三个li前面的所有box
//查找 find
console.log($('ul').find('.box'));
//查找所有子元素内容找到对应的条件 对应的class名字为box的
</script>
jQuery的属性操作
【传入一个参数就是获取,传入两个参数就是设置】
- prop :只能操作原生属性(原生属性 本身自带属性)
- attr :可以操作任意属性
- removeProp :删除prop设置的属性(原生的属性)
- removeAttr :删除属性(removeAttribute)
<input type="text" value="你好" placeholder="点我" hello="hello">
<script>
// prop只能操作原生属性,attr可以操作任意属性
// 传入一个参数就是获取,传入两个参数就是设置
console.log($('input').prop('value')); //你好
console.log($('input').attr('hello')); //hello
// prop设置本身有的属性
$('input').prop('name', '本身有的属性') //name本身存在的属性
console.log($('input').prop('name')); //本身有的属性
// prop设置本身不存在的属性,虽然可以在控制台上打印,但是元素标签上没有设置上
$('input').prop('enen', '本身没有的属性')
console.log($('input').prop('name')); //本身没有的属性
//attr可以设置本身没有的属性
$('input').attr('hi', '本身没有的属性')
console.log($('input').attr('hi')); //本身没有的属性、
// removeProp 删除prop设置的属性(原生的属性)
// removeAttr 删除属性(removeAttribute)
$('input').removeProp('name') //无法删除本身的属性
$('input').removeProp('enen') //只能删除本身没有的属性
$('input').removeAttr('hi') //可以删除本身没有的属性
$('input').removeAttr('name') //可以删除本身自带的属性
</script>
class相关操作
- addClass :添加一个class
- removeClass :移除一个class
- toggleClass :切换(有就删除 没有就添加)
<div class="box1 box3 box4"></div>
<script>
// addClass 添加一个class
// removeClass 移除一个class
// toggleClass 切换(有就删除 没有就添加)
$('div').addClass('box2')
$('div').removeClass('box2')
$('div').toggleClass('box2')
</script>
原生 js 模拟 removeClass 和 addClass
//原生模拟removeClass
function removeClassName(element, className) {
classNames = element.className.split(' ')
classNames.forEach(v => {
if (v == className) {
classNames.pop(className)
}
});
element.className = classNames.join(' ')
}
//$('div')[0]通过下标获取的原生的dom
removeClassName($('div')[0], 'box4')
//模拟addClass
function addClass(element, className) {
//判断是否为空
if (!element.className) {
element.className = className
} else {
//将元素的class用空格分隔得到一个数组
classNames = element.className.split(' ')
//在后面添加要加入的类名
classNames.push(className)
// 再将修改后的数组转为字符串赋值给元素
element.className = classNames.join(' ')
}
}
addClass($('div')[0], 'box2')
样式操作
- 获取设置了的样式,采用了getComeputedStyle 和 element.currentStyle
console.log($('div').css('backgroundColor'));
console.log($('div').css('height'));
- 设置没有的样式,内部采用style赋值
$('div').css('width', '60px')
显示内容
【html和text、val,传入一个参数表示设置,不传参表示获取】
- html :相当于innerHTML
- text :相当于innerText
- val :获取或者设置 value 属性的值
// 显示内容
// html和text、val,传入一个参数表示设置,不传参表示获取
console.log($('div').html()); //你好世界
$('div').html('你应该点击') //设置
console.log($('div').text()) //获取,你应该点击
$('input').val('val设置的值') //设置value的值
console.log($('input').val()) //val设置的值,获取value值
Dom操作
- append :从后面追到里面
- prepend :从前面追到里面
- before :插入到当前的前面
- after :插入到当前的后面
- insertAfter :将要插入的元素插到指定元素之后
- insertBefore :将要插入的元素插到指定元素之前
- empty :清空标签的内容,标签还在
- remove :将自己删除,就是删除标签和内容
- replaceWith :替换
- clone :克隆,深拷贝
<div>我是div</div>
<script>
//创建对象
let jqueryObj = $('<a href="#">我是新建的标签</a>')
console.log(jqueryObj);
//增删改方法
//添加
$('div').append(jqueryObj) //从后面追加到div里面
$('div').prepend(jqueryObj) //从前面追加到div里面
$('div').before(jqueryObj) //插入到前面
$('div').after(jqueryObj) //插入到后面
$('div').insertAfter(jqueryObj) //将div插到jqueryObj之后
$('div').insertBefore(jqueryObj) //将div插到jqueryObj前
//克隆 深拷贝
let copy = jqueryObj.clone(true, true)
$('div').before(copy)
//改
copy.replaceWith($('<b>我是替换copy的b标签</b>'))
//删除
$('div').empty() //清空标签的内容,标签还在
//$('div').remove() //将自己删除,就是删除标签和内容
</script>
获取宽高
- width :获取本身的宽度
- height :获取本身的高度
- innerWidth :获取本身的宽度+填充
- innerHeight :获取本身的高度+填充
- outerWidth :获取本身的宽度+填充+边框
- outerHeight :获取本身的高度+填充+边框
//获取宽高
//宽高相关的方法 传参就是设置 没传参就是获取,当里面传入true为参数时表示是否包含margin
$('div').width(200) // 只包含自身本身的宽度
console.log($('div').width()); // 300 返回number类型的值
console.log($('div').height()); //300 返回number类型的值
//innerWidth innerHeight 包含padding
console.log($('div').innerWidth()); //340
console.log($('div').innerHeight()); //340
//outerWidth outerHeight 包含padding和border
console.log($('div').outerWidth()); //350
console.log($('div').outerHeight()); //350
//里面传入true表示是否包含margin
console.log($('div').outerWidth(true)); //370
console.log($('div').outerHeight(true)); //370
获取位置
- offset :获取当前的盒子离页面的距离,返回一个jquery对象
- position :获取当前盒子离父元素的距离(不受margin影响)
//获取当前的p标签在页面上的位置 获取当前元素在页面上的位置
console.log($('div').offset());
//{top: 30, left: 30}返回一个对象
console.log($('div').position());
//{top: 20, left: 20}
console.log($('p').offset());
//{top: 85, left: 85}
console.log($('p').position());
//{top: 50, left: 50}
事件
jQuery的事件采用观察者模式,来设计对应的方法
- on :监听事件
- off :取消事件
- one :执行一次
//事件名 处理函数
$('div').on('click',function(){
console.log('点击了');
})
$('div').on('click',handler)
function handler(){
console.log('点击了1');
}
//取消事件监听
$('div').off('click',handler)
//one方法 只执行一次(事件监听)
$('div').one('mouseenter',()=>{
console.log('鼠标移进');
})
jQuery针对所有的常用事件都实现了对应的方法
- click
- dblclick
- mouseenter
- mouseleave
- keydown
- keyup
- change
- hover (总和了mouseleave mouseenter)
...
//事件名 处理函数
$('div').on('click',function(){
console.log('点击了');
})
$('div').on('click',handler)
function handler(){
console.log('点击了1');
}
//取消事件监听
$('div').off('click',handler)
//one方法 只执行一次(事件监听)
$('div').one('mouseenter',()=>{
console.log('鼠标移进');
})
//针对对应的事件的相关函数
$('button').click(()=>{
console.log('button点击了');
})
$('button').mouseenter(()=>{
console.log('移进去了');
})
$('button').mouseleave(()=>{
console.log('移出去了');
})
$('button').mousemove(()=>{
console.log('移动');
})
$('input').change(()=>{
console.log('改变值');
})
//hover方法 结合了移进和移出(mouseenter和mouseleave)
$('p').hover(()=>{
console.log('移进');
},()=>{
console.log('移出');
})
jQuery实现对应的事件委托
// 利用事件委托来操作
$('ul').mouseover((e)=>{
//获取事件源
e = e || window.event
if(e.target.tagName == 'LI'){
//给对应的li添加class
$(e.target).addClass('selected') //给自己添加样式
$(e.target).siblings().removeClass('selected') //移出兄弟的样式
}
})
jQuery的动画
animate 动画
- animate ({ option,delay,callback })
- option 里面只传 number 类型的值 (可以带单位),如果传入的时颜色需要使用 Color 这个类
$('div').animate({
width: 200,
left: 200,
}, 2000, () => {
$('div').animate({
width: 100,
top: 300,
opacity: 0.5
}, 2000, () => {
console.log('动画完成了');
})
})
show 显示 ;hide 隐藏 ;toggle 切换
slideUp 上去 ;slideDown 下去 ;slideToggle 切换
fadeOut 隐藏 ;fadeIn 显示 ;fadeToggle 切换 ;fadeTo 切换到对应透明度
//淡入淡出切换
$('div').fadeIn(2000, function() {
console.log(this);
$(this).fadeOut(3000,
function() {
$(this).fadeToggle(3000)
})
})
//滑动显示隐藏
$('div').hide(2000, () => {
$('div').show(2000) //宽高都会变化
})
//显示隐藏 slideDown 变化高度
$('div').slideUp(2000, () => {
$('div').slideDown(2000)
})
//show和hide配对的 显示就调用hide 隐藏调用show
//slideToggle 显示调用slideUp 隐藏调用slideDown
$('div').toggle(2000, () => {
$('div').slideToggle(2000)
})
jQuery的Ajax
概述:
- jquery 的 ajax 对应的原生 ajax 的 xmlhttprequest 进行了封装
- 原生的 ajax 的 xmlhttprequest 只支持 get 请求和 post
- 但是 jQuery 的 ajax 在此基础上进行了增强它还支持其他的请求如:putdelete patch option...
resultFul
resultFul 是一种接口风格,它遵从 rest 规范,它是以返回 json 格式数据,以请求的方式来区分对应的功能(跨平台)。
常见的result请求
- get请求 获取数据
- post请求 添加数据
- delete请求 删除数据
- put请求 修改一条
- patch请求 批量修改数据
对应的方法
- get 方法
- post 方法
- ajax 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="
viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>get方法</button>
<button>post方法</button>
<button>ajax方法</button>
<script src="./jquery.min.js"></script>
<script>
$('button:eq(0)').click(() => {
//url地址 参数 回调函数
$.get('https://jsonplaceholder.typicode.com/todos', {
_limit: 10
}, (res) => {
console.log(res);
})
})
$('button:eq(1)').click(() => {
//url地址 参数 回调函数
$.post('https://jsonplaceholder.typicode.com/posts', {
username: 'jack '
}, (res) => {
console.log(res);
})
})
$('button:eq(2)').click(() => {
// $.ajax('https://jsonplaceholder.typicode.com/todos',{
// data:{
//
// _limit: 10
// },
// method:'get',
// timeout:3000,
// async:true,
// dataType:'json',
// success(res){
//
// console.log(res);
// },
// error(err){
//
// console.log(err);
// },
// complete(){
//
// console.log('完成了');
// }
// })
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos',
data: {
_limit: 10
},
method: 'get',
timeout: 3000,
async: true,
dataType: 'json',
success(res) {
console.log(res);
},
error(err) {
console.log(err);
},
complete() {
console.log('完成了');
}
})
})
</script>
</body>
</html>
ajax的钩子函数(生命周期函数 自动调用)
- ajaxComplete :请求完成调用
- ajaxError :请求错误调用
- ajaxSend :请求发送调用
- ajaxStart :请求开始发送
- ajaxStop :请求发送停止
- ajaxSuccess :请求发送成功
jQuery的多库共存
当你使用其他的库和 jQuery 库结合使用的,我们有可能在其他库里面有对应的一个方法叫做jQuery 或者有一个变量叫 $ ,那么这个时候就会发生冲突。多库共存就是为了解决这个问题。
noConflict
console.log(jQuery);
console.log($);
//如果不传参数, 默认干掉$, 传入true俩个都干掉
let a = $.noConflict(true)
console.log($); //被干掉了
console.log(jQuery);
console.log(a);
jQuery的插件扩展
使用extend方法
给jQuery对象扩展 静态方法
//第一个名字 扩展的配置
$.extend({
sayHello() {
console.log('hello');
}
})
//调用
$.sayHello()给jQuery对象的方法扩展 原型方法
$.fn.extend({
redColor(){
$(this).css('color','red')
}
})
$('div').redColor()
$('p').redColor()