jQuery 入门细说

`$` 是否等于 jQuery

答案：等于
jQuery 对象是一个返回值
jQuery 是一个静态的方法，是直接定义在 jQuery 上的方法

`$` 符号的应用场景

$(选择器,上下文): 获取元素

上下文：上下文是指当前元素所处的环境，可以理解为容器。
假如现在container容器下有一个标题h2,那这个h2标题的上下文就是 container

<ul id="first">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<script>
  // 1.选择器
  $("#first").css("color", "blue");
  //   2. 选择器和上下文的共用
  $("li", "#first").css("color", "green");
</script>

$(JS 对象)

\$(js 对象): 包装器,将原生的 js 对象转为 jQ 对象,这样就可以使用 jQuery 中的功能

      //   原生JS
      document.body.style.backgroundColor = "yellow";
      //   转换为JQ
      $(document.body).css("backgroundColor", "lightgreen");

每一个 jquery 的方法都自带迭代功能(自带循环)

      document.querySelectorAll("li").forEach((item) =>item.style.color = "red")
      $(document.querySelectorAll("li")).css("color", "red");

jQuery对象中某一个元素还原成原生的js对象, get()

// 原生JS代码实现
$(document.querySelectorAll("li")).get(1).style.color = "blue";

$(html 文本):生成元素

      //   原生JS插入
      const h2 = document.createElement("h2");
      h2.innerHTML = "Hello H2 Title!";
      document.body.appendChild(h2);
      //   JQ插入
      $("<h2>JQ插入的H2标题</h2>").appendTo(document.body);

$(callback):回调函数

作用：传一个回调函数,这个函数可以在页面 dom 创建完成的时候自动调用

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script>
    $(function () {
      $("h2").css("color", "red");
    });
  </script>
  <title>$()函数</title>
</head>

上述回调函数是在所有页面加载完成之后才会去执行。

`getter` / `setter` 方法

attr()

attr(name):只有一个属性的时候表示获取该属性名
attr(name,value)获取/设置元素的属性
name是获取元素的属性名，value是设置元素属性的值

        const form = $("form")
        console.log(form.attr("action"))
        // 使用attr方法来重新设置属性action的value值
        form.attr("action","admin/text1.php")
        console.log(form.attr("action"))

第二个参数支持回调函数：attr(name,function)
什么是回调函数呢？回调函数就是自己写好但是不调用，留给其他开发人员刁调用的函数

        const form = $("form")
        form.attr("action",()=>{
          // 将method全部转为小写
            let method = form.attr("method").toLowerCase()
            // 判断是否是get方式，是就跳转到admin/retuan.php，反之跳转login.php
            return method === "get"? "admin/retuan.php":"login.php"
        })
        console.log(form.attr("action"));

css()

css(name): 获取
css(name,value): 设置
css(name, callback): 第二个参数支持回调

        const form = $("form")
        console.log(form.css("width"));
        form.css("border","2px solid red")

添加边框效果：

小案例，实现注册表单随机背景：

Math.floor和Math.random > Math.random：返回 0-1 之间的小数。
Math.floor向下取整，返回整数。
Math.random返回 0-1 之间的小数：

console.log(Math.random())

Math.floor(x)向下取整，x为一个最大值，返回的是小于或等于x的整数
console.log(5) //最后返回的值是5
console.log(5.5) //最后返回的值是5
console.log(-5.5) //最后返回的值是-5

案例代码：

        form.css("background-color",()=>{
            let bgcolors = ["tan","lightgreen","lightred","lightblue"]
            // 四个元素，索引0-3
            let i =Math.floor(Math.random()*bgcolors.length)
            return bgcolors[i]
        })

val(): 表单元素的 value 属性的值
查看元素value属性的值：

查看值：

        console.log($("#email").val());
        let data = {
            email : $("#email").val(),
            password : $("#password").val(),
            status: $('input:radio[name="save"]:checked').val(),
        }
        console.log(data)

更新值：

        $("#email").val("123456789@qq.com");
        console.log($("#email").val());

text()和html()

html() ==> innerHTML
text() ==> innerText

<h2 class="red"><em>用户登录</em></h2>
<script>
  // innerHTML: 返回完整的内容,包括html标签
  console.log(document.querySelector("h2").innerHTML);
  // innerText: 只返回文本
  console.log(document.querySelector("h2").innerText);
  console.log($("h2").html());
  console.log($("h2").text());
</script>

`dom` 操作

添加元素

append:必须是在父元素上调用，必须要有一个父级。parent.append(新元素) >appendTo:是在当前元素上调用，往父元素上添加。current.appendTo(parent)

      const ol = $("<ol>");
      $("<li>").text("iphone12").appendTo(ol);
      $("<li>").text("小米10Pro至尊版").appendTo(ol);
      $("<li>").text("华为Mate40").appendTo(ol);
      $("body").append(ol);

过滤器

将 jQuery 对象转为 JS 原生对象

[index]和get(index)都可以实现
console.log($("ul")[1].style.color = "red") > console.log($("ul").get(1).style.color = "blue")
过滤

children和find的区别：
children只能选择子元素集合,不能选择所有后代(任何层级)，但是find可以选择所有层级。

      let children = $("ul").filter("#first").children();
      //   选择第一个子元素
      children.first().css("background", "blue");
      //   选择任意一个元素：eq(index)
      children.eq(2).css("background", "lightgreen");
      children.last().css("background", "red");
      console.log(
        $("#first").filter("#first").find(".red").css("background", "yellow")
      );

jQuery 事件

事件是分等级的。事件属性或 onclick 定义的是 DOM0 级事件，它不可叠加。而 addEventListener 事件监听器添加的事件则 DOM2 级事件，可叠加。也许你会问有没有 DOM1 级事件，DOM 级别 1 于 1998 年 10 月 1 日成为 W3C 推荐标准。1 级 DOM 标准中并没有定义事件相关的内容，所以没有所谓的 1 级 DOM 事件模型。在 2 级 DOM 中除了定义了一些 DOM 相关的操作之外还定义了一个事件模型，这个标准下的事件模型就是我们所说的 2 级 DOM 事件模型。

$(‘selector’).事件()定义的DOM0级事件

语法:$(‘selector’).事件(function(event){})或$(‘selector’).事件((event)=>{}) 前者是 function 定义的回调函数，后者是箭头函数定义的回调函数，要注意若是使用\$(this)则必须用第一个。它对应原生 JS 的事件属性定义事件
$(#email).blur(function(ev){console.log($this).val()};)

$(‘selector’).on(事件类型,[数据,]回调函数)定义的DOM2级事件

它对应原生 JS 的事件监听器 addEventListener。

$('input').on('click', event => { console.log('on => ', event); });
//   若是要传递数据则使用json格式的对象，传递给event.data
$('input').on('click', { name: 'ggg', pwd: '123456' }, event => { console.log('on => ', event.data); });