nojquery的简单介绍

jquery点击图标来回切换的几种方法（如开关

先给导航块的a标签设置img属性和data-img属性；img属性为未选中图片，data-img为选中图片。第一个按钮的img图片应设置为默认选中的状态。

//点击每个按钮后进行按钮切换图片操作

$(".tab-bar-item").on("click", function () {

//先const clickImg变量为他的data属性（选中图片） ，然后找到img图片的src属性将未选中的图片点击后替换为选中图片

const clickImg = $(this).data("img");

$(this).find("img").attr("src",clickImg);

//找到被点击标签的其他兄弟标签，用each遍历 const noclick为未选中的img图片，将点击标签的其他兄弟标签的img换为未选中图片就可以了

$(this).siblings().each(function(){

const noclickImg= $(this).attr("img")

$(this).find("img").attr("src",noclickImg);

})

}

相关问答

Q1: jquery怎么引用

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的head标签，输入jquery引用代码：

script src=""/script

3、浏览器运行index.html页面，此时发现jquery被成功引用加入了网页。

Q2: AngularJS和jquery，有什么区别？

AngularJS 是Web前端开发中的一个 JavaScript 框架，目前在前端中使用率也是非常高的，也是Web前端开发者以动态形式开发时最喜欢的框架之一。如果你是一个前端开发者希望基于AngularJS启动一个项目，你需要筛选众多的工具。为了减少用AngularJS开发的负担，下面源码时代Web前端培训小编为大家介绍20款最新的工具，主要涉及测试、前端开发、IDE编辑器、文本编辑器、优秀库、模块、扩展、代码生成器、网格工具等等。

1.Karma–是一个简单的javascript测试工具，它允许在多个真正的浏览器执行JavaScript代码..提供了完美的测试环境，允许你在真实的浏览器和设备比如手机和平板电脑上测试应用。

2.Protractor –是一款端对端的测试框架。这个Node.js项目建立在WebDriverJS之上。它在真实浏览器上运行测试，与其交互就如任何正常用户使用一样。

3. Jasmine –这款行为驱动测试框架不依赖于浏览器、DOM或者任何JavaScript框架，因此对于任何Node.项目或者任何JavaScript运行的地方都非常适合。

4. Djangular –这是一款可重用的应用，可以提供更好的AngularJS集成。有了此工具的帮助，你可以为每个应用创建 AngularJS内容。

5. Ment.io –这款工具引入了mention部件和宏控件，并不依赖于jQuery。你可以应用ment.io指令作用于任何元素，并且它允许可选择的文本输入。

6. Angular Kickstart –这款工具加速了AngularJS开发，并伴随可扩展的构建系统，简化了开发过程。

7. AngularFire –用此工具，你可以轻松创建 Angular 应用后台。灵活的API，3种数据绑定方式以及快速开发能力使得开发变得轻松。

8. Mocha.js –这是一款运行在node.js和浏览器上的功能丰富的测试框架。允许异步测试，能灵活准确的报告与映射。

9. SublimeText –对于开发者来说最好的一款文本代码编辑器，使得编写代码简单化。比起其他文本编辑器，许多开发者更喜欢用Sublime Text.

10. Restangular –这款工具简化了常见的GET, POST, DELETE, UPDATES请求，使用更简短的代码。对于任何通过 RESTful API 进行数据操作的 Web 应用都是理想化的工具。

11. Generator Angular –这款工具可以帮助你快速的设置项目的默认结构。它能输出让你快速开始app开发的模板。

12. NG-Inspector –这是一个Chrome 和Safari 浏览器扩展，安装成功后会出现先审查面板中，帮助你开发、调试和深入理解 AngularJS 应用。它使得更容易标识和显示Controllers 和Directives中的scope。

13. Angular Seed –这个一个典型的AngularJS web app开发框架，它可以让你在开发环境快速启动angular app。

14. Code Orchestra –这是一个前端开发工具，它允许你所见即所得方式开发代码。一旦你保存修改了的代码，它使用一个特殊的协议自动的显示出来。

15. Videogular –这是一个针对AngularJS的基于HTML5的视频播放库，它使得在你的app中使用视频或其他多媒体更容易。

16. Webstorm –它是一个智能的代码编辑器，支持JavaScript, Node.js, HTML和CSS等等以及它们对应下一代的继任者。它能工作在所有的先进技术下，对大部分开发者来说，使用它是一个很好的选择。

17. Angular GetText –这是超级简单的翻译工具，你只需输入英文文本，标记它需要翻译，它就会翻译。

18. Angular Deckgrid –这是一个轻量级的表格，它没有自己的展现样式，完全依赖于你定义在CSS中的样式。

19. Angularjs UI –这是一个UI组件集合库，它有很多有用的指令来帮你快速的开发Angular应用。它使用指令来代替组件，如：ui-router, ui-map, and ui-calendar。

20. Mean –它是一个使用MongoDB, Node.js, Express和AngularJS apps的简单而完美的模板。它捆绑和配置了一些模块，如： Mongoose 、Passport。

21. Wijmo –这是新一代HTML5/ JavaScript UI控件。大而全面的前端开发工具包，全面支持Angular 2。

22. VS Code(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器。几乎完美的编辑器。

源码时代：

Q3: 怎么加入jQuery插件

在html中引入jquery插件的方法有以下两种：

1：CDN引入，在head标签中加入下列代码

head 

script src=""/script 

/script 

/head

2：本地引入,这种方法要求本地有jquery.js：

head 

script src="jquery.js"/script 

/script 

/head

jquery可以到其官网下载，官网地址是;

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。推荐使用CDN,许多用户在访问其他站点时，已经从其他加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。同时推荐使用百度CDN，因为其他的比如谷歌和微软的CDN不可用！