从零开始的前端学习-jQuery

前端学习 jQuery
学习笔记
发布日期:   2022-10-17
更新日期:   2022-10-23
文章字数:   2.7k

jQuery并不是一个框架，而是一个js的库

jQuery其实就是封装了很多常用的js函数的js代码，引入jq后就可以使用jq封装好的函数

jq中获取元素使用$()，其中的语法与css的选择器类似,如

  • $(“*”) 所有元素
  • $(“.box>div”)
  • $(“p:first”) 选取第一个<p>
  • $(“p:last”) 选取最后一个<p>
  • $(“p:even”) 选取偶数位置的<p>
  • $(“p:odd”) 选取奇数位置的<p>
  • $(“p:first-child”) 选取是子元素的是第一个位置的<p>
  • $(“p:last-child”)
  • $(“p:nth-child(3)”) 选取是子元素的是第三个位置的<p>
  • $(“p:nth-last-child(3)”)
  • $(“p:only-child”)
  • $(“ul li:eq(3)”) 选取ul中的第三个li
  • $(“ul li:gt(3)”) 选取ul中的大于三个li
  • $(“ul li:lt(3)”) 选取ul中的小于三个li
  • $(“[href]”) 选取所有带有herf属性的元素
  • $(“:disabled”) 选取所有禁用的元素
  • $(“div + p”) 选取div元素相邻的下一个p元素
  • $(“div ~ p”) 选取div元素统计的所有p元素

js和jq的语法不能混用

jq一般使用的格式都是选择器.方法

$("#app").html();

