day17--jQuery和Dom关系,jQuery选择器(一)

1、jQuery是DOM、BOM、JavaScript的类库

2、jQuery与Dom转换

        <div id="i1">123</div>
        <script src="jquery-1.12.4.js"></script>
        <script>
            $('#i1')   //查找id为i1的内容
        </script>

转换执行结果如下:

由以上可以得出:

  jquery与Dom的转换为:jQuery对象[0]相当于Dom对象;将Dom对象转换为jQuery方法为,$(Dom对象)

3、jQuery选择器:可以直接找到某个或某类标签

       1. 查找id
                $('#id')
            2. 查找class
                <div class='c1'></div>
                $(".c1")
            3. 查找某个标签
                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>
                
                $('a')   
            4. 组合a
                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>
                
                $('a,.c2,#i10')
                
            5. 层级
                $('#i10 a') 查找i10下面所有的a标签;子子孙孙
                $('#i10>a') 只查找i10下一个层级的a标签;儿子
                
            6. 基本
                :first   $('#i1>a:first')   查找i1儿子中第一个a标签
                :last
                :eq()    $('i10 a:eq(1)')
            7. 属性
                $('[wu]')       查找具有wu属性的所有标签
                $('[wu="123"]') 查找wu属性等于123的标签
                
            
                <input type='text'/>
                <input type='text'/>
                <input type='file'/>
                <input type='password'/>
                
                $("input[type='text']") 先找到input标签,在查找type属性的等于text的标签
                $(':text')   查找属性内容为 text的标签,即查找所有的文本框

原文地址:https://www.cnblogs.com/wuxiaoru/p/12638057.html