前端之JQuery
前端之jQuery
1.jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法
相当于： document.getElementById("i1").innerHTML
虽然jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
$('#i1').html(); //jQuery对象可以使用jQuery的方法
$('#i1')[0].innerHTML; //Dom对象使用Dom的方法
使用注意事项：
一定要先导入后再使用
2.基础语法
$(selector).action()
//样式演变，原本应该
jQuery();
//为了简化
$();
3.查找标签
基本选择器
id选择器
$('#id')
标签选择器
$('tagName')
class选择器
$('.className')
配合使用
$('div.c1') //找到有c1 class类的div标签
所有元素选择器
$('*')
组合选择器
$('#id,.className,tagName')
层级选择器
x和y可以为任意选择器
$('x y') // x的所有后代y
$('x>y') // x的所有儿子
$('x+y') // 找到所有紧挨在x后面的y
$('x~y') // x之后所有的兄弟y
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子：
$('div:has(h1)') //找到所有后代中有h1标签的div标签
$('div:has(.c1)') //找到所有后代中有c1样式类的div标签
$('li:not(.c1)') // 找到所有不包含c1样式类的li标签
$('li:not(:has(a))') // 找到所有后代中不含a标签的li标签
表单筛选器
//针对表单内的标签
$('input[type="text"]')
//简化写法
$(':text')
// 找到所有被选中的checkbox
$(':checkbox') //注意select框中默认selected标签也会被找到
$('input:checkbox')
筛选器方法
//避免#('input:first')太麻烦
$('input').first()
$('#id').next()
$('#id').nextAll()
$('#id').nextUntil('#i2') //不包含i2
$('#id').prev() //取上面的标签
$('#id').prevAll()
$('#id').prevUntil('#i2')
$('#id').parent()
$('#id').parents() //查找当前元素的所有父辈元素
$('#id').parentsUntil() //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
$('#id').children(); //儿子们
$('#id').siblings(); //兄弟们
jQuery链式操作
<div>
<p>p1</p>
<p>p2</p>
<div>
$('div>p').first().addClass('c1').next().addClass('c2');
//python代码诠释链式调用，其实就是在调用方法之后将对象再次返回
查找
搜索所有与指定表达式匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
$('div').find('p') // 等价于$('div p')
筛选
筛选出于指定表达式匹配的元素集合，这个方法用于缩小匹配的范围，用逗号分隔开多个表达式
$('div').filter('.c1') //从结果集中过滤出有c1样式类的，等价于$('div.ci')
4.操作标签
样式操作
addClass(); //添加指定的css类名
removeClass(); //移除指定的css类名
hasClass(); //判断样式存不存在
toggleClass(); //切换css类名，如果有就移除，如果没有就添加
jQuery操作模态框显隐（类添加隐藏类）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery-3.4.1.js"></script>
<style>
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(128,128,128,0.3);
z-index: 999;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 200px;
margin-top: -100px;
margin-left: -200px;
z-index: 1000;
background-color: white;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="show">出来吧</button>
<div class="cover hide"></div>
<div class="modal hide">
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button id="cancel">消失吧</button>
</div>
<script>
let b1Ele = $('#show')[0];
let $cEle = $('.cover');
let $mEle = $('.modal');
let b2Ele = $('#cancel')[0];
b1Ele.onclick = function () {
$cEle.removeClass('hide');
$mEle.removeClass('hide');
};
b2Ele.onclick = function () {
$cEle.addClass('hide');
$mEle.addClass('hide');
}
</script>
</body>
</html>
5.位置操作
offset() //获取匹配元素在当前窗口的相对偏移
position() //获取匹配元素相对父元素的偏移
scrollTop() //获取匹配元素相对滚动条顶部的偏移
scrollLeft() //获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置
和 .position()的差别在于: .position()是相对于相对于父级元素的位移
6.尺寸
height() //文本
width()
innerHeight() //文本+padding
outerHeight() //文本+padding+border
outerWidth()
7.文本操作
HTML代码
html() //取得第一个匹配元素的html内容
html(val) //设置所有匹配元素的html内容
文本值
text() //取得所有匹配元素的内容
text(val) //设置所有匹配元素的内容
值
val() //取得第一个匹配元素的当前值
val(val) //设置所有匹配元素的值
val([val1,val2]) //设置多选的checkbox、多选select的值
