入口函数

  /*js加载完成事件*/
  window.onload=function(){
    console.log("页面和资源完全加载完毕");
  }
  /*jQuery的ready函数*/
  $(document).ready(function(){
    console.log("页面dom层渲染完毕---我是完整写法");
  });
  $(function(){
    console.log("页面dom层渲染完毕---我是简写形势");
  });

• onload事件和ready函数的区别执行时机不同 onload需要在页面dom层和页面加载的资源全部都加载完成才会执行 ready函数只需要在dom层渲染完毕就会执行，不关心资源是否加载执行次数不同 onload函数在页面中只有一个有效，如果存在多个，后面的覆盖前面的。 ready函数在页面中可以存在多个，按照顺序依次执行

jQuery对象和DOM对象的转换

jQuery对象是一个由DOM对象组成的伪数组，jQuery转DOM使用数组取值的方式，DOM转jQuery使用jQuery的工厂函数。

  //获取jq对象
  let div=$("div");
  //数组取值的方式获取DOM对象
  let divDom=div[0];
  //get函数获取DOM对象
  let divDom=div.get(0);
  
  //获取DOM对象
  let box=document.getElementById("box");
  //使用jq的工厂函数转换
  /*一般转换来的jq对象，或者自己创建的jq对象取名时，推荐以$开头*/
  let $box=$(box);
  

jQuery选择器（同css的选择器）

jQuery的选择器和CSS1-3的选择器完全一致，但是jQuery选择器在兼容性上更好。 比如css3的选择器在IE8及以下浏览器中不能使用，但是在jq中可以使用。而jq1.7以下的版本是可以使用在IE8中的，所以间接实现了在IE8里使用CSS3的选择器。

基本选择器

• 通配符选择器
• ID选择器
• 类选择器
• 标签选择器
• 交集选择器
• 并集选择器

层级选择器

• 子代选择器(等价于children函数)
• 后代选择器(等价于find函数)

  //使用选择器的方式实现后代选择
  $("div p").css("color","red");
  //使用find函数实现后代选择
  $("div").find("p").css("color","red");
  
  //使用选择器的方式实现子代选择
  $("div>p").css("color","red");
  //使用children函数实现子代选择
  $("div").children("p").css("color","p");

过滤选择器

  //选择所有匹配的li中下标为0的这一个li
  $("li:eq(0)").css("color","red");
  //对应函数为eq函数
  $("li").eq(0).css("color","red");
  //获取所有匹配的li中下标为奇数的li
  $("li:odd").css("color","red");
  //获取所有匹配的li中下标为偶数的li
  $("li:even").css("color","red");

jQuery选择器常用函数

jQuery操作属性

• attr和prop的区别prop在jQuery1.7以后版本中可以使用，attr所有版本中都可以使用在1.7版本以后，推荐使用prop函数来操作属性值为布尔类型的属性，比如checked、selected、readonly等。attr可以操作任意属性（包括自定义属性），prop只能操作原生属性
• attr和prop获取和操作取值时在匹配到元素中只获取第一个元素的对应属性设置是把匹配到的元素全部都设置属性

  //获取属性原生属性---attr和prop结果相同
  console.log($("div").attr("title"));
  console.log($("div").prop("title"));
  //获取属性值和属性名相同的属性
  console.log($("input").attr("checked"));  //选中结果为checked否则undefined
  console.log($("input").prop("checked"));  //选中结果为true否则false
  //获取自定义属性
  console.log($("div").attr("zdy"));    //可以正常取值
  console.log($("div").prop("zdy"));    //结果为undefined
  
  
  //设置原生属性
  $("div").attr("title","attr设置的标题"); //可以设置
  $("div").prop("title","prop设置的标题"); //可以设置
  
  //设置属性名和属性值相同的属性
  $("input").attr("checked",true);    //设置选中
  $("input").attr("checked","checked"); //设置选中，在1.7版本以前只能使用attr设置，推荐使用该方案
  $("input").attr("checked",false);   //设置取消选中
  //在1.7版本以前取消选中
  $("input").removeAttr("checked");   //设置取消选中
  
  $("input").prop("checked",true);    //设置选中
  $("input").prop("checked",false);   //设置取消选中
  
  
  //设置自定义属性
  $("div").attr("zdy2","自定义2");   //可以设置属性
  $("div").prop("zdy2","自定义2");   //设置属性无效
  
  //一次设置多个属性
  $("div").attr({title:"一次多个属性",id:"d1"});  //attr函数内传递对象的方式批量设置属性/prop函数同理

