【完结】JQ-从0到1-总结

阶段一

01-jq的基本使用

两种页面加载完毕后执行js代码。

1.
$('document').ready(function(){});

2.
$(function(){});

02-$的解释

$是jq的别称即另外的名字，两者可以互相代替，因为都被系统识别为同一个东西。

03-$对象和dom对象

1.dom获取元素的方式:document.querySelector('元素')；

2.$获取是把dom元素进行包装的jq对象。

3.$对象只能使用jq的方法，dom对象使用原生的js属性和方法。

除此之外，$和dom可以相互转换，接着看。

04-$和dom的相互转换

假设页面上有一个div盒子

1.dom转换为$

var div1=document.querySelector('div');

$('div1')

2.$转化为dom

$('div');

第一种：$('div')[0];

第二种：$('div').get(0);

有时候获取了dom或者jq，为了使用获取的对象的另一个对象的属性和方法则需要转换。

05-基本选择器和层级选择器

jq的选择器跟css一样。分为基本选择器和层级选择器

基本选择器分为：id选择器#、通配符选择器*、类选择器.、标签选择器div、交集选择器diva、并集选择器div,a。

层级选择器分为：后代选择器ul>li、ul li。

注意：层级选择器的第一种只获取到儿子辈分，第二种则获取到子子孙孙。

06-隐式迭代

假设有四个div。把四个div的背景颜色设置为粉色，可通过下面的代码。

$('div').css('backgroundcolor','pink');

观察上面代码，一行代码即可使四个div的背景颜色属性的值更改为粉色，如果用dom的方法来实现的话，则需要通过for循环遍历操作，其实jq能实现一行代码操作是因为它在背后搞小动作帮我们遍历好了。

07-筛选选择器和筛选方法

选择器除了基本选择器和层级选择器还有筛选选择器。

常见的有:first、:last、eq(index)

筛选方法有parent(亲爸爸)、children(填亲儿子)、find(填子子孙孙)、siblings(填兄弟)、eq（index）

注意：筛选方法是方法！且索引号从0开始！

练习：

首先把下面的代码复制到vsc上面，根据我的要求写出代码并核对。

例一：
<div class:"yeye">
    <div class:"erzi">
        <div calss:"sunzi">
        </div>
    </div>
</div>

要求：1.用jq找出sunzi，2.再此基础上找出erzi，3.接着找出yeye

答案代码（不唯一）：

$('.sunzi');
$('.sunzi').parent();
$('sunzi').parent().parent();


例二：
<div>
    <P>我是屁</P>
    <div>
        <div></div>
        <p>我也是个p</p>        
    </div>
</div>

要求用两种方法从外往内获取我也是个屁

答案代码（不唯一）：
$('div div p');
$('div').children().eq(2).children().eq(2);

注意：eq的索引号index都是从0开始。

08-下拉菜单

前言:由于大家都有css样式和html标签基础，大家直接复制我下面的css和html代码。然后根据我的要求完成代码。

--------------------------------html---------------------------------------------------
ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>