jQuery学习-(1)

学习目标：

1.jQuery基本使用
2.jQuery顶级对象
3.jQuery对象和dom对象
4.jQuery和dom对象可以互相转化
5.jQuery隐式迭代
6.jQuery筛选选择器
7.jQuery筛选方法
8.jQuery排他思想
9.淘宝精品服饰展示案例
10.链式编程
11.jQuery操作css方法
12.tab栏切换案例
13.jQuery效果
14.简洁版滑动下拉菜单
15.淡入淡出效果
16.自定义动画
17.设置元素的固有属性

学习内容：

1.jQuery基本使用
1）$（“div”）.hide()立即执行2）$(function(){
$(“div”).hide()
})等待页面加载完毕后才执行jQuery代码

 <script>
        // $('div').hide();
        //等着页面加载完毕后在执行js代码
        // $(document).ready(function(){
        //     $('div').hide();
        // })
        $(function(){
            $('div').hide();
        })
       </script>

2.jQuery顶级对象
1)$是jquery的别称

<script>
        //$是jquery的别称
    //  $(function{
    //     alert(11)
    // })
    jQuery(function(){
        alert(11)
    })
    </script>

3.jQuery对象和dom对象
1）jQuery获取的对象只能使用jQuery的方法，和dom两者不能相互通用。

<script>
        //1.dom对象：用原生js代码获取的对象
        var div=document.querySelector('.div')
        //2.jquery对象：用jquery方法获取来的对象
        $('div');
        $('span')
        //jquery只能实验jquery的方法，两者不能互相通用
    </script>

4.jQuery和dom对象可以互相转化
1)dom对象转化为jQuery对象
2）$(dom对象)就可以调用dom对象方法3）$()获取来的元素是一个伪数组，加上数组下标就可以调用dom对象方法

<script>
    //1.dom对象转换为jquery对象
    //1）我们直接获取视频得到的就是jquery对象
    $('video')
    //2)我们以及使用原生js获取过来的dom对象
    var myvideo=document.querySelector('video')
    $(myvideo).play()
    //jquery里面没有play这个方法
    //2.jquery对象转换为dom对象
    $('video')[0].play()
    $('video').get(0).play()
</script>

5.jQuery隐式迭代

 <script>
        //1.获取四个div元素
         console.log($('div'));
        //2.给四个div设置背景颜色
        $('div').css("background","pink")
        //3.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每个元素添加css属性
    </script>

6.jQuery筛选选择器
1）ul li：first ul中li的第一个元素
2）ul li：eq（2) ul中li下标为2的元素
3）ol li：odd 奇数
4）ol li：even偶数

$(function(){
            $("ul li:first").css("color","pink")
            $("ul li:eq(2)").css("color","pink")
            $("ol li:odd").css("color","pink")
            $("ol li:even").css("color","skyblue")
        })
    </script>

7.jQuery筛选方法
1)parent返回的是最近一级的父亲

 <script>
        $(function(){
            //1.parent返回的是最近一级的父亲
            console.log($(".son").parent);  
        })
    </script>

8.jQuery排他思想
1）隐式迭代，默认给所有按钮都绑定了点击事件
2）$(this).css()给点击当前按钮修改css3）$(this).siblings().css()给当前元素

 <script>
$(function(){
    //1.隐式迭代，给所有按钮都绑定了点击事件
    $("button").click(function(){
        //2.给当前元素变化元素，
        $(this).css("background","pink")
        //3.其余兄弟去掉背景颜色。
        $(this).siblings("button").css("background","")
    })
})
    </script>

9.淘宝精品服饰展示案例
1）鼠标经过左侧导航栏li
2）得到li的索引号，在让右侧盒子对应索引号的图片显示，其余的隐藏

  <script>
        $(function(){
            //1.鼠标经过左侧的li
            $("#left li").mouseover(function(){
                //2.得到当前li的索引号
                var index=$(this).index()
                console.log(index);
                //3.让外卖右侧盒子对应索引号的图片显示出来
                $("#content div").eq(index).show()
                $("#content div").eq(index).siblings().hide()
            })
        })
    </script>

10.链式编程

 <script>
        $(function(){
            $("button").click(function(){
           // $(this).css("color","red").siblings().css("color","")
            //我的颜色位红色，我的兄弟颜色位空
          //  $(this).siblings("color",red)
            //我的兄弟变为红色，我不变色
            $(this).siblings().parent().css('color',"red")
            //我的兄弟的爸爸变色
        })   
     })
    </script>

