前言：内容基本是参考博客笔记，偶尔会加些个人补充，仅作为复习巩固用途。如有错误，请指出，谢谢。
提示：后续更深理解在补充

前序、使用过程出现的问题

注意：发现问题解决问题比学习新知识更重要

一、jQuery WeUI入门

参考：jQuery WeUI地址

1、简单介绍

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue，你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。

jQuery WeUI 提供了总共30+ 个非常实用的组件：列表，表单，卡片，对话框，下拉刷新等。

2、自定义组件效果01

3、html文件摘录部分，css、js依赖参见说明即可，验证码生成以及点击更换需要自定义js

<div class="weui-cells weui-cells_form"><!--商铺名称--><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">商铺名称</label></div><div class="weui-cell__bd"><input id="shop-name" class="weui-input" type="text" placeholder="商铺名称"></div></div><!--商铺分类--><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">商铺分类</label></div><div class="weui-cell__bd"><select id="shop-category" style="width: 90%"></select></div></div><!--所属区域--><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">所属区域</label></div><div class="weui-cell__bd" ><select id="area" style="width: 90%"></select></div></div><!--详细地址--><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">详细地址</label></div><div class="weui-cell__bd"><input id="shop-addr" class="weui-input" type="text" placeholder="详细地址"></div></div><!--联系电话--><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">联系电话</label></div><div class="weui-cell__bd"><input id="shop-phone" class="weui-input" type="text" placeholder="联系电话"></div></div><!--缩略图--><div class="weui-cell"><div class="weui-uploader"><div class="weui-uploader__hd"><p class="weui-uploader__title">缩略图</p></div><div class="weui-uploader__bd"><input id="shop-img" type="file" accept="image/*" multiple=""><!--<div class="weui-uploader__input-box"><input id="uploaderInput" itemid="shopImg" class="weui-uploader__input" type="file" accept="image/*" multiple=""></div>--></div></div></div><!--店铺简介--><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">店铺简介</label></div><div class="weui-cell__bd"><input id="shop-desc" class="weui-input" type="text" placeholder="店铺简介"></div></div><!--验证码--><div class="weui-cell weui-cell_vcode "><div class="weui-cell__hd "><label class="weui-label">验证码</label></div><div class="weui-cell__hd "><input class="weui-input" type="text" id="j-kaptcha" placeholder="请输入验证码"></div><div class="weui-cell__bd " ><img class="weui-vcode-img" id="kaptcha" onclick="changeVerifyCode()" src="/Kaptcha"></div><div class="weui-cell__ft " ><button class="weui-vcode-btn" onclick="changeVerifyCode()">点击更换验证码</button></div></div><!--取消与确定按钮--><div class="button_sp_area" style="text-align: center;"><div class="weui-flex" ><div class="weui-flex__item"><button class="weui-btn  weui-btn_warn" style="width: 90%">返回</button></div><div class="weui-flex__item"><button id="submit" class="weui-btn weui-btn_primary" style="width: 90%">提交</button></div></div></div>
</div>

jQuery WeUI学习笔记1相关推荐

jQuery插件开发学习笔记
今天想了解一下jQuery的插件开发,于是google了一下,列在前面的两篇文章都很不错,jQuery插件开发全解析更是将插件开发的方方面面细致入微的进行了讲解,并提供了PDF进行下载.笔者今天详细 ...
JQuery课堂学习笔记
版权声明:本文为博主原创文章,未经博主允许不得转载.更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/ ...
jQuery api学习笔记
jQuery事件各种事件类似点击事件 <html><head> <title>index.jsp</title><script type=&qu ...
jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
jQuery 基础学习笔记
1. jQuery 的执行时间: $(document).ready(function(){--- jQuery functions go here ----// 保证当文档对象加载完成后,进行元素事 ...
Jquery ajax 学习笔记
本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...
jquery datatables 学习笔记
最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables. 功能是很强大,但是网上的例子比较少.在经过一段时间的努力可算是搞出来了. 官网地址:http: ...
jQuery基础学习笔记(下)
8.jQuery的扩展与noConflict 1.jQuery扩展 <script src="../../jquery-2.1.3.min.js"></scrip ...
jQuery基础学习笔记(中)
5.CSS操作及jQuery的盒子模型 1.jQuery CSS方法 <div></div> css.css .style1{width: 100px;height: 100p ...

jQuery WeUI学习笔记1