12.jQuery技术

原创已于 2023-04-17 23:07:51 修改 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

于 2022-08-17 17:06:52 首次发布

web技术专栏收录该内容

59 篇文章

订阅专栏

一、jQuery知识点总览。

 css（）方法：
       //通过css（）方法获取样式值
        let backgroundcolor = $("#one").css("backgroundColor");
        alert(backgroundcolor);
        //通过css（）方法设置id为one背景色为绿色
        $("#one").css("backgroundColor","green");

属性选择器：
<script>
    $(function () {
        $("div[title]").css("background-color","red");
        $("div[title='titled']").css("background-color","red");
        $("div[title!='titled']").css("background-color","red");
        $("div[title^='tit']").css("background-color","red");
        $("div[title$='led']").css("background-color","red");
        $("div[title*='ed']").css("background-color","red");
        $("div[id][title *='es']").css("background-color","red");
    })
  </script>

 过滤选择器：
<script src="../js/jquery-3.6.0.min.js"></script>
  <script>
    $(function () {
       $('div:first').css("background-color","pink");
       $('li:first').css("background-color","pink");
       $("li:last").css("background-color","pink");
       $("li:not(.a)").css("background-color","pink");
       $("li:even").css("background-color","pink");
       $("li:odd").css("background-color","pink");
       $("li:eq(3)").css("background-color","pink");
       $("li:lt(3)").css("background-color","pink");
       $("li:gt(3)").css("background-color","pink");
       $(":header").css("background-color","pink");
    });
  </script>

表单过滤选择器：
<input type="text" disabled="disabled" value="ok">
<input type="text" value="nice">
<input type="checkbox" value="美容">美容
<input type="checkbox" value="科技">科技
<input type="checkbox" value="公司">公司
<select name="job" id="job" multiple="multiple" size="4">
  <option value="c1">程序员</option>
  <option value="c2">中级程序员</option>
  <option value="c3">高级程序员</option>
  <option value="c4">系统架构师</option>
</select>
<script>
  $(function () {
    $("input[type='text']:enabled").val("aaa");//修改输入框的内容
    $("input[type='text']:disabled").val("aaa");
    var len = $("input[type='checkbox']:checked").length;//获取选中的复选框个数
    alert(len);
    $("#job > option:selected").length;//选择器必须是 #job > option 才行，因为要获取的个数是select下拉列表下的option元素选中个数
  })
</script>

DOM-内容操作：
<script>
    $(function () {
        // 获取myinput的value值
        let val = $("#myinput").val();
        alert(val);
        let valu = $("#myinput").val("李四");//返回被修改后的对象
        alert(valu.val());
        // 获取mydiv的标签体
        let html = $("#mydiv").html();
        alert(html);
        $("#mydiv").html("aaa");
        // 获取mydiv的文本内容
        let text = $("#mydiv").text();
        alert(text);
        $("#mydiv").text("ccc");
    })
</script>
<input id="myinput" type="text" name="username" value="张三" /><br/>
<div id="mydiv" ><p><a href="#">标题标签</a></p></div>

通用属性操作：
<script>
    $(function () {
        //获取北京节点的name属性值，prop获取到的是undefined，建议使用attr
        let attr = $("#bj").attr("name");
        alert(attr);
        //设置北京节点的name属性的值为dabeijing,通过开发模式的检查，看是否修改成功
        $("#bj").attr("name","dabeijing");
        //新增北京节点的discription属性，属性值是didu
        $("#bj").attr("discription","didu");
        //删除北京节点的name属性并校验name属性是否存在
        $("#bj").removeAttr("name");
        //获取hobby的选中状态,attr获取到的是undefined（只是选中状态获取不到）
        let checked = $("#bj").prop("checked");
        alert(checked);
    })
</script>
<ul>
  <li id="bj" name="beijing" xxx="yyy">北京</li>
  <li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>

