Tampermonkey油猴脚本jquery 常用组件

有勇气的牛排 1731 前端 2021-08-26 21:57:34

1 下载

官网网站：http://www.tampermonkey.net/

个人分享：https://920.lanzous.com/igiWUegi7je（直接把插件拖入浏览器，即可安装，最好升下级）

谷歌商店：[https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo]

(https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)

2 参数说明

@name:脚本的名字
@namespace:可以写自己的域名
@version:版本
@description:功能描述
@author:作者

// ==UserScript==
// @name         所有网站
// @namespace    no
// @version      0.1
// @description  测试
// @author       ty

@require 引入站外资源

# 引入js
// @require      https://cdn.bootcss.com/jquery/2.2.1/jquery.js

@match:匹配的网址

# 匹配所有网站
// @match	*://*/*

3 实例

3.1 添加标签

$("body").append("<button id='topic_info'>查看</button>");

3.2 嵌入网页

$("#test_search").append("<span id='my_computer'>本地 </span>");

$("#my_computer").click(function(){
	$("#test_search div").html("<iframe src='http://127.0.0.1/search' frameborder='0' height='300px'></iframe>");
});

3.3 给标签添加样式 css

$("#topic_info").css({
    //"position":"relative",
    //"left":"50px",
    //"top":"5px",
    "width":"1170px",
    "height":"100px",
    //"border":"1px solid red",
    //"margin":"auto",
    //"color":"red",
    //"z-index":"999"
});

3.4 获取标签内文本

$("#divSubjectName").text();

3.5 文本复制

<div id="demo">这是被复制的内容</div>
<button class="btn">复制</button>

<!--导入-->
<!--<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>-->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script>

<!--复制-->
<script>
    var content = $("#demo").html();
    var clipboard = new Clipboard('.btn', {
        text: function () {
            return content;
        }
    });

    clipboard.on('success', function (e) {
        alert("复制成功");
    });

    clipboard.on('error', function (e) {
        console.log(e);
    });
</script>

3.6 pre标签内文本自动换行

pre {
	white-space: pre-wrap;
	word-wrap: break-word;
}

<h2><a id="1__0"></a>1 下载</h2> 官网网站：<a href="http://www.tampermonkey.net/" target="_blank">http://www.tampermonkey.net/</a> 个人分享：<a href="https://920.lanzous.com/igiWUegi7je" target="_blank">https://920.lanzous.com/igiWUegi7je</a>（直接把插件拖入浏览器，即可安装，最好升下级） 谷歌商店：[https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo] (https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) <h2><a id="2__10"></a>2 参数说明</h2> @name:脚本的名字 @namespace:可以写自己的域名 @version:版本 @description:功能描述 @author:作者 <pre><div class="hljs"><code class="lang-js">// ==UserScript== // @name 所有网站 // @namespace no // @version 0.1 // @description 测试 // @author ty </code></div></pre> @require 引入站外资源 <pre><div class="hljs"><code class="lang-js"># 引入js // @require https://cdn.bootcss.com/jquery/2.2.1/jquery.js </code></div></pre> @match:匹配的网址 <pre><div class="hljs"><code class="lang-js"># 匹配所有网站 // @match *://*/* </code></div></pre> <h2><a id="3__39"></a>3 实例</h2> <h3><a id="31__40"></a>3.1 添加标签</h3> <pre><div class="hljs"><code class="lang-javascript">$("body").append("<button id='topic_info'>查看</button>"); </code></div></pre> <h3><a id="32__45"></a>3.2 嵌入网页</h3> <pre><div class="hljs"><code class="lang-javascript">$("#test_search").append("本地 "); $("#my_computer").click(function(){ $("#test_search div").html("<iframe src='http://127.0.0.1/search' frameborder='0' height='300px'></iframe>"); }); </code></div></pre> <h3><a id="33__css_54"></a>3.3 给标签添加样式 css</h3> <pre><div class="hljs"><code class="lang-javascript">$("#topic_info").css({ //"position":"relative", //"left":"50px", //"top":"5px", "width":"1170px", "height":"100px", //"border":"1px solid red", //"margin":"auto", //"color":"red", //"z-index":"999" }); </code></div></pre> <h3><a id="34___71"></a>3.4 获取标签内文本</h3> <pre><div class="hljs"><code class="lang-javascript">$("#divSubjectName").text(); </code></div></pre> <h3><a id="35__77"></a>3.5 文本复制</h3> <pre><div class="hljs"><code class="lang-html"><div id="demo">这是被复制的内容</div> <button class="btn">复制</button> </code></div></pre> <pre><div class="hljs"><code class="lang-javascript">  <script src="js/jquery.min.js"></script> <script type="text/javascript" src="http://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script>  <script> var content = $("#demo").html(); var clipboard = new Clipboard('.btn', { text: function () { return content; } }); clipboard.on('success', function (e) { alert("复制成功"); }); clipboard.on('error', function (e) { console.log(e); }); </script> </code></div></pre> <h3><a id="36_pre_109"></a>3.6 pre标签内文本自动换行</h3> <pre><div class="hljs"><code class="lang-javascript">pre { white-space: pre-wrap; word-wrap: break-word; } </code></div></pre>