一、jQuery引入
# 导读
JQuery
jq就是js工具库，即一系列功能的集合体
jq内部语法采用的就是原生js
jq环境如何搭建：在需要使用jq的html中引入JQuery.js文件即可
本地导入（导入下好的文件）
<script src="js/jquery-3.4.1.min.js"></script>
cdn导入（链接外部资源--网上的文件：jquery CDN）
jq选择器
使用$('#id') 会走 getelementbyid
使用$('.class') //才会走queryselectorall
jq对象转化为js对象
//jq对象是一个数组，通过索引取值
js对象转化为jq对象
//直接将js对象扔到$()中转为jq对象
jq事件
点击对象,获取对象，然后绑定事件
1.$('.box').click(fn)
2.$('box').on('click', fn)
fn尽量写全：function () {}
不要用 $("box").on('click', () => {}); //获取的是window
* 只要是值，就可以用函数来返回
jq操作内容
let $inp = $('.inp')
let $div = $('.div')
1.$inp.val(不写|"新值"|fn(index, oldvalue))
2.$div.text()
3.$.html()
改标题
touppercase() 字符串大写
jq样式操作
let $div = $('.div')
1.$div.css('属性值')
2.$div.css("属性名"， "属性值")
3.$div.css({})
4.$div.addClass()
5.$div.removeClass()
6.$div.hasClass()
let $box = $('.box');
$box.click(function () {
let e
})
1.jq API
http://jquery.cuishifeng.cn/
2.jq初识
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq初始</title>
</head>
<body>
<h1>jQuery就是js的工具库 - 一系列功能的集合体</h1>
<h2>jq内部语法采用的就是原生js</h2>
<h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2>
<h2>jq就是优化了原生js鱼页面进行交互的逻辑</h2>
</body>
<!-- CDN 连接 外部资源 -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
<script src="js/jquery-3.4.1.js"></script>
<script>
// jQuery对象
console.log(jQuery);
console.log($);
console.log(Owen);
console.log($('h1'));
$('h1').click(function () {
$('h1').css('color', 'red')
})
</script>
</html>
二、jq选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="d" class="box"></div>
<input type="text" id="d2" class="box" />
<h3 class="h3"></h3>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// jq选择器：$('css选择器语法')
let $div = $('#d');
console.log($div);
let $boxs = $('.box');
console.log($boxs);
// jq对象如何转换为js对象 - jq对象可以理解为装有js对象的数组
// 就是通过索引取值
let div = $div[0];
console.log(div);
console.log(document.getElementsByClassName('box')[0]);
console.log(document.querySelectorAll('.box')[0]);
console.log($div[0]);
console.log($boxs[0]);
console.log($boxs[1]);
// js如何转换为jq对象
let $newDiv = $(div);
console.log($newDiv);
</script>
</html>
三、jq事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq事件</title>
<style>
.box {
200px;
height: 200px;
background-color: orange;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
let $box = $('.box');
// $box.click(function () {
// // this就是被点击的标签 - js对象
// console.log(this);
// console.log($(this));
// });
// jq对象可以完成事件的批量绑定
$box.on('click', function () {
console.log(this);
console.log(this.innerText);
console.log($(this));
});
// js必须手动循环 绑定
// let boxs = document.querySelectorAll('.box');
// for (box of boxs) {
// box.onclick = function () {
// console.log(this);
// console.log($(this));
// }
// }
</script>
</html>
四、jq内容操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq内容操作</title>
</head>
<body>
<h1 class="title">标题</h1>
<input type="text" class="title">
<button class="btn">改标题</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// js - jsObj.value | jsObj.innerText | jsObj.innerHTML
// jq - jqObj.val() | jqObj.text() | jqObj.html()
// 取值：jqObj.text() | jqObj.text('新值') | jqObj.text(fn)
let $btn = $('.btn');
let $inp = $('input.title');
let $h1 = $('h1.title');
$btn.click(function () {
let val = $inp.val();
if (val) {
// $h1.text(val);
$h1.html(val);
$inp.val(function (index, oldValue) {
// return oldValue.toUpperCase()
return ''
})
}
})
</script>
</html>
五、jq样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq样式操作</title>
<style>
.box {
/* 200px;*/
height: 200px;
background-color: pink;
}
.sup-box {
/* 400px;*/
height: 100px;
background-color: orange;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="box" style=" 600px">文本</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
let $box = $('.box');
$box.click(function () {
// 获取
let width = $box.css('width');
console.log(width);
// 单个设置
$box.css('background-color', function (index, oldvalue) {
console.log(oldvalue);
return 'red'
});
// 多条设置
$box.css({
'100px',
height: '100px',
backgroundColor: 'blue',
});
if ($box.hasClass('sup-box')) {
$box.removeClass('sup-box')
} else {
$box.addClass(function (index, oldvalue) {
console.log(index, oldvalue);
return 'sup-box'
})
}
})
</script>
<script>
// localStorage['name'] = 'owen';
// sessionStorage['age'] = 18;
</script>
</html>