小蚂蚁 发表于 2021-12-11 16:01:29

#yyds干货盘点#--30分钟上手jQuery

一、jQuery的介绍

[*]jQuery是什么
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

[*]jQuery的版本
目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构

[*]jQuery的引入
根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

[*]jQuery的基本语法
$().方法()
[*]jQuery对象和dom对象的关系
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    远程导入-->
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<!--本地导入-->
    <script src="jquery3.6.js"></script>

</head>
<body>

<ul class="c1">
    <li>123</li>
    <li>234</li>
    <li>345</li>
</ul>

<script>

       // $(".c1 li").css("color","red");
       console.log($(".c1 li"));   //jQuery类型 是dom集合对象

       // 如何将jQury对象转换为Dom对象
       console.log($(".c1 li").innerHTML);

       // 如何将Dom对象转换为jQuery对象;
       var ele = document.querySelector(".c1 li");
       // console.log(ele);
       // ele.style.color = "red";
      $(ele).css("color","orange")//

</script>
</body>
</html>二、jQuery的选择器

2.1 直接查找

[*]基本选择器
/*
#id         # id选择符
element   # 元素选择符
.class      # claw43ss选择符
selector1, selector2, selectorN   # 同时获取多个元素的选择符

$("#id")   
$(".class")
$("element")
$(".class,p,div")
*/

[*]组合选择器
/*
ancestor descendant// 包含选择符
parent > child       // 父子选择符
prev + next          // 下一个兄弟选择符
prev ~ siblings      // 兄弟选择符

$(".outer div")   //outer 选择outer下所有div标签
$(".outer>div")//outer 选择outer下儿子是div的标签
$(".outer+div")   //outer 的所有兄弟标签
$(".outer~div")   //outer 的下一个兄弟标签
*/

[*]属性选择器
/*
    // 获取拥有指定数据attribute,并且置为value的元素
$('')
$('')
*/

// 3、属性选择器例子
// $(".links ").css("color","red");
// $(".links ").css("color","red");
// $("").css("border","1px solid red");

[*]表单选择器
/*
$("") 表单选择器还可以简写成$(":text")         注意只适用于input标签: $("input:checked")
同样适用表单的以下属性
:enabled
:disabled
:checked
:selected
*/

[*]筛选器
/*

// 筛选器
:first               //从已经获取的元素集合中提取第一个元素
:even                //从已经获取的元素集合中提取下标为偶数的元素
:odd               //从已经获取的元素集合中提取下标为奇数的元素
:eq(index)         //从已经获取的元素集合中提取指定下标index对应的元素
:gt(index)         //从已经获取的元素集合中提取下标大于index对应的元素
:last                //从已经获取的元素集合中提取最后一个元素
:lt(index)         //从已经获取的元素集合中提取下标小于index对应的元素
:first-child         //从已经获取的所有元素中提取他们的第一个子元素
:last-child          //从已经获取的所有元素中提取他们的最后一个子元素
:nth-child         //从已经获取的所有元素中提取他们的指定下标的子元素
// 筛选器方法
$().first()          //从已经获取的元素集合中提取第一个元素
$().last()         //从已经获取的元素集合中提取最后一个元素
$().eq()             //从已经获取的元素集合中提取指定下标index对应的元素

*/

例子:
    // $(".c1 li").css("color","red");
    // $(".c1 li:first").css("color","red");
    // $(".c1 li:last").css("color","red");
    // $(".c1 li:eq(3)").css("color","red");
    // $(".c1 li:gt(1)").css("color","red");
    // $(".c1 li:lt(4)").css("color","red");
    // $(".c1 li:even").css("color","red");
    // $(".c1 li:odd").css("color","red");
    var index = 2;
    // $(".c1 li:eq(index)").css("color","red");
    $(".c1 li").eq(index).css("color", "red");
    $(".c1 li").first().css("color", "red");
    $(".c1 li").last().css("color", "red");
2.2 导航查找
/*
// 查找子代标签:         
$("div").children(".test") // 查找儿子标签   
$("div").find(".test")//查找所有后代标签

// 向下查找兄弟标签
$(".test").next() // 下一个兄弟标签               
$(".test").nextAll()//下边所有的兄弟标签   
$(".test").nextUntil("#i1") // 查找.test所有的兄弟标签,直到#i1为止

// 向上查找兄弟标签
$("div").prev()                  
$("div").prevAll()      
$("div").prevUntil()

// 查找所有兄弟标签
$("div").siblings()

// 查找父标签:         
$(".test").parent()            
$(".test").parents()   
$(".test").parentUntil()

*/三、jQuery的事件绑定
/*
三种用法:
1. on 和 off
   // 绑定事件
   $().on("事件名",匿名函数)

   // 解绑事件,给指定元素解除事件的绑定
   $().off("事件名")

2. 直接通过事件名来进行调用
   $().事件名(匿名函数)

3. 组合事件,模拟事件
   $().ready(匿名函数)   // 入口函数
               $(document).ready(function () { //等整个文档执行完了在执行read事件里边的代码

                });
   $().hover(mouseover, mouseout)   // 是onmouseover和 onmouseout的组合
                $(".c1").hover(mouserover,mouserout);
                function mouserover() {
                  $(this).css("background-color","#6f5499")

                }
                function mouserout() {
                  $(this).css("background-color","#2b542c")

                }
   $().trigger(事件名)// 用于让js自动触发指定元素身上已经绑定的事件,模拟用户操作

*/四、jQuery的操作标签

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

