jQuery基础与应用#最流行的前端JS开发框架就要这么用

收藏

3084人加入学习
价格
限期免费
教学计划
学习有效期
2020-04-04至2023-06-30
课程介绍

本课程是JavaScript的高级框架jQuery部分, 以最新版本的jQuery进行教学, 全面讲解了jQuery的各种API的应用, 每个知识点都配合相关的实用案例进行讲解, 课程讲解细致并和实战应用相结合。是jQuery非常不错的一课程。

1关: jQuery的基本应用 本关主要介绍js的框架功能, 讲解jQuery的引入和基本使用, 重点讲解了几种常用的jQuery选择器,并通过实例演示介绍jQuery的一些基础功能。

2关:jQuery编写页面特效 本关主要讲解了jQuery操作样式,包括基本的样式操作和类样式操作, 也详细介绍了jQuery处理动画,并通过实例演示一些常见特效的实现过程。

3关:jQuery创建元素和操作属性 本关主要讲解jQuery创建新元素加到页面中,并操作元素的属性,重点介绍了jQuery提供的内部属性方法,并结合实例详细讲解了本关知识点应用。

4关:jQuery的事件操作 本关内容包括各种jQuery的事件操作和事件绑定方式和解绑方法,并对比介绍不同事件的绑定方式, 每个应用都有实例结合对照讲解.

      jQuery笔记

      一定要放在下面

      1.Jquery的顶级对象$
      DOM中的顶级对象:document-----页面中的顶级对象
      document.下面属性和方法
      BOM中的顶级对象是浏览器:window----浏览器的顶级对象
      window.浏览器中的属性和方法
      window.document

      jquery的顶级对象:jQuery -----$

      2.页面加载事件
      //页面所有的代码都加载完成之后才执行
      $(window).load(function () {
      console.log("我执行了111111");
      });
      //页面中基本的标签加载完成之后就执行了
      $(document).ready(function () {
      console.log("我执行了22222");
      });

      //简化方法
      $(function () {
      console.log("我是最简单的方法加载页面")
      })

      3.常用的jquery中的方法
      //常用的选择器 id 元素 类
      //常用的方法 操作样式 操作内容 操作属性
      //常用的事件 点击事件 鼠标放上 鼠标离开
      $(function () {
      $("li").text("bjyxszd");
      $("#btn").attr("data-index","100"); //添加属性
      });

      4.jquery对象和DOM对象互转


      //DOM对象转成jquery对象
      / window.onload = function () {
      //DOM 对象
      var obj = document.getElementById("btn");
      /!
      obj.onclick = function () {
      this.style.backgroundColor ="red";
      }!/
      //jquery对象 $(window).load(); $(document).ready();
      $("#btn").click(function () {
      $(this).css("background","pink");
      })
      }
      /

      //jquery 对象转成DOM 对象
      /
      1.jquery对象.get(0);
      2.jquery对象[0];
      /

      $(function () {
          /*$("#btn").get(0).onclick = function () {
              this.style.backgroundColor ="yellow";
          }*/
          $("#btn")[0].onclick = function () {
              this.style.backgroundColor ="yellow";
          }
      })
      

      $(this).val()=="关灯" .val() 是获取值 $(this).val('关灯'); .val('赋值')

      5.jquery的选择器
      //DOM获取元素的方式
      document.getElementById("id的值");//根据id获取元素 一个
      document.getElementsByTagName("标签名");//根据标签名字获取元素 多个
      document.getElementsByName("name属性");//根据Name属性获取元素 多个
      document.getElementsByClassName("类名");//根据class类名获取元素 多个

      //jquery选择器
      1.id选择器:$("#id的值") ==》1个
      2.元素选择器:$("标签名") ==》多个
      3.类选择器:$(".类名") ==》多个
      4.$("*") ==>所有

      6.标签+类选择器 $(li.cls)
      7.多条件选择器 $(span,li,div,.cls,#btn);
      8.层级选择器
      A.后代选择器(子元素中的元素,儿子,孙子,子子孙孙)
      $(“#dv li”)或者$(“ul li”)或者$(“.cls li”)
      B.子代选择器(直接的所有子元素,儿子)
      $(“#ul>li”)或者$(“div >span”)或者$(“.cls >li”)
      C.获取当前元素的相邻元素: //这个元素后紧跟着的第一个元素
      $(“div + span”)
      D.获取当前元素后面所有元素://这个元素后跟着的所有元素
      $(“div ~ span”)
      E.常见的选择器,(可以理解成是过滤器)
      :even偶数 选择器
      :odd奇数 选择器
      $(function () {
      alert("哈哈");
      $("#u1 li:odd").css("backgroundColor","yellow");
      $("#u1 li:even").css("backgroundColor","blue");
      });
      9.索引选择器
      eq(3)获取索引为3的元素; 一个
      gt(3)索引大于3的所有元素; 多个
      lt(3)索引小于3的所有的元素; 多个

      $("#u1 li:eq(7)").css("backgroundColor","red");
      $("#u1 li:gt(7)").css("backgroundColor","green");
      $("#u1 li:lt(5)").css("backgroundColor","black");

      10.jquery操作样式常见的方法
      .html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
      .text()方法,设置标签中间显示的文本内容,类似于innerText
      .val()方法.设置input标签中value的值,类似于value
      .css()方法,.设置元素的样式,类似于style
      注意:
      ()中写字符串,一个参数,就是要设置的值,什么也不写,返回的是这个属性的值 如:$("#dv").html(); ==>返回标签里的内容
      .css()写的是键值对

      A.操作样式:
      //第一种方式
      /$("#btn").click(function () {
      $("#dv").css("width","100px");
      $("#dv").css("height","100px");
      $("#dv").css("backgroundColor","red");
      })
      /

      //第二种方式
      /$("#btn").click(function () {
      $("#dv").css("width","100px").css("height","100px").css("backgroundColor","red");
      })
      /

      //第三种json格式
      $("#btn").click(function () {
      $("#dv").css({"width":"100px","height":"100px","backgroundColor":"red"});
      })
      })

      11.操作类样式
      addClass();参数:类样式名字,添加样式的同时不会干掉原有的样式
      removeClass();不写参数移除所有的类样式
      removeClass(“cls“);移除指定的一个类样式

      //判断该元素是否有这个类样式
      console.log($("#dv").hasClass("cls2"));
      //toggleClass(类名); 如果有此类就删除,没有就添加
      $("body").toggleClass("cls");

      var index = $(this).index(); //对应索引操作

      $(".bottom>li").eq(index).addClass("selected").siblings("li").removeClass("selected");

      12.链式编程
      链式编程原理:内部返回了return this当前对象
      有些方法设置了值才能返回当前对象,如果没有设置值,是获取属性对应的值,而不是当前对象

      13.获得兄弟元素的方法
      next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)
      nextAll(); //当前元素之后的所有兄弟元素
      prev(); //当前元素之前的紧邻着的兄弟元素(上一个)
      prevAll(); //当前元素之前的所有兄弟元素
      siblings(); //当前元素的所有兄弟元素(同袍元素 除自己外)

      //end() 断链 可以恢复到断链之前的效果
      $(this).prevAll().css("background","blue").end().nextAll().css("background","yellow");

      14.jquery显示隐藏动画
      hide()方法:
      $("div").hide(1000); //参数是数字 参数:可以是一个number类型,也可以是字符串类型
      $("div").hide("slow");
      $("div").hide("normal");
      $("div").hide("fast"); $("div").hide(1000,function () {
      alert("隐藏完毕");
      });

      show()方法:
      $("div").show(1000); //参数是数字
      $("div").show("slow");
      $("div").show("normal");
      $("div").show("fast");
      $("div").show(1000,function () {
      alert("显示完毕");
      });

      $(function () {
      $("#btn1").click(function () {
      //last() 最后一个元素开始隐藏*
      $("div>img").last().hide(600,function () {
      //arguments.callee 相当于递归 一个一个元素 进行隐藏
      $(this).prev().hide(600,arguments.callee);
      })
      });
      $("#btn2").click(function () {
      //first() 第一个元素开始显示
      $("div>img").first().show(600,function () {
      //arguments.callee 相当于递归 一个一个元素 进行隐藏 *
      $(this).next().show(600,arguments.callee);
      })
      });
      })

      15.滑入滑出淡入淡出动画
      $("div").slideUp(1000);//滑入
      $("div").slideDown(1000);//滑出
      $("div").slideToggle(1000);//切换滑入滑出
      $("div").fadeIn(1000);//淡入
      $("div").fadeOut(1000);//淡出
      $("div").fadeToggle(1000);//切换淡入淡出

      //可以设置透明度,参数1:时间,参数2:到达透明度
      $(“div”).fadeTo(1000,0.3);//一个参数,常用
      //参数1:没有时间,参数2:到达透明度
      //和css("opacity",0.1);
      $("div").fadeTo(0,0.1);//一个参数

      16.自定义动画:animate方法
      第一个参数:JSON对象,可以通过键值对,设置多个样式(数值的属性可以改,颜色不能改)
      第二个参数:动画的时间
      第三个参数:回调函数(可选)

      停止动画效果:stop()方法,解决下拉框案例中的bug
      $(this).children("ul").stop().show(500);//显示ul

      17.创建元素和追加元素
      DOM中可以动态创建元素:document.createElement(“标签的名字”);
      jQuery中同样可以创建元素标签,并且返回的就是jQuery对象,可以直接调用方法进行使用
      append:方法用来在元素的末尾追加元素(最后一个子节点)。增加元素末尾(儿子)(元素内部) 把元素追加到其他元素里面
      prepend:在元素的开始添加元素(第一个子节点)。增加元素开始(儿子)
      after:在元素之后添加元素(添加兄弟)增加元素后面(兄弟)
      before:在元素之前添加元素(添加兄弟)增加元素前面(兄弟)

      $('#dv').append($('学习猿地'));
      append方法可以把页面中的元素添加到其他标签中,添加的方式属于移动
      append() 相当于剪切 $("#dv>p").clone() 把$("#dv>p")克隆一份 clone():克隆
      $("#dv1").append(obj); //在dv1里添加#dv>p 被动
      $($("#dv>p")).appendTo($("#dv1")); //把"#dv>p"追加到dv1里面 主动

      18..html方法
      //设置内容后,原内容丢失,返回的是当前对象
      //var dvObj=$("div").html("哈哈");
      //设置层中间显示其他的标签内容
      $("div").html("学习猿地");
      //直接获取的是标签中的内容
      console.log($("div").html());
      html方法设置内容,返回的是当前的对象,如果不传入参数,获取的是标签中的内容
      .text方法同上
      创建元素的方式:
      .html方法可以创建元素
      $(“html标签”)可以创建元素

      19.清空层中的内容和移除层
      $("div").html("");//删除元素中的所有内容 $("div").html();括号里面什么也不加是获取内容
      $("div").empty();//清空元素中的所有内容
      $("div").remove();//删除自身,自杀式
      $("div>p").remove();//可以删除子元素的某一个节点

      20.设置和获取表单的value
      常见的表单标签都可以通过val方法获取和设置value值
      $("#txt1").val("admin"); console.log($("#txt1").val());
      $("#s1").val(2);//设置value为2的选中
      console.log($("#s1").val());

      textarea 可以用 text() 方法设置和获取value

      21.设置和获取系统属性值或者自定义属性
      attr()方法:可以设置属性值,两个参数:1.属性名字,2,属性值
      attr()方法:可以获取属性值,一个参数:1.属性名字

      $(function () {
      $("#btn").click(function () {
      var aobj = $('');//创建a元素
      aobj.text("百度"); //标签内容
      aobj.attr("href","https://www.baidu.com");
      aobj.css("background","pink").css("color","red");

              (aobj).appendTo($("#dv"));
          })
      })
      

      22.bool属性的设置方法 prop("属性","值");


      java
      php
      go
      python
      jquery


      //$("#dv :checkbox") 选择器的一种 选择dv下所有属性是checkbox的元素
      $(function () {
      $("#btnall").click(function () {
      $("#dv :checkbox").prop("checked",true);
      });
      $("#btnoall").click(function () {
      $("#dv :checkbox").prop("checked",false);
      })
      })

      var checkedval = $(this).prop('checked');
      $("#dv input").prop('checked',checkedval);

      23.获取宽度和高度的方法
      //1.获取宽度高度 width() height()
      console.log($("#dv").width());
      console.log($("#dv").height());

              //2.设置宽度
              //console.log($("#dv").width(500));
      
              //3.包含padding innerWidth()) innerHeight())
              console.log($("#dv").innerWidth());
              console.log($("#dv").innerHeight());
      
              //4.包含padding+border  outerWidth()  outerHeight()
              console.log($("#dv").outerWidth());
              console.log($("#dv").outerHeight());
      
              //5.包含padding+border+margin(true)  outerWidth(true)  outerHeight(true)
              console.log($("#dv").outerWidth(true));
              console.log($("#dv").outerHeight(true));
      
              //6.获取页面可视区域
              console.log($(window).width());
              console.log($(window).height());
      

      24.获取偏移量位置
      设置的时候元素在设置前如果没有脱离文档流,设置的时候会自动进行脱离文档流,默认为relative;
      如果设置前有脱离文档流,那么设置的时候直接改变位置。

      A.获取偏移量
      console.log($("div").offset().left); //左偏移
      console.log($("div").offset().top); //右偏移
      B.设置偏移量
      $("div").offset({"left":100,"top":100});

      25.滚动位置
      $(document).scrollLeft(500);==》距左滚动500
      $(document).scrollTop(200);==》距上滚动200
      console.log($(document).scrollLeft());
      console.log($(document).scrollTop());
      整个屏幕加载滚动事件
      $(window).scroll(function () {})

      26.事件绑定bind()方法
      $(function () {
      $("#btn").bind({"click":function () {
      alert("哎呀妈呀");
      },"mouseover":function () {
      $(this).css("backgroundColor","red");
      },"mouseout":function () {
      $(this).css("backgroundColor","");
      }});
      })

      27.绑定事件的on()方法 手机开发中也是使用on的方式绑定事件
      *on()方法为父级元素绑定事件,子元素来触发.**
      $(function () {
      $("#btn").click(function () {
      $('

      我是p元素

      ').appendTo($("#dv")); //把p加入到dv里面
      //$("#dv").append('

      我是p元素

      '); 在dv里面追加p元素

              /*
              on()  绑定事件 的三个元素
              * 参数1:绑定事件的类型
              * 参数2:绑定事件的元素
              * 参数3:执行事件的函数
              */
              $("#dv").on("click","p",function () {
                  alert("看见我了没?")
              })
          })
      })
      

      28.解除绑定事件
      .off()方法可以解绑事件
      $("#btn1").on("click",function () {
      alert("被点了");
      });

      $("#btn2").on("click",function () {
      $("#btn1").off("click");
      });
      

      推荐:用什么方式绑定事件就要用对应的解绑事件解除绑定
      $("#btn").bind("click",function(){});
      $("#btn").unbind("click");
      $("#dv").delegate("p","click",function(){});
      $("#dv").undelegate("p","click");

      //解绑多个事件
      $("#btn1").off("click mouseover");
      多个事件解绑 加 空格

      $(function () {
      $("#div").on("click",function () {
      alert("层被点了");
      });
      /$("#div").on("click","p",function () {
      alert("p被点了");
      });
      /
      $("#btn1").on("click",function () {
      //解绑事件的时候div和p同时解绑(所有的)
      //自身绑定的事件以及动态绑定的事件都会解绑 $("div").off("click");
      });
      //解除绑定事件:自身的绑定事件和动态绑定的事件都会被解绑
      //$("#div").off("click","**");
      //$("#div").off();//全部解绑
      //固定的写法,解除p的绑定事件,自身div的事件不会被解绑
      })

      29.事件的触发

      .trigger('focus').trigger('select'); 获取焦点 和选中内容的事件触发
      $(function () {
      $("#btn1").click(function () {
      //$("#txt").focus(); //直接调用元素事件
      //$("#txt").trigger("focus"); //同上效果
      $("#txt").triggerHandler("focus");//不会触发浏览器默认获取焦点的行为,但是会执行事件
      })
      })

      .trigger()和.triggerHandler()区别前者会触发浏览器的默认行为,并执行事件,后者不会触发浏览器默认行为,但是会执行事件
      获得焦点属于浏览器的默认行为

      30.事件冒泡处理
      $("#dv2").click(function () {
      alert("我是dv2");
      return false;
      });
      $("#dv3").click(function(event) {
      alert("我是dv3");
      event.stopPropagation();
      //return false;
      });

          $("#monkey").click(function() {
              alert("我是连接");
              return false;  //取消默认事件  阻止跳转
          });
      

      31.隐式迭代each()
      $(function () {
      $("#uu>li").each(function (index,element) {
      //each():相当于循环遍历
      //console.log(index);
      $(element).css("opacity",(index + 1) / 10); //颜色渐变
      })
      })

      32.解决多库共存
      //让jQuery释放对$的控制权
      $.noConflict();
      var $="哦买噶";
      console.log($);
      jQuery(function () {
      jQuery("#btn").click(function () {
      alert("正常的执行");
      });
      });

      实践真呀,课后作业也不少,还都有讲解,学习猿地真棒!
      收获很大!感谢老师!!!!!!!!!!!!!!!!
      课程内容详实,非常适合新手
      挺简单的,通俗易懂,感恩作者
      感谢高老大的课程,很适合入门,清晰有条理
      非常实用,老师出了JavaScript, BOM和DOM加这个jQuery基础系列,很喜欢,谢谢老师
      推荐好课(试听)
      更新

      Java  实战   5275

      最新课程体验中
      限时免费

      升级

      前端  实战   2813

      最新课程体验中
      限时免费

      更新

      PHP  实战   3185

      最新课程体验中
      ¥9.9

      更新

      前端  中级   3195

      最新课程体验中
      限时免费

      更新

      前端  实战   2893

      最新课程体验中
      限时免费

      升级

      UI/UE  中级   1907

      最新课程体验中
      限时免费

      更新

      Linux  中级   2929

      最新课程体验中
      限时免费

      更新

      Python  实战   3703

      最新课程体验中
      限时免费

      辅导猿
      Sample avatar
      xxyd_python

      辅导猿

      Sample avatar
      xxyd_java

      辅导猿

      Sample avatar
      xxyd_ui

      辅导猿

      Sample avatar
      xxyd_php

      辅导猿

      Sample avatar
      xxyd_h5x

      辅导猿

      最新成员
      Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar
      学习资料 内容数量
      任务数量 116 关
      视频教程 350 小时+
      教学案例 800 个+
      辅助资料 340 个+
      练习作业 460 个+
      阶段测评 1700 道+
      最新评价
      Image placeholder

      王凡

      评价:实践真呀,课后作业也不少,还都有讲解,学习猿地真棒!

      Image placeholder

      GoCo

      评价:收获很大!感谢老师!!!!!!!!!!!!!!!!

      Image placeholder

      Wangmafei

      评价:课程内容详实,非常适合新手

      Image placeholder

      是飒飒

      评价:挺简单的,通俗易懂,感恩作者

      Image placeholder

      千年老妖

      评价:感谢高老大的课程,很适合入门,清晰有条理

      Image placeholder

      Mr_xie

      评价:非常实用,老师出了JavaScript, BOM和DOM加这个jQuery基础系列,很喜欢,谢谢老师