jquery笔记一——小问题+小技巧

1.table行单击选中radio(传说中input[type=radio]比input:radio要快)

<tr class="rowSelect">
    <td>
        <input type="radio" name="addressOptions" id="opt{{:ID}}"
               value="22">
    </td>
    <td style="color:red;">默认</td>
    <td>AA</td>
</tr>

$("tr.rowSelect").click(function () {
    $(this).find("input[type=radio]").prop("checked", true);
});

这里用.prop("checked",true)。而不用.attr("checked","checked")。后者在某些浏览器(chrome)只能点一次，而且点过之后点其他行，不会取消checked。

同checkBox，要用prop不能用attr。attr效果一次性。

2.判断checked是否选中

$("#DefaultFlag").is(":checked")

3.得到radio的值(一般多个radio有相同的name)

$("input[name='addressOptions']:checked").val()

4.获取id值(后面的substring截取字符串)

$(this).attr("id").substring(4)

5.修改button的text

$("#btnA").text("修改地址并返回");

6.cxSelect控件实现地区的多级联动。

赋值时(前两个调用trigger，否则下拉列表不变，可能找不到值)：

if ($("#Province").val() != item.Province) {
    $("#Province").val(item.Province);
    $("#Province").trigger("change");
}
if ($("#City").val() != item.City) {
    $("#City").val(item.City);
    $("#City").trigger("change");
}
$("#Town").val(item.Town);

7.ajax传递Token

• 前台页面有地方声明一个(多个)Token

@Html.AntiForgeryToken()

• 后台action的特性声明[ValidateAntiForgeryToken]
• 前台ajax调用时，在传递的参数里面

$.post("/Controller/Action"
    , {
        id: id,
        __RequestVerificationToken: getToken()
    }
    , function (data) {
    });
 
function getToken() {
    return $("input[name='__RequestVerificationToken']").val();
}

getToken获取页面的所有input的name为__RequestVerificationToken的对象的值(一个到多个)，传递到后台。

※这里小测试：如果页面已有一个地方声明了Token，其他的地方不声明也可以。但至少有一个，也必须传递到服务器，否则ajax操作不会执行。form的submit后面的逻辑是怎样？？

8. 整数/浮点 保留小数位

totalFee.toFixed(2)

9. 对象的父元素 + 删除元素

$(clickTd).parent().parent().remove();

10. 赋值同时调用$(selector).change(function(){}).change()

$( "input" ).change(function() {
    var $input = $( this );
    $( "p" ).html(
        ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b> <br>" +
        ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is( ":checked" ) ) + "</b>";
}).change();        

11. 一行内显示的内容，如果文字太长就隐藏，不要自动换行，也不要自动宽度.

.oneRow {
    display: inline-block;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*width: 120px;*/
    width: 97%;
}

上面的代码是一个样式，不局限于span的样式，也可以作为一个div的样式。

<div class="oneRow">
    <label>
        <input type="checkbox" />
        AAAAAAAA
    </label>
    <span title="DCSDCSDC">DCSDCSDC</span>
    <span style="margin-right:30px"></span>
    <label style="margin-bottom:0;">SDFSDDDD:</label>
    <span title="XXXXXXX">XXXXXXX</span>
    <span style="margin-right:20px"></span>
    <label style="margin-bottom:0;">kkkkkkkk:</label>
    <span title="fffff">FFFFF</span>
</div>
<div class="pull-right">
    <a onclick="alert('hhhhh')" style="font-size:20px;color:gray;"><i class="fa fa-trash-o"></i></a>
</div>
<div class="clearfix"></div>

也可以是一个span内部的文字限制：

<span class="oneRow">FGSFSFSDFSAEFASDFASDFASDFS</span>

12. toggleClass互换class

今天做搜索的时候，隐藏面板加了一个收放的图标。点击隐藏/显示面板，同时修改收放的图标。

收放的图标：<i id="expondIcon" class="fa fa-angle-double-up"></i>。up是，down是

点击隐藏/显示面板，很简单，用toggle就可以了。$("#searchPanel").toggle();

点击切换收放的图标怎么操作呢？

有toggleClass的方法，但是它不是交换两个class，而是一个class有无的切换。

解决思路：这两个class一直是互斥的，在toggleClass的基础上，单独对两个class执行有无的切换。在基本的数据上(有其中一个class)，同时toggleClass这两个的时候，可以实现互换的效果。(一个有另一个无)

$("#expondIcon").toggleClass("fa-angle-double-up").toggleClass("fa-angle-double-down");