前端--阶段笔记（三） jQuery + js进阶

jQuery Day 01

js开发框架 ，仓库

特点：链式编程，隐式迭代
支持插件 有丰富第三方插件

1 引入 script src = XX.js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

2 测试
控制台输入
jQuery.fn.jquery
引入成功会显示当前引入版本

jQuery 入口函数

等DOM结构渲染完毕即可执行sj 代码 ，不必等所有外部资源加载完成。

相当于DOMcontentLoaded

//1 .
$(document).ready(function({
   
$('div').hide();  //此处是页面DOM加载完成的入口
}))

//2.
$(function(){
   
    $('div').hide(); //此处是页面DOM加载完成的入口
})

关于$符号

1 $是jquery的入口符号

2 $ 是jquery的顶级对象
相当于原上js的window

dom对象和jquery对象

用原生js获取过来的对象就是dom对象，jquery方法获取的对象就是jquery对象

jquery 本质是利用$来获取DOM对象包装后产生的对象 ，以伪数组形式存储。

jQuery对象转换成dom对象

1 dom转jquery

​ (1) 直接获取标签,得到的就是jquery对象
​ (2) 已经用原生js获取过来的对象转jQuery对象
​ $(DOM 对象) 例如：$(‘div’)

​ (3) jquery 对象转DOM对象
​ 3.1 $(‘div’)[indexNumber]
​ 3.2 $(‘div’).get(indexNumber)

jQuery 常用API

jQuery基本和层级选择器

$(“选择器”)//里面选择器直接写css选择器即可

例如： $("#id")

层级选择器
子代 $(“ul>li”) , 后代选择器 $(“ul li”)

隐式迭代

遍历内部DOM元素（伪数组存储）叫做隐式迭代。

给所有匹配到的元素进行循环遍历，执行相同方法，不用再写循环，减少工作量方便调用。

筛选选择器

:eq(index)　　　　//匹配index下标的元素
　　　　　　　　:first()　　　　　　//获取第一元素
　　　　　　　　:last()　　　　　　//获取最后一个元素
　　　　　　　　:odd()　　　　　　//获取最后一个元素

筛选方法

注意这里也有.eq()这种写法 把eq当做一种方法来用。

parents(“XXX”) 中间可以指定标签或者类名，精确查找父级。

注意这里加了s。

兄弟节点siblings

    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>我是屁标签</p>
        <div>
            <p>我是p</p>
        </div>
    </div>

// 注意一下都是方法 带括号
        $(function() {
   
            // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
            console.log($(".son").parent());
            // 2. 子
            // (1) 亲儿子 children()  类似子代选择器  ul>li
            // $(".nav").children("p").css("color", "red");
            // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            $(".nav").find("p").css("color", "red");
            // 3. 兄
            $(function() {
   
            // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            // 2. 第n个元素
            var index = 2;
            // (1) 我们可以利用选择器的方式选择
            // $("ul li:eq(2)").css("color", "blue");
            // $("ul li:eq("+index+")").css("color", "blue");
            // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
                //方便该为动态的变量
            // $("ul li").eq(2).css("color", "blue");
            // $("ul li").eq(index).css("color", "blue");
            // 3. 判断是否有某个类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));


        });
            

新浪微博下拉菜单

li 里面可以继续嵌套 ul li

       $(function() {
   
            // 鼠标经过
            $(".nav>li").mouseover(function() {
   
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
   
                $(this).children("ul").hide();
            })
        })

展示案例

链式编程，节约代码量。务必注意是针对哪个对象执行操作。

        $(function() {
   
            // 1. 鼠标经过左侧的小li 
            $("#left li").mouseover(function() {
   
                // 2. 得到当前小li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                // $("#content div").eq(index).show();
                // 4. 让其余的图片（就是其他的兄弟）隐藏起来
                // $("#content div").eq(index).siblings().hide();
                // 链式编程
 			$("#content div").eq(index).show().siblings().hide();

            })
        })

操作css方法

jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式。

1 .参数只写属性名，则返回属性值$(this).css(“color”);
2 .属性名 + 属性值且以逗号分割，这样写才是修改属性内容
3 .参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号。

$("p").css("background-color","yellow");

$("div").css({
   
width:400,
height:400,
backgroundColor:"red"//如果是复合属性必须采用驼峰命名法
})

设置类样式的方法

作用相当于classList，可以操作类样式，注意操作类里面的参数前面不要加点。

//1,tianjia
$("div").click(funtion(){
   
	$(this).addClass("current");
})
//2,shanchu 
$("div").click(funtion(){
   
	$(this).removeClass("current");
})
//3,qiehuan 
$("div").click(funtion(){
   
	$(this).toggleClass("current");//如果有就去掉，没有就添加。
})

tab切换案例

    $(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显示，其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })

addClass与jQuery类操作区别

原生js中的className会覆盖原来所有类名，jQuery类操作只是对指定类进行操作，不影响原先类名。

jQuery显示与隐藏效果

1 .显示语法规范
show([speed],[easing],[fn])
2 关于参数
可以全部省略，无动画直接显示。

上下拉滑动效果

slideDown slideUp slideToggle

事件切换

      $(function() {
   
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
   
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
   
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
   
            //     $(this).children("ul").slideDown(200);
            // }, function() {
   
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
   
                $(this).children("ul").slideToggle();
            });
        })

停止动画排队

去除触发多个动画之后，动画一定要排队执行完毕的现象。

必须写在要停止的动画前面

   $(function() {
   
            $(".nav>li").hover(function() {
   
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })

淡入淡出效果

fadeIn，fadeOut，fadeTo，fadeToggle
返回值:jQueryfadeTo([[speed],opacity,[easing],[fn]])

    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
   
            $("button"