jQuery入门

85 阅读1分钟

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举例

  1.      $('li:first') 获取第一个li元素
    
  2.      $('li:last')获取最后一个元素
    
  3.      $('li:eq(2)')获取到li元素中,选择索引号为2的元素,索引号index从0开始
    
  4.      $('li:odd')获取到li元素中,选择索引号为奇数的元素
    
  5.      $("li:even")获取li元素中,选择所有为偶数的元素
    
  6.     $('li').parent(); 找查父级
    
  7.     $('ul').children('li')相当于$('ul>li'),最近一级(亲儿子)
    
  8.     $('ul').find('li') 相当于$('ul li')后代选择器
    
  9.     $('.first').siblings('li')找查兄弟节点,不包括本身
    
  10.     $('.first').nextAll()找查当前元素之后所有的同辈元素
    
  11.     $('.last').prevAll()找查当前元素之前的所有的同辈元素
    
  12.     $('div').hasClass("protected")检查当前元素是否含有某个特定的类,如果有返回true
    
  13.     $('li').eq(2) 相当于$('li:eq(2)')