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