electron开发记录:调用jquery,bootstrap并对其一些用法的总结

Posted multiangle

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了electron开发记录:调用jquery,bootstrap并对其一些用法的总结相关的知识,希望对你有一定的参考价值。


本文主要分两个部分,分别是在electron中调用jquery和bootstrap的方法以及为什么要这么调用,以及对jquery一些用法的总结。


electron中调用jquery及bootstrap的方法

jquery作为一个js库,能够很大程度上的简化对页面中元素的控制。而bootstrap作为css库,能够方便的写出好看的界面。调用bootstrap需要先调用jquery。在调用bootstrap的时候,我一开始是按照网页中调用bootstrap的方法来的,也就是照着bootstrap官网上的方法:

<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

首先调用bootstrap的css库,再调用jquery,再调用bootstrap的js文件。看起来没问题对不对?但是在实际运行的时候,报错了:Uncaught Error: Bootstrap's javascript requires jQuery。但是我明明是先引入的jQuery再引入bootstrap的呀?

再查了查资料,哦,原来是electron 的 Renderer 端因为注入了 Node 环境,存在全局函数 require,导致jquery 内部环境判断出现问题。对应的解决方法是,在你引入jQuery之前添加这段代码

window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;

这样,就可以用nodeRequire来使用node模块,又能使用jQUery了

另外还有一种方法,先用npm安装好bootstrap和jquery,然后使用require来调用(如果无法安装,则加上–global参数)

window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');
require('../node_modules/bootstrap/dist/js/bootstrap.min.js');

然后将html页面改成

<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script>
    window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');
    require('../node_modules/bootstrap/dist/js/bootstrap.min.js');
</script>

再运行,报错信息就消失了。


jquery的一些用法总结

选中当前对象

是使用jquery的时候,有时候会需要选中当前的对象。有个例子,我点击一个按钮,那么我如果相对这个按钮进行操作,肯定首先是要选中这个按钮。关于如何选中当前组件,很多地方都说使用

$("button").click(()=>
    var btn = $(this) ;
)

就可以了,但是我这里好像不行,原因不明。后来我查了查,发现改成

$("button").click((e)=>
    var btn = e.target ;
)

这样就行了,此时btn代表了你点击的对象。如果是要jquery对象,那就稍微改一下,var btn = $(e.target);即可。

修改属性(attr)值

什么是属性值?就是出现在div或者其他块中的内容。举个例子,

<div id="hehe" class="hahaha">23333</div>

那么这个div块就有一个名叫id的属性,值为hehe,以及名叫class的属性,值为hahaha。那么当该div块被选中并且被转化为jquery对象以后,能够使用.attr函数来查询和修改块的属性值。

var btn = $("#id") ;
btn.attr("class") ; // 查询属性class的值。
btn.attr("class","heiheihei") // 将属性class的值改为heiheihei

修改value值

类似的,jquery对象还可以使用.val来控制value属性的值。即下面两行的功能等价

$("div").val() ;
$("div").attr("value") ;

下面两行的功能也等价

$("div").val("2333") ;
$("div").attr("value","2333") ;

修改text值

使用.text()能够获得div块中间的文本内容。比如说下面这个

<div id="hehe" class="hahaha">23333</div>

那么$(“div”).text()返回的内容就是’23333’了。

以上是关于electron开发记录:调用jquery,bootstrap并对其一些用法的总结的主要内容,如果未能解决你的问题,请参考以下文章

vue+electron开发踩坑记录

electron开发记录:electron中组件的一些用法

electron开发记录:electron中组件的一些用法

Electron框架下,如何使用jquery

electron调用摄像头直播

electron开发记录:应用基本框架解析