<返回更多

jQuery知识整理

2021-11-12    codercyh的开发日记
加入收藏

入口函数

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

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的选择器。

基本选择器

层级选择器

  //使用选择器的方式实现后代选择
  $("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选择器常用函数

函数名

说明

children(selector)

等价于子代选择器,如果不给参数(等价于给*)表示获取所有子代

find(selector)

等价于后代选择器,不给参数如上

eq(index)

在得到的一组元素中匹配下标为index的那一个

siblings(selector)

查找除了自己以外的兄弟节点,不给参数则找所有。

next(selector)

查找下一个兄弟节点,如果给定了参数,下一个节点不符合参数要求则不会选中,一般使用时不给参数

prev(selector)

查找上一个兄弟节点,如果给定了参数,上一个节点不符合参数要求则不会选中,一般使用时不给参数

parent()

获取父级节点

parents(selector)

获取所有的父级节点中符合给定的参数要求的第一个这一层级

jQuery操作属性

  //获取属性原生属性---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)

  //设置文本颜色
  $("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

删除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操作内容

<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;
    });

jQuery操作尺寸

函数名

描述

备注

height()

获取/设置元素的高度

给参数(数值,不带单位,默认px)则设置,否则获取。

width()

获取/设置元素的宽度

给参数则设置否则获取,得到的是内容的宽度,不包括内外边距和边框

innerHeight()

获取元素的高度

包含内边距的高度

innerWidth()

获取元素的宽度

包含内边距的宽度

outerHeight()

获取元素的高度

包含内边距和边框的高度

outerWidth()

获取元素的宽度

包含内边距和边框的宽度

outerHeight(true)

获取元素的高度

包含了外边距、边框和内边距的高度

outerWidth(true)

获取元素的宽度

包含了外边距、边框和内边距的宽度

jQuery操作位置

函数名

描述

备注

scrollTop()

获取滚动条滚动的高度

一般使用$(window).scrollTop()获取网页滚动条

scrollLeft()

获取滚动条向右滚动的距离

目前一般不使用

offset()

获取元素距离文档顶部的位置

返回值如下:{top:100,left:200}

postion()

获取定位元素距离有定位的父级元素的位置 如果所有父级都没有定位,则返回距离浏览器内容左上角的顶点

返回值如下:{top:200,left:100}

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

jQuery事件

事件注册和移除

  //函数名方式绑定
  $("#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的事件对象必须通过事件触发的函数传递参数的方式来使用,没有兼容问题

jQuery动画

内置动画

    /*
        * 内置动画的参数如下:
        * 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. [jQueryUIhttps://jqueryui.com/
  2. [bootstraphttps://www.bootcss.com/
  3. [easyUIhttps://www.jeasyui.NET/
  4. [layuihttps://www.layui.com/
  5. [jQuery插件库https://www.jq22.com/

自定义插件

  (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);
}
声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>