jquery是javascript 下的一款框架，方便我们实现前端页面设计，简化操作流程，其中封装了许多的使用方法，更加容易实现用户与界面的
交互。
首先是安装jquery进入官网
Download the compressed, production jQuery 3.4.1
Download the uncompressed, development jQuery 3.4.1
粘贴到我们的项目文件夹中并使用，使用
<script src="jq/jquery-3.4.1.js"></script>
连接事件，就可以操作了。
1 jq选择器：可以得到jq对象，jq对象就可以的调用jq库中的所有功能。
通过jq选择器得到的对象是存放在数组中的，以列表的形式进行展示的，我们如果想要得到我们想要的对象，
可以通过索引取出。取出后可以对标签进行操作：比如如何获得标签的文本呢内容：
p2 = $(_p2);
console.log(p2.text());
js对象在转为jq对象后就可以使用jq的语法。
操纵页面的三大步骤：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()); });1
获取标签的文本内容，标签内容，表单内容：
$div.text() 文本内容
$div.html() 标签内容
$inp.val() 表单内容
常用操作
1 样式操作
获取标签拿到一个jq对象后就可以对拿到的标签通过.css()获取并修改标签的属性。
获取属性值，这里的this 是属于js对象，如果想要通过this去使用jq语法这时候要先将this转为jq对象$(this)：
$(‘h1‘).click(function () { let $this = $(this); let color = $this .css(‘color‘); let fs = $this.css(‘font-size‘); let ta = $this.css(‘text-align‘); console.log(color, parseInt(fs), ta);
修改设置属性值：
$this.css(‘background-color‘, ‘orange‘); $this.css({ ‘background-color‘: ‘pink‘, ‘border-radius‘: ‘10px‘, ‘width‘: ‘200px‘, });
联式操作：
对象在调用的时候有返回值大部分时候都是他自身，这时候我们就可以通过不停的点出css来形成链式操作完成我们对标签的操作。
<body>
<div class="h1">标题</div>
</body>
<script src="jq/jquery-3.4.1.js"></script>
<script>
$(‘.h1‘).css(‘color‘, ‘green‘).css(‘background‘, ‘red‘).click(function () {
console.log(this);
$(this).text(‘修改标题‘);
});
</script>
操作文档
当多个相同的标签连接后形成数组后可以通过.eq()快速定位到一个jq对象 他是在所在标签进行索引，而不是在全局中去数该标签的个数来查找第几个。
如何找到目标标签周边的其他标签：
上兄弟(们) 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); // 加入到body最后 // $(‘p‘).before($table); // 加入到p之前 // $(‘p‘).after($table); // 加入到p之后
案例：需求：点击表格在表格标签后插入我们指定宽高的表格：
内容：<input type="text"> 行：<input type="text"> 列：<input type="text"> <p>表格</p>
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); })
原文：https://www.cnblogs.com/1624413646hxy/p/11144003.html