前端基础之jquery

前端知识之jQuery

jQuery

2006年1月发布的1.0版本

目前在市场上, 1.x , 2.x, 3.x .

功能的完善在1.x,

2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码

3.x的时候增加es的新特性以及调整核心代码的结构

核心: write less, do more

官网: https://jquery.com/

下载: https://jquery.com/download/

所有版本的jQuery: https://code.jquery.com/

手册

在线手册: https://www.jq22.com/chm/jquery/index.html

离线手册:

获取元素

jQuery提供了大量让开发者获取页面元素的方法.都是通过$()函数来完成的.返回值都是一个jQuery对象,也叫jQuery集合.是一个伪数组对象.

基本
    #id         # id选择符 
  element     # 元素选择符
  .class      # class选择符  
  selector1, selector2, selectorN   # 同时获取多个元素的选择符 

层级
    ancestor descendant  # 包含选择符 
  parent > child       # 父子选择符 
  prev + next          # 下一个兄弟选择符 
  prev ~ siblings      # 兄弟选择符 
基本
  :first               # 从已经获取的元素集合中提取第一个元素
  :even                # 从已经获取的元素集合中提取下标为偶数的元素 
  :odd                 # 从已经获取的元素集合中提取下标为奇数的元素
  :eq(index)           # 从已经获取的元素集合中提取指定下标index对应的元素
  :gt(index)           # 从已经获取的元素集合中提取下标大于index对应的元素
  :last                # 从已经获取的元素集合中提取最后一个元素
  :lt(index)           # 从已经获取的元素集合中提取下标小于index对应的元素
内容
  :has(selector)       # 从已经获取的元素集合中提取拥有指定选择符的元素 
属性
  [attribute=value]    # 获取拥有指定数据attribute,并且置为value的元素 
子元素
  :first-child         # 从已经获取的所有元素中提取他们的第一个子元素
  :last-child          # 从已经获取的所有元素中提取他们的最后一个子元素
  :nth-child           # 从已经获取的所有元素中提取他们的指定下标的子元素

表单对象属性
  :checked             # 提取已经设置了默认值的单选框提取出来

jQuery对象和dom对象

上面$()函数的返回值都是jQuery对象来的.这是一个伪数组 .所以这个对象具有jQuery内置的功能.可以直接调用jQuery提供的方法.但是不能直接操作原来js提供的dom方法.

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<h1 class="title">一段文本</h1>
<script>
    // 使用js的dom操作
    var list = document.getElementsByClassName("title");
    console.log( list );    // HTMLCollection html元素集合
    console.log( list[0] ); // dom对象    <h1 class="title">一段文本</h1>

    // 使用dom操作
    list[0].innerHTML = "修改后的文本";
    list[0].style.backgroundColor = "orange";

    // 使用jQuery的元素操作
    console.log( $(".title") );    // jQuery集合， jQuery.fn.init [h1.title, prevObject: jQuery.fn.init(1)]
    console.log( $(".title")[0] ); // jQuery集合，也可以通过下标里面的dom对象

    // 但是如果要使用jQuery提供的方法操作元素的外观，样式，内容或者事件，必须使用jQuery对象才行。如果是dom对象，只能使用原来js提供的dom方法
    // jQuery操作内容
    $(".title").html("修改的内容");  // 这里的html方法就是jQuery提供的
    // jQuery操作样式
    $(".title").css("background-color","orange");  // 这里的css方法就是jQuery提供的

    // 如果使用jQuery对象调用dom的innerHTML是无法修改内容的
    $(".title").innerHTML = "31行修改的内容"; // 正确的写法是 dom对象.innerHTML = "内容"

    $(".title").style.backgroundColor = "orange"; // 正确的写法是 dom对象.style.样式属性 = "样式值"
</script>
</body>
</html>

总结:
1. jQuery对象打印的时候都会附带jQuery单词,而dom对象打印的时候往往是标签效果.
2. jQuery对象可以直接调用jQuery提供方法和属性,不能直接调用js原生提供的dom方法和属性.
   $("选择符").html()          # 可以修改内容
   $("选择符").innerHTML = ""  # 没有效果!!!
   
   dom对象是无法使用jQuery提供的方法和属性,如果一定要调用,则需要把dom对象转换成jQuery对象才可以使用
   
3. jQuery可以通过下标获取内部的dom对象
   $("li")[0]  ===>   <li>一个文本</li>
   
4. dom对象转换成jQuery对象
   var list = document.getElementsByClassName("list");
   $(list)  =>  jQuery对象

操作内容

$("选择符").html()     # 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素
$("选择符").html(内容)  # 修改内容,如果$()函数获取了多个元素, 则批量修改内容

