jQuery的基本使用

jQuery是什么？能干什么？

• jQuery是一款开源免费的JS 框架，对JS进一步封装
• 没有改进语法，只是让我们开发者，在操作页面元素、给页面元素绑定事件、发送AJAX请求等方面，代码可以写得更简洁一些

jQuery版本介绍

• jQuery1.x：经典版本，兼容 IE6、7、8。
• jQuery2.0：改进版本，后续版本将不再支持 IE6、7、8浏览器

jQuery的基本使用

• jQuery对象与Dom对象之间的转换

  按钮
  

  // $与jQuery变量作用一致
  console.log($ === jQuery);//true
  
  // Dom对象
  let btn = document.getElementById("btn");
  console.log(btn);
  
  // jQuery对象
  let $btn = $("#btn");
  console.log($btn);
  
  // Dom对象转换为jQuery对象
  console.log($(btn));
  
  // jQuery对象转换为Dom对象
  console.log($btn.get(0));
  

• jQuery的常用方法

  做人要低调
  
  
  
  
  
      jQuery 常用方法:
  
      jQuery对象.size(); // 获取 jQuery 中包含元素的个数
  
      jQuery对象.val(); // 操作元素的 value 属性
  
      jQuery对象.html(); // 操作元素内的 HTML 代码
  
      jQuery对象.text(); // 操作元素内的文本，忽略 HTML 标签
  
      jQuery对象.css(); // 操作元素的 style 属性
  
  
  
  
  
      
  
          问题 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数
      
      
  
          问题 2：获取 id 为 username 元素的 value 属性值
      
      
  
          问题 3：设置 id 为 username 元素的 value 属性值为"叩丁狼教育"
      
      
  
          问题 4：对比 h1 元素的内容和纯文本的区别
      
      
  
          问题 5：把 h1 元素内容的颜色改为黄色
      
  
  

  //问题 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数
  console.log($("p").size());
  
  //问题 2：获取 id 为 username 元素的 value 属性值
  console.log($("#username").val());
  
  //问题 3：设置 id 为 username 元素的 value 属性值为"禹王穆好帅"
  $("#username").val("禹王穆好帅");
  
  //问题 4：对比 h1 元素的内容和纯文本的区别
  console.log($("h1").html());
  console.log($("h1").text());
  
  //问题 5：把 h1 元素内容的颜色改为黄色
  $("#h1").css("color", "yellow");
  

• jQuery的常用选择器

  使用 ID 选择器获取当前 DIV元素
  
      
  item1
      
  item2
      
  item3
      
  item4
  
  
      
  item1
      
  item2
      
  item3
      
  item4
  
  
  
      
  
          问题 1：获取 id 为 msg 的元素的内容
      
      
  
          问题 2：获取所有的 li 元素并打印数量
      
      
  
          问题 3：获取所有 class 为 selected 的元素，字体颜色改为 red
      
  
  

  // 问题 1：获取 id 为 msg 的元素的内容
  console.log($("#msg").text());
  
  // 问题 2：获取所有的 li 元素并打印数量
  console.log($("li").size());
  
  // 问题 3：获取所有 class 为 selected 的元素，字体颜色改为 red
  $(".selected").css("color", "red");
  

• jQuery的层次选择器

  
      
  item1
      
  item2
      
  item3
      
  
          
  
              
  item1
              
  item2
              
  item3
              
  item4
          
      
  
  LABEL1
  
  
  
  
  LABEL2
  
  
  
  
  
      LABEL3
      
      
  
  
  
      
  
          问题 1：获取所有 ul 下的所有 li 元素，并打印分析结果
      
      
  
          问题 2：获取 id 为 myul 下的所有子 li 元素，并打印分析结果
      
      
  
          问题 3：获取所有 label 元素后的 input 元素，并打印分析结果
      
      
  
          问题 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果
      
  
  

  // 问题 1：获取所有 ul 下的所有 li 元素，并打印分析结果
  console.log($("ul li"));
  
  // 问题 2：获取 id 为 myul 下的所有子 li 元素，并打印分析结果
  console.log($("#myul > li"));
  
  // 问题 3：获取所有 label 元素后的 input 元素，并打印分析结果
  console.log($("label ~ input"));
  
  // 问题 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果
  console.log($("label + input"));
  

• jQuery的过滤选择器

  
  
      Flowers
      Gardens
      Trees
  
  
  
      
  
          问题 1：获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加
          id 属性，再通过 id 选择器找
      
      
  
          问题 2：获取选中的 option
      
  
  

  // 问题 1：获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加id 属性，再通过 id 选择器找
  console.log($("input[type=hidden]").val());
  
  // 问题 2：获取选中的 option
  console.log($("option:selected").text());
  

• jQuery事件绑定

  btn1
  

  $("#btn1").click(function () {
      // this是Dom对象
      console.log(this);
  
      // 转换为jQuery对象
      console.log($(this));
  });
  

• jQueryDOM操作

  SPAN
  DIV1
  DIV2
  
  
      
  item1
      
  item2
      
  item3
      
  item4
      
  item5
  
  
  
  
  
      
  
          
  内部插入节点(插入子节点)
          
      
  
  
  
      
  
          
  外部插入节点(插入兄弟节点)
          
      
  
  
  
      
  
          
  删除节点
          
          
          
      
  
  

  //父亲加小儿子
  $("#append").click(function () {
      $("#div1").append($("#span"));
  });
  
  //哥哥加弟弟
  $("#after").click(function () {
      $("#div2").after($("#div1"));
  });
  
  //清空所有节点
  $("#empty").click(function () {
      $("#ul").empty();
  });
  
  //删除自己 detach
  $("#btn").click(function () {
      console.log("我被删除了...");
  });
  
  let $btn;
  //删除节点
  $("#remove").click(function () {
      //$btn = $("#btn").remove();
      $btn = $("#btn").detach();
  });
  
  //恢复节点
  $("#resume").click(function () {
      $("#ul").after($btn);
  });
  

• jQuery属性操作

  .other {
      background-color: orange;
      font-size: 20px;
  }
  .myBtn{
      background-color: red;
  }
  

  
  
      
  
          
  属性操作
          
          
      
  
  
      
  
          
  CSS 操作
          
          
          
          
      
  
   男
  

  // 获取属性值
  $("[id=getAttr]").click(function () {
      console.log($("legend").val());
  });
  
  // 设置属性值
  $("[id=setAttr]").click(function () {
      $("legend").val("禹王穆专属");
  });
  
  // 添加CSS
  $("#addClass").click(function () {
      $("legend").addClass("other");
  });
  
  // 删除CSS
  $("#removeClass").click(function () {
      $("legend").removeClass("other");
  });
  
  // 轮换CSS
  $("#toggleClass").click(function () {
      $("legend").toggleClass("myBtn");
  });
  
  // 判断CSS
  $("#hasClass").click(function () {
      console.log($("legend").hasClass("myBtn"));
  });