class类属性值操作：
<script>
    $(function () {
        //采用prop操作类属性,添加类属性增加样式（改变id=one的样式）
        $("#one").prop("class","secon");//添加属性值，会删除其他属性值（有多个属性值）
        //采用addClass,增加second属性值
        $("#one").addClass("second");//添加属性值，不会删除其他属性值（有多个属性值）
        //removeClass，删除second属性值
        $("#one").removeClass("second");//只删除指定属性值，不会全部删除
        //toggleClass，切换类属性，有就删除，没有就添加（反复操作就是切换两种样式效果）
        $("#one").toggleClass("sese");//只对指定属性值操作，不对全部操作（即不会删除全部属性值）
    });
  </script>
<div id="one" class="b1 b2">id为one</div>

CRUD：
<script>
  $(function () {
    //append方法,文档中元素对象会移动，新的元素对象才会添加
    $("#1").append("我很好！");//添加
    //appendTo方法，文档中元素对象会移动，新的元素对象才会添加
    $("#1").appendTo($("#2"));//移动到id=2的内部
    //prepend,文档中元素对象会移动，新的元素对象才会添加
    $("#1").prepend("我很好");
    //prependTo,文档中元素对象会移动，新的元素对象才会添加
    $("#2").prependTo($("#1"));
    //after,,文档中元素对象会移动，新的元素对象才会添加
    $("#1").after("我很好");
    $("#2").after($("#1"));
    //insertAfter,文档中元素对象会移动，新的元素对象才会添加
    $("#1").insertAfter($("#2"));
    //before,文档中元素对象会移动，新的元素对象才会添加
    $("#1").before($("#2"));
    //insertBefore,文档中元素对象会移动，新的元素对象才会添加
    $("#2").insertBefore($("#1"));
    //remove,删除元素对象
    $("#1").remove();
    //empty,清空所有后代元素，本节点内容也会清除，只留下元素及属性
    $("#1").empty();
    //clone（），克隆一个对象
    $("#1").append($("#1").clone());
  });
</script>
<div id="1"><h1>nice</h1>hello</div>
<h1 id="2">id是2</h1>

动画效果：
<script>
    $(function () {
      var i=0;
      while (i<1000){
        i++;
        //默认方式：
        $("#showDiv").hide("slow","swing",function () {alert("影藏了")});
        $("#showDiv").hide(10);//隐藏
        $("#showDiv").show(5000,"linear");//显示
        $("#showDiv").toggle("fast","linear");//显示和隐藏
        //滑动方式：用法和上面的一样，知识方法名不同
        $("#showDiv").slideUp("slow");//隐藏
        $("#showDiv").slideDown("slow");//显示
        $("#showDiv").slideToggle("slow");//隐藏与显示
        //淡入淡出效果方式：
        $("#showDiv").fadeOut("slow");//隐藏
        $("#showDiv").fadeIn("slow");//显示
        $("#showDiv").fadeToggle("fast");//隐藏与显示
      };
    });
  </script>
<div id="showDiv" style="width: 200px;height: 200px;background-color: pink" >
  div显示和隐藏
</div>

遍历：
<script>
  $(function () {
    //获取所有的ul下的li，jQuery对象可以当作数组使用
    let citys = $("#city li");
    //1.使用for遍历li
   for (var i = 0; i < citys.length; i++) {
      //获取内容,citys[i]获取的是js对象
      alert(citys[i].innerHTML);
      alert($(citys.get(i)).text());
    }

    //2.jQuery对象.each(callback);
    citys.each(function (index, ele) {
      //判断如果是上海，则结束循环
      if ("上海"==ele.innerHTML){
        //如果是当前function返回为false，则结束循环（break）
        //如果返回为true，则结束本次循环，继续下次循环（continue)
        // return false;
        return true;
      }
      //获取li对象，第一种方式
      // alert(this.innerHTML);
      alert($(this).text());
      //获取li对象，第二种方式，在回调函数中定义参数， index(索引) element(元素对象)
      // alert(index+" ："+ele.innerHTML);
      alert(index+" ："+$(ele).text());
    })

    //3.  $.each(object,[callback])
    $.each(citys,function (index,element) {
      alert($(element).text());
    });

    //4.  for ... of : jQuery3.0版本之后提供的方式
    for (city of citys) {
      alert($(city).text());
    }
  });
