jquery
1.jquery是一个快速,小巧且功能丰富的JS库,也就是JS封装的JS文件
2.操作html文档节点
3.操作dom节点更方便
4.兼容性
5.下载:
6.语法$(selector).action()
注:
- selector:要操作元素,action:操作方法
- jquery选择器选中元素,返回的是jquery对象,与dom节点不一样,jquery对象是伪数组
属性选择器
属性 | 含义 |
---|---|
$(‘selector[attr]’) | 选择包含给定属性的元素 |
$(‘selector[attr =“value”]’ | 选择给定属性是某个特定值的元素 |
$(‘selector[attr !=“value”]’ | 选择属性不等于特定值的元素 |
$(‘selector[attr *=“value”]’ | 选择是包含某些值的元素 |
$(‘selector[attr ^=“value”]’ | 选择是以某些值开始的元素 |
$(‘selector[attr $=“value”]’ | 选择是以某些值结尾的元素 |
$(‘selector[selector1][selector2]’) | 复合属性选择器,需要同时满足多个条件 |
引入方法:
<body>
<input type="name" name="name">
<input type="name" name="password">
</body>
<script src="./jquery.js"></script>
<script>
console.log($('input[name="name"]'));
//<input type="name" name="name">
console.log($('input[name]'))
// <input type="name" name="name"><input type="name" name="password">
表单属性伪类
属性 | 含义 |
---|---|
:checked | 选中的表单元素,一般用于radio和checked |
option:selected | 选中的option元素 |
:enabled | 可用元素 |
:disabled | 不可用元素 |
:read-only | 只读元素 |
:focus | 焦点元素 |
查找(筛选)方法
属性 | 含义 |
---|---|
parent() | 查找祖先元素 |
parents() | 查找所有祖先元素 |
parentUntil() | 查找祖先元素直到某个元素 |
children() | 查找后代元素 |
find() | 查找特定后代元素 |
prev() | 向前查找兄弟元素 |
prevAll() | 向前查找所有兄弟元素 |
prevUntil() | 向前查找兄弟元素直到某个元素 |
next() | 向后查找兄弟元素 |
nextAll() | 向后查找所有兄弟元素 |
nextUntil | 向后查找兄弟元素直到某个元素 |
siblings() | 查找所有兄弟元素 |
eq() | 选择集合中指定下标的元素 |
first() | 选择集合中第一个元素 |
last() | 选择集合中最后一个元素 |
index() | 查找元素在父元素里面位置 |
<body>
<ul>
<li></li>
<li></li>
<li class="third"></li>
<li></li>
<li></li>
</ul>
</body>
<script src="./jquery.js"></script>
<script>
console.log($('li').eq(2));
//第三个li元素
console.log($('.third').index());
//返回索引号2
console.log($('li').siblings());
//返回所有li元素
</script>
属性操作
1.给一个元素添加(获取)某个属性
- 添加$(‘div’).prop(‘id’,‘box’)
- $(‘div’).prop(‘id’)
注: prop只能添加元素自己本身就有的属性
2.给一个元素添加(获取)某个自定义的属性
- 添加$(‘div’).attr(‘index’,‘1’)
- $(‘div’).attr(‘index’)
3.移除某一个属性
- $(‘div’).removeAttr(‘index’,‘1’)
样式操作
1.$().css()
示例:
<script>
$('div').css('width','100px')
//设置行内样式
console.log($('div').css('width'));
//拿到行内样式
$('div').css({
height:'100px',
backgroundColor:'pink'
})
/设置多个行内样式
</script>
2.$().addClass() 添加一个元素
3.$().removeClass() 移除一个元素
4.$().toggleClass() 有元素就移除,没有就添加
5.示例:
<body>
<div></div>
</body>
<script src="./jquery.js"></script>
<script>
console.log($('div').hasClass('box'));
//false
$('div').addClass('box')
//添加一个box
console.log($('div').hasClass('box'));
//ture
$('div').removeClass('box')
//移除box
$('div').toggleClass('box')
//有box就移除,没有就添加
</script>
操作事件
1.绑定事件的方法
<body>
<div>
<button>点击</button>
</div>
</body>
<script src="./jquery.js"></script>
<script>
//点击事件
$('button').on('click',function(){
console.log('点击了');
})
//点击时传参
$('button').on('click',{name:'jack'},function(e){
console.log(e);
console.log(e.data);
})
//事件委托
$('div').on('click','button',function(){
console.log('button点击了');
})
//事件委托传参
$('div').on('click','button',{name:'jack'},function(e){
console.log(e);
console.log(e.data);
})
</script>
2.解绑事件
jquery后面事件不会覆盖前面事件,解绑需要$().unbind()
$('button').unbind('click').click(function(){})
//解绑以前事件,并重新绑定一个点击事件
3.移除事件
<script>
$('button').on('click',function(){
console.log('button点击了');
})
$('button').on('mousemove',function(){
console.log('button点击了');
})
$('button').off('click')
//移除点击事件
$('button').off()
//移除所有事件
</script>
4.只执行一次事件
$('button').one('click',function(){})
5.直接触发事件
$('button').on('click',function(){
console.log('自动执行');
})
$('button').trigger('click')
//代码走到此处直接触发点击事件
6.直接绑定事件,不用on
事件 | 含义 |
---|---|
click | 点击 |
blur | 失去焦点 |
focus | 获取焦点 |
hover | 移动 |
scroll | 滚动 |
示例:
$('button').hover(function(){
console.log('移入');
},function(){
console.log('移出');
})
链式写法
jquery允许在相同元素运行多条jquery命令
$('p').first().css('color','red').html('测试p')
//第一个p内容为红色测试p
遍历
<body>
<div>
<P>1</P>
<P>2</P>
</div>
</body>
<script src="./jquery.js"></script>
<script>
$('p').each((index,item)=>{
console.log($(item),index);
})
//p1标签 0
//p2标签 1
</script>
动态DOM节点
1.创建节点
$('<p>').text('内容')
2.添加节点
<body>
<div></div>
</body>
<script src="./jquery.js"></script>
<script>
let pEle=$('<p>').text('内容')
$('div').append(pEle)
</script>
事件 | 含义 |
---|---|
parent.append(child) | 向父元素插入子元素,插入子元素为最后一个元素 |
child.appendTo(parent) | 将子元素插入父元素,插入子元素为最后一个元素 |
parent.prepend(child) | 向父元素插入子元素,插入子元素为第一个元素 |
child.prependTo(parent) | 将子元素插入父元素,插入子元素为第一个元素 |
child.prependTo(parent) | 将子元素插入父元素,插入子元素为第一个元素 |
brother.after(obj) | 在某个兄弟节点之后插入对象 |
brother.before(obj) | 在某个兄弟节点之前插入对象 |
3.删除节点
- $().empty()
- $().remove()
- $().detach()
示例:
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script src="./jquery.js"></script>
<script>
$('ul').empty()
//删除ul下所有li节点
$('ul').remove()
$('ul').detach()
//删除ul和li所有节点
</script>
4.替换节点
- $(‘div’).replaceWith(’<p></p>’)
- $(‘div’).replaceAll(’<p></p>’)
注意: 两者区别在于replaceWith只能替换一个节点,replaceAll可以替换里面所有节点
5.复制节点
- $().clone()
jquery与DOM节点转换
1.jquery准换为DOM
- const DOM=$()[0]
- const Dom=$().get[0]
2.DOM转换为jquery
- const DOMEle=document.querySelector(’.d’)
- const jquery=$(DOMEle)
元素尺寸
1.操作元素宽和高(不含padding和border)
语法 | 含义 |
---|---|
$().width() | 获取元素宽 |
$().width(n) | 设置元素宽npx |
$().height() | 获取元素高 |
$().height(n) | 设置元素高npx |
2.获取元素内置宽和高(含padding不含border)
语法 | 含义 |
---|---|
$().innerWidth() | 获取元素宽 |
$().innerHeight() | 获取元素高 |
3.获取元素外置宽和高(含padding和border)
语法 | 含义 |
---|---|
$().outerWidth() | 获取宽(含padding,border) |
$().outerWidth(true) | 获取宽(含padding,border,margin) |
$().outerHeight() | 获取高(含padding,border) |
$().outerHeight(true) | 获取高(含padding,border,margin) |
获取元素位置
1.元素相对于页面位置
语法 | 含义 |
---|---|
$().offset() | 得到一个对象{top:值,left:值} |
$().offset(top:m,left:n) | 定位于页面左上角mpx npx |
2.元素相对于父元素的偏移量
-
$().position()
注意: 得到一个对象包含X和Y的值,父元素需要定位,只读
3.获取页面卷去的高度和宽度
语法 | 含义 |
---|---|
$(document).scrollTop() | 获取页面被卷起的高度 |
$(document).scrollLeft() | 获取滚动条到左边垂直宽度 |
$(document).scroll(function(){
console.log($(document).scrollTop());
})
//滚动时拿到滚动条距离页面顶部距离
4.通过CSS改变元素位置
- $().css(‘left’:m,‘top’:n)
jquery效果动画Obj
1.隐藏显示
语法 | 含义 |
---|---|
jqueryObj.hide() | 隐藏 |
jqueryObj.show() | 显示 |
jqueryObj.toggle() | 切换隐藏于显示 |
$('div').css('display','none')
//添加行内样式也可以
$('div').hide()
//隐藏div
$('div').show()
//显示div
2.淡入与淡出
语法 | 含义 |
---|---|
jqueryObj.fadeIn() | 通过淡出方式显示 |
jqueryObj.fadOut() | 通过淡入方式隐藏 |
jqueryObj.fadToggle() | 切隐藏与显示 |
$('button').click(function(){
$('div').fadeOut()
//立即淡入隐藏
$('div').fadeOut(1000)
//1000ms慢慢隐藏
$('div').fadeOut(1000,function(){
console.log(1);
})
//
})
3.滑动
语法 | 含义 |
---|---|
jqueryObj.slideDown() | 用滑动动画显示 |
jqueryObj.slideUp() | 用滑动动画隐藏 |
jqueryObj.slideToggle() | 切换显示与隐藏 |
$('button').click(function(){
$('div').slideUp()
})
$('button').click(function(){
$('div').slideUp(100,function(){
console.log('完成');
})
})
//也可以传参,第一个代表规定时长,第二个表示完成后执行函数
4.动画animate()
- $(selector).animate({params},speed,callback)
params
:定义形成动画的CSS属性speed
:规定效果时长callback
:动画完成执行效果
$('button').click(function(){
$('div').animate({
width:100,
height:100,
opacity:0.5
},1000,'linear',function(){
console.log('完成');
})
})
注意: 都是加在行内样式上的
5.停止与结束动画
- 停止$(selector).stop()
- 结束$(selector).finish()
$('button').click(function(){
$('div').stop().slideUp()
//停止当前动画重新执行
$('div').finish().slideUp()
//结束当前动画重新执行
})
6.示例:做一个菜单栏
<!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>
<style>
*{
padding: 0;margin: 0;
}
.wrap{
width: 140px;
background-color: black;
margin: 50px;
}
.main{
width: 100%;
color: #fff;
}
h3{
width: 110px;
height: 30px;
color: #fff;
}
.main div{
width: 120px;
height: 20px;
padding: 0 10px;
line-height: 20px;
}
ul li{
list-style: none;
width: 110px;
height: 30px;
padding: 0 15px;
line-height: 30px;
}
ul .active{
background-color: blue;
}
</style>
</head>
<body>
<div class="wrap">
<h3>首页</h3>
<div class="main">
<div>用户管理</div>
<ul>
<li class="active">用户添加</li>
<li>用户删除</li>
<li>用户查看</li>
</ul>
<div>信息查询</div>
<ul>
<li>最近消息</li>
<li>以前消息</li>
</ul>
</div>
</div>
<script src="jquery.js"></script>
<script>
$('.main div').click(function(){
$(this).next().slideToggle(200)
$('h3').html($(this).html())
})
$('li').click(function(){
$('li').removeClass('active')
$(this).addClass('active')
$('h3').html($(this).html())
})
</script>
</body>
</html>
ajax
- get方法$.get(url,[parma],callback)
- post方法$.post(url,[parma],callback)
- ajax方法
$.ajax({
url:'http://localhost:3000/api',
method:'get',
data:{},
success:function(data){
console.log(data);
},
error:function(err){
console.log(err);
}
})
- 跨域jsonp技术
$.ajax({
url:'http://localhost:3000/api',
method:'get',
dataType:'jsonp',
jsonp:'callback',//jsonp参数名
jsonpCallback:'func',//服务端用于封装数据的函数名
success:function(result){
console.log(result);
},
error:function(err){
console.log(err);
}
})