jquery的引入
1.官网下载jquery文件保存到本地通过script的src引入
2.直接通过srcipt的src链接官网文档的地址
jq操作页面
//jq选择器 - 得到的是jq对象 - jq对象可以调用jq库里的所有功能
//$和jquery是一样的 语法 let h1 = $('css语法')
let h1 = $('.d1');
//jq对象我们可以把他看成一个装着js对象的数组，因此我们可以根据索引取出想要的js对象
let h = $('div')[0]; // 这样取出来的js对象
//假如我们匹配出了多个标签对象，又向指定固定标签的jq的对象，可以使用eq()的方法
let hh = $('.head').eq(1); // 取出的就是第二个标签对应的jq对象
//总结
`
1.$('css选择器语法') 就是jq选择器 获得的是jq对象，jq对象可以理解为存放了js对象的数组(存放了几个不需要关心)
2.jq对象转换为js对象 jq对象[js对象所在的索引] - 可以使用js语法
3.js对象转换成jq对象 $(js对象) - 可以使用jq语法
`;
//操作页面三步骤 1.获取标签 2.绑定事件 3.操作标签
$('.d2').click(function (ev) {
//传进来的ev还是鼠标对象
console.log(ev);
console.log(ev.clientY);
console.log(ev.clientX);
//jq事件中的this还是js对象，可以直接使用js语法，如果还想使用jq语法，需要转成jq对象
$(this); //转成了jq对象
//也可以在事件中获取任何标签的jq对象，通过css选择器语法
$('body'); //body的jq对象
})
jq常用的操作 官方API
//首先获得jq对象
let $title = $('.title');
//1.操作文本
$title.text(); //获得文本内容
$title.html(); //获得标签内容
$title.val(); //获得表单内容
//2.样式操作
//设置样式
$title.css('css中的属性名','css中的属性值'); //单一样式设置
$title.css({
'属性1':'值1',
//....
'属性n':'值n'
}); //一次设置多个样式
$title.css("css中的属性名",function () {
//后面的值可以通过函数返回值获得，好处是可以加入逻辑
});
//3.类名 给一个标签加入提前设置好属性的类型，可以一次性加入设置好的一套样式
//添加类型
$title.addClass("类名");
//删除类名
$title.removeClass("类名");
//切换类名 就是点击一下添加，点击第二下删除
$title.toggleClass("类名");
//4.属性
//获取属性值
$title.attr("属性名");
//设置属性值
$title.attr("属性名","属性值");
//删除属性值 属性值设为空就是删除
$title.attr("属性名","")
jq的链式操作
//1.快速定位到某一个jq对象
//在jq集合中快速定位某一个: jq对象.eq(索引)
$title.eq(1);
//在jq集合中都具有系统事件，在事件中如何区别每一个jq对象
//每一个jq对象都绑定了同一个事件，我要分辨出这次触发事件是谁触发的，并且执行谁的事件
$title.click(function () {
//通过this 可以找出当前jq对象在jq集合中的索引，就可判断出是谁触发的并且执行什么任务
// let index = $title.index($(this));
let index = $(this).index(); //上面或者这个都能得到索引
console.log(index);
});
//2.通过自身快速定位到亲戚们
//上兄弟 prev
$title.prev();
//上兄弟们 prevAll
$title.prevAll();
//下兄弟 next
$title.next();
//下兄弟们 nextAll
$title.nextAll();
//兄弟们 siblings
$title.siblings();
//孩子们 children
$title.children();
//父级标签 parent
$title.parent();
//所有直系上级标签 parents
$title.parents();
//3.动态生成页面结构
//生成标签
let $table = $('<table></table>');
// 为标签添加css样式
$table.css({
color:'red',
border:'1px solid green'
});
//获取目标标签
let $tag = $('.tag');
$tag.append($table); //加入到目标标签子标签的最后面(父子关系)
$tag.prepend($table); //加入到目标标签子标签的最前面(父子关系)
$tag.before($table); //在目标标签前面加标签(兄弟关系)
$tag.after($table); //在目标标签后面加标签(兄弟关系)
jq操作文档
//1.快速定位到某一个jq对象
//在jq集合中快速定位某一个: jq对象.eq(索引)
$title.eq(1);
//在jq集合中都具有系统事件，在事件中如何区别每一个jq对象
//每一个jq对象都绑定了同一个事件，我要分辨出这次触发事件是谁触发的，并且执行谁的事件
$title.click(function () {
//通过this 可以找出当前jq对象在jq集合中的索引，就可判断出是谁触发的并且执行什么任务
// let index = $title.index($(this));
let index = $(this).index(); //上面或者这个都能得到索引
console.log(index);
});
//2.通过自身快速定位到亲戚们
//上兄弟 prev
$title.prev();
//上兄弟们 prevAll
$title.prevAll();
//下兄弟 next
$title.next();
//下兄弟们 nextAll
$title.nextAll();
//兄弟们 siblings
$title.siblings();
//孩子们 children
$title.children();
//父级标签 parent
$title.parent();
//所有直系上级标签 parents
$title.parents();
//3.动态生成页面结构
//生成标签
let $table = $('<table></table>');
// 为标签添加css样式
$table.css({
color:'red',
border:'1px solid green'
});
//获取目标标签
let $tag = $('.tag');
$tag.append($table); //加入到目标标签子标签的最后面(父子关系)
$tag.prepend($table); //加入到目标标签子标签的最前面(父子关系)
$tag.before($table); //在目标标签前面加标签(兄弟关系)
$tag.after($table); //在目标标签后面加标签(兄弟关系)
需求：设计一个表格按钮，点击表格按钮，在后面插入指定宽高的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="number" placeholder="插入行">
<input type="number" placeholder="插入列">
<input type="text" placeholder="单元格内容">
<input type="button" value="插入表格">
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
//先为按钮绑定点击事件
$('form').children().eq(3).click(function () {
let $table = $('<table></table>'); //生成一个表格
let $inp = $('input'); //获取input的jq对象
let row = $inp.eq(0).val(); //获取行数
let col = $inp.eq(1).val(); //获取列数
let content = $inp.eq(2).val(); //获取每个单元格的内容
//开始为表格里添加行
for (let r = 0;r < row; r++){
let $row = $('<tr></tr>'); //生成行
$table.append($row); //将行插入到表格里
//为每一行中添加单元格
for (let c = 0; c < col; c++){
let $col = $('<td>'+content+'</td>'); //生成单元格，带内容的
$row.append($col); //将单元格插入到行中
};
};
$('form').after($table); //最后别忘记把表格插入到from表单后面
});
</script>
</html>
完整过程代码