$("选择符").text()     # 效果同上,但是获取的内容是纯文本,不包含html代码
$("选择符").text(内容)  # 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
    <div class="box">
        <p class="text">第一段文本</p>
        <p class="text">第二段文本</p>
    </div>
<script>
    // 读取html内容
    // console.log( $('.box').html() );
    // // 读取文本内容[去掉了标签内容]
    // console.log( $('.box').text() );
    //
    // console.log( $(".text") );        //
    // console.log( $(".text").html() ); // 只会返回第一个元素的内容

    // // 修改内容[可以写入html文本]
    // $('.text').html("<span>修改内容</span>");
    // // 修改内容[只可以写入纯文本]
    // $('.text').text("<span>修改内容</span>");

    // 修改内容的特殊用法
    // jQuery内部进行操作的时候，都是使用循环来完成的，一般称之为"隐式迭代"
    $(".text").html(function(){
       console.log(this);      // this     表示当前js的dom对象
       console.log( $(this) ); // $(this)   把当前dom对象转换成jQuery对象
       // return "hello world";  // 批量修改
       return $(this).html()+"-----2019"
    });
</script>
</body>
</html>

操作属性

读取属性值
    $("选择符").attr("属性名");   // 获取非表单元素的属性值,只会提取第一个元素的属性值
    $("选择符").prop("属性名");   // 表单元素的属性,只会提取第一个元素的属性值

操作属性
    $("选择符").attr("属性名","属性值");  // 修改非表单元素的属性值,如果元素有多个,则全部修改
  $("选择符").prop("属性名","属性值");  // 修改表单元素的属性值,如果元素有多个,则全部修改
  
  $("选择符").attr("属性名","属性值").attr("属性名","属性值").attr().....
  $("选择符").prop("属性名","属性值").prop("属性名","属性值").prop().....
  
  $("选择符").attr({'属性名1':'属性值1','属性名2':'属性值2',.....})
  $("选择符").prop({'属性名1':'属性值1','属性名2':'属性值2',.....})

特殊用法, 类似上面的内容操作,参数也可以使用一个匿名函数
    $("选择符").attr("属性名",function(){
    // 其他操作代码
    return "新的属性值";
    });

实现同一个对象,不断使用小圆点调用多个方法的关键,就是jQuery内部实现了链式调用.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <ul>
        <li><input class="first" type="checkbox" name="lve"></li>
        <li><input type="checkbox" name="lve"></li>
        <li><input checked type="checkbox" name="lve"></li>
        <li><input type="checkbox" name="lve"></li>
        <li><input type="checkbox" name="lve"></li>
        <li><input type="checkbox" name="lve"></li>
    </ul>
<script>
    $("a").attr({"href":"http://www.jd.com","title":"这是京东 "}).html("京东");
    // 这里可以看到，jQuery可以不断给获取到的元素不断调用别的方法.
    // 这是因为jQuery内部实现了面向对象的链式调用,这个方式在python里面也有.

    var obj = {
        name:"xiaoming",
        age:13,
        func1(name){
            this.name = name; // 修改当前对象的name
            return this;      // 这就是返回当前对象,也是我们所说的链式调用的核心 python对应的就是 return self
        },
        func2(age){
            this.age = age;
            return this;
        },
        func3(){
            console.log("hello world");
            return this;
        },
        func4(){
            console.log("hai!");
            return this;
        }
    };

    console.log(obj);
    var ret = obj.func1("xiaohuihui").func2(17).func3().func4().result;
    console.log(ret);
</script>
</body>
</html>

操作样式

获取样式
$().css("样式属性");   # 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值

操作样式
$().css("样式属性","样式值").css("样式属性","样式值");
$().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})

$().css("样式属性":function(){
  
  // 其他代码操作 
  return "样式值";
});

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com">百度</a>

<script>
    // 获取指定样式的值,jQuery中css方法,不仅可以获取到行内样式,还可以获取外部样式.
    console.log( $("a").css("font-size") );

    // 修改样式
    $("a").css("font-size","22px").css("color","#fff");

    $("a").css({
        "text-decoration":"none",
        "background-color":"blue",
        "padding":"4px 8px",
        "border-radius":"8px",
    })
</script>
</body>
</html>

在jQuery除了css操作样式以外,我们也可以通过操作元素的class来给元素修改样式

$().addClass("class1  class2 ... ...")    # 给获取到的所有元素添加指定class样式
$().removeClass() # 给获取到的所有元素删除指定class样式
$().toggleClass() # 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
    <style>
    a{
        color: #000;
    }
    .close{
        background-color: #000;
    }
    .close a{
        color: #fff;
    }
    </style>
