2：jquery内的选择器

jquery元素的获取

console.log($("#btn"));//通过id获取
console.log($(".btn"));//通过class获取
console.log($("button"));//通过元素获取
console.log($("*"));//获取所有元素
console.log($("button,input"));//通过复合元素获取

1：层次选择器

    $("ul.menu li");//选择父元素以下的所有子元素，包括孙元素
    $("ul.menu>li");//仅选择父元素以下的子元素
    $(".li3+li");//获取当前匹配元素的下一个元素,+代表下一个元素
    $(".li3~li");//获取当前匹配元素之后的所有元素

2：基本选择器

$("ul.menu>li:first");
$("ul.menu>li:last");
$("ul.menu>li:not(.li3)");
$("ul.menu>li:even");//偶数元素获取
$("ul.menu>li:odd");//奇数元素的获取
$("ul.menu>li:eq(3)");//按照索引来获取第四个元素
$("ul.menu>li:gt(1)");//获取大于索引的所有元素
$("ul.menu>li:lt(1)");//获取小于索引的所有元素
$(".header");//获取所有的h标签
$("input:focus");//获取获得焦点的元素
$(":root");//直接获取html

3：内容选择器

$("div:contains('今天')");//包含某个内容的元素
$("div:empty");//直接获取空元素
$("ul:has(.li3)");//获取包含某个元素的父元素
$("div:parent");//匹配的元素必须是父元素

4：根据元素的显示隐藏来匹配元素

$("button visible");//显示
$("button hidden");//隐藏

5：根据元素的属性来匹配元素

$("button[id]");
$("button[id][class]");
$("button[id='btn']");
$("button[id='btn'][class='btn']");
$("button[id!='btn']");
$("button[id!='btn'][class!='btn']");
$("button[id^='b']");//获取的属性以什么开头
$("button[id$='n']");//获取的属性以什么结尾
$("button[id*='t']");//获取的属性包含什么

6：子元素选择器

    $("ul>li:first-child");//匹配的第一个子元素
    console.log($("ul>li:last-child"));;//匹配的最后一个子元素
    $("ul>li:first-of-type");//匹配父元素里面元素的第一个
    console.log($("ul>li:last-of-type"));//匹配父元素里面元素的最后一个
    //first-child last-child如果指定元素标签 找当前标签里面的第一个 
    //如果没写 找所有元素里面的第一个
    $("ul>li:nth-child(1)");//从1开始 获取第几个子元素
    $("ul>li:nth-last-child(1)");//从后往前
    $("ul>li:nth-of-type(2)");//从1开始 按类型获取标签里面的第几个
    $("ul>li:nth-last-of-type(2)")//从后往前
    console.log($("ul>li:only-child"));//匹配的元素必须是父元素里面的唯一一个子元素
    console.log($("ul>p:only-of-type"));//获取唯一的标签

7：表单元素选择器

    $(":input");//匹配所有的input textarea select button等
    $(":text");//获取单行文本框
    $(":password");//获取密码框
    $(":radio");//获取单选按钮
    $(":checkbox");//获取复选择框
    $(":submit");//获取表单提交
    $(":image");//获取图片
    $(":reset");//获取重置按钮
    $(":button");//获取button
    console.log($(":file"));//获取文件路径

8：表单对象属性获取

    console.log($("input:enabled"));//获取不可用的标签
    $("input:disabled");//获取可用的标签
    $("input:checked");//获取checkbox radio 被选择的元素
    console.log($("select option:selected"));//匹配被选择的下拉option

9：混淆选择器

  //版本低 .escapeSelector is not a function
    console.log($(".block").find("."+$.escapeSelector(".box")));