jQuery基础使用

    
    script src="./jquery-3.4.1.min.js">script>

      // 通过选择器获取jquery对象
      $("#id")
      // 标签对象转换为jquery对象
      $(document.body)
      // 数组对象转换为jquery对象
      $([1,2,3])
      // html标签转化为jquery对象
      $("
")
      // $(document).ready()的缩写形式，表示DOM文档加载完毕执行回调，比window.onload（DOM和所有文件加载完毕时执行）先执行
      $(function(){})

      // 将jquery对象转换为原生对象
      $("#id").get(0)
      $("#id")[0]

      $("#id>p").each(function(i){
          console.log($(this),i)
      })

        $(‘ul li:first‘).html(‘

12345

‘) // 选中第一个 $(‘ul li:last‘).html(‘

12345

‘) // 选中最后一个 $(‘ul li:even‘).html(‘

12345

‘) // 选中所有奇数个 $(‘ul li:odd‘).html(‘

12345

‘) // 选中所有偶数个 $(‘ul li:eq(1)‘).html(‘

12345

‘) // 选中下标，第某个 $(‘ul li:gt(1)‘).html(‘

12345

‘) // 选中下标，某个之后的全部 $(‘ul li:lt(1)‘).html(‘

12345

‘) // 选中下标，某个之前的全部

        $(‘ul li‘).first().html(‘

12345

‘) // 第一个 $(‘ul li‘).last().html(‘

12345

‘) // 最后一个 $(‘ul li‘).eq(1).html(‘

12345

‘) // 选中下标，第某个,得到jQuery对象；.get()得到原生对象 $(‘ul li‘).not(‘.class‘).html(‘

12345

‘) // 选择类名为"class"元素之外的所有元素 $(‘ul li‘).hasClass(‘class‘) // 返回一个布尔值，判断是否存在class="class" $("ul").children(".class").css("color", "blue"); // 遍历ul，选择类名为"class"的所有子元素 $(".class").next().css("color", "blue"); // 选择类名为"class"元素后面的一个元素 $(".class").nextAll().css("color", "blue"); // 选择类名为"class"元素后面的所有元素 $(".class").prev().css("color", "blue"); // 选择类名为"class"元素前面的一个元素 $(".class").prevAll().css("color", "blue"); // 选择类名为"class"元素前面的所有元素 $(".class").parent().css("color", "blue"); // 选择类名为"class"元素的直接父元素 $(".class").parents().css("color", "blue"); // 选择类名为"class"元素的所有父元素

   // attr和prop用法相同，attr用于普通属性，prop用于值为false、true的属性（类似disabled、checked等）
        $(‘ul li‘).attr("title","这是一个li") // 添加属性
        $(‘ul li‘).attr({"title":"这是一个li","class":"li"}) // 添加多个属性
        $(‘ul li‘).removeAttr("title") // 移除一个属性
        $(‘:checkbox‘).prop("checked") // 获取复选框选中状态

      let root = document.getElementById("root");
      // 修改html
      root.innerHTML = "

12345

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

54321

"); // 修改文本text root.innerText = "12345"; $("#root").text("54321"); // 获取文本text console.log(root.innerText,"----->") console.log( $("#root").text(),"----->") // 返回或设置被选元素的 value 属性,比如 root.value = "12345"; $("#root").text("54321");

      // 获取样式
      console.log($("#root").css("color"))
      // 设置样式
      $("#root").css("color", "red")
      // 设置多个样式
      $("#root").css({color:"red",fontSize:100})
      // 获取节点距离当前视口（当前页面可见区域）的位置
      console.log($("#root").offset())  // {top: 44, left: 48}
      // 获取节点距离偏移父集的位置，具体查看API
      console.log($("#root").position())  // {top: 44, left: 48}

      // 给id="root"末尾添加一个子节点
      $("#root").append("
12345
")
      $("
12345
").appendTo("#root")
      // 给id="root"添加一个子节点在最前
      $("#root").prepend("
12345
")
      $("
12345
").prependTo("#root")
      // 在id="root"后追加一个节点
      $("#root").after("
12345
")
      // 在id="root"前追加一个节点
      $("#root").before("
12345
")
      // 将#root移至.class后
      $("#root").insertAfter(".class")
      // 将.class移至#root前
      $(".class").insertBefore("#root")

      // 替换节点
      $("#root").replaceWith("
12345
")
      $("
12345
").replaceAll("#root")
      // 删除节点中的内容,节点还存在
      $("#root").empty()
      // 删除节点及数据和事件
      $("#root").remove()
      // 删除节点，保留数据和事件
      $("#root").detach()

      // on集成所有事件功能，推荐
      $("#root").on("click",function(){})
      $("#root").on("focus",function(){})
      let fn=function(){}
      $("#input").on("focus",fn)
      // off取消所绑定的某事件
      $("#input").off("focus",fn)
      // on做事件委托，eg：#root下的p标签
      $("#root").on("click","p",function(){})

     $("#root").click(function(){})
      $("#root").focus(function(){})
      $("#root").one("click",function(){})  // 只执行一次

      $("#root").hide(500)  // 将显示出的元素从大到小隐藏
      $("#root").show(500)  // 将显示出的元素从小到大显示
      $("#root").toggle(500)  // 切换show和hide

      $("#root").slideUp(500)  // 将显示出的元素从下到上隐藏
      $("#root").slideDown(500)  // 将隐藏出的元素从上到下显示
      $("#root").slideToggle(500)  // 切换slideUp和slideDown

      $("#root").fadeOut(500)  // 淡出隐藏
      $("#root").fadeIn(500)  // 淡入显示
      // $("#root").fadeToggle(500)  // 切换fadeOut和fadeIn
      $("#root").fadeTo(5000,0.5)  // 淡出，指定透明度

      // 三个参数分别为最终状态（只能是数字样式）、动画时间、执行回调函数,.delay()设置连续动画时间间隔，插在多个animate与animate间
      $("#root").animate({width:200},500,function(){console.log("动画播放完毕")})

      $.ajax({
        url:‘请求地址‘,
        type:‘请求方式‘,
        async:布尔值（默认true，表示异步，false表示同步）,
        contentType: ‘application/json;charset=utf-8‘,
        data:{"name": "lisi", "age": 18}, // data,请求参数
        success:function(res{

        })
      })
      $.ajax.get({‘url‘,data,function(res){}})
      $.ajax.post({‘url‘,data,function(res){}})