jQuery操作样式

操作行内样式(css)

• css函数的操作和attr函数基本一致，css函数就是直接对标签内的style属性进行设置。
• css函数设置时设置匹配到的所有元素，取值只获取第一个匹配元素的值

  //设置文本颜色
  $("p").css("color","red");
  //设置背景颜色：background-color属性要改写为backgroundColor
  $("p").css("backgroundColor","green");
  //一次设置多个样式
  $("p").css({color:"red",fontSize:"20px"});
  //获取样式的值
  console.log($("p").css("fontSize"));

操作类(class)

• 追加样式

  //追加一个样式
  $("p").addClass("active");
  //追加多个样式，使用空格隔开即可
  $("p").addClass("active hover");

• 移除样式

  $("div").removeClass("active");

• 判断样式

  let flag=$("p").hasClass("active");
  console.log(flag);  //如果p标签有active样式结果为true否则false

• 切换样式

  //如果p标签有active样式则移除该样式，否则追加active样式
  $("p").toogleClass("active");

jQuery操作DOM

创建DOM

使用jQuery的工厂函数可以直接创建出jQuery对象的DOM节点

  let $p=$("<p title="把你鼠标移开~~">我是jq创建的标签</p>");
  //此时$p这个dom对象只存在内存中，页面中不存在该元素
  console.log($p);

添加DOM

• 添加到选中标签的内部结尾 //$p元素追加到box的标签的内部结尾
  $("#box").Append($p);
  //该代码和append等价，只是调用者发生了变化
  //$p.appendTo($("#box"));
• 添加到选中标签的内部开头 //$p元素追加到box标签的内部开头
  $("#box").prepend($p);
  //该代码和prepend等价，只是调用者发生了变化
  //$p.prependTo($("#box"));
• 添加到选中标签的自身前面 $("#box").before($p);
• 添加到选中标签的自身后面 $("#box").after($p);

删除DOM

empty清空元素

  //清空box元素内所有内容，box会保留，返回值是box
  $("#box").empty();

remove删除元素

  //删除box元素，box消失，返回值是box
  //remove删除的元素再次追加回页面，其绑定的事件会消失
  $("#box").remove();

detach删除元素

  //删除box元素，box消失，返回值是box
  //detach删除的元素再次追加回页面，其绑定的时间会跟随回来
  $("#box").detach();

三种删除元素的区别

1. empty只会清空元素内部，remove和detach会把元素一起清除
2. remove删除的元素其绑定的事件会彻底消失，再次追加该元素到页面时，事件也不会回来
3. detach删除的元素其绑定的事件会保留，再次追加该元素到页面时，事件自动绑定

克隆DOM

  //只复制box节点
  let $box=$("#box").clone();
  //复制box节点和其绑定的事件
  let $box2=$("#box").clone(true);
  //复制的节点追加到页面中
  $("#main").append($box);

jQuery操作内容

• 操作文本内容text()
• 操作标签内容html()
• 操作表单元素的值val()

<body>
    <ul>
        <li><b>选项1</b></li>
        <li><b>选项2</b></li>
        <li><b>选项3</b></li>
    </ul>
    <input type="text" value="你好">
    <input type="text" value="我不好">
    <select>
        <option value="1">男</option>
        <option value="2" selected>女</option>
    </select>
