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

li:has(a) //包含有a标签的li元素

$('input[name*="id"]:not(:checked)').each(function () {
    unselectIds.push($(this).val());
});
//所有未选中的checkbox框

jQuery中[](中括号)与属性选取器

jQuey [] 内是dom属性, 用=等号链接相应的属性值

$('input[name*="id"]').attr('checked',o.checked);//选择input name元素中包含字符id,并使其置为选中状态

//jquery-1.8.2.js 中括号属性选取器
$("[opentype][class=easysite-mt10]").css("border","1px solid #ff0000")
//读作:选中同时有属性(attr) opentype和class=easysite-mt10的DOM节点

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

参考

返回目录

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

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

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

$("#tblPart1>tbody>tr[id^='q']:odd").addClass("tr-dark");

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 复合选择器之在范围选择(范围由第2个参数设置)

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

第2个参数是dom结构

例2

$("tr[id^='q']", "#tblPart1").each(function () {
    if ($("input:checkbox:checked", this).length == 0) {
        hasNoAnswer = true;
        noAnswerTrId.push($(this).attr("id"));
    }
});

读作: 在id=tblPart1的节点中,查找所有id以q开头的dom元素, 之后使用 $("input:checkbox:checked", this) 在它内部查找checkbox元素,并判断是否被选中(做必须判断)

jQuery 复合选择器之find方法

var value = $('.modal-body').find("input[type='text']").val();//在class="modal-body"的DOM节点内查找

多属性复合选择器

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

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

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

选取器中的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行选中样式控制 (siblings、hover)

$("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"); }
);

$("tr", "#lstBody").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>

tab书签书签样式切换

$(document).ready(function () {
    $(".nei-nav li a").bind("click", function () {
      $(".nei-nav li").each(function () {
        $(this).removeAttr("class");
        //$(this).attr("class", "");
      })
      setActive();
    })
    setActive();
});
function setActive() {
    var curType = $("#curType").val();
    $("#" + curType).attr("class", "active");
}

范围选择器、jquery修改样式CSS相关、each

var topImgUrl = [
  "http://www.ciicsh.com/eportal/uiFramework/commonResource/image/2020082615213661087.jpg",
  "http://www.ciicsh.com/eportal/uiFramework/commonResource/image/2020082615215522690.jpg",
  "http://www.ciicsh.com/eportal/uiFramework/commonResource/image/2020082615220813883.jpg"
]
$(document).ready(function () {
  $(".newsItem .thumbnail").each(function (index, item) {//范围选择器,在class=newsItem下查找class=thumbnail DOM
    // if(index== 1){
    //   //$(this).attr("class", "thumbnail even");
    //   $(this).addClass("even")
    // }
    var data = $("p.hidden-data", $(this)).text();//范围选择器例子
    var gzpp = data.split("|");
    $(".gzpp-local", $(this)).text(gzpp[0]);
    $(".gzpp-position", $(this)).text(gzpp[1]);
    $(".gzpp-company", $(this)).text(gzpp[2]);
    $(".gzpp-other", $(this)).text(gzpp[3]);
  })

  $(".caption-pic").each(function(index,item) {
    $(this).css("background-image", "url(" + topImgUrl[index] + ")");
    $(this).css("background-size", "cover");
        //debugger
        //$(".top-img", $(this)).css("background-image", "url(" + topImgUrl[index] + ")");
        //$(item).css("background-image", "url(" + topImgUrl[index] + ")");
        //$(this).css("background","rgba(0,0,0,0.8)");
        //$(this).css("background", "#fff url(" + topImgUrl[index] + ") no-repeat center center;");
  })
});

$(".zg_rc1 :checkbox") //查找.zg_rc1这个类下的所有复选框,中间有个空格

$(.test :hidden) // 选择class为test元素当中的隐藏子元素

区别

$(.test:hidden) // 选择隐藏的class为test的元素

End

posted @ 2017-04-12 23:03 轴轴阅读(1046) 评论(0) 编辑收藏举报

刷新页面返回顶部

轴轴