jQuery
走进JQ
what: jQuery是对js的二次封装的工具包
二次封装：比js用起来更便捷了，操作就是综合了(写一句jq可以实现多句js逻辑)，底层就是原生js
工具包: jq就是一堆函数的集合体，通过jq对象来调用(jQuery)
why: 更快速使用js
where: 使用js的地方都可以使用jquery
how:
安装（环境）
1. 官网下载：https://jquery.com/download/
jquery-3.4.1.js |jquery-3.4.1.min.js
2.在需要jq环境的页面中 使用jq
<script src="js/jquery-3.4.1.js"></script>
<script>
// $就是jQuery对象，可以使用jQuery的所有功能
</script>
3. 根据API学习jQuery
http://jquery.cuishifeng.cn/
jq引入
# 所有的对象都属于这个windows这个对象的属性
<script src="js/jquery-3.4.1.js"></script>
<script>
console.log(jQuery);
window.alert('123');
window.document.write('123');
window.print();
</script>
选择器
1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组（存放了几个js对象不需要关心）
2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法
<body>
<h1>标题</h1>
<p class="p1">p1111111111111111111111111111111</p>
<p class="p2">p222222222222222222222222222222222222</p>
<form action="">
<input type="text">
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
//1. jq选择器 -得到的是jq对象, ---jq对象可以调用jq库的所有功能
// jquery对象是一个函数对象，所以要加（）调用， jquery对象也可以用$表示
//$('css3语法选择器')
let h1=$('h1');
console.log(h1)
let p1=$('.p1');
let p2=$('p:nth-of-type(2)');
console.log(p1,p2);
//查看第二个P的文本内容
let ps=$('p');
console.log(ps);
// 转换为js对象取值
let _p2=ps[1]; //jq对象可以理解为存放了js对象的数组
console.log(_p2.innerText);
//直接通过jq对象取值
p2=$(_p2);
console.log(p2.text())
//总结
`
1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组（存放了几个js对象不需要关心）
2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法
`
</script>
操作页面的三步骤
<body>
<h1>标题</h1>
<p class="p1">p1111111111111111111111111111111</p>
<p class="p2">p222222222222222222222222222222222222</p>
<form action="">
<input type="text">
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
//操作页面的3步骤
//1. 获取标签
//2. 绑定事件
//3. 操作标签
`第一种写法`;
// $('h1').click(function (ev) {
// jq的事件对象，但对js事件对象做了完全兼容
console.log(ev);
console.log(ev.clientX);
console.log(ev.clientY);
})
`第二种写法`;
// $('h1').on('click',function (ev) {
console.log(ev);
console.log(ev.clientX);
console.log(ev.clientY);
})
//会将2个p标签都绑定点击事件
$('p').click(function () {
console.log(1232);
//在jq事件中的this还是js对象，可以通过js方法进行取值
console.log(this);
console.log(this.innerText);
//在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
console.log($(this));
console.log($(this).text());
})
</script>
文本操作
<body>
<h1>标题</h1>
<p class="p2">p222222222222222222222222222222222222</p>
<div><b>div的加粗内容</b></div>
<form action="">
<input type="text">
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
//文本
//$div.text() 文本内容
//$div.html() 标签内容
//$inp.val() 表单内容
//需求1 点击h1获取 自身文本内容 ，div的标签内容，input的表单内容
$('h1').click(function () {
console.log($(this).text());
console.log($('div').html());
console.log($('input').val());
})
页面操作
$div.css('css中的样式属性名', '属性值'); // 单一设置
$div.css({
'属性1': '值1',
...
'属性n': '值n',
});
$div.css('属性', function (index, oldValue) {
console.log(oldValue);
// $(this) 可以拿到调用者对象
return 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系);
})
<body>
<h1 style="color: red;">标题</h1>
<style>
h1 {
font-size: 36px;
text-align: center;
}
</style>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
//样式操作
//获取样式:$div.css('css中的样式属性名')
$('h1').click(function () {
let color=$(this).css('color');
let fs=$(this).css('font-size');
let ta=$(this).css('text-align');
console.log(color,parseInt(fs),ta); //parseInt 输出格式为数字
//设置样式
$(this).css('background-color', 'orange');
$(this).css({
'background-color':'pink',
'border-radius':'10px',
'width':'200px',
});
$(this).css('height',function (index,oldValue) {
console.log(oldValue);
let w=$(this).width();
return w/2;
})
});
</script>
jq常用操作
addClass
增加类名
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
font-size: 36px;
text-align: center;
}
.box{
width: 200px;
height: 200px;
background-color: orange;
}
.red{
background-color: red;
border-radius: 50%;
}
.yellow{
width: 400px;
border-radius: 100px;
background-color: yellow;
}
.blue{
width: 400px;
background-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<h1 style="color: red;">标题</h1>
<button class="btn1">红</button>
<button class="btn2">黄</button>
<button class="btn3">蓝</button>
<div class="box"></div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 类名操作
$('.btn1').click(function () {
$('.box').addClass('red');
});
$('.btn2').click(function () {
$('.box').addClass('yellow');
});
$('.btn3').click(function () {
$('.box').addClass('blue');
});
</script>
# 浏览器上测试
1. 只要出现鼠标点击按钮红，类名为box的标签就会增加一个类名 red
2. 只要出现鼠标点击按钮黄，类名为box的标签就会增加一个类名 yellow
3. 只要出现鼠标点击按钮蓝，类名为box的标签就会增加一个类名 blue
# 最后代码为 <div>class="box red yellow blue"</div>
toggleclass
切换类名
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
font-size: 36px;
text-align: center;
}
.box{
width: 200px;
height: 200px;
background-color: orange;
}
.red{
background-color: red;
border-radius: 50%;
}
.yellow{
width: 400px;
border-radius: 100px;
background-color: yellow;
}
.blue{
width: 400px;
background-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<h1 style="color: red;">标题</h1>
<button class="btn1">红</button>
<button class="btn2">黄</button>
<button class="btn3">蓝</button>
<div class="box"></div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 类名操作
$('.btn1').click(function () {
$('.box').toggleClass('red'); //类名为.box的标签，如果有类名red就删除，没有就添加
});
$('.btn2').click(function () {
$('.box').toggleClass('yellow'); //类名为.box的标签，如果有类名yellow就删除，没有就添加
});
$('.btn3').click(function () {
$('.box').toggleClass('blue'); //类名为.box的标签，如果有类名blue就删除，没有就添加
});
</script>
removeclass
删除类名
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
font-size: 36px;
text-align: center;
}
.box{
width: 200px;
height: 200px;
background-color: orange;
}
.red{
background-color: red;
border-radius: 50%;
}
.yellow{
width: 400px;
border-radius: 100px;
background-color: yellow;
}
.blue{
width: 400px;
background-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<h1 style="color: red;">标题</h1>
<button class="btn1">红</button>
<button class="btn2">黄</button>
<button class="btn3">蓝</button>
<div class="box"></div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 类名操作
// 可以实现功能 可以重复点击红黄蓝按钮切换成响应的样式，但是无法恢复原来的样式
$('.btn1').click(function () {
// 当为类名为.box的标签添加类名red的时候，删除类名yellow,blue
$('.box').addClass('red');
$('.box').removeClass('yellow');
$('.box').removeClass('blue');
});
$('.btn2').click(function () {
// 当为类名为.box的标签添加类名yellow的时候，删除类名red,blue
$('.box').addClass('yellow');
$('.box').removeClass('red');
$('.box').removeClass('blue');
});
$('.btn3').click(function () {
$('.box').toggleClass('blue');
});
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
font-size: 36px;
text-align: center;
}
.box{
width: 200px;
height: 200px;
background-color: orange;
}
.red{
background-color: red;
border-radius: 50%;
}
.yellow{
width: 400px;
border-radius: 100px;
background-color: yellow;
}
.blue{
width: 400px;
background-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<h1 style="color: red;">标题</h1>
<button class="btn1">红</button>
<button class="btn2">黄</button>
<button class="btn3">蓝</button>
<div class="box"></div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 类名操作 --可以一次性获取提前设置好的一套样式
// 可以实现功能 可以重复点击红黄蓝按钮切换成响应的样式，但是无法恢复原来的样式
$('.btn1').click(function () {
let box=$('.box');
box[0].className='box'; //重置类名为box
box.addClass('red');
});
$('.btn2').click(function () {
let box=$('.box');
box[0].className='box';
box.addClass('yellow');
});
$('.btn3').click(function () {
let box=$('.box');
box[0].className='box';
box.addClass('blue')
});
</script>
属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="h1" style="color: red;">标题</h1>
<img src="" alt="">
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
//属性
`
获取属性值
设置属性值
删除属性值
`;
$('h1').click(function () {
//获取属性值 $div.attr('属性名')
let h1_id=$(this).attr('id');
console.log(h1_id);
//设置属性值 $div.attr('属性名'，'属性值或函数')
$('img').attr('src',function () {
return 'http://f.hiphotos.baidu.com/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg\n'
});
//删除属性值 $div.attr('属性名'，'')
$(this).attr('id','');
})
</script>
链式操作
<body>
<h1>标题</h1>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
console.log(jQuery);
$('h1').css('color','pink').css('background','yellow').click(function () {
console.log(this)
}).text('修改标题'); //将标签内容改为修改标题
$('h1').css('color','pink').css('background','yellow').click(function () {
console.log(this)
}).text() //不修改标签内容
</script>
操作文档
<body>
内容：<input type="text">
行：<input type="text">
列：<input type="text">
<p>表格</p>
<div>
<div class="d d1"></div>
<div class="d d2">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="d d3"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
//通过自身快速定位到 "亲戚" - 上兄弟们（们） 下兄弟（们） 兄弟们 孩子们 父亲（们）
`上兄弟(们) prev(All)
下兄弟(们) next(All)
兄弟们 siblings
孩子们 children
父亲(们)
`;
// let $d2 = $('.d2');
// console.log($d2);
// let next = $d2.next();
// console.log(next);
// let nexts = $d2.nextAll();
// console.log(nexts);
// let prev = $d2.prev();
// console.log(prev);
// let siblings = $d2.siblings();
// console.log(siblings);
// let children = $d2.children();
// console.log(children);
// let parent = $d2.parent();
// console.log(parent);
//动态生成页面结构
// let $table=$('<table></table>');
// $table.css({
// border:'1px',
// });
// $('body').append($table); //加入到body最后
// $('body').prepend($table);
// $('p').after($table) //加入到p之前
// $('p').before($table)//加入到p之后
//需求 点击表格，在之后插入指定宽高的表格
$('p').click(function () {
let inps=$('input'); // 获取内容
//表
let table=$('<table border="1"></table>');
let row=inps.eq(1).val();
console.log(row);
let col=inps.eq(2).val();
//行
for (let i=0; i<row;i++) {
let tr=$('<tr></tr>');
table.append(tr);
//列
for (let j=0; j < col; j++) {
let td=$('<td>' + inps.eq(0).val() + '</td>');
table.append(td);
}
}
$(this).after(table);
})
快速定位到某一个jq对象
<body>
内容：<input type="text">
行：<input type="text">
列：<input type="text">
<p>表格</p>
<div>
<div class="d d1"></div>
<div class="d d2">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="d d3"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
// 快速定位到某一个jq对象
1. 在jq集合中快速拿到某一个jq对象: jq对象.eq(index)
$('.d:eq(1)')==$('.d').eq(1)
$('.d').eq(1).click(function () {
alert(123)
});
//2.在jq集合中都具有系统事件，在事件中如何区别每一个jq对象
//$(this) |索引
$('.d').click(function () {
//标签所在层级的编号（索引），不是在jq对象数组中的索引
let index=$(this).index();
console.log(index);
});
通过自身快速定位到 "亲戚"
<body>
内容：<input type="text">
行：<input type="text">
列：<input type="text">
<p>表格</p>
<div>
<div class="d d1"></div>
<div class="d d2">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="d d3"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
//通过自身快速定位到 "亲戚" - 上兄弟们（们） 下兄弟（们） 兄弟们 孩子们 父亲（们）
`上兄弟(们) prev(All)
下兄弟(们) next(All)
兄弟们 siblings
孩子们 children
父亲(们)
`;
// let $d2 = $('.d2');
// console.log($d2);
// let next = $d2.next();
// console.log(next);
// let nexts = $d2.nextAll();
// console.log(nexts);
// let prev = $d2.prev();
// console.log(prev);
// let siblings = $d2.siblings();
// console.log(siblings);
// let children = $d2.children();
// console.log(children);
// let parent = $d2.parent();
// console.log(parent);
动态生成页面结构
<body>
内容：<input type="text">
行：<input type="text">
列：<input type="text">
<p>表格</p>
<div>
<div class="d d1"></div>
<div class="d d2">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="d d3"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
//通过自身快速定位到 "亲戚" - 上兄弟们（们） 下兄弟（们） 兄弟们 孩子们 父亲（们）
`上兄弟(们) prev(All)
下兄弟(们) next(All)
兄弟们 siblings
孩子们 children
父亲(们)
`;
// let $d2 = $('.d2');
// console.log($d2);
// let next = $d2.next();
// console.log(next);
// let nexts = $d2.nextAll();
// console.log(nexts);
// let prev = $d2.prev();
// console.log(prev);
// let siblings = $d2.siblings();
// console.log(siblings);
// let children = $d2.children();
// console.log(children);
// let parent = $d2.parent();
// console.log(parent);
//动态生成页面结构
// let $table=$('<table></table>');
// $table.css({
// border:'1px',
// });
// $('body').append($table); //加入到body最后
// $('body').prepend($table);
// $('p').after($table) //加入到p之前
// $('p').before($table)//加入到p之后
点击表格，在之后插入指定宽高的表格
<body>
内容：<input type="text">
行：<input type="text">
列：<input type="text">
<p>表格</p>
<div>
<div class="d d1"></div>
<div class="d d2">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="d d3"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
//需求 点击表格，在之后插入指定宽高的表格
$('p').click(function () {
let inps=$('input'); // 获取内容
//表
let table=$('<table border="1"></table>');
let row=inps.eq(1).val();
console.log(row);
let col=inps.eq(2).val();
//行
for (let i=0; i<row;i++) {
let tr=$('<tr></tr>');
table.append(tr);
//列
for (let j=0; j < col; j++) {
let td=$('<td>' + inps.eq(0).val() + '</td>');
table.append(td);
}
}
$(this).after(table);
}
案例 点击不同的标签变颜色
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul{
margin: 0;
padding: 0;
list-style: none;
}
.login{
width: 300px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
ul:after{
content: "";
display: block;
clear: both;
}
li{
width: 150px;
height: 50px;
/*background-color: orange;*/
float: left;
font-size: 30px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
li.live{
background-color: orange;
}
li:hover{
/*background: orange;*/
color: blue;
}
.login-box,.scan-box{
height: calc(400px - 50px);
background-color: red;
display: none;
}
.scan-box{
background-color: pink;
}
.box.live{
display: block;
}
</style>
</head>
<body>
<div class="login">
<ul>
<div>
<li class="live">登录</li>
<li>扫码</li>
</div>
</ul>
<div class="box login-box"></div>
<div class="box scan-box"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
console.log(jQuery);
// $('li').mouseover(function () {
// $(this).addClass('live').siblings().removeClass('live');
// let index=$(this).index();
// $('.box').eq(index).addClass('live').siblings().removeClass('live');
//
// })
$('li').click(function () {
$(this).addClass('live').siblings().removeClass('live');
let index=$(this).index();
$('.box').eq(index).addClass('live').siblings().removeClass('live');
})
</script>
