简单总结一下获取元素的一些方法，

可以通过jq选择器获取可以通过关系节点获取.

1.基本选择器

        符号                           说明

        $(‘#demo’)                 选择 id 为 demo 的元素

        $(‘.demo’)                  选择 class 为 demo 的所有元素

        $(‘div’)                       选择所有 div 标签元素

        $(‘.arr.arr-left’)           选择同时具有 arr 和 arr-left 类名的元素 

        $(‘*‘)                          选择所有标签元素

 2.层次选择器

符号           说明

空格           后代选择器

 >               子代选择器

+                紧邻选择器

~                所有兄弟选择器

3.属性选择器 

符号                                 说明

$(‘a[href]’)                        具有 href 属性的 a 标签

$(‘a[href=’baidu’]’)            href 属性为’baidu’的 a 标签

$(‘a[href!=’baidu’]’)           href 属性不为’baidu’的 a 标签,包括不具有 href 属性的 a 标签

$(‘a[href^=’www’]’)           href 属性以’www’开头的 a 标签

$(‘a[href$=’cn’]’)               href 属性以’cn’结尾的 a 标签

$(‘a[href*=’i’]’)                   href 属性包含’i’的 a 标签

$(‘a[href][title=’内容’]’)       具有 href 属性且 title 属性为’内容’的 a 标签

 例：

        html代码

    <a href="">空标签</a>
    <a href="www.baidu.com">百度</a>
    <a href="www.qq.com">腾讯qq</a>
    <a href="www.taobao.cn">淘宝</a>
    <a href="www.intern.com">inter</a>
    <a href="www.baidu.com" title="百度一下">百度一下</a>
    <a href="cesi.com" title='测试'>测试一下</a>

        js代码

console.log($(`a[href]`)); //获取a标签  带有href属性的
console.log($("a[href ='www.baidu.com']")) //获取a标签 并且href=www.baidu.com
console.log($("a[href !='www.baidu.com']")) //获取a标签  href 属性不等于www.baidu.com;
console.log($("a[href ^='w']")) //获取a标签  href属性为www开头
console.log($('a[href $="cn"]')) //获取a标签 href属性以cn结束
console.log($('a[href *="."]')) //获取a标签  href属性含有.;
console.log($('a[href="www.baidu.com"][title ="测试"]')) //获取a标签 同时具有的属性;

4.筛选选择器

 符号                 说明(index 从 0 开始)

:eq(index)          匹配一个给定索引值的元素

:gt(index)           匹配所有大于给定索引值的元素

:lt(index)            匹配所有小于给定索引值的元素

:odd                   匹配所有索引值为奇数的元素

:even                 匹配所有索引值为偶数的元素

:first                   获取匹配的第一个元素

:last                   获取匹配的最后一个元素 -->

例：

        html代码

    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

         js代码

    console.log($('li'))
    console.log($('li:eq(0)')) //获取指定索引 的元素
    console.log($('li:gt(2)')); // 获取比索引大的元素
    console.log($('li:lt(3)')); //获取比索引值小的元素
    console.log($('li:odd')); //获取索引值为奇数的元素 ,代表偶数行
    console.log($("li:even")) //获取索引值为偶数的元素,代表奇数行
    console.log($("li:first")) //获取元素 第一个
    console.log($("li:last")) //获取元素的最后一个;

 筛选关系节点：

eq(index)    获取当前 jQ 数组中下标为 index 的 jQ 对象

find(selector)    获取 后代 满足条件的

children(selector)   返回 满足条件的直系的子元素

parent() 返回 jQ 直系父节点

parends(selector)

prev 返回 jQ 对象上一个兄弟节点

prevAll  返回 jQ 对象的前面所有的兄弟节点

next 返回 jQ 对象下一个兄弟节点

nextAll  返回 jQ 对象后面所有的兄弟节点

siblings 返回当前 jQ 对象所有的兄弟节点

例：

        html代码

    <ul>
        <li>1</li>
        <li class='li2'>2</li>
        <li class="li3">3</li>
        <li class='li4'>4</li>
        <li>5</li>
    </ul>

    <div class="box" style="width: 100px;height:100px">
        <div class="box1">
            <p class="p">我是p标签</p>
            <p>我是p标签下的p标签</p>
        </div>
        <p>我是p标签</p>
    </div>

 

        js代码

console.log($('li'));
console.log($('li').eq(0));//获取索引为0 的元素

console.log($('.box').find('p').eq(0)); //获取后代选择的元素

console.log($('.box').children()) //获取直系子元素;
console.log($('.box').children('p')) //获取满足条件直系子元素;

console.log($('.p').parent()); //获取直系的父元素
console.log($('.p').parents())//获取所有祖先
console.log($('.p').parents('div')) //获取满足条件的祖先;

console.log($('.li3').prev()) //获取上一个元素
console.log($('.li3').next())//获取下一个元素

console.log($('.li3').prevAll())
console.log($('.li3').nextAll())

console.log($('.li3').siblings()) //获取所有兄弟元素

 表单选择器

        html代码

   <form action="">
       <input type="text" name="" id="" value="请输入姓名">
        <input type="password" name="" id="" placeholder="请输入密码">
        <input type="radio" name="sex" id="" checked >男
        <input type="radio" name="sex" id="" checked>女
        
        <p><input type="checkbox" name="" id="" checked> 篮球</p>
        <p><input type="checkbox" name="" id="" checked> 足球</p>
        <p><input type="checkbox" name="" id="" checked> 羽毛球</p>
        <p><input type="checkbox" name="" id="" >  乒乓球</p>
        <select name="" id="">
            <option value="">河南</option>
            <option value="">北京</option>
            <option value="">河北</option>
        </select>
    </form>

        js代码

    console.log($(":input")) //通过:  获取表单元素
    console.log($(':text')) //通过: 获取表单元素type 类型为text;
    console.log($(":password")) //通过 : 获取表单元素type类型为password;

    console.log($(':radio:checked')) //通过: 获取表单类型为radio 然后: 获取checked的元素

    console.log($(':checkbox:checked')) //获取 选中的元素;