</body>

  //text函数取值会把匹配到的所有元素的文本内容合并为一个字符串
  let texts=$("li").text(); //选项1选项2选项3
  //html函数取值只取第一个匹配到的元素的内部的内容，包含标签结构
  let html=$("li").html();  //<b>选项1</b>
  //val函数取值只取第一个匹配到的表单元素的value的值
  let val=$("input").val(); //你好
  let sex=$("select").val();  //获取到当前选中的option的value的值
  
  $("li").text("设置文本");     //所有li标签文本内容都变为设置文本，li原先的b标签也被覆盖掉了
  $("li").html("<i>设置标签</i>");  //所有li标签内容变为斜体设置标签
  $("input").val("val函数设置");    //所有input标签value属性的值都为设置值
  $("select").val("1");       //设置选中value为1的选项
  
  //使用回调函数设置文本内容，设置标签和value属性同理
  $("li").text(function (index,text) {
        console.log(index);//li的下标
        console.log(text);  //当前li标签的原始内容
        //回调函数一定要给返回值，返回的结果就是最终设置的值
        return index+1+text;
    });

• 总结： 1.html函数和val函数取值都只取匹配到的第一个元素的值，text获取所有匹配元素的值 2.设置时都是统一设置，都是覆盖操作 3.html函数可以识别html代码进行格式化 4.html和text函数只对非表单元素有效，val只对表单元素有效 5.button标签设置的按钮操作按钮文字使用text或者html函数 6.input标签设置的按钮操作按钮文字使用val

jQuery操作尺寸

jQuery操作位置

• 获取滚动条高度使用$(window).scrollTop()来获取，设置时应该使用html或body标签来设置

  $("html,body").animate({scrollTo:0},1000);

jQuery事件

事件注册和移除

• 事件名函数方式：只能绑定HTML支持的原生事件
• bind绑定：1.7以前版本的绑定方式，目前最新版也能用，但是不推荐。
• on绑定：1.7以后开始推荐使用的方式 绑定事件代码演示

  //函数名方式绑定
  $("#box").click(function(){
    console.log("函数名方式绑定");
  });
  //bind方式绑定
  $("#box").bind("click",function(){
    console.log("bind方式绑定");
  });
  //on方式绑定
  $("#box").on("click",function(){
    console.log("on方式绑定");
  });
  //on或者bind一次绑定多个事件
  $("#box").on("click mouseover mouserout",function(){
    console.log("一次绑定多个事件");
  });

移除事件代码演示

  //unbind函数移除事件
  $("#box").unbind("click");
  //off函数移除事件
  $("#box").off("click");
  //off或者unbind移除多个事件
  $("#box").off("click mouseout");

主动触发事件

  //通过JS代码来触发box的单击事件
  $("#box").trigger("click");

事件对象

jQuery的事件对象必须通过事件触发的函数传递参数的方式来使用，没有兼容问题

• 常用事件属性如下属性说明screenX和screenY基于屏幕左上角的X轴坐标和Y轴坐标clientX和clientY基于浏览器内容左上角的X轴坐标和Y轴坐标，忽略滚动条pageX和pageY基于页面内容左上角的X轴坐标和Y轴坐标，计算滚动条keyCode键盘码stopPropagation()阻止事件冒泡preventDefault()阻止默认行为return false;阻止事件冒泡和默认行为

jQuery动画

内置动画

