jQuery基本用法

jQuery基本用法

在jQuery中使用JavaScript的相关函数或方法

选择器:

• $("#divId"):依据元素id来选择
• $(".divClass"):依据元素class来选择
• $(“div”):依据标签名来选择
• $(".ul1 > li : odd"):id为ul1 下的第偶数个li 标签的元素
• $(".ul1 > li : even"):id为ul1 下的第奇数个li 标签的元素
• $(".ul1 > li : last"):id为ul1 下的最后一个个li 标签的元素

 $("#topCheckbox").on("click", function () {
      // .addEventListener('click', bgColorChange)
      // .attr() 给元素新增属性
      // is() 存不存在某种属性 返回true和false
      
      if ($("#topCheckbox").is(":checked")) {
        $("input[type='checkbox']").attr("checked", true)
      } else {
        $("input[type='checkbox']").attr("checked", false)
      }
    })

给元素添加一个属性:
.attr(“属性名”,“属性值”)

 $("a").attr("href", "https://weibo.com/")

添加按钮的点击事件

$("#btn1").click(function () {
      // .removeAttr("属性名")
      // .addClass() 添加类
      // .removeClass()
      // $("a").removeClass("a1")
      // $("a").css({
      //   "font-size": "32px",
      //   "color": "red"
      // })
      // $("a").css("font-size", "32px")
      // $("a").removeAttr("href")
    })

聚焦和失焦

    $("input[type = 'text']").focus(function () {
      // 聚焦
      console.log(111111)
    })
    $("input[type = 'text']").blur(function () {
      // 失焦
      console.log($(this).val())
    })

键盘按下

    $("input[type = 'text']").keydown(function () {
      console.log("键盘按下", $(this).val())
    })

键盘按住

    $("input[type = 'text']").keypress(function () {
      console.log("键盘被按住了", $(this).val())
    })

键盘抬起

  $("input[type = 'text']").keyup(function () {
      console.log("键盘弹起", $(this).val())
    })