$("选择符").text()   // 效果同上,但是获取的内容是纯文本,不包含html代码
$("选择符").text(内容)// 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
*/
4.2 value操作
$().val() <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="jquery3.6.js"></script>
    <script>

    $(function () {

      $("#i1").blur(function () {

            // 获取jquery对象的value属性值
            console.log(this.value);
            console.log($(this).val());

            // 设置value属性值
            $(this).val("hello world")

      });

      $("#i3").change(function () {
            console.log(this.value);
            console.log($(this).val());

            $(this).val("guangdong");

      });

      console.log($("#i2").val());
      console.log($("#i2").val("hello pig!"))

    })

    </script>
</head>
<body>

<input type="text" id="i1">

<selectid="i3">
    <option value="hebei">河北省</option>
    <option value="hubei">湖北省</option>
    <option value="guangdong">广东省</option>
</select>

<p> <textarea name="" id="i2" cols="30" rows="10">123</textarea></p>

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

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

$("选择符").attr({'属性名1':'属性值1','属性名2':'属性值2',.....})
$("选择符").prop({'属性名1':'属性值1','属性名2':'属性值2',.....})
*/<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="jquery3.6.js"></script>

</head>
<body>

<button class="select_all">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>
<hr>
<table border="1">
    <tr>
      <td>选择</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>

    <tr>
      <td><input type="checkbox"></td>
      <td>张三</td>
      <td>23</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>李四</td>
      <td>23</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>王五</td>
      <td>23</td>
    </tr>
</table>

<script>

    $(".select_all").click(function () {
      $("table input:checkbox").prop("checked",true);

    });
    $(".cancel").click(function () {
       $("table input:checkbox").prop("checked",false);
    });

    $(".reverse").click(function () {
       $("table input:checkbox").each(function () {
         $(this).prop("checked",!$(this).prop("checked"))

       })

   });

</script>

</body>
</html>
4.4 补充jQuery的each的循环
// 类方法,循环一个类
vararr =

$.each(arr,function (i,j) { //会将arr数组的索引赋值给i,元素赋值给j
    console.log(i,j)

})
//实力方法,循环一个具体的标签对象
<ul>
    <li>111</li>
    <li>2222</li>
    <li>33333</li>
</ul>

    $("ul li").each(function () {

      console.log(this)
    })
4.5 css样式操作
/*
获取样式
$().css("样式属性");   // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值

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

$().css("样式属性":function(){

// 其他代码操作
return "样式值";
});
*/
4.5 class属性操作
$().addClass("class1class2 ... ...")   // 给获取到的所有元素添加指定class样式
$().removeClass() // 给获取到的所有元素删除指定class样式
$().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加
4.6 节点操作
/*
//创建一个jquery标签对象
    $("<p>")

//内部插入

    $("").append(content|fn)      //追加到最后 $("p").append("<b>Hello</b>");
    $("").appendTo(content)       //$("p").appendTo("div");
    $("").prepend(content|fn)   // 添加到最前面$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      // $("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       //添加到某个标签的后边("p").after("<b>Hello</b>");
    $("").before(content|fn)      //添加到某个标签的前面$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    // $("p").insertAfter("#foo");
    $("").insertBefore(content)   // $("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) // $("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove()

//复制
    $("").clone(])
*/
4.7 事件委派
所谓事件委派就是在向一个父标签创建子标签的时候,新创建的标签会没有原有子标签的事件,这时候就需要通过事件委派将事件绑定到父标签上
标签克隆案例:

<div class="outer">
    <div class="item">
      <input type="button" value="+" class="add">
      <input type="text">
    </div>

</div>

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

   $(".add").click(function () {

       var $clone=$(this).parent().clone()
       $clone.children(".add").attr({"value":"-","class":"rem"})
       $(".outer").append($clone);
   });

    $('.rem').click(function () {
      $(this).parent().remove()
    });

    // 事件委派
    $(".outer").on("click",".item .rem",function () {
      $(this).parent().remove()
    })

</script>
4.8 jQuery的css尺寸
/*
$("").height() //获取盒模型内容的高度
$("").width()//获取盒模型内容的宽度
$("").innerHeight()   //获取盒模型的内边距和内容的高度
$("").innerWidth()   //获取盒模型的内边距和内容的宽度
$("").outerHeight(true]) 加上true//获取整个模型的高度
$("").outerWidth(true)   //获取整个模型的宽度
*/五、css位置
/*
$("").offset()// 相对窗口偏移。
$("").position()             // 相对于已经定位的父标签偏移
$("").scrollTop()       // 获取匹配元素相对滚动条顶部的位置。加参数是设置位置
*/