• 显示(show)和隐藏(hide)
• 滑入(slideDown)和滑出(slideUp)和切换(slideToggle)
• 淡入(fadeIn)和淡出(fadeOut)和切换(fadeToggle)
• 变化到指定透明度：fadeTo

    /*
        * 内置动画的参数如下：
        * 1：number类型的毫秒数,默认都是400/string类型的单词表示normal普通速度(400),fast(600),slow(200)
        * 2：function类型的回调函数,表示在动画执行完毕自动执行的函数
        * */

        $("#show").click(function () {
            /*控制div显示*/
            $("#main").show("fast");
        });
        $("#hide").click(function () {
            /*控制div隐藏*/
            $("#main").hide("slow");
        });
        $("#sliderUp").click(function () {
            $("#main").slideUp();
        });
        $("#sliderDown").click(function () {
            $("#main").slideDown();
        });
        $("#toggleSlider").click(function () {
            $("#main").slideToggle(5000);
        });
        $("#fadeIn").click(function () {
            $("#main").fadeIn();
        });
        $("#fadeOut").click(function () {
           $("#main").fadeOut();
        });
        $("#toggleFade").click(function (){
            $("#main").fadeToggle(5000);
        });
        $("#fadeTo").click(function () {
            /*
            * fadeTo参数如下：
            * 1.执行时间
            * 2.指定的透明度，可选值0-1之间，0表示完全透明，1表示不透明
            * 3.表示执行效果方式，可选值：swing表示缓动，是默认值。或者是linear表示匀速
            * 4.动画执行完毕的回调函数
            * */
            $("#main").fadeTo(3000,.4,"swing",function () {
                console.log("透明度已经调整到40%");
            });
        });

自定义动画

  /*
    * animate函数参数如下：
    * 1.对象类型：设置要执行动画的css属性[必填]
    * 1.1：jQuery动画不支持transform属性
    * 2.速度:执行动画所需的时间，单位毫秒[必填]
    * 3.执行效果：swing缓速（默认值）,linear匀速
    * 4.回调函数：动画执行完毕后自动调用的函数
    * */
    /*
    * jq动画中设置的属性名要符合DOM对象属性名的设置（驼峰命名）
    * 例如：font-size必须写为：fontSize
    * */                      
    $("#d1").animate({left:"200px",opacity:".3",fontSize:"30px"},3000);

队列动画

• 回调函数方式实现队列动画
• 链式编程方式实现队列动画(推荐使用)

       $("#qu1").click(function () {
           /*使用回调函数来实现动画的队列效果*/
            $("div").animate({left:"200px"},1500,"swing",function () {
                $("div").animate({opacity:0.4},1500,"swing",function () {
                    $("div").animate({fontSize:"50px"},2000,"swing",function () {
                        $("div").animate({top:"200px",height:"400px",width:"400px"},2000);
                    });
                });
            });
       });
       $("#qu2").click(function () {
           /*使用链式编程来实现动画的队列效果*/
           /*
           * delay函数用来控制等待时间，单位毫秒，delay函数也可以用在内置动画中
           * */
            $("div").animate({left:"200px"},1500)
                .animate({opacity: 0.4},1500).delay(3000)
                .animate({fontSize: "50px"},1500)
                .animate({top:"200px",height:"400px",width: "400px"},2000);
       });

等待动画

队列动画已体现效果

停止动画

stop(是否清除队列,是否立即完成当前动画);

  $("#box").stop(true,true);    //清除后续动画效果，当前动画效果立即完成
  $("#box").stop(true,false);   //清除后续动画效果，当前动画效果立即停止,该 效果可省略第二个参数
  $("#box").stop(false,true);   //后续动画会继续执行，当前动画立即完成
  $("#box").stop(false,false);  //后续动画会继续执行，当前动画立即停止，该效果可省略两个参数

jQuery插件

常用插件

1. [jQueryUI] https://jqueryui.com/
2. [bootstrap] https://www.bootcss.com/
3. [easyUI] https://www.jeasyui.net/
4. [layui] https://www.layui.com/
5. [jQuery插件库] https://www.jq22.com/

自定义插件

• 静态方法设置静态方法：$.方法名=function([参数列表])；使用静态方法：$.方法名([实参列表]); (function($){
  //获取指定范围的随机数
  $.getRandom=function (min,max) {
  if(min>max){
  let temp=max;
  max=min;
  min=temp;
  } if(min==max){
  return min;
  }else{
  let r=Math.floor(Math.random()*(max-min+1)+min);
  return r;
  } } })(jQuery);
  console.log($.getRandom(5,25));
