jquery
- jquery是一个快速，小巧且功能丰富的JS库，也就是JS封装的JS文件
- 操作html文档节点
- 操作dom节点更方便
- 兼容性
- 下载：
- 官网下载https://jquery.com/
- 方法大全https://jquery.cuishifeng.cn/
- 语法$(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"]'));
console.log($('input[name]'))
注：只写与原生JS不同属性
表单属性伪类
| 属性 |
含义 |
| :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));
console.log($('.third').index());
console.log($('li').siblings());
</script>
属性操作
- 给一个元素添加（获取）某个属性
添加$(‘div’).prop(‘id’,‘box’)
$(‘div’).prop(‘id’)
注：prop只能添加元素自己本身就有的属性
- 给一个元素添加（获取）某个自定义的属性
添加$(‘div’).attr(‘index’,‘1’)
$(‘div’).attr(‘index’)
- 移除某一个属性
$(‘div’).removeAttr(‘index’,‘1’)
样式操作
1. $().css()
<script>
$('div').css('width','100px')
console.log($('div').css('width'));
$('div').css({
height:'100px',
backgroundColor:'pink'
})
/设置多个行内样式
</script>
- $().addClass()
- $().removeClass()
- $().toggleClass()
- 示例：
<body>
<div></div>
</body>
<script src="./jquery.js"></script>
<script>
console.log($('div').hasClass('box'));
$('div').addClass('box')
console.log($('div').hasClass('box'));
$('div').removeClass('box')
$('div').toggleClass('box')
</script>
操作事件
- 绑定事件的方法
<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>
- 解绑事件
jquery后面事件不会覆盖前面事件，解绑需要$().unbind()
$('button').unbind('click').click(function(){})
- 移除事件
<script>
$('button').on('click',function(){
console.log('button点击了');
})
$('button').on('mousemove',function(){
console.log('button点击了');
})
$('button').off('click')
$('button').off()
</script>
- 只执行一次事件
$('button').one('click',function(){})
- 直接触发事件
$('button').on('click',function(){
console.log('自动执行');
})
$('button').trigger('click')
- 直接绑定事件，不用on
| 事件 |
含义 |
| click |
点击 |
| blur |
失去焦点 |
| focus |
获取焦点 |
| hover |
移动 |
| scroll |
滚动 |
$('button').hover(function(){
console.log('移入');
},function(){
console.log('移出');
})
链式写法
jquery允许在相同元素运行多条jquery命令
$('p').first().css('color','red').html('测试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);
})
</script>
动态DOM节点
- 创建节点
$(''
).text('内容')
- 添加节点
<body>
<div></div>
</body>
<script src="./jquery.js"></script>
<script>
let pEle=$(''
).text('内容')
$('div').append(pEle)
</script>
| 事件 |
含义 |
| parent.append(child) |
向父元素插入子元素，插入子元素为最后一个元素 |
| child.appendTo(parent) |
将子元素插入父元素，插入子元素为最后一个元素 |
| parent.prepend(child) |
向父元素插入子元素，插入子元素为第一个元素 |
| child.prependTo(parent) |
将子元素插入父元素，插入子元素为第一个元素 |
| brother.after(obj) |
在某个兄弟节点之后插入对象 |
| brother.before(obj) |
在某个兄弟节点之前插入对象 |
- 删除节点
- $().empty()
- $().remove()
- $().detach()
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script src="./jquery.js"></script>
<script>
$('ul').empty()
$('ul').remove()
$('ul').detach()
</script>
- 替换节点
- $(‘div’).replaceWith(’’)
- $(‘div’).replaceAll(’’)
注：两者区别在于replaceWith只能替换一个节点，replaceAll可以替换里面所有节点
- 复制节点
$().clone()
jquery与DOM节点转换
- jquery准换为DOM
- const DOM=$()[0]
- const Dom=$().get[0]
- DOM转换为jquery
const DOMEle=document.querySelector(’.d’)
const jquery=$(DOMEle)
元素尺寸
- 操作元素宽和高（不含padding和border）
| 语法 |
含义 |
| $().width() |
获取元素宽 |
| $().width(n) |
设置元素宽npx |
| $().height() |
获取元素高 |
| $().height(n) |
设置元素高npx |
- 获取元素内置宽和高（含padding不含border）
| 语法 |
含义 |
| $().innerWidth() |
获取元素宽 |
| $().innerHeight() |
获取元素高 |
- 获取元素外置宽和高（含padding和border）
| 语法 |
含义 |
| $().outerWidth() |
获取宽（含padding,border） |
| $().outerWidth(true) |
获取宽（含padding,border,margin） |
| $().outerHeight() |
获取高（含padding,border） |
| $().outerHeight(true) |
获取高（含padding,border,margin） |
获取元素位置
- 元素相对于页面位置
| 语法 |
含义 |
| $().offset() |
得到一个对象{top:值，left:值} |
| $().offset(top:m,left:n) |
定位于页面左上角mpx npx |
- 元素相对于父元素的偏移量
$().position()
注：得到一个对象包含X和Y的值，父元素需要定位，只读
- 获取页面卷去的高度和宽度
| 语法 |
含义 |
| $(document).scrollTop() |
获取页面被卷起的高度 |
| $(document).scrollLeft() |
获取滚动条到左边垂直宽度 |
$(document).scroll(function(){
console.log($(document).scrollTop());
})
- 通过CSS改变元素位置
$().css(‘left’:m,‘top’:n)
jquery效果动画Obj
- 隐藏显示
| 语法 |
含义 |
| jqueryObj.hide() |
隐藏 |
| jqueryObj.show() |
显示 |
| jqueryObj.toggle() |
切换隐藏于显示 |
$('div').css('display','none')
$('div').hide()
$('div').show()
- 淡入与淡出
| 语法 |
含义 |
| jqueryObj.fadeIn() |
通过淡出方式显示 |
| jqueryObj.fadOut() |
通过淡入方式隐藏 |
| jqueryObj.fadToggle() |
切隐藏与显示 |
$('button').click(function(){
$('div').fadeOut()
$('div').fadeOut(1000)
$('div').fadeOut(1000,function(){
console.log(1);
})
})
- 滑动
| 语法 |
含义 |
| jqueryObj.slideDown() |
用滑动动画显示 |
| jqueryObj.slideUp() |
用滑动动画隐藏 |
| jqueryObj.slideToggle() |
切换显示与隐藏 |
$('button').click(function(){
$('div').slideUp()
})
$('button').click(function(){
$('div').slideUp(100,function(){
console.log('完成');
})
})
- 动画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()
})
- 示例：做一个菜单栏
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>Documenttitle>
<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',
jsonpCallback:'func',
success:function(result){
console.log(result);
},
error:function(err){
console.log(err);
}
})
jquery扩展
扩展jquery本身
jQuery.extend({
max:function(m,n){
let max=m;
if(n>max){
max=n
}
return max
}
})
console.log($.max(20,40));
jQuery.fn.extend({
min:function(m,n){
let min=m;
if(n<min){
min=n
}
return min
}
})
console.log($('div').min(20,40));
