JQuery快速入门

JQuery提倡快速简洁

是一个普通的js文件,引入方式和一般javaScript文件一样

用script标签引入

<script type="text/javascript" src="../jquery-1.4.2.js"></script>

人们把JQuery称为JavaScript的框架(实际有点夸张),其实是一个JS的代码库

JQuery有两个文件,一个有缩进版,一个min版,其实内容都是一样的

只需导入:<script src="https://code.jquery.com/jquery-3.6.0.js"></script>即可使用jQuery

增:

 $("body").append("<h1>大标题</h1>")//在body结束位置加入标签
      $("body").prepend("<h2>小标题</h2>")//在body开始位置插入标签
      $("<h3>3标题</h3>").appendTo("body")//把h3标签插入到body结束位置
      $("<h4>4标题</h4>").prependTo("body")//把h4标签插入到Body开始位置

效果:

删:

$("h2").remove();//删除所有h2标签
      $("h1").detach();//删除所有h1标签
      $("h3").empty;//清空h3标签

 

改:

 $("h4").text("<i>h4</i>")//设置文本内容
      $("h3").text("<i>h3</i>")//设置标签内容,会识别标签字符串

查:

$("li")[2]//找到第三个li标签,得到的是一个li标签
      var li3 = $("li").eq(2)//找到第三个li标签得到一个新的JQuery对象
      console.log(li3.parent());//找父元素
      console.log(li3.children());//找子元素
      console.log(li3.siblings());//找所有兄弟标签
      console.log(li3.prev());//找相邻的上一兄弟元素
      console.log(li3.prevAll());//找前边所有兄弟元素
      console.log(li3.next());//找相邻的下一个兄弟元素
      console.log(li3.nextAll());//找后的所有兄弟元素

标签属性操作:

普通属性:attr可设置所有属性

      $("h4").attr("age","10")//设置属性
      console.log($("h4").attr("age"));//读取属性
      $("h4").attr("id","abc")
      console.log($("h4").attr("id"));

效果图

 class属性:

 $("h4").attr("class","a b")
      $("h4").addClass("c")
      $("h4").removeClass("a")
      $("h4").toggleClass("c")
      var bool = $("h4").hasClass("b")

style样式

 $("h4").css("font-size","40px")//参数可以是属性名和属性值
      $("h4").css({  //参数也可以是样式对象
          color:"red",
          backgroundColor:"gray", //属性如不加引号用小驼峰
          "border-radius":"20px"//属性加引号用小写
      })

jQuery动画:

      $("h4").animate({

          fontSize:"100px"

      },1000,function () {

          console.log("动画执行结束")

       })//animate执行一个JS动画,1必选,动画结束时的样式对象,2可选,动画执行时间,默认400ms,3可选,动画回调函数,执行结束时调用发生什么

jQuery动画不支持颜色和旋转缩放的动画

jQuery最大优点:链式调用

链式调用:一个对象可以连续打点调用多个函数,这种结构叫链式调用结构

$("h3").css("color"/"blue").attr("id","h3").animate({fintSize:'50px"})

jQuery中每一个函数的返回值都是调用它的jQuery对象本身,所以一个函数调用后返回这个jQuery对象可以继续调用其他函数形成一个链式结构

链式调用支持换行

自定义jQuery插件

匿名函数自调用

IIFE立即调用函数(一个函数自己调用自己)

(function(){

console.log("执行了我的自定义插件")

var count = 100;

}

函数自调用好处:使立即执行的代码全部封装到一个局部作用域中,独立起来,不会影响全局作用域的任何变量

在封装插件时,建议使用函数自调用结构,以避免污染全局作用域

$.fn给jQuery添加自定义函数

(function ($,window,ducument) {

    $.fn.myColor = function () {

        alert("执行了自定义color")

     }

 }(jQuery,window,document))

完整封装后

(function ($,window,ducument) {

    $.fn.myColor = function (optopns) {

        console.log("执行了自定义color",optopns,this)

        //this指的是调用这个函数的jquery对象

        this.css("color",optopns)

     }

 }(jQuery,window,document))

调用:

$("h1").myColor("red")