【油猴脚本】00020 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加不可移动到窗口外的功能。Jquery爬虫，JavaScript爬虫HTML+Css+JavaScript编写
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
目录
- 【油猴脚本】00020 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加不可移动到窗口外的功能。把easyui库更换为JqueryUi库，JqueryUi学习性更好。jqueryui的Draggable组件的bug发现以及解决,Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写
- 使用的库：
- 📚一、效果
- 📚二、核心解析
- 📚三、完整源代码，可以直接复制使用
- 📚四、使用此代码的方法：
📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣
【油猴脚本】00020 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加不可移动到窗口外的功能。把easyui库更换为JqueryUi库，JqueryUi学习性更好。jqueryui的Draggable组件的bug发现以及解决,Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写
使用的库：
Bootstrap的Css库CDN:
https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css Jquery库CDN：
https://code.jquery.com/jquery-1.9.1.min.js sheetjs库CDN：
https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js Jquery的库JqueryUi CDN：
https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js 📚一、效果
添加-不可移动到窗口外的功能
📚二、核心解析
💡1.jqueryui库的引入：
// @require https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js💡2.jqueryui的Draggable组件的bug发现以及解决：
原拖拽的handle控件是button,而jqueryui中button不能被当做拖拽组件的handle，因此改变button为div
<div id="draggableArea"class="draggableBtn btn btn-default">拖拽这里移动位置</div>添加拖拽的handle的css鼠标样式
#draggableArea{ cursor:move;}💡3.添加 - 不可移动到窗口外的功能：
添加draggable的参数containment为window
$('.table-card').draggable({ handle:'#draggableArea', containment:"window"})📚三、完整源代码，可以直接复制使用
✍️JavaScript
// ==UserScript==// @name 添加 - 不可移动到窗口外的功能// @namespace http://tampermonkey.net/// @version 2024-09-12// @description 动态渲染表格// @author ZEEKLOG@宝码香车// @match https://developer.mozilla.org/zh-CN/// @match https://www.zhipin.com/web/geek/job?city=100010000// @resource bootstrapCss https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css// @require https://code.jquery.com/jquery-1.9.1.min.js// @require https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js// @require https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js// @grant GM_addStyle// @grant GM_getResourceText// @run-at document-end// ==/UserScript==(function(){'use strict';let tableHtml =` <div> <div> <div> 操作区 </div> <div> <div>拖拽这里移动位置</div> <button>编辑表格</button> <button>获取当前页数据</button> <button>获取更多页数据</button> <button>导出Excel</button> </div> </div> <div> <div> 配置多页参数区 </div> <div> <form> <div> <div> <div> <span><label for="startPageIdx1">开始页</label></span> <input type="text" name="startPageIdx1" placeholder="基础url地址"> </div> </div> <div> <input type="number" name="startPageIdx2" placeholder="页码数字参数"> </div> <div> <input type="text" name="startPageIdx3" value="/" placeholder="若无值，默认是/"> </div> </div> <div> <div> <div> <span><label for="endPageIdx1">结束页</label></span> <input type="text" name="endPageIdx1" placeholder="基础url地址"> </div> </div> <div> <input type="number" name="endPageIdx2" placeholder="页码数字参数"> </div> <div> <input type="text" name="endPageIdx3" value="/" placeholder="若无值，默认是/"> </div> </div> </form> </div> </div> <div> <table> </table> </div> <div> <div> </div> </div> </div> `let cssMore =` #draggableArea{ cursor:move; } .table-card{ position:fixed; left:100px; top:150px; z-index:100; background:#fff; box-shadow: 0px 0px 0 10px #E95C8A; } .modal-body{ max-height:500px; overflow-y: scroll; } .msgWrap{ padding:10px; margin-top:10px; } .msgContent{ background:#000; max-height:100px; overflow-y:scroll; } .loadMsg{ color:#fff; width: fit-content; font-size: 16px; font-family: monospace; clip-path: inset(0 3ch 0 0); animation: loadMsgAni 1s steps(4) infinite; } @keyframes loadMsgAni {to{clip-path: inset(0 -1ch 0 0)}} table thead, tbody tr { display: table; width: 100%; table-layout: fixed; } .table-card tbody{display:block;height:200px; overflow:auto; -webkit-overflow-scrolling: touch; } .table-card tbody::-webkit-scrollbar { display: none; // 隐藏滚动条 } .form-group:last-child{margin-bottom:0;} .btn-primary { color: #fff; background-color: #E95C8A; border-color: #E95C8A; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #c7275b; border-color: #c7275b; } `let bsCss =GM_getResourceText('bootstrapCss')let startPageNum =2//开始页数let endPageNum =4//结束页数，实际获取的是1-4页的数据，第一页本身就存在，指定2-4页即可let isOrderNumber =true//是否显示序号GM_addStyle(bsCss)GM_addStyle(cssMore)$('body').append(tableHtml)$('.table-card').draggable({ handle:'#draggableArea', containment:"window"})// 初始化列constinitCols=(strArr)=>{let addTableHtml =''if(isOrderNumber){//显示序号 addTableHtml =`<thead><tr><td>序号</td>`}else{ addTableHtml =`<thead><tr>`}for(const x of strArr){ addTableHtml +=`<td>${x}</td>`;} addTableHtml +=`</tr></thead>`;if(isOrderNumber){//显示序号 addTableHtml +=`<tbody><tr><td>1</td>`}else{ addTableHtml +='<tbody><tr>'}for(const y of strArr){ addTableHtml +=`<td>默认无值</td>`;} addTableHtml +=`</tr></tbody>`return addTableHtml }//定义表格列let tableColsArr =['公司名称','招聘职位','薪资']//列名称let cssSelectorArr =[]//列的数据提取位置 cssSelectorArr.push('.job-card-wrapper .job-card-right .company-name a') cssSelectorArr.push('.job-card-wrapper .job-card-left .job-title .job-name') cssSelectorArr.push('.job-card-wrapper .job-card-left .salary')let initColHtml =initCols(tableColsArr)// 把动态渲染的表格内容，添加到页面中的table位置$('#test_table').html(initColHtml);//弹出框，编辑表格-列let editTableCols =` <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div> <div> <button type="button" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>编辑表格-列</h4> </div> <form> </form> <div> <button type="button">添加一列</button> <button type="button">关闭</button> <button type="button">保存</button> </div> </div> </div> </div> `//动态渲染列constcolsRender=(optionStr,dataOptionStr,idxOption)=>{if(!dataOptionStr){ dataOptionStr ='无参数，请填写参数，参数是css选择器'}let str =` <div> <div> <div> <div> <div> 第${idxOption}列 </div> </div> <div> <button>删除此列</button> </div> </div> </div> <div> <div> <div> <div> <label for="colName${idxOption}">列的名称:</label> </div> <input type="text" value="${optionStr}"> </div> </div> <div> <div> <div> <label for="colData${idxOption}">数据位置:</label> </div> <input type="text" value="${dataOptionStr}"> </div> </div> </div> </div> `return str;}//动态渲染多列函数constcolsMoreRender=(strArrOpt)=>{let str =''for(const x in strArrOpt){if(cssSelectorArr.length>0){let idxNum =parseInt(x)+1 str +=colsRender(strArrOpt[x],cssSelectorArr[x],idxNum)}else{ str +=colsRender(strArrOpt[x])}}return str;}//点击-编辑表格后的弹出窗口的渲染多列let colsMoreStr =colsMoreRender(tableColsArr)$('body').append(editTableCols);//弹出窗口添加到页面中$('#editTableColsModal .modal-body').html(colsMoreStr)//获取修改的数据constgetFormData=()=>{let strArr =[]$('#editTableColsModal .modal-body .form-group input').each(function(idx,eleItm){let formName ='';//获取列名称let cssName =''//获cssSelector名称let $eleItem =$(eleItm);if(idx%2===0){ formName = $eleItem.val();//获取列名称 strArr.push(formName)}else{ cssName = $eleItem.val()//获cssSelector名称 cssSelectorArr.push(cssName)}})return strArr;}// 点击-编辑列按钮$("#editCols").click(function(){$('#editTableColsModal').show()//打开弹出窗口})// 点击-关闭按钮$(".colseBtn").click(function(){$('#editTableColsModal').hide()//关闭弹出窗口})// 点击-保存按钮$("#btn_submit").click(function(){$('#editTableColsModal').hide()//关闭弹出窗口let renderColHtml =initCols(getFormData())//渲染到页面上$('#test_table').html(renderColHtml);})//表格-删除列事件函数$(".modal-body").on('click','.delCol',function(){if($('#editTableColsModal .panel').length ===1){alert('至少保留一个列')returnfalse;}$(this).parents('.panel').remove();})//添加一列的点击事件$('#btn_addCol').on('click',function(){let panelLength =$('#editTableColsModal .panel').length;let currentPanelNum = panelLength +1;$('.modal-body').append(colsRender('新列请重新命名',null,currentPanelNum))})//点击 - 运行按钮$('#run').click(function(){getData()})//点击-获取数据let dataRange ={}$('#getDataRange').click(function(){$('#dataRangeForm input').each(function(idx,item){ dataRange[item.name]= item.value.replace(/\s+/g,'')})let startPageIdx = dataRange.startPageIdx1 + dataRange.startPageIdx2 +dataRange.startPageIdx3 let endPageIdx = dataRange.endPageIdx1 + dataRange.endPageIdx2 +dataRange.endPageIdx3 startPageNum =parseInt(dataRange.startPageIdx2) endPageNum =parseInt(dataRange.endPageIdx2)run()})// 点击-导出Excel$("#outExcel").click(function(){let obj ={ htmlElementTable:'#test_table', excelSaveName:'获取的数据'}htmlTableToExcel(obj)})let strHtml ='<div></div>'let cssStyle =` #testHtml{ width:100px; background:blue; } `GM_addStyle(cssStyle)$('body').append(strHtml)functiongetHtml(num){msg(`正在获取第${num}页`)let requestUrl = dataRange.startPageIdx1 + num +dataRange.startPageIdx3 $.ajax({ url: requestUrl, timeout:30000,success:function(html){$('#testHtml').append(html)msg(`第${num}页加载完成`)if(num === endPageNum){//最后一次执行完后获取数据getData()}},error:function(er){ console.log('er ',er)},complete:function(co){ console.log('co ',co)}});}functionrun(){msg('开始获取')setInterval(function(){if(startPageNum>endPageNum){returnfalse;}getHtml(startPageNum)//获取页面的html及数据 startPageNum++},10000)}//获取数据的选择器functiongetData(){msg('正在获取全部数据')let eleTotalColArr =[]//总计// 获取数据组成二维数组 cssSelectorArr.forEach(function(item,idx){let eleByColArr =[]//单项$(item).each(function(idex,ite){ eleByColArr.push($(ite).text())}) eleTotalColArr.push(eleByColArr)})//把数据组装成html元素let trs =''//一行单元格let totalLIneNum = eleTotalColArr[0].length;//总行数let fieldNum = eleTotalColArr.length;for(let i=0;i<totalLIneNum;i++){let tds =''if(isOrderNumber){ tds =`<td>${i+1}</td>`}for(let i2 =0;i2<fieldNum;i2++){ tds +=`<td>${eleTotalColArr[i2][i]}</td>`} trs +=`<tr>${tds}</tr>`}//把数据放入表格$('.table-card tbody').html(trs);msg(`全部数据获取完成,共计获取${totalLIneNum}条`)}//提示信息框functionmsg(msgStr){let msgHtml =` <div>${msgStr}•••</div>`let $msgContent =$('.msgWrap .msgContent'); $msgContent.append(msgHtml).scrollTop($msgContent.prop('scrollHeight'))}functionhtmlTableToExcel(objOptions){if(!objOptions){alert("请填写函数调用参数")returnfalse;}let opt = objOptions;// opt.htmlElementTable 需要转化的htmlTable// opt.excelSaveName 导出的表格名称// 1、寻找表格元素let html_table = document.querySelector(`${opt.htmlElementTable}`)// 2、创建新的工作簿const wb =XLSX.utils.book_new()// 3、将表格元素转sheet表格const worksheet =XLSX.utils.table_to_sheet(html_table)// 4、将sheet表添加到工作簿XLSX.utils.book_append_sheet(wb, worksheet,"Sheet1");// 5、保存工作簿XLSX.writeFile(wb,`${opt.excelSaveName}.xlsx`)}// Your code here...})();📚四、使用此代码的方法：
1.浏览器打开https://developer.mozilla.org/zh-CN/
2.把代码复制进油猴脚本，打开运行开关，刷新页面安装教程：👉 https://blog.ZEEKLOG.net/qq_33650655/article/details/142097760使用教程：👉 https://blog.ZEEKLOG.net/qq_33650655/article/details/142183047
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。
更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作
