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从入门到精通的更多相关文章

  1. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  2. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  3. ASP.NET MVC4入门到精通系列目录汇总

    序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,We ...

  4. 7、ASP.NET MVC入门到精通——第一个ASP.NET MVC程序

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 开发流程 新建Controller 创建Action 根据Action创建View 在Action获取数据并生产ActionResult传递 ...

  5. 10、ASP.NET MVC入门到精通——Model(模型)和验证

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 模型就是处理业务,想要保存.创建.更新.删除的对象. 注解(通过特性实现) DisplayName Required StringLengt ...

  6. 11、ASP.NET MVC入门到精通——AspnetMVC分页

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 说起分页,这基本上是我们Web开发中遇见得最多的场景,没有之一,可即便如此,要做出比较优雅的分页还是需要技巧的.这里我先说一种ASP.NET ...

  7. 14、ASP.NET MVC入门到精通——Ajax

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Unobtrusive Ajax使用方式(非入侵式) 非入侵式,通俗来讲:就是将嵌入在Html中的JavaScript全部取出来,放在单独的 ...

  8. 20、ASP.NET MVC入门到精通——WebAPI

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 微软有了Webservice和WCF,为什么还要有WebAPI? 用过WCF的人应该都清楚,面对那一大堆复杂的配置文件,有时候一出问题,真的 ...

  9. 21、ASP.NET MVC入门到精通——ASP.NET MVC4优化

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 删除无用的视图引擎 默认情况下,ASP.NET MVCE同时支持WebForm和Razor引擎,而我们通常在同一个项目中只用到了一种视图引擎 ...

随机推荐

  1. ESP32 I2S

    I2S支持DMA; I2S可以直接利用DAC来输出模拟信号 (GPIO 25 & GPIO 26): 高精度时钟使能参数:   .use_apll = true ESP32配置外设一般都是配置 ...

  2. Mybatis学习总结(二)——Mapper代理开发

    一.概要 1.原始DAO开发中存在的问题:(1)DAO实现方法体中存在很多过程性代码.(2)调用SqlSession的方法(select/insert/update)需要指定Statement的id, ...

  3. 零基础入门到精通:Python大数据与机器学习之Pandas-数据操作

    在这里还是要推荐下我自己建的Python开发学习群:483546416,群里都是学Python开发的,如果你正在学习Python ,小编欢迎你加入,大家都是软件开发党,不定期分享干货(只有Python ...

  4. vba总结用法 及案例图

  5. odoo在底部显示指定字段合计和汇总时显示合计

    1.odoo的tree视图底部显示合计 tree 视图,底部显示指定字段合计数 ,视图中字段定义上在sum,取自sale.view_order_tree 销售订单 tree 视图 <field ...

  6. bash:express:command not found

    重新设置了node_global和node_cache目录后,总是显示command not found 找了几篇博文后,终于解决了这个问题   步骤如下: 1.新建node_global和node_ ...

  7. React之父子组件传递和其它一些要点

    react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度.下面对一些react日常开发中的注意事项进行罗列. React的组件生命周期 r ...

  8. LVM : 快照

    LVM 机制还提供了对 LV 做快照的功能,也就是说可以给文件系统做一个备份,这也是设计 LVM 快照的主要目的.LVM 的快照功能采用写时复制技术(Copy-On-Write,COW),这比传统的备 ...

  9. Centos7 中文乱码

    1. 安装中文库 yum groupinstall "fonts" 2. 检查是否有中文语言包 locale -a 3. 查看当前系统语言环境 locale 解析如下 LANG:当 ...

  10. Centos下SFTP双机高可用环境部署记录

    SFTP(SSH File Transfer Protocol),安全文件传送协议.有时也被称作 Secure File Transfer Protocol 或 SFTP.它和SCP的区别是它允许用户 ...