angular2中使用jQuery

我知道angular2使用jQuery的想法可能看到一点点奇怪很多的你,我们都知道,angular2负责管理我们的视图组件和DOM元素相关的一切,这听起来像一个好主意,用另一个框架做的一个工作角可以轻易做到。

也就是说,为什么会有人想要jQuery和angular2整合?

嗯,有一些情况下,我们仍然要使用jQuery,比如重用一些jQuery代码或组件时,不可能用angular2改写一切,这可能是为什么你正在阅读这篇教程。

现在让我们看看如何做到这一点,其实真的很简单,基本上你要做的就是添加jQuery脚本到您的index.html和组件声明jQuery,下面是一个例子:

import {Component} from ‘angular2/core‘;

declare var jQuery:any;

@Component({
    selector: ‘my-app‘,
    template: `<button onclick="console.log(‘It Worked!!‘)">
                    jQuery Integration Test
               </button>
              `
})

export class AppComponent { 

    ngAfterViewInit() {
        jQuery(‘button‘).click();
    }
}

当你运行你的应用程序时,你会看到它工作的文本!“在你的控制台上。是这么回事!这是一个很短的教程,但我希望它对你有帮助。

时间: 2025-01-02 17:33:14

angular2中使用jQuery的相关文章

Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考我之前写这篇文章:Angular2入门系列教程1-使用

Angular-如何在Angular2中使用jQuery及其插件

搭建好环境后 一:首先在index.html中引用jquery,就像我们以前做的那样 二:然后我们编写我们的app.component.ts import { Component,OnInit} from '@angular/core'; declare var $:any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) e

SharePoint 2013 的Master page 中引入Jquery

SharePoint 2013 的Master page 中引入Jquery 分类: JavaScript SharePoint2013-02-03 22:01 1978人阅读 评论(0) 收藏 举报 design managerjqueryjQueryJQUERYJqueryJQueryMaster pageSharePoint 2013引入 本文讲述如何在SharePoint 2013 的Master page 中引入Jquery. 在SharePoint 2013 的Master page

在JavaScript中重写jQuery对象的方法

jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" value="

分享在MVC3.0中使用jQuery DataTable 插件

前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原因.在项目中我使用jqgrid比较多.但是发现当进行样式调整时jqgrid的样式常常会让美工头疼.而datatable插件却是一个轻量级的jQuery插件.当我通过浏览器查看该js插件rander后的源码.发现只是一个简单的html table,非常简洁.那么在没有特殊要求的情况下使用这个插件,开发

通读cheerio API ——NodeJs中的jquery

通读cheerio API ——NodeJs中的jquery 所谓工欲善其事,必先利其器,所以通读了cheerio的API,顺便翻译了一遍,有些地方因为知道的比较少,不知道什么意思,保留了英文,希望各位不吝告诉我,然后一起把这个翻译完成. ###cheerio 为服务器特别定制的,快速.灵活.实施的jQuery核心实现. ###Introduction 将HTML告诉你的服务器 var cheerio = require('cheerio'), $ = cheerio.load('<h2 cla

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主

在 ASP.NET 中使用 jQuery.load() 方法

今天就让我们看看在 ASP.NET 中使用 jQuery.load() 方法来调用 ASP.NET 的方法,实现无刷新的加载数据. 使用 jQuery 的朋友应该知道可以使用 jQuery.load() 加载静态页面,并可指定要加载的区域,如在"test.html"中有如下内容: <div id="show"> <a href="http://www.jquery001.com/">jQuery001</a>

angular项目中使用jquery的问题

1.使用npm命令往项目中添加jQuery. npm install jquery --save 2.在你想要用jQuery的组件中添加. import * as $ from "jquery"; 3.就可以正常使用了.