$(“#app”).innerHtml类似这种混用是不行的，jq的选择器和jq的方法是配套使用的

jq中一般用不到循环，类似$(.box).html()这样的方法，他会去把获取到的每一个class都执行html()方法

jq事件

jq中的事件不像之前是一个事件，jq中的事件都是方法，如click(),blur()方法

<body>
    <button id="btn">button</button>

    <script>
        $("#btn").click(function(){
            alert(1);
        })
    </script>
jq效果

jq中提供了三种显示/隐藏的方法

    • hide()，参数可以传时间，单位为毫秒，可以实现一个过渡效果。也可以传入字符串，“slow”、“fast”

    • show(),参数和hide同理

    • toggle(),能够判断原来的状态，如果为隐藏，切换为显示，如果为显示切换为隐藏

<button id="btn">button</button>
   <div id="box" style="background-color: red;width:100px;height:100px"></div>

   <script>
       $("#btn").click(function(){
           var cssStyle = $("#box").css("display");

           if(cssStyle === "none"){
               $("#box").show(1000);
           }else{
               $("#box").hide(1000);
           }
       })
    • fadeOut()
    • fadeIn()
    • fadeToggle()

和hide等方法的动画效果不同，为淡入淡出的效果

$("#btn").click(function(){
          var cssStyle = $("#box").css("display");
          console.log(cssStyle);
          if(cssStyle === "none"){
              $("#box").fadeIn(1000);
          }else{
              $("#box").fadeOut(1000);
          }
      })
    • slideUp()
    • slideDown()
    • slideToggle()

效果为滑动

$("#btn").click(function(){
         var cssStyle = $("#box").css("display");
         console.log(cssStyle);
         if(cssStyle === "none"){
             $("#box").slideDown(1000);
         }else{
             $("#box").slideUp(1000);
         }
     })

如果要改其他样式，使用css()方法

$("#btn").click(function(){
         $("#box").css("background-color","yellow");
      })

css中有两个参数，第一个为要修改的样式名，第二个为要修改为的样式

如果不传入第二个参数，即为读取对应的样式

如果要传入多个参数，可以在参数内传入一个对象

$("#btn").click(function () {
        $("#box").css({
            "width": "+=200px",
            "height": "+=200px",
            "backgroundColor": "yellow",
            "marginLeft": "200px"
        });
    })

而且修改样式时可以给相对值

animate()方法

可以替换css()方法，让样式的改变加入动画

$("#btn").click(function () {
        $("#box").animate({
            "width": "+=200px",
            "height": "+=200px",
            "backgroundColor": "yellow",
            "marginLeft": "200px"
        });
    },1000)

可以传入第二个参数，代表动画延续的时间

但是要注意，色彩动画不包含在jq的核心库里，所以在使用颜色的动画的话，要在jq的官网下载颜色的插件，或者像下面这样直接通过css3修改

  <style>
        @keyframes myanimate {
            from {
                background-color: red;

            }

            to {
                background-color: yellow;
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button id="btn">button</button>
    <div id="box"></div>

    <script>
        $("#btn").click(function () {
            $("#box").css({
                animation: "myanimate 1s",
                animationFillMode: "forwards"
            });
            $("#box").animate({
                width: "+=200px",
                height: "+=200px",
                marginLeft: "200px"
            });
        })

stop()

对谁调用stop()方法就是让谁停止动画

$("#stop").click(function(){
           $("#box").stop();
       })

在没有使用stop之前，如果一个如点击触发动画触发的次数过多，很容易鬼畜

所以可以用每次动画前使用stop()方法将之前的动画停掉，再继续调用样式动画，原理类似于防抖

$("#btn").click(function () {
       $("#box").stop().animate({
           width: "+=200px",
           height: "+=200px",
           backgroundColor: "yellow",
           marginLeft: "200px"
       });
   })

callback 回调

上述方法在传入第一个持续时间的参数以外，第二个参数可以传入回调函数

$("#btn").click(function () {
       $("#box").stop().animate({
           width: "+=200px",
           height: "+=200px",
           marginLeft: "200px"
       },1000,function(){
           $("#box").stop().animate({
           width: "-=200px",
           height: "-=200px",
           marginLeft: "0px"
       });
   })})

jq中本所有效果方法都支持回调，具体语法参考文档

链

jq支持链式调用,会对元素调用的方法依次执行

$("#btn").click(function () {
          $("#box").stop().animate({
              width: "+=200px",
              height: "+=200px",
              marginLeft: "200px"
          }).slideUp().slideDown().fadeOut().fadeIn().animate({
              width: "-=200px",
              height: "-=200px",
              marginLeft: "0px"
          })})
jq HTML

html()方法等同于innerHtml属性，不传参为获取，传参为修改

text()方法同理，等同于innerText属性，不识别标签

val()方法，等同于表单的value属性

attr()方法，相当于js中的setAttr和getAttr方法，传入对象为代表设置多个属性

append()方法，相当于appendChild(),两个方法不同点是，apeend()方法不需要创建对象，直接参数内传入内容即可

prepend()方法，append是在结尾添加，prepend可以在开头添加

after()和before()为追加同级

remove()方法，想把谁删掉，就对谁调用remove()即可,参数可以传入css选择器,达到一个过滤效果

//代表删除box中的p
$("#box").remove("p");

empty()方法为清空

addClass(),为给添加class。removeClass()，删除对应元素的class。toggleClass(“tittle”),为切换，如果有则删除，如果没有则加上。

jq尺寸，到时候百度吧，懒得写上来了

jq遍历

主要分为上个方向，即往上找，往下找，同级找，所有的遍历方法参数内都可以放入css选择器，过滤选择

向上

parent()方法可以返回元素的直接父级

parents()方法返回所有父级

parentUntil()方法为一直找到谁，参数内传入希望结束时的元素，遍历时不包含传入参数。如传入body，则指一直找到body且不包含body

向下

children() 返回直接子集

find()返回所有子集，参数需要传入一个css选择器，不传的话方法找不到，如果要找所有子集要传入*，find(“*“)

同级

siblings()，返回除了自己以外的同级

next()，返回下一个同级

nextAll()，返回下面所有同级

nextUntil()，一直同级找到谁，参数参入希望结束时的元素

prev(),返回上一个同级

prevAll()

prevUntil()

过滤

first()方法返回被选元素的首个元素，相当于选取元素时的$(“p:first”)

last()方法返回被选元素的最后一个元素

eq()

filter()方法可以规定一个标准，不匹配的元素不会被选择，匹配的元素会被返回，如$(“p”).filter(“.test”)，指返回p元素中calss为test的元素

not()方法和filter方法相反，不同的是匹配的不会被选择，不匹配的会被返回

其他
$(document).ready(function(){
	console.log(1);
})

当文档加载完毕的时候会被调用

小练习

实现一个手风琴菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}

        li{list-style: none;
            width: 200px;
            margin: auto;
            text-align: center;}
        ul>li {
            height: 50px;
            line-height: 50px;
            background-color: green;
            color: red;
        }
        ul>ul>li{background-color: greenyellow;}
        ul>ul{display: none;}
    </style>
</head>

<body>
    <div class="wrap">
        <ul>
            <li>test-1</li>
            <ul>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
            </ul>
            <li>test-1</li>
            <ul>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
            </ul>
            <li>test-1</li>
            <ul>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
            </ul>
            <li>test-1</li>
            <ul>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
            </ul>
            <li>test-1</li>
            <ul>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
                <li>test-2</li>
            </ul>
        </ul>
    </div>

    <script>
     $(".wrap>ul>li").click(function () {
            $(this).children("div").toggleClass("transform").parent().
                next().slideToggle(500).children().mouseover(function () {
                    $(this).css("backgroundColor", "greenyellow");
                }).mouseout(function () {
                    $(this).css("backgroundColor", "red");
                }).parent().siblings("ul").slideUp(500).prev().children("div").removeClass("transform");
        })
    </script>
</body>

</html>

on()可以给子元素及被选元素添加事件

$("div").on("click",function(){
	alert("点了")
})

off()与on()相反

ready() DOM完全加载时要执行的函数

resize() 窗口尺寸变化的时候会触发

scroll() 鼠标滚轮事件

delay() 动画延迟方法

$("div1").delay("slow")
$("div2").delay("fast")
$("div3").delay(800)
$("div4").delay(1000)

clone()

$("p").clone().appendTo("body");

hasClass() 检测某个元素是否有对应的class名字，返回布尔值

insertAfter()，insertBefore() 同级插入

offset() 偏移

scrollTop() 返回垂直滚动条的位置

each() 对每一个元素都执行同一个方法

$("li").each(function(){
	alert($(this).text());
})

index() 返回当前元素相对于整个选择器的序号

length 返回所选元素的个数

ajax
$.ajax({
	url:"example.com",
	method:"get",
    dataType:"json",
    data:{yourdata:$("#select").val()},
    //请求超过5000ms后断开
    timeout: 5000,
    //成功会走这个方法,参数分别为返回的数据，状态码，ajax核心对象
    success:function(data,status,xhr){
    	//To do
	},
	//失败会走这个方法,参数分别为ajax的核心对象，状态码，错误信息
	error:function(xhr,status,error){
        //To do
    }
})
//这个方法是$.ajax的简化方法，简化get请求
$.get(URL,data,function(data,status,xhr),dataType)
//这个方法是$.ajax的简化方法，简化post请求
$.post(URL,data,function(data,status,xhr),dataType)
//将返回的内容直接添加到元素的innerHTML中
$(selector).load(url,data,function(response,status,xhr));
//使用jq调用谷歌接口查询天气
    <div style="width: 500px;margin:auto;margin-top: 300px;">
        <input type="text">
    </div>
    
    <script>
        //abda3c721a449ef47b8c4580db66eb1a
        $("input").blur(function () {
            $.ajax({
                url: "https://restapi.amap.com/v3/weather/weatherInfo",
                method: "get",
                data: {
                    key: "abda3c721a449ef47b8c4580db66eb1a",
                    city: $("input").val(),
                },
            //成功会走这个方法,参数分别为返回的数据，状态码，ajax核心对象
            success: function (data) {
                    //To do
                    var wheather = data.lives[0].weather;
                    var humidity = data.lives[0].humidity;
                    var windpower = data.lives[0].windpower;
                    console.log(wheather)
                    $("input").after("<div>天气："+wheather+"</div");
                    $("input").after("<div>湿度："+humidity+"</div");
                    $("input").after("<div>风力级别："+windpower+"</div");
                },

            })
            console.log($("input").val());

        })
文章作者: Razuberi
文章链接: https://razuberiii.github.io/2022/10/17/cong-ling-kai-shi-de-qian-duan-xue-xi-jquery/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Razuberi !
前端学习 jQuery
评论