快捷導(dǎo)航

如何在Angular2中使用jQuery及其插件的方法

更新時(shí)間：2017年02月09日 16:19:55 作者：雨落三竹

本篇文章主要介紹了如何在Angular2中使用jQuery及其插件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

jQuery，讓我們對(duì)dom的操作更加便捷。由于其易用性和可擴(kuò)展性，jQuer也迅速風(fēng)靡全球，各種插件也是目不暇接。

我相信很多人并不能直接遠(yuǎn)離jQuery去做前端，因?yàn)樗糜昧耍覀円郧白龅臇|西大多基于jQuery和它的插件。而且現(xiàn)在Angular2的組件生態(tài)還不是很完善，我們?cè)诰帉?xiě)Angular的時(shí)候也許會(huì)想要用到j(luò)Query。本篇文章就簡(jiǎn)單介紹下在Angular2中使用jQuery

如果你不知道怎么搭建Angular2開(kāi)發(fā)環(huán)境，請(qǐng)參考這篇文章：http://m.fzitv.net/article/94934.htm

環(huán)境搭好只后先跑起來(lái)，然后我們進(jìn)行下面步驟

首先在index.html中引用jquery，就像我們以前做的那樣

然后我們編寫(xiě)我們的app.component.ts

import { Component,OnInit} from '@angular/core';
declare var $:any;
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
 ngOnInit()
 {
  $("#title").html("<p>this is a string from jQuery html setting</p>");
 }
}

首先需要使用declare生命我們的jQuery，使之成為一個(gè)可用的變量，然后，我們需要導(dǎo)入OnInit模塊并實(shí)現(xiàn)，我們編寫(xiě)的jquery代碼就在這里，問(wèn)中展示了我們向id為title的標(biāo)簽替換內(nèi)容，HTML頁(yè)面是這樣的

<div id="title" class="title">
</div>

然后，接下來(lái)的運(yùn)行效果是這樣的

這就意味著我們可以在Angular2中正常使用jQuery了

接下來(lái)做個(gè)簡(jiǎn)單的jQuery插件使用的例子，首先找一個(gè)我們要使用的jQuery插件

首先在index.html 中引用

然后在我們剛才的app.component.ts中的ngOnInit中寫(xiě)入以下初始化插件代碼

 ngOnInit()
 {
  $(".card").faceCursor({}); 
  $("#title").html("<p>this is a string from jQuery html setting</p>");
 }

然后我們編寫(xiě)html

<div id="title" class="title">
</div>
<div class="container">
 <div class="card">
  <img src="../assets/me.jpg" style="width:100%;" alt="me">
 </div>
</div>

css

.card
{
  background: #fff;
  box-shadow: 0.5em 0 1.25em #ccc;
  border-radius: .3em;
  overflow: hidden;
  max-width: 20em;
  height: 450px;
  margin: 0 auto;
  display: block;
}
.title{
  text-align: center;
}
.container
{
  width:100%;
}

這些工作做了之后，我們運(yùn)行下，就可以得到以下效果