JQuery从入门到精通
1.JQuery查找元素
例：将表格的单元格中件数和重量差异不为0的数据标红
代码如下：
<style>
.notice{
color: red;
}
.right{
color: green;
}
</style>
<table class="table table-bordered" id="wms-list">
<tr>
<td colspan="12" class="type_title">库存清单</td>
</tr>
<tr id="wms-title">
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">存货名称</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">等级</label></td>
<td colspan="2" class="item-label" width="20%"><label class="control-label" style="white-space:nowrap;">入库单号</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">系统件数（袋）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">盘点件数（袋）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">件数差异（袋）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">包装规格</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">系统重量（公斤）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">盘点重量（公斤）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">重量差异（公斤）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">差异说明</label></td>
</tr>
<?php foreach ($dataProvider->getModels() as $k => $detail){ ?>
<tr class="data-row">
<td colspan="1" style="display: none;"><input type="hidden" name="WmsCheckDetail[id][]" value="<?= $detail->id ?>"></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->common_producer_herb_info_name ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->common_producer_herb_grade_info_name ?></td>
<td colspan="2" align="center" style="white-space:nowrap;"><?= Html::a($detail->wms_herb_in_sheet_number, ['wms-product-in-sheet/view', 'id' => $detail->wms_herb_in_sheet_id]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->wms_check_detail_system_package_num ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_check_package_num[]')->textInput(['type' => 'number', 'step' => '1', 'min' => '0', 'style'=>'text-align:center;', 'disabled' =>true, 'value'=>$detail->wms_check_detail_check_package_num]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;>"><?= $detail->wms_check_detail_diff_package_num ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_spec_name[]')->textInput(['type' => 'text', 'style'=>'text-align:center;', 'disabled' =>true, 'value'=>$detail->wms_check_detail_spec_name]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= \common\models\Base::weightBcdiv($detail->wms_check_detail_system_weight) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_check_weight[]')->textInput(['type' => 'number', 'step' => '0.001', 'min' => '0', 'style'=>'text-align:center;', 'disabled' =>true,'value'=>\common\models\Base::weightBcdiv($detail->wms_check_detail_check_weight)]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= \common\models\Base::weightBcdiv($detail->wms_check_detail_diff_weight) ?></td>
<td colspan="1"><?= $form->field($detail, 'wms_check_detail_diff_note[]')->textInput(['type' => 'text', 'disabled' =>true, 'value'=>$detail->wms_check_detail_diff_note]) ?></td>
</tr>
<?php } ?>
</table>
JQuery的代码如下：
$(function() {
$.each($(".data-row"), function(k, v) {
var diff_package_num = Number($(v).find("td").eq(6).text()).toFixed(0)
if(diff_package_num != 0){
$("tr.data-row").find("td").eq(6).addClass("notice");
}
});
$.each($(".data-row"), function(k, v) {
var diff_weight = Number($(v).find("td").eq(10).text()).toFixed(2);
if(diff_weight != 0){
$("tr.data-row").find("td").eq(10).addClass("notice");
}
});
});
4.JQuery的事件
例：使用JQuery的键盘keyup事件和change事件结合实现输入框的双向数据绑定
表格如下：
<table class="table table-bordered" id="wms-list">
<tr>
<td colspan="12" class="type_title">库存清单</td>
</tr>
<tr id="wms-title">
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">存货名称</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">等级</label></td>
<td colspan="2" class="item-label" width="20%"><label class="control-label" style="white-space:nowrap;">入库单号</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">系统件数（袋）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">盘点件数（袋）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">件数差异（袋）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">包装规格</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">系统重量（公斤）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">盘点重量（公斤）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">重量差异（公斤）</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">差异说明</label></td>
</tr>
<?php foreach ($dataProvider->getModels() as $k => $detail){ ?>
<tr >
<td colspan="1" style="display: none;"><input type="hidden" name="WmsCheckDetail[id][]" value="<?= $detail->id ?>"></td>
<td colspan="1" style="display: none;"><input type="hidden" name="WmsCheckDetail[wms_check_detail_system_package_num][]" value="<?= $detail->wms_check_detail_system_package_num ?>"></td>
<td colspan="1" style="display: none;"><input type="hidden" name="WmsCheckDetail[wms_check_detail_system_weight][]" value="<?= \common\models\Base::weightBcdiv($detail->wms_check_detail_system_weight) ?>"></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->common_producer_herb_info_name ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->common_producer_herb_grade_info_name ?></td>
<td colspan="2" align="center" style="white-space:nowrap;"><?= Html::a($detail->wms_herb_in_sheet_number, ['wms-product-in-sheet/view', 'id' => $detail->wms_herb_in_sheet_id]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->wms_check_detail_system_package_num ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_check_package_num[]')->textInput(['type' => 'number', 'step' => '1', 'min' => '0', 'align'=>'center', 'value'=>$detail->wms_check_detail_check_package_num]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->wms_check_detail_diff_package_num ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_spec_name[]')->textInput(['type' => 'text', 'value'=>$detail->wms_check_detail_spec_name]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= \common\models\Base::weightBcdiv($detail->wms_check_detail_system_weight) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_check_weight[]')->textInput(['type' => 'number', 'step' => '0.001', 'min' => '0','value'=>\common\models\Base::weightBcdiv($detail->wms_check_detail_check_weight)]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= \common\models\Base::weightBcdiv($detail->wms_check_detail_diff_weight) ?></td>
<td colspan="1" align="left"><?= $form->field($detail, 'wms_check_detail_diff_note[]')->textInput(['type' => 'text', 'value'=>$detail->wms_check_detail_diff_note]) ?></td>
</tr>
<?php } ?>
</table>
JQuery的代码如下：
$("input").change(function(){
var name = $(this).attr("name");
var value = $(this).val();
if(name == "WmsCheckDetail[wms_check_detail_check_package_num][]"){
var system_value = $(this).parent("div").parent("td").parent("tr").find("td").eq(1).find(":hidden").val();
var diff_value = Number(system_value) - Number(value);
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).text(diff_value);
if (diff_value != 0){
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).addClass("notice");
}else {
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).removeClass("notice");
}
}
if(name == "WmsCheckDetail[wms_check_detail_check_weight][]"){
var system_value = $(this).parent("div").parent("td").parent("tr").find("td").eq(2).find(":hidden").val();
var diff_value = (Number(system_value) - Number(value)).toFixed(2);
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).text(diff_value);
if (!diff_value == 0){
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).addClass("notice");
}else {
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).removeClass("notice");
}
}
});
$("input").keyup(function(){
var name = $(this).attr("name");
var value = $(this).val();
if(name == "WmsCheckDetail[wms_check_detail_check_package_num][]"){
var system_value = $(this).parent("div").parent("td").parent("tr").find("td").eq(1).find(":hidden").val();
var diff_value = Number(system_value) - Number(value);
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).text(diff_value);
if (diff_value != 0){
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).addClass("notice");
}else {
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).removeClass("notice");
}
}
if(name == "WmsCheckDetail[wms_check_detail_check_weight][]"){
var system_value = $(this).parent("div").parent("td").parent("tr").find("td").eq(2).find(":hidden").val();
var diff_value = (Number(system_value) - Number(value)).toFixed(2);
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).text(diff_value);
if (!diff_value == 0){
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).addClass("notice");
}else {
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).removeClass("notice");
}
}
});
jQuery过滤元素，自动拼接元素，选择元素
例如：
<div class="content g-clearfix" data-article-content="">
<p>
【天地网讯】</p><p></p><p><a href="https://www.zyctd.com/jh126.html" target="_blank">丹参</a>，受去年货源产出量增多影响，市场可供量处于充足状态，近期行情呈疲软运行走势，现市场地产<a href="https://www.zyctd.com/jiage/xq126.html" target="_blank">丹参价格</a>统货在9-10元之间，质量次的货源售价在6-7元之间；山东产药厂货售价在10-11元之间，能切片的货售价在12元，条货售价在15-18元之间。</p><p><br></p><p></p><style> @media screen and (max-width:750px) {
[data-article-content] video {
width:100% !important;
height:auto !important;
padding-bottom: 2rem;
}
} </style>
<p></p>
<p class="detail-anounce">声明：本文是中药材天地网原创资讯，享有著作权及相关知识产权，未经本网协议授权，任何媒体、网站、个人不得转载、链接或其他方式进行发布；经本网协议授权的转载或引用，必须注明“来源：中药材天地网（www.zyctd.com）”。违者本网将依法追究法律责任。</p>
</div>
需求：去除所有p标签的内容，但是去除版权信息和样式信息，然后进行拼接
注意：不能使用jQuery的each函数，因为each函数是异步运行的
//使用jQuery选择器提取及过滤元素，去除html标签及样式标签
let news_content_text = $("div.content").find("p").not($(".detail-anounce")[0]).map(function(){
return util.decodeUTF8($(this).html()).replace(/<[^>]+>/g, "");
}).get().join("");
JQuery从入门到精通的更多相关文章
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...
- ASP.NET MVC4入门到精通系列目录汇总
序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,We ...
- 7、ASP.NET MVC入门到精通——第一个ASP.NET MVC程序
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 开发流程 新建Controller 创建Action 根据Action创建View 在Action获取数据并生产ActionResult传递 ...
- 10、ASP.NET MVC入门到精通——Model(模型)和验证
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 模型就是处理业务,想要保存.创建.更新.删除的对象. 注解(通过特性实现) DisplayName Required StringLengt ...
- 11、ASP.NET MVC入门到精通——AspnetMVC分页
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 说起分页,这基本上是我们Web开发中遇见得最多的场景,没有之一,可即便如此,要做出比较优雅的分页还是需要技巧的.这里我先说一种ASP.NET ...
- 14、ASP.NET MVC入门到精通——Ajax
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Unobtrusive Ajax使用方式(非入侵式) 非入侵式,通俗来讲:就是将嵌入在Html中的JavaScript全部取出来,放在单独的 ...
- 20、ASP.NET MVC入门到精通——WebAPI
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 微软有了Webservice和WCF,为什么还要有WebAPI? 用过WCF的人应该都清楚,面对那一大堆复杂的配置文件,有时候一出问题,真的 ...
- 21、ASP.NET MVC入门到精通——ASP.NET MVC4优化
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 删除无用的视图引擎 默认情况下,ASP.NET MVCE同时支持WebForm和Razor引擎,而我们通常在同一个项目中只用到了一种视图引擎 ...
随机推荐
- 一加将在欧洲推出第一款商用 5G 手机
远在太平洋中部的夏威夷群岛,高通举办了骁龙峰会. 峰会的惯例,各行业的合作伙伴都被邀请上台演讲.中国企业里,去年来的是小米雷军,而今年刚开场,一加手机 CEO 刘作虎就现身了. 与以往一样,张老板身着 ...
- MySQL（十一）视图及存储过程
一.视图 视图是虚拟的表,它只包含使用时动态检索数据的查询. 1.使用视图的好处 ①重用SQL语句: ②简化复杂的SQL操作(可以方便的重用它而不必知道它的基本查询细节): ③使用表的组成部分而不是整 ...
- NB-IoT协议及其PSM
物联网技术发展趋势是LPWAN,其中尤其以NB-IoT和eMTC最为代表.NB-IoT和eMTC各有优劣,使用场景互有不同. 低功耗可以说是物联网技术的核心,本着关注低功耗的方向,适当了解NB IoT ...
- 浅析单点登录，以及不同二级域名下的SSO实现
一家公司有多个产品线,就可能要有多个子域名,下头以baidu域名为例,a.baidu.com, b.baidu.com.com 是顶级域名,baidu 就是一个二级域名,a和b就是子域名. 当用户在a ...
- Redis详解（七）------ AOF 持久化
上一篇文章我们介绍了Redis的RDB持久化,RDB 持久化存在一个缺点是一定时间内做一次备份,如果redis意外down掉的话,就会丢失最后一次快照后的所有修改(数据有丢失).对于数据完整性要求很严 ...
- BZOJ4985 评分 二分答案、DP
传送门 题意:自己去看 答案满足单调性,所以考虑二分答案. 二分答案很好想,但是check并不是很好想. 考虑DP:设$f_i$表示队列中第$i$个人的分数$\geq \, mid$的代价,最开始$N ...
- Android开发——ListView使用技巧总结（二）
0. 前言 Android中的ListView是用的比较多的控件之一,在上一篇Android开发--ListView使用技巧总结(一)中对ListView的ViewHolder机制.优化卡顿方式以及 ...
- [数据可视化之一]Pandas单变量画图
Pandas单变量画图 Bar Chat Line Chart Area Chart Histogram df.plot.bar() df.plot.line() df.plot.area() df. ...
- GATT服务搜索流程（一）
GATT的规范阅读起来还是比较简答, 但是这样的规范在代码上是如何实现的呢?下面就分析一下bluedroid 协议栈关于GATT的代码流程. BLE的设备都是在SMP之后进行ATT的流程的交互.从代码 ...
- C#编程：从控制台读取数字的两种方式
有时需要从控制台输入数字,就用到前面介绍的内容,数据转换,如:int num=int.Pares(Console.ReadLine()); int num=Convert.ToInt32(Consol ...