jQuery的选择器+实例

返回目录

jQuery的冒号选择器

表单  :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden :selected :checked 
基本   :first :last :not :even :odd :eq :gt :lt :header :animated  
内容   :contains :empty :has :parent  
可见性  :hidden :visible

jQuery对象转DOM对象 即$("选择器")[0] 语法现象

参考

返回目录

jQuery中和中和样式相关一些工具方法

1. jQuery对象.addClass("DrugsActive"), 为节点增加class="xxx" 属性
1.1. jQuery对象.removeClass("DrugsActive")

2. jQuery对象.css("width", "20%"); //直接为jquery对象修改css样式

jQuery判断显示与隐藏涉及show()方法, css()方法

switch ($("#divSearchBy" + divId).css("display")) {
        case "none":
            $("#divSearchBy" + divId).show();
            $("#divSearchBy" + divId).css("display", "block");

jQuery show()方法的逆方法 .hide()

jquery获取节点属性的值 attr( )方法

var vid = "#" + $(this).attr("id");

.removeAttr("readonly")

$("#txtUserName,#txtContact,#txtTelephone,#txtEmail").attr("readonly", "readonly");

jQuery Input 方括号选择器

 $("input[name='" + roleRecords[i].MenuID + "']").attr("checked", true);

jQuery name正则选择器

var allCheckbox = $("[name$='cbR']");

表示name它的字面值以cbR结尾,其它 label[name*='industry'] 表示包含

jQuery 复合选择器之在范围选择

$("input[id$=cbxSelect]", document.getElementById("ctl00_ContentPlaceHolder1_grvScale"))

选择type=checkbox 同时属性disabled!=true的

$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);

多属性复合选择器

$("input[type='checkbox'][name='" + item.name + "']:checked")

选取器中的OR逻辑

$("#txtUserName,#txtContact,#txtTelephone,#txtEmail").removeAttr("readonly");

选择器相关 选中table中tr的最后一个td

$("#outRegistList tr").find("td:last").each(function(index,item){
    if (item.innerText == "") {
        alert("还有外出未返回不能新增！");
        return;
    }
}) 

事件相关

Table复选框全选及不为空之jquery 实例

$(function () {
    $("#allCheck").bind("click", function () {
        $("[name = $chkItem]:checkbox").attr("checked", $(this).attr("checked"));
    });
})

function beforExport() {
    var flag;
    $("[name = $chkItem]:checkbox").each(function () {
        if ($(this).attr("checked") == true) {
            flag = true;
            return flag;
        }
    });
    if (!flag) {
        alert("至少勾选1项导出凭证");
        return false;
    }
}

table行选中样式控制

$("body").delegate("#tb_2 tr", "click", function () {
    $(this).addClass('tr_color').siblings("tr").removeClass("tr_color");
});

$(".tbl-list>tbody>tr").hover(
    function () { $(this).addClass("tr-hover"); },
    function () { $(this).removeClass("tr-hover"); }
);

each用法

 1 function GetSelectHS(){
 2     var select = $('<div></div>');
 3     $.each(nurser, function (i,item) {
 4                     $("<option></option>")
 5                         .val(item.id)
 6                         .text(item.Name)
 7                         .appendTo(select);
 8     });
 9     return $(select).html();
10 }

第3行nurser是对象集合, i是索引

var YS = {
    2: '2.嗜睡',
    3: '3.意识模糊'
}
function GetSelectYS(){
    var select = $('<div></div>');
    $.each(YS, function (i, item) {
                    $("<option></option>")
                        .val(i)
                        .text(item)
                        .appendTo(select);
    });
    return $(select).html();
}

var allShowTds = $("td[name='row_"+dataIndex+"']");
allShowTds.each(function(){
    //$(this)取得当前jquery对象
});

参考1  参考2

利用next()方法判断最后一个tr节点

//$this是<a>对象
$this.parents('tr').next().length == 0

判断boostrap中哪个Tab页被选中

 $("#search").click(function () {
     $("#myTabs").find("a").each(function () {
         if ($(this).parent().attr("class") === "active") {
             if ($(this).attr("href") === "#table1") {
                 createPuzzleFeeTableFromPortal();
             }
             else {
                 createPuzzleFeeTableFromPortalTab2();
             }
         }
     })
 });

为boostrap中Tab页绑定处理事件

$('#myTabs a').click(function (e) {
    e.preventDefault();
    if ($(this).attr("href") === "#table1" || $(this).parent().attr("class") === "active") {
        $("#tab1FeeType").show();
        $("#tab1FeeType").css("display", "block");
        $("#tab2FeeType").hide();
        $("#tab2FeeType").css("display", "none");
    }
    else {
        $("#tab2FeeType").show();
        $("#tab2FeeType").css("display", "block");
        $("#tab1FeeType").hide();
        $("#tab1FeeType").css("display", "none");
    }
})

jquery选择器中逗号的使用

1. $("p,div,span.menuitem")  相当于or的作用,表示同时选择p标签,div标签,和拥有menuitem样式的span标签元素

2.在指定的某个范围的选择器，即相对选择器

<table id="table1">
    <tr><td>dsds</td><td>dsfdef</td></tr>
    <tr><td>dsds</td><td>dsfdef</td></tr>
    <tr><td>dsds</td><td>dsfdef</td></tr>
    <tr><td>dsds</td><td>dsfdef</td></tr>
    <tr><td>dsds</td><td>dsfdef</td></tr>
</table>
<script type="text/javascript">
    $(function () {
        $("#table1 tr").click(function () {
                $("td", $(this)).css("background", "red"); //相对选择器，选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素，没有涉及到其他行的td元素
            });
        });
</script>

End

end