jQuery对象和DOM对象
jQuery本质:通过$把DOM元素进行了包装,产生的对象是伪数组形式
<div></div>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
//1.原生
var myDiv = document.querySelector('div');
console.log(myDiv)
//2.jQuery对象只能使用jQuery方法
$('div');//$('div')是一个jQuery对象
console.dir( $('div'));
</script>
DOM对象与jQuery对象之间是可以相互转换的,例如:
<div></div>
<script>
var mydiv = document.querySelector('div');
/* jQuery 转换成DOM对象 */
console.log($(mydiv));
</script>
jQuery选择器
$("div").css('属性','值')
隐式迭代
遍历内部DOM元素(伪数组形式储存)的过程就叫做隐式迭代 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环 简化我们的操作,方便我们调用
<div>11</div>
<div>22</div>
<div>33</div>
<div>44</div>
<script>
$("div").css('background','red');
//所有的div的背景都会变成红色
</script>
jQuery筛选选择器
用ul和li举例
-
$('li:first') 获取第一个li元素 -
$('li:last')获取最后一个元素 -
$('li:eq(2)')获取到li元素中,选择索引号为2的元素,索引号index从0开始 -
$('li:odd')获取到li元素中,选择索引号为奇数的元素 -
$("li:even")获取li元素中,选择所有为偶数的元素 -
$('li').parent(); 找查父级 -
$('ul').children('li')相当于$('ul>li'),最近一级(亲儿子) -
$('ul').find('li') 相当于$('ul li')后代选择器 -
$('.first').siblings('li')找查兄弟节点,不包括本身 -
$('.first').nextAll()找查当前元素之后所有的同辈元素 -
$('.last').prevAll()找查当前元素之前的所有的同辈元素 -
$('div').hasClass("protected")检查当前元素是否含有某个特定的类,如果有返回true -
$('li').eq(2) 相当于$('li:eq(2)')