</head>
<body>
    <button id="close">关灯</button>
    <button id="open">开灯</button>
    <button id="toggle">开灯/关灯</button>
    <a href="http://www.baidu.com">百度</a>
<script>
    $("#close").on("click", function(){
        $("body").addClass("close");
    });

    $("#open").on("click", function(){
        $("body").removeClass("close");
    });

    $("#toggle").on("click", function(){
        $("body").toggleClass('close');
    })

</script>
</body>
</html>

事件绑定

三种用法:
  1. on 和 off
     绑定事件
     $().on("事件名",匿名函数)
     
     解绑事件,给指定元素解除事件的绑定
     $().off("事件名")
  
  2. 直接通过事件名来进行调用
     $().事件名(匿名函数)
    
  3. 组合事件,模拟事件
     $().ready()   # 入口函数
     $().hover(mouseover, mouseout)   # 是onmouseover和 onmouseout的组合
     $().trigger(事件名)  # 用于让js自动触发指定元素身上已经绑定的事件

事件绑定和事件解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
    <p>限制每次一个按钮只能投票3次</p>
    <button id="zan">点下赞(<span>10</span>)</button>
    <button id="cai">踩一脚(<span>10</span>)</button>
<script>
    let zan = 0;
    // // 事件绑定
    // $("#zan").on("click", function(){
    //     $("#zan span").text(function(){
    //         zan++;
    //         let ret = parseInt($(this).text())+1;
    //         if(zan >= 3){
    //             $("#zan").off("click"); // 事件解绑
    //         }
    //         return ret;
    //     });
    // });


    $("#zan").click(function(){
        $("#zan span").text(function(){
            zan++;
            let ret = parseInt($(this).text())+1;
            if(zan >= 3){
                $("#zan").off("click"); // 事件解绑
            }
            return ret;
        });
    })

</script>
</body>
</html>

入口函数的使用,可以让我们的jQuery或者js代码,在任意一个地方都可以使用,不会因为代码写在html的前面而报错!

$(document).ready(function(){
    // js代码
});


// 简写

$(function(){
    // js代码
})

模拟事件触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
    <style>
    input[type=file]{
        display: none;
    }
    .upload{
         180px;
        height: 44px;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        line-height: 44px;
        background-color: #000000;
        border: none;
        outline: none;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <input type="file" name="avatar">
    <button class="upload">上传文件</button>
    <script>
    $(".upload").on("click", function(){
       $("input[type=file]").trigger("click"); // 模拟事件的触发
    });
    </script>
</body>
</html>

动画特效

基本
    show([s,[e],[fn]])   显示元素
    hide([s,[e],[fn]])   隐藏元素

滑动
    slideDown([s],[e],[fn])  向下滑动 
    slideUp([s,[e],[fn]])    向上滑动

淡入淡出
    fadeIn([s],[e],[fn])     淡入
    fadeOut([s],[e],[fn])    淡出
    fadeTo([[s],opacity,[e],[fn]])  让元素的透明度调整到指定数值

自定义
    animate(p,[s],[e],[fn])   自定义动画 
    stop([c],[j])             暂停上一个动画效果,开始当前触发的动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
    <style>
    .box{
         250px;
        height: 250px;
        background-color: #000;
        position: fixed;
        top: 50px;
        left: 10px;
    }
    </style>
</head>
<body>
    <button class="show">显示[入场]</button>
    <button class="hide">隐藏[出场]</button>
    <button class="fidein">淡入[入场]</button>
    <button class="fideout">淡出[出场]</button>
    <button class="slidedown">向下滑动[入场]</button>
    <button class="slideup">向上滑动[出场]</button>
    <button class="animate">自定义动画</button>
    <div class="box"></div>
    <script>
    $(".show").on("click", function(){
        $(".box").show(1000);   // 参数1: 时间,单位毫秒  参数2: 执行效果完成以后的回调函数
    });

    $(".hide").on("click", function(){
        $(".box").hide(1000, function(){
            alert("找不到我了吧~");
        });
    });

    $(".fidein").on("click", function(){
        $(".box").fadeIn(1000);
    });

    $(".fideout").on("click", function(){
        $(".box").fadeOut(1000);
    });

    $(".slidedown").on("click", function(){
        $(".box").slideDown(1000);
    });

    $(".slideup").on("click", function(){
        $(".box").slideUp(1000);
    });

    // 自定义动画
    $(".animate").on("click",function(){
       // $(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数)
       $(".box").animate({
           "border-radius":"50%",
           "left": "120px",
           "top": "200px",
       },2000,function(){
          $(".box").animate({
               "border-radius":"0%",
               "left": "10px",
               "top": "50px",
             },2000,function(){
                 $('.animate').trigger("click");
             });
       });
    });

    </script>
</body>
</html>