3.1-JQuery初识

太过爱你忘了你带给我的痛 2023-05-28 15:46 16阅读 0赞

## jQuery(jQ) ##

1 jQ是一个js库,封装了大量的特定的集合(函数和方法)

如animate()、css()、show()等

2 使用jQ大大提高开发效率,简化dom操作

常见的js库 jQuery YUI Dojo ExtJs zepto

### 1 基本操作 ###

入口函数 等页面DOM加载完毕再去执行代码 相当于原生js的DOMContentLoaded

$ === jQuery

$ 是顶级对象

//window.onload = function() {} 原生js页面全部东西加载完
    //入口函数 等页面DOM加载完毕再去执行代码 相当于原生js的DOMContentLoaded
    $(document).ready(function() { 
        $(".box").hide(2000);
    });
    $(function() { 
                $(".box").hide(2000);
    });

#### DOM对象 ####

var box = document.querySelector('.box'); //原生js
    console.log(box.innerHTML); 
    var $box = $('.box'); // jQuery对象
    console.log(box);   //返回DOM元素
    
    console.log($box);
    // DOM对象转jQuery对象 $(DOM对象)
    console.log($(box).html());
    // jQuery对象转DOM对象 $("div")[index] 或$('div').get(index)
    console.log($box[0].innerHTML, $box.get(0).innerHTML);

### 2 选择器 ###

$(’\#id’) $(“p”) $(".class") $("\*") $(“div,p”) $(“div.box”)

$(“ul li”) $(“div>p”)

$(function() { 
                console.log($(".demo").html());
                console.log($("ol li")[0].innerHTML);
                // 隐式迭代 编程特点
                $("ol li").css("backgroundColor","red");
                // 筛选选择器
                // :first :last :eq(index) :odd :even
                console.log($('ul li:first').html());
                console.log($("ol li:eq(0)").html());
                console.log($("li:eq(6)").html());
                // :odd 奇数行 :even 偶数行
                $("ul li:odd").css('background','red');
                $("ul li:even").css('background','orange');
            });

### 3 筛选方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>parent()</td> 
   <td>$(“li”).parent()</td> 
  </tr> 
  <tr> 
   <td>children(selector)</td> 
   <td>$(“ul”).children(“li”)</td> 
  </tr> 
  <tr> 
   <td>find(selector)</td> 
   <td>$(“ul”).find(‘p’) 找ul后代p</td> 
  </tr> 
  <tr> 
   <td>siblings(selector)</td> 
   <td>$(“div”).siblings(“li”)</td> 
  </tr> 
  <tr> 
   <td>nextAll()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>prevAll()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>hasClass()</td> 
   <td>$(“div”).hasClass(‘demo’)</td> 
  </tr> 
  <tr> 
   <td>eq(index)</td> 
   <td>$(“li”).eq(2) === $(“li:eq(2)”)</td> 
  </tr> 
 </tbody> 
</table>