</script>
<ul id="city">
  <li>北京</li>
  <li>上海</li>
  <li>天津</li>
  <li>重庆</li>
</ul>

事件绑定：
<script>
  $(function (){
    //1.获取name对象，绑定click事件
    $("#name").click(function () {
      alert("我被点击了...")
    });
    //2.简化操作，链式编程，//给name绑定鼠标移动到元素之上事件，绑定鼠标移出事件
    $("#name").mouseover(function () {
      alert("来了...");
    }).mouseout(function () {
      alert("走了...");
    });

    $("#name").focus();//没有回调函数，触发默认行为，让文本框获得焦点
    $("#name").focus(function () {//当元素获得焦点时，触发 focus 事件。
      alert("焦点来了...");
    });
    //表单对象.submit();//让表单提交

    //3.使用on给按钮绑定单击事件click
    $("#btn").on("click",function () {
      alert("我被点击了");
    });
    //4.使用off解绑btn按钮的单击事件
      $("#btn2").click(function () {
        //结束btn的单击事件
        $("#btn").off("click");
        $("#btn").off();//没有参数，将组件的事件全部解绑
      });

      //5.获取按钮，调用toggle方法，事件切换
    $("#btn1").toggle(function () {
      //改变div背景色
      $("#mydiv").css("backgroundColor","green");
    },function () {
      //改变div背景色
      $("#mydiv").css("backgroundColor","pink");
    });
  });
</script>
<input type="button" id="btn1" value="事件切换">
<div id="myDiv" style="height: 300px;width: 300px;background-color:pink">点击按钮变成绿色，再次点击红色</div>
<input id="name" type="text" value="绑定点击事件">
<input id="btn" type="button" value="使用on绑定点击事件"/>
<input id="btn2" type="button" value="使用off解绑点击事件"/>

插件机制：扩展方法（为jQuery或jQuery对象添加方法）
<script>
  //使用jQuery插件，给jQuery对象添加2个方法，check（）选中所有复选框，uncheck（）取消所有选中复选框
  //1.定义jQuery的对象插件
  $.fn.extend({
    //方法名:回调函数，定义了一个check（）方法。所有的jQuery对象都可以调用该方法
    check:function () {
      //让复选框选中
      //this:调用该方法的jQuery对象
      this.prop("checked",true);
    },
    uncheck:function () {
      //让复选框不选中
      this.prop("checked",false);
    }
  });

  $(function () {
    //1.获取按钮
    // $("#btn-check").check();
    //复选框对象.check();
    $("#btn-check").click(function () {
      //获取复选框对象
      $("input[type='checkbox']").check();
    });
    $("#btn-uncheck").click(function () {
      //获取复选框对象
      $("input[type='checkbox']").uncheck();
    });
  });

  //对全局方法扩展两个方法，扩展min方法，求2个值的最小值；扩展max方法，求两个值最大值；
  $.extend({
    max:function (a,b) {
      return a>=b?a:b;
    },
    min:function (a,b) {
      return a>=b?b:a;
    }
  });
  //调用全局方法
  let max = $.max(3,4);
  alert(max);
</script>
  <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
  <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="checkFn()">
<br/>
  <input type="checkbox" value="football">足球
  <input type="checkbox" value="basketball">篮球
  <input type="checkbox" value="volleyball">排球

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
  <script>
    $(function () {
      //案例一：隔行换色
      //$("tr:even:gt(1) > td")，这样的话是满足td的先even偶数后，再跳过2，已经不止大于2了
      $("tr:gt(1):even > td").css("backgroundColor","pink");//可以不用 > td
      $("tr:gt(1):odd > td").css("backgroundColor","yellow");
      //案例二：全选全不选，$("#box").click()就使用不了checked的值，不用这种则要在入口函数外面定义函数,需要传参数this才能使用this.checked
      $("#box").click(function () {
        $("input[type='checkbox']").prop("checked",this.checked);
      });
      // 案例三：qq表情选择
      $("tr").click(function () {
        $("table").append($(this).clone());
      });
      //案例四：下拉列表选中条目左右移动
      $("tr").click(function () {
        $("table").append(this);
      });
    });
    //案例二：全选全不选，$("#box").click()就使用不了checked的值，不用这种则要在入口函数外面定义函数,需要传参数this才能使用this.checked
    // function selectAll(obj) {
    //   $("input[type='checkbox']").prop("checked",obj.checked);
    // };

  </script>
