前端之JQuery
jquery框架
#1、what:
jQuery是对js进行的二次封装的工具包
二次封装：比js使用起来便捷了，操作比就是综合了(写一句jq可以实现多句js逻辑)，底层就是原生js
工具包：jq就是一堆函数的集合体，通过jq对象来调用(jQuery)
#2、why：
跟快速使用js
#3、where：
使用js的地方都可以使用jq
#4、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学习jq：http://jquery.cuishifeng.cn/
jq引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// js - ES语法 | 浏览器(BOM) window.* | 文档(DOM window.document) document.*
// window.alert(\'js code\');
// window.document.write(123)
// window.print()
// 如何写jq代码 jQuery相当于$
console.log(jQuery);
console.log($);
window.owen = \'Owen\';
console.log(window.owen);
console.log(owen);
console.log($owen);
</script>
</html>
jq操作页面
// 总结：
`
1. $(\'css3选择器语法\') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心）
2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法
；
// 操作页面的三步骤
// 1.获取标签
// 2.绑定事件
// 3.操作标签
// 文本
// $div.text() 文本内容
// $div.html() 标签内容
// $inp.val() 表单内容
#案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>标题</h1>
<p class="p1">p11111111111111111111111111</p>
<p class="p2">p22222222222222222222222222</p>
<div>
<b>div的加粗内容</b>
</div>
<form action="">
<input type="text">
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 1.jq选择器 - 得到的是jq对象 - jq对象可以调用jq库的所有功能
// $(\'css语法选择器\')
let h1 = $(\'h1\');
console.log(h1);
let p1 = $(\'.p1\');
let p2 = $(\'p:nth-of-type(2)\');
console.log(p1, p2);
// 想通过js对象获取第2个p的文本内容
let ps = $(\'p\');
console.log(ps);
let _p2 = ps[1]; // jq对象可以理解为存放了js对象的数组
console.log(_p2.innerText);
// 想通过jq对象获取第2个p的文本内容
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>
<script>
// 操作页面的三步骤
// 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);
// })
$(\'p\').click(function () {
// 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
console.log($(this));
console.log($(this).text());
});
// 文本
// $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());
})
</script>
</html>
jq常用操作
// 一、文本操作
// $div.text() 文本内容
// $div.html() 标签内容
// $inp.val() 表单内容
// 二、样式操作
// 获取样式: $div.css(\'css中的样式属性名\')
// 设置样式:
`
$div.css(\'css中的样式属性名\', \'属性值\'); // 单一设置
$div.css({
\'属性1\': \'值1\',
...
\'属性n\': \'值n\',
});
$div.css(\'属性\', function (index, oldValue) {
console.log(oldValue);
// $(this) 可以拿到调用者对象
return 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系);
})
// 三、类名 - 可以一次性获取提前设置好的一套样式
`
增加类名：$div.addClass(\'类名\')
删除类名：$div.removeClass(\'类名\')
切换类名：$div.toggleClass(\'类名\') 没有就添加 存在就删除
// 四、属性
`
获取属性值：$div.attr(\'属性名\')
设置属性值：$div.attr(\'属性名\', \'属性值或函数\')
删除属性值：$div.attr(\'属性名\', \'\')
//案例
<!DOCTYPE html>
<html>
<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;
border-radius: 50%;
background-color: blue;
}
</style>
</head>
<body>
<h1 id="h1" style="color: red">标题</h1>
<img src="" alt="">
<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>
$(\'h1\').click(function () {
//click 和on都是点击事件
//$(this)获取一个jq对象----$this----- 这个对象变量名可自定义
let $this = $(this);
//通过jq对象获取颜色属性
let color = $this .css(\'color\');
//通过jq对象获取字体大小属性
let fs = $this.css(\'font-size\');
//通过jq对象获取位置属性
let ta = $this.css(\'text-align\');
//parseInt(fs)可以得到取整数值 去除单位
console.log(color, parseInt(fs), ta);
//通过对象设置背景颜色
$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;
})
})
//点击红色按钮 变为红色，因为添加了红色css样式
$(\'.btn1\').click(function () {
$(\'.box\').addClass(\'red\');
$(\'.box\').removeClass(\'yellow\');
$(\'.box\').removeClass(\'blue\');
// $(\'.box\').toggleClass(\'red\'); // 无red类添加，反之去除
});
//点击黄色按钮 变为红色，因为添加了黄色css样式
$(\'.btn2\').click(function () {
let $box = $(\'.box\');
//会覆盖写
$box[0].className = \'box\';
$box.addClass(\'yellow\');
});
//点击蓝色按钮 变为红色，因为添加了蓝色css样式
$(\'.btn3\').click(function () {
$(\'.box\').addClass(\'blue\');
});
$(\'h1\').click(function () {
//获取属性值
let h1_id = $(this).attr(\'id\');
console.log(h1_id);
//设置属性值
$(\'img\').attr(\'src\', function () {
return \'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg\'
});
//删除属性值
$(this).attr(\'id\', \'\');
})
</script>
</html>
jq链式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>标题</h1>
</body>
<script src="js/jquery-3.4.1.js"></script>
<!--以后项目线上可直接外联到： CDN服务器 | 官网服务器可能会变化 -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<script>
// 通过$(\'h1\') jq对象设置属性
// let _self = $(\'h1\').css(\'color\',\'orange\')
//
// _self = _self.click(function () {
// console.log(this)
// });
// //设置背景颜色
// _self = _self.css(\'background\',\'red\');
//链式设置属性
$(\'h1\').css(\'color\',\'orange\').css(\'background\',\'red\').click(function () {
console.log(this)
}).text(\'修改标题\');
</script>
</html>
jq操作文档
// 一、快速定位到某一个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)
});
// 二、通过自身快速定位到 "亲戚"
`上兄弟(们) prev(All)
下兄弟(们) next(All)
兄弟们 siblings
孩子们 children
父亲(们)
`;
// 三、动态生成页面结构
// let $table = $(\'<table></table>\');
// $table.css({
// border: \'1px\'
// });
// $(\'body\').append($table); // 加入到body最后
// $(\'body\').prepend($table); // 加入到body最后
// $(\'p\').before($table); // 加入到p之前
// $(\'p\').after($table); // 加入到p之后
//四、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作文档</title>
<style>
.d {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<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>
<div class="d d3"></div>
<div class="d d4"></div>
</div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
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);
`;
// 需求：点击表格，在之后插入指定宽高的表格
$(\'p\').click(function () {
let inps = $(\'input\');
// 表
let table = $(\'<table border="1"></table>\');
//获取第二个输入框输入的值
let row = inps.eq(1).val();
console.log(typeof(inps.eq(1).val()));
//获取第三个输入框输入的值
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>\');
tr.append(td);
}
}
$(this).after(table);
})
</script>
</html>
版权声明：本文为kangwy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。