ionic3之js(jQuary),css,图片的引入
2018-03-31 19:53
204 查看
一、js文件(以jQuary为例)
相信有很多朋友使用不习惯angularjs,所以想使用已经很熟悉的JQuary。在这里我就给出怎么引入jQuary文件,并使用。
1、把要引入的jQuary文件放到app下的assets目录下。
![](https://img-blog.csdn.net/20180331194120682?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
2、在src下的index.html中引入文件。(注意路径)
![](https://img-blog.csdn.net/20180331102613183?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
3、声明jQuary文件。
(1)在src目录下建一个文件夹(名字随便),新建文件jquery.d.ts,后缀是.d.ts,名字随意
![](https://img-blog.csdn.net/20180331102852971?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
(2)编辑该文件,写入declare var$:any;(注意标点符号都是英文的) 4、这样我们就可以在ts文件中引入并使用了。
9ea8
(1)页面引入(不要忘记最前面的‘///’); 注意:引入这句话一定要放在ts文件内容最顶上,其他位置不起作用)[html] view plain copy///<reference path="../../services/jquery.d.ts"/>
然后我们就可以在对应问页面下的ts文件中的使用jQuary了
![](https://img-blog.csdn.net/20180331103351306?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
还有很重要的一点就是我们在写JQ的时候是不能取到angularjs双向绑定的元素中的额value,所以我们需要这样写。(以点击事件为例)
![](https://img-blog.csdn.net/20180331103556226?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
![](https://img-blog.csdn.net/20180331103649808?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
二、css文件
和js文件一样可以放在src下的assets文件下面。
![](https://img-blog.csdn.net/20180331194434185?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
在src下的index引入
![](https://img-blog.csdn.net/20180331194605589?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
这样就可以发挥作用啦!
三、图片的引入
和css、js文件放的位置是一样一样的,放在src下的assets下面
![](https://img-blog.csdn.net/20180331194751492?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
引入的话,在scss文件中的路径是这样子的。
![](https://img-blog.csdn.net/20180331194834261?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
在html文件中是这样子的。
![](https://img-blog.csdn.net/201803311949333?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NDYxMTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
这里可能就会有人问,为什么我的assets下没有js、css文件夹呢?
傻子呦,当然是我自己建的啊,你也可以啊!
相信有很多朋友使用不习惯angularjs,所以想使用已经很熟悉的JQuary。在这里我就给出怎么引入jQuary文件,并使用。
1、把要引入的jQuary文件放到app下的assets目录下。
2、在src下的index.html中引入文件。(注意路径)
3、声明jQuary文件。
(1)在src目录下建一个文件夹(名字随便),新建文件jquery.d.ts,后缀是.d.ts,名字随意
(2)编辑该文件,写入declare var$:any;(注意标点符号都是英文的) 4、这样我们就可以在ts文件中引入并使用了。
9ea8
(1)页面引入(不要忘记最前面的‘///’); 注意:引入这句话一定要放在ts文件内容最顶上,其他位置不起作用)[html] view plain copy///<reference path="../../services/jquery.d.ts"/>
然后我们就可以在对应问页面下的ts文件中的使用jQuary了
还有很重要的一点就是我们在写JQ的时候是不能取到angularjs双向绑定的元素中的额value,所以我们需要这样写。(以点击事件为例)
二、css文件
和js文件一样可以放在src下的assets文件下面。
在src下的index引入
这样就可以发挥作用啦!
三、图片的引入
和css、js文件放的位置是一样一样的,放在src下的assets下面
引入的话,在scss文件中的路径是这样子的。
在html文件中是这样子的。
这里可能就会有人问,为什么我的assets下没有js、css文件夹呢?
傻子呦,当然是我自己建的啊,你也可以啊!
相关文章推荐
- CI 引入JS,CSS,图片的路径问题
- SSM框架中引入css,js,图片文件的路径问题解决
- JSP中引入项目中的js文件或css文件或图片
- TRSWCMV7模板外部引入js、css和图片地址修改为绝对地址
- 解决/WEB-INF目录下的jsp页面引入webRoot下的Js、css和图片的问题
- 通过struts.xml配置映射后的jsp引入外部css和js的路径问题及css中图片url路径问题
- 经过action跳转后得到的页面中css和js的样式引入不能应用
- 外部css文件背景图片引入路径问题
- 母板页中的引用的图片,JS,css等路径问题
- JS动态引入js,CSS——动态创建script/link/style标签
- spring MVC 跳转js css图片等静态资源无法加载问题
- JS + CSS 图片切换效果
- CSS或JS实现gif动态图片的停止与播放
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- 解决:maven项目无法引入js,css的问题
- 转:CI引入外部js与css
- [Django]静态文件:如何在网页中显示图片,css,js等静态文件
- js引入多个js、css文件
- (ASP.NET MVC4 入门学习笔记)学习自己建项目2----引入css和JS的配置、DBHelper及其他
- ci调用application/views下的css,js,图片资源出现You don't have permission to access CodeIgniter on this server解决