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的标签,即查找所有的文本框