11.jQuery操作css方法
1）操作css宽度大小等时候可带px可不带px
2）可同时修改多个css值用{}包含，每个属性之间用，连接
3）符合属性必须采用驼峰命名法
4) 如果只写了属性名，则返回属性值。
5）添加类$().addclass()6）删除类$().removeClass()
7）切换类$().toggleClass()

    <script>
        //操作样式之css方法、
        $(function(){
            console.log($("div").css("width"));
           // $("div").css("width",300)
           // $("div").css("width","300px")
          //  $("div").css({
               // width:400,
               // height:400,
              //  backgroundColor:"red"
                //复合属性必须采用驼峰命名法
                //如果只写了属性名，返回属性值

           // })
           //添加类
        //     $("div").click(function(){
        //      $(this).addClass("current")
        //   })
        //   //删除类
        //   $("div").click(function(){
        //  $(this).removeClass("current")
        //  })
        // })
        //3.切换类
        $("div").click(function(){
            $(this).toggleClass("current"); 
        })
    })
            </script>

12.tab栏切换案例
1)点击li当前li添加类，其余兄弟移除类
2）点击的同时获取当前li的索引号
3）让下面的内容模块相应索引号的内容显示，其余隐藏。

<script>
        $(function(){
            //1.点击顶部li，当前li添加current类，其余兄弟移除类
            $(".tab_list li").click(function(){
                $(this).addClass("current").siblings().removeClass("current")
                //2.点击的同时，得到li的索引号
                var index=$(this).index()
                console.log(index);
                //3.让下部的相应索引号item显示，其余隐藏
                $(".tab_con .item").eq(index).show().siblings().hide()
            })
        })
    </script>

13.jQuery效果
1)hide()隐藏可添加动作执行事件，和回调函数
2）toggle（）显示和隐藏来回切换

<script>
        $(function(){
            $("button").eq(1).click(function(){
                $("div").hide(1000,function(){                
                })
            })
            $("button").eq(0).click(function(){
                $("div").show(1000,function(){       
                })
            })
            $("button").eq(2).click(function(){
                $("div").toggle(1000)
            })
            //一般情况都不加参数，直接显示和隐藏就行
        })
    </script>

14.简洁版滑动下拉菜单
1）slideDown向下滑动
2）slideUp向上滑动
3）sliderToggle下滑动切换
4）切换事件$().hover鼠标进入或者离开都会触发，

<script>    
    $(function(){
        // $("button").eq(0).click(function(){
        //     //夏滑动slideDown
        //     $("div").slideDown()
        // })
        // $("button").eq(1).click(function(){
        //     //夏滑动slideUp
        //     $("div").slideUp()
        // }) 
        // $("button").eq(2).click(function(){
        //     //夏滑动slideT
        //     $("div").slideToggle()
        // })
        //事件切换
        // $("button").eq(0).hover(function(){
        //     $("div").slideDown(200)
        // },function(){
        //     $("div").slideUp(200)
        // })
        //2.事件切换hover如果只写一个函数，那么鼠标经过或者离开都会触发这个函数
        $("button").eq(1).hover(function(){
            //stop方法必须写到动画前面
            $("div").stop().slideToggle(200)
        })

    })
    </script>

15.淡入淡出效果
1）淡入fadeIn（）
2）淡出fadaOut（）
3）淡入淡出切换fadaToggle（）
4）透明度修改fadaTo（1000，0.5）时间和透明度

<script>
        $(function(){
            $("button").eq(0).click(function(){
                //淡入fadeIn()
                $("div").fadeIn(1000)
            })
            $("button").eq(1).click(function(){
                //淡入fadeOut()
                $("div").fadeOut(1000)
            })
            $("button").eq(2).click(function(){
                //淡入fadeToggle()
                $("div").fadeToggle(1000)
            })
            $("button").eq(3).click(function(){
                //淡入fadeTo()
                $("div").fadeTo(1000,0.5)
            })
        })
    </script>

16.自定义动画
1）animate（{
css样式修改，
}）

 <script>
        $(function(){
            $("button").click(function(){
                $("div").animate({
                    left:500,
                    top:500,
                    opacity:0.4,
                    width:1000,
                    
                },500);
            })
        })
    </script>

17.设置元素的固有属性
1）$().prop（“属性名”）获取属性值2）$().prop(“属性名”，“属性值”）来修改属性值
3）元素自定义属性，通过attr（）获取
4）数据缓存data（）里面的数据是存放在元素内存中的。
5）这个方法获取data-index h5自定义属性时候，不需要写data，而且返回的是数字。

<script>
$(function(){
    //element.prop（“属性名”）获取属性值
    console.log($("a").prop("href"));
    $("a").prop("title","wasd")
    $("input").change(function(){
        console.log($(this).prop("checked"));
    })
    //2.元素的自定义属性，通过attr（）获取
    console.log($("div").attr("index"));
    $("div").attr("index",4)
    console.log($("div").attr("data-index"));
    //3.数据缓存data（）这个里面的数据是存放在元素内存里面
    $("span").data("uname","andy")
    console.log($("span").data("uname"));
    //这个方法获取data-index h5自定义属性，第一个不要写data- 而且返回的是数字属性
    console.log($("div").data("index"));
})
    </script>

学习时间：

2021.11.4

学习产出：