</head>
<body>
<table border="1" align="center" id="tab1" width="800">
  <tr>
    <td colspan="5"><input type="button" value="删除"></td>
  </tr>
  <tr>
    <th><input type="checkbox" id="box" ></th>
    <th>分类ID</th>
    <th>分类名称</th>
    <th>分类描述</th>
    <th>操作</th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>1</td>
    <td>手机数码</td>
    <td>手机数码类商品</td>
    <td><a href="#">修改</a>|<a href="#">删除</a></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>2</td>
    <td>电脑办公</td>
    <td>电脑办公类商品</td>
    <td><a href="#">修改</a>|<a href="#">删除</a></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>3</td>
    <td>鞋靴箱包</td>
    <td>鞋靴箱包类商品</td>
    <td><a href="#">修改</a>|<a href="#">删除</a></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>4</td>
    <td>家居饰品</td>
    <td>家居饰品类商品</td>
    <td><a href="#">修改</a>|<a href="#">删除</a></td>
  </tr>
</table>
</body>
</html>

案例二：广告显示和隐藏。


<script>
    $(function () {
 /*       需求：
            1.当页面加载完，3秒后，自动显示广告
            2.广告显示5秒后，自动消失
          分析：
            1.使用定时器来完成：setTimeout（执行一次定时器）
            2.分析发现jQuery的显示和隐藏动画效果其实就是控制display：none属性
            3.使用show/hide方法来完成广告的显示
      */
        //显示广告
        window.setTimeout(function () {
            $("#ad").show("slow");
        },3000);
        //隐藏广告
        window.setTimeout(function () {
            $("#ad").hide("slow");
        },8000);
    });
</script>
<div id="ad" style="display: none">广告</div>
<div>正文</div>

案例三：抽奖。

<script>
  $(function () {
    /*
         分析：
              1.给开始按钮绑定单击事件
                  1.1定义循环定时器
                  1.2切换小相框的src属性
                      * 定义数组，存放图片资源路径
                      * 生成随机数，数组索引
              2.给结束按钮绑定单击事件
                   1.1停止单击事件
                   1.2给大相框设置src属性
     */
      //处理按钮是否可以使用的效果,防止按钮多次点击，出现bug
      $("#startID").prop("disabled",false);//按钮可用
      $("#stopID").prop("disabled",true);//按钮不可用
      let startID;//开始定时器的id
      var arr=["../img/img_1.png","../img/2.png","../img/3.png"];
    $("#startID").click(function () {
        //处理按钮是否可以使用的效果,防止按钮多次点击，出现bug
        $("#startID").prop("disabled",true);//按钮可用
        $("#stopID").prop("disabled",false);//按钮不可用
      //1.1定义循环定时器
      startID = setInterval(function () {
          //1.2生成随机角标，0-2
          var index=Math.floor(Math.random()*3);//0.000-0.999->*2->0.0->2.999
          //1.3设置小相框的src属性
          $("#imgID").prop("src",arr[index]);
      },50);
    });
    $("#stopID").click(function () {
        //处理按钮是否可以使用的效果,防止按钮多次点击，出现bug
        $("#startID").prop("disabled",false);//按钮可用
        $("#stopID").prop("disabled",true);//按钮不可用
        //1.1停止定时器
        clearInterval(startID);
        //1.2给大相框设置src属性
        let src = $("#imgID").prop("src");
        $("#daimgID").prop("src",src).hide();//先隐藏
        //显示1秒之后
        $("#daimgID").show(1000);
    });
  });
</script>
<img id="imgID" src="../img/3.png" style="width: 100px;height: 100px">
<input id="startID" type="button" value="开始抽奖">
<input id="stopID" type="button" value="停止抽奖">
<img id="daimgID" src="../img/3.png" style="width: 600px;height: 600px;float: right">