jquery网站开发（jquery网站项目）

本文目录一览：

• 1、如何使用jQuery UI开发Web程序
• 2、前端开发JS框架之jQuery的基础知识分享
• 3、怎么使用JQuery Mobile开发移动网站
• 4、为什么bootstrap要放弃jQuery，jQuery不适合现代的web开发了吗？

如何使用jQuery UI开发Web程序

jQuery UI开发Web程序步骤：

在百度搜索引擎搜索“jQuery UI”，并且下载。

解压jquery-ui-1.11.4，工程目录如下图所示。

新建HTML文件，引入jquery-ui.min.css、jquery.js、jquery-ui.min.js三个文件。其中jquery-ui.min.css是jQuery UI样式文件，jQuery UI顾名思义依赖jQuery，所以需要引入jQuery库，另外，需要引入jQuery UI本身的Javascript库，这里引入压缩版本以减少文件的体积。

jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

前端开发JS框架之jQuery的基础知识分享

jQuery对象是通过jQuery包装DOM对象后产生的对象

注意：jQuery对象只能使用jQuery里的方法，DOM对象只能使用DOM对象的方法

基本选择器

层级选择器：

基本筛选器：

属性选择器：

表单筛选器：

筛选器方法：

jQuery的一些方法：

注意：对于标签上有的能够看到的属性和自定义属性用attr()方法

对于返回布尔值比如checkbox，radion，option这三个标签是否被选中，用prop方法

事件绑定方式：

注意：DOM定义的事件可以用 .on()方法来绑定事件，但是jQuery定义的事件就不可以

常用事件有：

移除事件：把on改成off，就是移除 .on()绑定的事件

阻止后续事件执行：事件函数中添加 return false; (常用于阻止表单提交等）或者e.preventDefault()

阻止事件冒泡：添加e.stopPropagation()

利用父标签去捕获子标签的事件

推荐阅读：

前端开发框架之jQuery 和 Vue 的选择

前端开发之15个jQuery小技巧分享

前端开发之JQuery入门基础操作

前端开发框架jQuery的优势与基础知识分享

怎么使用JQuery Mobile开发移动网站

方法/步骤

简单的说明一下JQueryMobile. 它是一个很好的跨平台的移动端网站开发框架。 是一个前台的框架。现在要使用这个框架组一个界面，这个界面很简单， 但是麻雀虽小五脏俱全， 然后模板实现， 知识讲解完毕。html要使用HTML5的标准来写， 因为JQueryMobile是基于HTML5的。 书写html5的格式如图，

既然使用JQueryMobile就要有这个框架， 这里可以使用本地引用的方式， 和网上引用， 也叫做CDN引用。就是比较稳定和快速的引用外部文件的一种方式。 这里使用CDN的方式， 这样只要可以上网就可以使用该框架。

在写移动端的网站的时候， 一定要写一个meta的name为viewport的属性， 因为该属性代表着网站页面的自适应。简单的写法为：meta name="viewport" content="width=device-width, initial-scale=1" 代表着网站为驱动设备的宽度。

然后加入框架之后， 写一个简单的界面。 这里面JQueryMobile大量的使用了一个data-的属性， 这里使用最多的事data-role。 代表着他默认的样式规则。 就是提前定义好了很多的样式来供你使用。 常用的page. 代表着页面， listview， 代表着一个列表视图。下面是代码和效果图

稍微说明一下。

data-role="page" 是代表着一个页面可以看做该内容下是一个页面显示的内容

data-role=”header"代表着 页面的页头， 就是页面的最上面显示的内容这里需要注意， 里面要加上子标签内容， 要不然， 就不会居中显示内容了。推荐使用h1.

data-role="footer"代表着页脚的内容。 也是网站的一个说明信息。 或者是一个底部导航菜单。 还有一部分， 就是data-role="content" 是代表着页面内容部分， 主要的内容在这里面显示。

这3个部分构成了一个简单的页面。 所以， 现在可以体验到它的强大， 不用写太多的代码一个简单的框架就好了， 下面继续增加一个listveiw的列表视图。

完成列表视图的代码， 增加一个文章列举表的代码， 这里列表是使用data-role="listview" 来修饰样式。 然后这里只需要加上data-role="listview" 你发现想要的list效果就实现了。 这样我们一个简单的页面效果就实现了。

为什么bootstrap要放弃jQuery，jQuery不适合现代的web开发了吗？

jQuery的成就

jQuery是一个伟大的库，

它解决了dom api兼容的问题，使得dom操作更简便

它支持类似css选择器的方式来选择组件

支持批量的操作数组中的元素，也叫隐式迭代

支持链式操作，可以在一条语句中完成很复杂的逻辑

有易于使用的插件扩展机制

deffered的异步方案比promise更早。

等等。

jquery可以说在dom操作领域做的很棒了，几乎统治了一个时代，甚至影响了w3c，dom api中的querySelector就有jq的影子。

但是，如今使用jq的公司越来越少了，但这并不是说在dom操作领域有更好地库，而是因为mvvm的出现。

mvvm的出现

dom操作是业务无关的逻辑，不应该出现在业务的代码中，虽然使用jq简化了很多，但是代码依然是难以维护和复用的，直到mvvm的出现，把数据和视图的绑定变成了自动化的操作，进而把dom操作从业务代码中移除。业务代码因此变得更加的纯粹，也更容易复用。

技术的发展规律

其实，技术的发展趋势就是追求更高的复用性，更简便的业务代码写法，所以最终都会要求跨平台、都会彻底分离非业务逻辑。

jvm上的语言持续的火了10多年，java长期霸占语言排行榜榜首，很大的原因就是因为jvm的跨平台，这是技术发展的趋势，就像node的libuv平台层、react的vdom、游戏引擎的多端打包等一样，随着各种端和平台越来越多，跨平台几乎是对一个新技术基本的要求。

业务代码应该是纯粹的，任何业务代码都应该独立出去作为可复用资源而存在。比如dom操作的代码很多时候是业务无关的，所以mvvm实现了自动的绑定之后，逐渐的成为主流，jquery不符合这个趋势，所以也逐渐走向没落。

jQuery的没落

jQuery在dom操作领域已经做得很好了，但是它不符合技术发展的一般规律，所以最终肯定是会被取代q的，就像大润发战胜了所有的对手，却在互联网时代被阿里收购一样。只是因为它做事情的方式不是最佳的，对开发效率和代码复用性的追求最终导致了jquery的淘汰。

从jquery帝国一统，到如今mvvm诸雄割据，对效率和代码复用性的要求对技术做出了选择，顺应这个趋势的技术才能长盛不衰。

jQuery战胜了dom操作领域的所有对手，只是输给了时代。

关于jquery网站开发和jquery网站项目的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。