jQuery
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的链式操作
//由于大部分jq对象方法的返回值都是jq对象本身，所以可以连续点出方法使用 //eg： $title.css('color','red').click(function () { console.log(this); }).text(); //有几个常见返回值不是jq对象本身的：text() height() width()
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>