#例子:

    // offset:相对于窗口偏移   position:相对于已经定位的父标签偏移量

    var $offset = $(".c2").offset();
    var $position = $(".c2").position();
    console.log("$offset top:",$offset.top);
    console.log("$offset left:",$offset.left);

    console.log("$position top:",$position.top);
    console.log("$position left:",$position.left);

    // 设置偏移量offset

    $(".c2").click(function () {

      $(this).offset({top:500,left:500})

    })

[*]例子:返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      *{
            margin: 0;
      }
      .content{
            height: 2000px;
            background-color: lightgray;
      }

      .return_top{
            width: 120px;
            height: 50px;
            background-color: lightseagreen;
            color: white;
            text-align: center;
            line-height: 50px;

            position: fixed;
            bottom: 20px;
            right: 20px;
      }

      .hide{
            display: none;
      }
    </style>

    <script src="jquery.js"></script>
</head>
<body>

<div class="content">
    <h3>文章...</h3>
</div>

<div class="return_top hide">返回顶部</div>

<script>

    console.log($(window).scrollTop());

    $(".return_top").click(function () {

      $(window).scrollTop(0)

    });

    $(window).scroll(function () {
      console.log($(this).scrollTop());
      var v =$(this).scrollTop();
      if (v > 100){
            $(".return_top").removeClass("hide");
      }else {
            $(".return_top").addClass("hide");
      }

    })
</script>

</body>
</html>六、jQuery的动画效果
/*
//基本
    show(,])   显示元素
    hide(,])   隐藏元素

//滑动
    slideDown(,,)向下滑动
    slideUp(,])    向上滑动

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

//自定义
    animate(p,,,)   自定义动画
    stop(,)             暂停上一个动画效果,开始当前触发的动画效果

*/<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

      .c1{
            width: 250px;
            height: 250px;
            background-color: black;
      }

      .hide{
            display: none;
      }
    </style>

    <script src="jquery.js"></script>
</head>
<body>

<p>
    <button class="show01">显示</button>
    <button class="hide01">隐藏</button>
</p>
<p>
    <button class="show02">显示</button>
    <button class="hide02">隐藏</button>
</p>
<p>
    <button class="show03">显示</button>
    <button class="hide03">隐藏</button>
</p>

<p>
    <button class="show04">显示</button>
    <button class="hide04">隐藏</button>
</p>
<hr>

<div class="c1"></div>

<script>
    // 自己实现的隐藏与显示

    $(".show01").click(function () {
      $(".c1").removeClass("hide")
    });
    $(".hide01").click(function () {
      $(".c1").addClass("hide")
    });

    // (1) show与hide方法

    $(".show02").click(function () {

      $(".c1").show(1000,function () {
            alert("显示成功")
      });

    });
    $(".hide02").click(function () {

      $(".c1").hide(1000,function () {
            alert("隐藏成功")
      })

    });

   // (2) slideDown与slideUp

   $(".show03").click(function () {

      $(".c1").slideDown(1000,function () {
            alert("显示成功")
      });

   });
   $(".hide03").click(function () {

      $(".c1").slideUp(1000,function () {
            alert("隐藏成功")
      })

    });

      // (3) fadeIn与fadeOut

   $(".show04").click(function () {

      $(".c1").fadeIn(1000,function () {
            alert("显示成功")
      });

   });
   $(".hide04").click(function () {

      $(".c1").fadeOut(1000,function () {
            alert("隐藏成功")
      })

    });
</script>

</body>
</html>

[*]自定义动画效果
$(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数) $(".animate").click(function () {

      $(".c1").animate({
            "border-radius":"50%",
            "top":340,
            "left":200
      },1000,function () {
            $(".c1").animate({
                "border-radius":"0",
                "top":240,
                "left":120
            },1000,function () {

                $(".animate").trigger("click")
            })
      })

    })七、jQuery的扩展机制

[*]jQuery.extend(object)
扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。

在jQuery命名空间上增加两个函数:

<script>
    jQuery.extend({
      min: function(a, b) { return a < b ? a : b; },
      max: function(a, b) { return a > b ? a : b; }
});

    $.min(2,3); // => 2
    $.max(4,5); // => 5
</script>

[*]jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)

增加两个插件方法:

<body>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<script src="jquery.min.js"></script>
<script>
    jQuery.fn.extend({
      check:function() {
         $(this).attr("checked",true);
      },
      uncheck: function() {
         $(this).attr("checked",false);
      }
    });

    $(":checkbox").check() //调用自定义的checked方法
</script>

</body>
            </div>
      
      <div id="asideoffset"></div>

https://blog.51cto.com/jiangjunwang/4784096
页: [1]
查看完整版本: #yyds干货盘点#--30分钟上手jQuery