目录
一、jQuery概述
二、jQuery入门
2-1、官网地址
2-2、使用
2-2-1、导入（建议放在head里面）
2-2-2、使用（直接使用）
三、DOM操作3-1、选择器
3-2、筛选器
3-3、属性操作
3-4、显示内容+样式操作
3-5、元素操作
3-6、元素大小获取
3-7、元素位置
3-8、事件
3-9、事件增强
3-10、ajax
3-10-1、相关方法使用
3-10-2、钩子函数
3-10-3、ajax里面的jsonp
3-11、多库共存+方法扩展
3-12、深浅拷贝
3-13、动画animate，显示隐藏show、hide，淡入淡出fadeIn、fadeOut
一、jQuery概述
jquery是一个前端的js库，它封装了原生的方法以及一些原生的兼容。轻量级的js库。
二、jQuery入门
2-1、官网地址
jquery官网地址：https://jquery.com/
jquery中文网址：https://www.jquery123.com/
2-2、使用
2-2-1、导入（建议放在head里面）
<script src="./js/jquer.min.js"></script>2-2-2、使用（直接使用）
// jQuery //他是核心的对象 里面的方法都是通过他来调用的
console.log(jQuery('body')); //通过jquery对象来调用获取方法
// 使用$来替代jQuery
console.log($('body'));三、DOM操作
3-1、选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<ul id="box">
<li>1</li>
<li name='jack'>2</li>
<li class="inner">3</li>
<li>4</li>
</ul>
<script>
// JQuery核心对象，里面的方法都是通过他来调用的
console.log(jQuery('ul'))
// 使用$来代替JQuery
// $获取的是数组还是元素？
console.log($("#box"))//id为box
console.log($(".inner"))
console.log($("li"))
console.log($("ul>li"))
console.log($("li[name='jack']"))//使用 选择器+[属性名=属性值] 获取元素
// 按照使用的时候来决定获取的方式
console.log($("li").length)
Array.from($('li')).forEach(v => {
console.log(v)
});
console.log($('li:first'));//获取第一个li
console.log($('li:last'));//获取最后一个li
console.log($('li:eq(2)'));//获取下标为2的li元素
console.log($('li:odd'));//获取奇数下标
console.log($('li:even'));//获取偶数下标
</script>
</body>
</html>3-2、筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="foot">5</li>
<li class="foot"><a href="#">6</a></li>
</ul>
<script>
console.log($('li').first());//获取li第一个
console.log($('li').last())//获取li最后一个
console.log($('li:eq(2)').prev());//获取li下标为2的上一个
console.log($('li:eq(2)').prev('.active'));//获取li下标为2的，并且是“.active”的上一个
console.log($('li:eq(2)').next());//获取li下标为2的下一个
console.log($('li:eq(2)').next('.foot'));//获取li下标为2的，并且是“.active”的下一个
console.log($('li:eq(2)').prevAll());//获取li下标为2的上面所有
console.log($('li:eq(2)').prevAll('.active'));//获取li下标为2的上面所有为“.active”
console.log($('li:eq(2)').nextAll());//获取li下标为2的下面所有
console.log($('li:eq(2)').nextAll('.foot'));//获取li下标为2的下面所有为“.active”
console.log($('li').parent());//获取li的父元素
console.log($('li').parent("ul"));//获取li的父元素，并且是ul
console.log($('li').parents());//获取li所有的父元素，直到html为止
console.log($('li').parents("body"));//获取li的所有父元素中的body，
console.log($('ul').children());//获取ul的所有子元素（第一级子元素）
console.log($('ul').children(".foot"));//获取ul的所有子元素（第一级子元素）中的.foot
console.log($('li:eq(2)').siblings());//获取li下标为2的所有兄弟元素
console.log($('li:eq(2)').siblings('.foot'));//获取li下标为2的所有兄弟元素中为.foot的元素
console.log($('ul').find('li'));//查找元素，在ul中查找li 返回查找到的所有
console.log($('ul').find('a'));
console.log($('li').eq(3));//相当于$('li:eq(2)')
</script>
</body>
</html>3-3、属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<div id="box"></div>
<script>
// prop 隐式添加属性（添加上去了，但是检查器里面没有，对于原本已经有的属性就是显示添加，设置）
// 传一个参数就是获取，传两个参数就是设置
console.log($('div').prop('id'))
$('div').prop('class','inner')//设置class属性，值为inner
$('div').prop('name','jack')
console.log($('div').prop('name'));
// attr 显示添加属性
console.log($('div').attr('name'));//不能获取隐式添加的内容（本身已经有的属性除外）undefined
console.log($('div').attr('class'));
$('div').attr('age', 18)//设置class属性，值为inner
// 删除
$('div').removeAttr('class')//显示删除
$('div').removeProp('name')//隐式删除
console.log($('div').attr('class'))
console.log($('div').prop('name'))
// 属性操作其他方法
// $('div').addClass() //添加class属性值
// $('div').removeClass() //删除class属性值
// $('div').hasClass()//判断是否存在
// $('div').toggleClass()//对于没有的添加，已有的删除（class开关）
</script>
</body>
</html>3-4、显示内容+样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
}
</style>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<div class="box">我是div的内容</div>
<div><a href="#">hello</a></div>
<input type="text" value="输入">
<script>
// 不传参就是获取，传参就是设置
// 相当于innerText
console.log($('div').eq(0).text())
$('div').eq(0).text("我修改了")
// 相当于innerHTML
console.log($('div').eq(1).html())
$('div').eq(1).html("<b>world</b>")
// 获取input的value属性
console.log($('input').val())
// $('input').val('hello woeld')
// 样式操作
// 传一个参数为获取，传两个参数未设置 相当于getComputerStyle
console.log($('div').css('width'))
$('.box').css('backgroundColor','red')
</script>
</body>
</html>3-5、元素操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<div>我是原来的div</div>
<ul>
<li class="save">1</li>
<li>2 <span></span></li>
<li>3</li>
<li>4</li>
</ul>
<p></p>
<script>
//创建元素
let $div = $('<div>1</div>')//创建元素节点
// 添加操作 添加操作不能添加重复的元素
$('body').append($div)//添加到body元素里面内容的后面
$div.appendTo($('body'))//将div添加到body里面
// 往前添加
let $a = $('<a></a>')
$a.attr('href','http://www.baidu.com')//设置href属性
$('body').prepend($a)//body的最前面添加a标签
$a.prependTo($('body'))//将a标签添加在body前面
// after 在。。。之后 before在。。。之前（）兄弟节点添加
let $b = $('<b></b>')
$('div').eq(0).after($b)//在div的后面进行添加
$b.insertAfter($('div').eq(0))//将b标签插入到div后面
let $p = $('<p></p>')
$('div').eq(0).before($p)//在div前面进行添加
$p.insertBefore($('div').eq(0))//将p标签插入到div后面
// replace替换 替换所有
let $h = $('<h1>hello</h1>')//将div全部替换成h1标签
$('div').replaceWith($h)//将a标签替换进div标签（div会被删除）
$('<a></a>').replaceAll($('p'))//将a标签替换进div标签（div会被删除）
// // 删
// $('ul').remove()//将对应的内容包括自身全部删除（事件也会被删除）
$('li[class=save]').remove()
// $('li').remove.('.save')
// 删除方法 将里面的所有元素全部删除
// $('li').empty()//将里面的节点全部清空
// 克隆 clone 是否克隆所有的属性 是否克隆事件 默认false（不克隆）
$('body').append($('li').eq(0).clone())
</script>
</body>
</html>3-6、元素大小获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
<style>
div{
width: 300px;
height: 300px;
margin: 50px;
padding: 50px;
border: 10px solid #000;
}
</style>
</head>
<body>
<div></div>
<script>
let div = $('div')
// 使用css获取会带上px，返回的是一个字符串
console.log(div.css("width"))
console.log(div.css("height"))
// width方法，height方法 不包含padding以及margin和border
console.log(div.width())
console.log(div.height())
// innerWidth innerHeight 包含padding 不包含margin 也不包含border
console.log(div.innerWidth())
console.log(div.innerHeight())
// outerWidth outerHeight 包含padding以及border 不包含margin
console.log(div.outerWidth())
console.log(div.outerHeight())
// outerWidth outerHeight有一个参数，表示是否包含margin
console.log(div.outerWidth(true))
console.log(div.outerHeight(true))
</script>
</body>
</html>3-7、元素位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
<style>
.box2{
width: 300px;
height: 300px;
/* margin: 50px; */
/* padding: 50px; */
border: 10px solid #000;
position: absolute;
top: 100px;
left: 100px;
}
.box1{
position: relative;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
<script>
let box3 = document.querySelector('.box3')
box3.innerText = '123'
let div = $('.box2')
div.text('123')
// offset 基于body偏移的位置 返回的也是一个对象
console.log(div.offset())
console.log(div.offset().left)
console.log(div.offset().top)
// position 定位 返回基于父元素定位的位置，返回一个对象
console.log(div.position())//基于box1的定位
console.log(div.position().left)
console.log(div.position().top)
</script>
</body>
</html>3-8、事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<div><button>点我</button></div>
<script>
// 事件类型 事件处理函数
$('button').on('click',data,function(e){
console.log(e)
console.log(e.data)
console.log(this)
})
// 可以在事件发布的时候携带数据 使用e.data接收
$('button').on('click',{name:"jack"},function(e){
e = e || window.event
console.log(e.data)
})
// 事件委托机制
$('div').on('click',function(e){
console.log(this)
console.log(e.target)
console.log($(e.target))
})
// 只有在button情况下click才会触发
$('div').on('click','button',{name:"jack"},function(e){
console.log(this)
console.log(e.data)
console.log(e.target)
})
// 取消事件off
$('div').off()
// 只执行一次的事件
$('button').one('click',function(){
console.log('点击了')
})
// 屏幕滚动栏距离
$(window).on('scroll',function(){
console.log($(window).scrollLeft())
console.log($(window).scrollTop())
})
// 自动执行事件
$('button').trigger('click',{name:"jack"})
</script>
</body>
</html>3-9、事件增强
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<button>按钮</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let btn = $('button')
btn.click({name:'jack'},function(e){
console.log(e.data)
})
// 不能事件委托
$('ul').click("li",function(e){
console.log(this)//this还是指向ul
})
btn.dblclick(()=>{
console.log('双击了')
})
btn.mouseup(function(){
console.log('弹起')
})
// 相当于添加了移进事件 以及 移出事件
btn.hover(()=>{
console.log("进入了")
},()=>{
console.log('出去了')
})
// js对象转为jq对象 $(js对象) 括起来就是jquery对象
// $(window) $(this)
</script>
</body>
</html>3-10、ajax
3-10-1、相关方法使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<script>
$.ajax({
url:'https://jsonplaceholder.typicode.com/todos',//请求地址
type:'GET',//请求方式
data:{id:20},//携带数据
dataType:'JSON',//数据类型
async:true,//是否异步
success:function(res){//成功的回调
console.log(res)
},
error:function(err){//错误的回调
console.log(err)
},
complete(){//请求结束的回调
console.log('结束')
}
})
// get(url地址（不能省略），参数对象（可以省略），回调方法（可以省略）)
$.get('https://jsonplaceholder.typicode.com/todos',{id:16},function(res){console.log(res)})
$.post('https://jsonplaceholder.typicode.com/todos',{id:16},function(res){console.log(res)})
// https://jsonplaceholder.typicode.com/todos 这个接口是一个rest接口，rest规范里面post是添加操作
$.post("http://useker.cn/login",{uname:'abc',upwd:'123456'},function(res){console.log(res)})
// $.getJSON() //获取JSON格式数据 可以获取地的文件
$.getJSON('https://jsonplaceholder.typicode.com/todos',function(res){console.log(res)})
$.getJSON('./xxxxxx.json',function(res){console.log(res)})
</script>
</body>
</html>3-10-2、钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<script>
// 钩子函数 自动调用（到达某个部分）
// ajax的全局函数 当ajax到达某个过程自动调用这个方法
$.ajax({
url:'https://jsonplaceholder.typicode.com/todos',
success(res){
console.log(res)
}
})
// 全局的钩子函数
$(window).ajaxStart(function(){
console.log('ajax开始发送')
})
$(window).ajaxSend(function(){
console.log('ajax请求发送')
})
$(window).ajaxStop(function(){
console.log('ajax停止发送')
})
$(window).ajaxSuccess(function(){
console.log('ajax发送成功')
})
$(window).ajaxError(function(){
console.log('ajax请求出错')
})
$(window).ajaxComplete(function(){
console.log('ajax请求完成')
})
</script>
</body>
</html>3-10-3、ajax里面的jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<script>
$.ajax({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data:{wd:'游戏'},
dataType:'jsonp',//指定为jsonp返回
jsonp:'cb',//他要接收的函数的键(后台指定的)
jsonpCallback:'fn',//回调函数的名字
success(res){console.log(res)},
timeout:1000//超时时间
})
// 代理
</script>
</body>
</html>3-11、多库共存+方法扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<div></div>
<script>
// 利用jquery的方法来禁用$
// $('div')
// $.noConflict()//当代码执行到这里，后面的$就不能再使用了
// $('div')
// jQuery('div')
// 同时禁用$以及jquery
// $.noConflict(true)//全部禁用了
// 使用变量来代替$和jQuery
let sss = $.noConflict(true)
console.log(sss('div'))
sss.noConflict(true)//不能禁用了，noConflict只能禁用$和jQuery
console.log(sss('div'))
// 使用jquery里面的extend，相当于继承一个对象，那么jquery就拥有了这个对象的方法 拓展给原型，给$使用
$.extend({max:function(...arg){
let maxIndex = 0
arg.forEach((v,index)=>{
if(arg[maxIndex]<v){
maxIndex = index
}
})
return arg[maxIndex]
}})
$.extend({min:function(...arg){
let minIndex = 0
arg.forEach((v,index)=>{
if(arg[minIndex]>v){
minIndex = index
}
})
return arg[minIndex]
}})
console.log($.max(1,2,3,5,1,5))
console.log($.min(1,1,2,3,5))
// 扩展给元素集 给元素使用
$.fn.extend({
check:function(){
console.log('hello')
}
})
$(window).check()
</script>
</body>
</html>3-12、深浅拷贝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<script>
let obj1 = {name:'jack',age:26,likeFoods:['苹果']}
let obj2 = {name:'jack',age:26,likeFoods:['苹果']}
// 浅拷贝
let copy1 = $.extend({},obj1)
console.log(copy1.likeFoods === obj1.likeFoods)//浅拷贝，地址指向同一个，只拷贝第一层的内容
// 深拷贝
let copy2 = $.extend(true,{},obj2)
console.log(copy2.likeFoods==obj2.likeFoods)//深拷贝，里面存的（引用数据类型）地址不是同一个，全部拷贝
</script>
</body>
</html>3-13、动画animate，显示隐藏show、hide，淡入淡出fadeIn、fadeOut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
<style>
div{
width: 400px;
height: 600px;
background-color: purple;
display: none;
}
</style>
</head>
<body>
<div></div>
<script>
// show和hide只针对display为none的 显示 隐藏
$('div').show(2000,function(){
console.log('执行ok')
setTimeout(()=>{
$(this).hide(2000,function(){
console.log("hello")
})
},2000)
})
// toggle(执行时间,速度方式,回调函数)，如果隐藏就显示，显示就隐藏，速度方式只能是linear（匀速）或者是swing（缓冲）
$('div').toggle(2000,'linear',function(){
setTimeout(()=>{
$(this).toggle(2000,"swing",function(){
console.log("hello")
})
},2000)
})
// 淡入fadeIn淡出fadeOut
$('div').fadeIn(2000,function(){
$('div').fadeOut(2000,function(){
console.log('成功')
})
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
<style>
div{
width: 400px;
height: 600px;
background-color: purple;
position: absolute;
}
button{
margin-top: 450px;
}
</style>
</head>
<body>
<div></div>
<button>停止</button>
<button>终止</button>
<script>
// animate(对象,执行时间,速度方式,回调函数) 对象里面改变不了backgroundColor没有
$("div").animate({'backgroundColor':'yellow','width':100,'height':250,'left':200},2000,'linear',function(){$(this).animate({left:0},2000,'swing')})
// 停止动画（当前位置停止）
$('button').eq(0).click(()=>{
$('div').stop()
})
// 终止动画（终止为最终状态）
$('button').eq(1).click(()=>{
$('div').finish()
})
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