• 实例方法设置实例方法：$.fn.方法名=function([参数列表]);使用实例方法：$(selector).方法名([实参列表]);

  (function($){
    //设置某个元素的color属性
    $.fn.changeColor=function (color) {
          this.css("color",color?color:"red");
      }
  })(jQuery);
  //不传参数则设置box的字体颜色为red
  $("#box").changeColor();
  //传递正确的参数则设置box的字体颜色为指定颜色
  $("box").changeColor("#FFF");//设置box的字体颜色为白色

jQuery经典案例

无缝轮播

• 页面代码

<div class="main">
    <div class="banner-list">
        <div class="banner-item"><a href=""><img src="images/ad-1.png" alt=""></a></div>
        <div class="banner-item"><a href=""><img src="images/ad-2.png" alt=""></a></div>
        <div class="banner-item"><a href=""><img src="images/ad-3.png" alt=""></a></div>
    </div>
    <div class="banner-opt">
        <span class="left"><</span>
        <span class="right">></span>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

• 样式代码

*{
    padding: 0;
    margin: 0;
}
.main{
    height: 300px;
    width: 380px;
    position: relative;
    margin: 100px auto;
    overflow: hidden;
}
.banner-list{
    position: absolute;
    left: 0;
    top: 0;
}
.banner-list div{
  float: left;
}
.banner-opt span{
    display: none;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    background-color: #ccc;
    color: #fff;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    cursor: pointer;
}
.banner-opt span.left{
    left: 0;
}
.banner-opt span.right{
    right: 0;
}
.main:hover .banner-opt span{
    display: block;
}
.banner-opt ul{
    list-style: none;
    width: 45px;
    height: 25px;
    position: absolute;
    left: 50%;
    margin-left: -22px;
    bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.banner-opt ul li{
    height: 10px;
    width: 10px;
    background-color: #ccc;
    border-radius: 50%;
}
.banner-opt ul li.active{
    background-color: #5cb85c;
    border: 2px solid #fff;
}

• 效果代码

/*初始化轮播图默认选中下标*/
let index=0;
/*初始化计时器*/
let inter;
$(function(){
    /*无缝轮播*/
    /*1.复制首项内容*/
    let $itemFirst=$(".banner-item").eq(0).clone(true);
    /*2.追加到末尾*/
    $(".banner-list").append($itemFirst);
    /*3.更新轮播box的宽度:banner-item的宽度*banner-item的个数*/
    let listWidth=$(".banner-item").length*$(".banner-item").width();
    $(".banner-list").width(listWidth);
    /*下一张按钮*/
    $(".right").click(next);
    /*上一张按钮*/
    $(".left").click(prev);
    /*鼠标进入则停止轮播,移出则继续轮播*/
    $(".banner-list").mouseover(stopMove).mouseout(autoMove);
    /*页面加载则自动轮播*/
    autoMove();
});
/*切换下一张*/
function next() {
    index++;
    if(index===$(".banner-item").length){
        index=1;
        $(".banner-list").css("left",0);
    }
    moveItem(index);
}
/*切换上一张*/
function prev(){
    index--;
    if(index===-1){
        index=$(".banner-item").length-2;
        $(".banner-list").css("left",($(".banner-item").length-1)*$(".banner-item").width()*-1);
    }
    moveItem(index);
}
/*移动轮播图*/
function moveItem(i) {
    $(".banner-list").stop().animate({"left":-i*$(".banner-item").width()},500);
    /*轮播指示点设置*/
    if(i==$(".banner-item").length-1){
        $("li").eq(0).addClass("active").siblings().removeClass("active");
    }else{
        $("li").eq(i).addClass("active").siblings().removeClass("active");
    }
}
/*自动轮播*/
function autoMove() {
    inter=setInterval(next,1500);
}
/*停止自动轮播*/
function stopMove() {
    clearInterval(inter);
}