概述:
jquery是一个轻量级的js库,他将js的功能进行了封装(所有的都是函数),他在封装的基础上做了进一步的兼容(兼容性好);
特点:
链式调用 (里面所有的方法返回的都是一个jquery对象)
丰富的选择器和筛选器
良好的动画兼容(动画库很强大,借助了animated.js (主要是css3的动画))
jQuery地址:
jQuery 官网: https://jquery.com/
中文官网:https://www.jquery123.com/
jQuery选择器:
javascript"><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="./js/jquery.js"></script> //记住这里一定要引入jquery官网的js包才能使用
<script>
//css选择器
console.log($('ul>li:nth-child(3)'));
//新增的选择器
console.log($('li:eq(1)')); //eq传入的是下标
//根据下标获取为奇数的
console.log($('li:odd'));
//根据下标获取为偶数的
console.log($('li:even'));
console.log($('li:first'));
console.log($('li:last'));
//隔行变色(使用dom)
let odd=$('li:odd')
let even=$('li:even')
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='blue'
}jQuery属性操作:
javascript">$('div').prop('class','box')//设置
console.log($('div').prop('class'));//获取
//prop只能操作原生属性
console.log($('div').eq(0).prop('id'));
//对应不是原生获取的undefined
console.log($('div').eq(0).prop('name'));
//设置到对应的元素对象上 element.id element.name
$('div').prop('content','我是内容') //设置
console.log($('div').prop('content'));
//attr 是原生的setAttribute getAttribute
$('div').attr('message','ok')
console.log($('div').attr('id'));
console.log($('div').attr('name'));
console.log($('div').attr('message'));
//class属性操作
//添加class
$('p').addClass('box')
$('p').addClass('red')
//获取 通过attr或者prop获取
console.log($('p').prop('class'))
//删除class
$('p').removeClass('box')
//修改
//先删再添加
$('p').removeClass('red')
$('p').addClass('blue')
//切换 删除如果没有该属性就加上
$('p').toggleClass('green')jQuery筛选器:
javascript"><ul>
<li>1</li>
<li class="box">2</li>
<li>
<span>span1</span>
<span>span2</span>
<a href="">连接1
<p class="box"></p>
</a>
<a href="">连接2</a>
<a href="">连接3</a>
</li>
<li>4</li>
<li class="box">5</li>
</ul>
//获取元素进行筛选
console.log($('ul>li').eq(2)); //得到第三个li
console.log($('ul>li').first()); //获取第一个
console.log($('ul>li').last()); //获取最后一个
//父子关系
conlose.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
//兄弟关系
//获取第三个li的第二个子元素的兄弟span标签
console.log($('ul>li:eq(2)').children().eq(1).siblings('span'));
//获取第三个li的第二个子元素的所有兄弟
console.log($('ul>li:eq(2)').children().eq(1).siblings);
//获取第三个li的前一个元素
console.log($('ul>li:eq(2)').prev());
//获取第三个li的前一个box元素(符合条件才返回结果)
console.log($('ul>li:eq(2)').next());
//获取第三个li的后一个box元素(符合条件才返回结果)
console.log($('ul>li:eq(2)').next('.box'));
//获取第三个li后面的所有
console.log($('ul>li:eq(2)').nextAll());
//获取第三个li后面的所有box
console.log($('ul>li:eq(2)').nextAll('.box'));
//获取第三个前面的所有
console.log($('ul>li:eq(2)').prevAll());
//获取第三个前面的所有box
console.log($('ul>li:eq(2)').prevAll('.box'));
//find 查找
//查找所有子元素的内容找到对应的条件 对应的class名字为box
console.log($('ul').find('.box'));
//查找所有子元素内容找到对应的条件(跨级)
console.log($('ul').eq(2).find('.box'));
jQuery宽高获取:
javascript"><style>
div{
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
border: 30px solid yellow;
}
</style>
</head>
<body>
<div></div>
<script src="./js/jquery.js"></script>
<script>
//设置宽度 传参就是设置 没传就是获取
//$('div').width(200)
console.log($('div').width()); //返回number类型的值
console.log($('div').height()); //返回number类型的值
//innerWidth innerHeight (包含padding)
console.log($('div').innerWidth());
console.log($('div').innerHeight());
//outerWidth outerHeight (包含padding和border)
console.log($('div').outerWidth());
console.log($('div').outerHeight());
</script>jQuery位置获取:
javascript"> <style>
*{
margin: 0;
padding: 0;
}
div{
margin:20px;
position: relative;
}
p{
position: absolute;
left: 100px;
top: 100px;
margin-top: -10px;
margin-left: -10px;
transform: translate(30px,30px);
}
button{
margin: 50px;
transform: translate(50px,50px);
}
</style>
</head>
<body>
<div>
<p>
<button>按钮</button>
</p>
</div>
<script src="./js/jquery.js"></script>
<script>
//获取当前的p标签在页面上的位置 获取当前元素在页面上的位置
console.log($('p').offset()); //返回一个对象
console.log($('p').offset().left);
console.log($('p').offset().top);
console.log($('button').offset());
//获取当前的盒子在父元素内容的位置(不受margin的影响)
console.log($('p').position());
console.log($('button').position());
</script>jQuery观察者事件:
javascript"><body>
<div>点击我</div>
<button>点击我</button>
<input type="text">
<script src="./js/jquery.js"></script>
<script>
//事件名 处理函数
$('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移进');
})
$('button').mouseleave(()=>{
console.log('button移出');
})
$('input').change(()=>{
console.log('输入改变值');
})
//hover方法 结合了移进移出 (mouseenter和mouseleave)
$('p').hover(()=>{
console.log('移进');
},()=>{
console.log('移出');
})
</script>jQuery的ajax:
概述:
jquery的ajax对应的原生的ajax进行了封装xhr,他对应的xhr进行了功能的扩展但是ajax它在此基础上进行了增强它还支持其他的请求
resultFul:
是一种接口风格,他是从rest规范,他是以返回json格式数据,以请求的方式来区分对应的功能
result请求:
get请求 获取数据
post请求 添加数据
delete请求 删除数据
put请求 修改一条数据
patch请求 批量修改数据
ajax代码:
javascript">$('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({
url:'https://jsonplaceholder.typicode.com/posts',
data:{
_limit:10
},
method:'get',
timeout:3000,
dataType:'json',
success(res){
console.log(res)
},
error(err){
conlose.log(err)
},
copmlete(){
conlose.log('完成了')
}
})
})jQuery动画使用:
javascript"><script>
//option(只能传入number类型) 时间 回调函数
$('div').animate({
width:200,
left:200,
top:300,
opacity:0.4
},2000,()=>{
console.log('动画完成了');
})
//显示隐藏 回调函数(变化宽高和透明度)
$('div').show(2000,()=>{
$('div').hide(2000)
})
// 显示隐藏 slideDown下拉
$('div').slideDown(2000,()=>{
$('div').slideUp(2000)
})
//切换toggle 显示隐藏
$('div').toggle(2000,()=>{
$('div').slideToggle(2000)
})
// 出去 进来(只改变透明度)
$('div').fadeIn(2000,()=>{
$('div').fadeOut(2000,()=>{
$('div').fadeToggle(2000)
})
})
</script>jQuery插件扩展:
javascript"><div>111</div>
<script>
//给jQuery对象扩展
//第一个是名字 第二个是扩展的配置
$.extend({
myHello(){ //自定义的
conlose.log('hello')
}
})
//调用
$.myHello()
//给jQuery对象的方法扩展
$.fn.extend({
renderColor(){
$(this).css('color','blue')
}
})
$('div').renderColor()jQuery样式操作:
javascript"> <div style="height:100px">
<span>我是内容</span>
</div>
<script src="./js/jquery.js"></script>
<script>
//样式操作 获取样式 设置样式
//传递一个参数就获取 传递两个参数就是设置(参数传满了就是设置)
//可以获取所有的样式
console.log($('div').css('backgroundColor'));
console.log($('div').css('height'));
//设置样式
$('div').css('width','100px')
//dom元素创建
let jqueryObj=$('<p>我是新建的标签</p>')
console.log(jqueryObj);
//添加
$('div').append(jqueryObj) //从后面追加到div里面
$('div').prepend(jqueryObj) //从前面追加到div里面
$('div').before(jqueryObj) //插入到前面
$('div').after(jqueryObj) //插入到后面
//删除
$('div').empty() //清空
$('div').remove() //将自己删除
//修改
$('div').replaceWith($('<b></b>'))
//克隆 (深拷贝)
let p=$('p').clone()
console.log(p);
</script>jQuery多库共享:
javascript"><body>
<script src="./jquery.min.js"></script>
<script>
console.log(jQuery);
console.log($);
//如果不传参数 默认干掉$ 传入true俩个都干掉
let a = $.noConflict(true)
console.log($);//被干掉了
console.log(jQuery);
console.log(a);
</script>
</body>
