jQuery 梁桐老师笔记 - 选择器

This 是DOM对象
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配给定的属性不是某个特定值的元素
[attribute^=value]匹配给定的属性是以某些值开始的元素
[attribute$=value]匹配给定的属性是以某些值结尾的元素
[attribute*=value]匹配给定的属性包含某些元素

$("div[title='test']")
$("div[title!='test']")
$("div[title^='test']")
$("div[title$='est']")
$("div[id][title='test']")

子元素

 子元素使用前提，表达式前面必须是元素，例如 $("div:nth-child(2)")
    如果元素上添加条件，必须使用空格，例如 $("div[class='one'] :nth-child(2)"
       $("div.one") 所有的div 自己的class为one (自己)
   $("div .one") 所有的div中后代元素，class为one （孩子）

表单过滤

所有的表单元素 <input>/<select>/<textarea> / <button>
input type="text"

表单对象属性过滤
获取多选框里选中的个数

    $(document).ready(function(){
        $("#btn1").click(function(){
            $("[name=newsletter]:checked").length
        })
    }）

获取下拉框中选中的内容

$(document).ready(function(){
 $("btn1").click(function(){
     // 获得选中标签<option value="">text</option>
     $(":selected").each(function(){
         // val()获得option时，如果没有value值，将获得text值；html () 获得标签体的内容
         $("#selectedDivID").append($(this).html());
     })
 })
})

选择器案例

    $(document).ready(function(){
    var $allLi = $("li:gt(4):not(:last)")
    $allLi.hide()
    // 点击显示
    $("span").click(function(){
        $allLi.show()
        $allLi.toggle()//toggle是切换
        // 判断是否隐藏，如果隐藏，则show;如果show, 则隐藏
        if($allLi.is(":hidden")){
            $allLi.show();
            $(this).html("hidetheitems")
        } else {
            $allLi.hide();
            $(this).html("showtheitems")
        }
    }）