Comece a usar jQuery rapidamente em uma hora

Este tutorial foca na parte de conhecimento teórico, e a parte prática será atualizada posteriormente (em combinação com meu projeto de graduação!!!)

objeto jQuery

Objeto Dom

• Objeto de elemento obtido por meio de js

objeto jQuery

• O objeto elemento obtido por meio do método jQuery retornaconjunto de wrappers jQuery

Ao usar jQuery, certifique-se de apresentar o arquivo jQuery primeiro

Objeto Dom para objeto jQuery

• Basta incluí-lo com $

  var Domdiv=document.getElementById("div");
  var divjQuery=$(Domdiv);
  

Converter objeto jQuery em objeto Dom

• Basta obter o elemento com o subscrito especificado no conjunto de embalagens

  var div=divjQuery[0];
  

seletor jQuery

Seletor básico

seletor de identificação

var div=$("#div");//选择指定id的元素对象

Seletor de nome de elemento

var div=$("div");//选择指定标签的元素对象

seletor de classe

var div=$(".div");//选择指定class的元素对象

Seletor universal

var all=$("*");//选择所有元素对象

Seletor de combinação

var divs=$("#div1,#div2,#div3");//选择指定选择器的元素对象

Seletor de hierarquia

seletor descendente

var div=$("#parent div");//选择id为parent的父元素的所有（包含第一代，第二代等）div元素

seletor descendente

var div=$("#parent>div");//选择id为parent的直接（第一代）div子元素

seletor adjacente

var div=$(".parent+div");//选择css类为parent的下一个div元素（只会查找下一个元素，如果元素不存在，则获取不到）

Seletor de pares

var div=$(".parent~div");//选择css类为parent的之后的div元素（选择元素下面的所有指定元素）

seletor de formulário

seletor de formulário

$(":input");//查找所有input元素

seletor de texto

$(":text");//查找所有文本框

Seletor de caixa de senha

$(":password");//查找所有密码框

seletor de botão de rádio

$(":radio");//查找所有单选按钮

Seletor de caixa de seleção

$(":checkbox");//查找所有复选按钮

Seletor de botão Enviar

$(":submit");//查找所有提交按钮

Seletor de domínio de imagem

$(":image");//查找所有图像域

seletor de botão de reinicialização

$(":reset");//查找所有重置按钮

seletor de botão

$(":button");//查找所有按钮

Seletor de campo de arquivo

$(":file");//查找所有文件域

Manipular atributos de elemento

Classificação de atributos

Atributos intrínsecos: id, nome, classe, estilo

Atributos booleanos ao retornar valor: verificado, selecionado, desabilitado

Atributos personalizados: atributos definidos pelo usuário

Se o tipo do atributo for booleano, use o método prop(), caso contrário, use o método attr()

Obtenha propriedades

attr("属性名");
prop("属性名");

a diferença

• Se for um atributo inerente, os métodos attr() e prop() podem obtê-lo.
• Se for um atributo personalizado, attr() pode ser obtido, mas prop() não.
• Se o valor de retorno for um atributo do tipo booleano
  • Se o atributo estiver definido, attr() retorna o valor específico e prop() retorna true
  • Se o atributo não estiver definido, attr() retornará indefinido e prop() retornará falso.

Definir propriedades

attr("属性名","属性值");
prop("属性名","属性值");

Remover atributos

removeAttr("属性名");

Manipule o estilo do elemento

attr("class");//获取元素的样式名
attr("class","样式名");//设置元素的样式,原本的样式会被覆盖
addClass("样式名");//添加样式,原本样式保留，出现相同样式，以后定义的为准
css();//添加具体的样式(行内样式)
//css("具体样式名","样式值")
//css({"具体样式名":"样式值","具体样式名":"样式值"})
removeClass("样式名");//移除样式

Manipule o conteúdo do elemento

html()//获取元素的内容，包含html标签（非表单元素）
html("内容")//设置元素的内容，包含html标签（非表单元素）
text()//获取元素的纯文本内容，不识别HTML标签（非表单元素）
text("内容")//设置元素的纯文本内容，不识别HTML标签（非表单元素）
val()// 获取元素的值(表单元素)
val("值")// 设置元素的值(表单元素)

Criar elemento

$("<p>添加元素</p>");

Adicionar elemento

prepend(content);//在被选元素内部的开头插入元素或内容，被追加的content参数。可以是字符，HTML元素标记
$(content).prependTo(selector);//把content元素或内容加入selector元素内部开头
append(content);//在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符，HTML元素标记
$(content).appendTo(selector);//把content元素或内容插入selector元素内，默认是在尾部
before();//在元素前插入指定的元素或内容:$(selector).before(content)
after();//在元素后插入指定的元素或内容:$(selector).after(content)

Ao adicionar um elemento, se o próprio elemento não existir (um novo elemento), o elemento será anexado à posição especificada.

Se o próprio elemento existir (já tiver um elemento), o elemento original será diretamentecorteDefinir para local especificado

Excluir elemento

var div=$("div");
div.remove();//删除所选元素或指定的子元素，包括整个标签和内容一起删
div.empty();//清空所选元素的内容,保留标签

Elementos transversais

$(selector).each(function(index,element));//遍历元素

A função de parâmetro é a função de retorno de chamada durante a travessia

índice é o número de sequência do elemento percorrido, começando em 0

element é o elemento atual, que é o elemento dom neste momento

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<script>
    $("span").each(function(index,element){
      
      
        console.log(index);
        console.log(element);
        console.log(this);
    })
</script>

eventos jQuery

evento de carregamento pronto

• evento de pré-carregamento
• Executado quando a estrutura DOM da página é carregada.
• Semelhante ao evento load em js
• evento prontoVocê pode escrever vários

Principalmente para resolver as características de execução sequencial do HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./jquery-3.6.3.js" type="text/javascript"></script>
    <title>Document</title>
  <script>
      console.log($("div"));//此处会报错
  </script>
  </head>
  <body>
    <div id="mydiv">文本</div>
  </body>
</html>

$(document).ready(fuction(){
    
    
           console.log($("div")); 
                  });
//简写 
$(function(){
    
    
     console.log($("div"));
});

evento de ligação bind()

Adicione um ou mais manipuladores de eventos ao elemento selecionado e especifique uma função a ser executada quando o evento ocorrer

$(selector).bind(eventType [, eventData], handler(eventObject));

eventType: um tipo de evento do tipo string, que é o evento que você precisa vincular

[, eventData]: parâmetros passados, formato: {nome: valor, nome2: valor2}

manipulador (eventObject): A função acionada pelo evento

• Vincular um único evento

  • vincular

    $("Elemento").bind("Tipo de Evento",function(){

    });

  • ligação direta

    $("Elemento").Nome do evento(função(){

    });

• Vincular vários eventos

  • vincular

    • Vincule a mesma função a vários eventos ao mesmo tempo

      Especifique element.bind("Tipo de Evento 1 Tipo de Evento 2 Tipo de Evento 3", function(){

      });

    • Vincule vários eventos a elementos e defina funções correspondentes

      Especifique element.bind("Tipo de evento 1", function(){

      }).bind("Tipo de evento 2", function(){

      });

    • Vincule vários eventos a elementos e defina funções correspondentes

      Especifique element.bind({

      "Tipo de evento":function(){

      },

      "Tipo de evento":function(){

      }

      });

  • ligação direta

    Especifique o elemento. Nome do evento (função (){

    }).Nome do evento(função(){

    });

jQuery Ajax

Uma tecnologia assíncrona e sem atualização

Carregue dados remotos por meio de solicitações HTTP.

jQuery subjacente à implementação do AJAX. Para implementações de alto nível simples e fáceis de usar, consulte $.get, $.postetc.\_\_\_$.ajax() retorna o objeto XMLHttpRequest que ele criou. Na maioria dos casos, você não precisará manipular esta função diretamente, a menos que precise manipular opções menos usadas para obter mais flexibilidade.

$.ajax

jquery chama o uso de ajax:

Formato: $.ajax({});

parâmetro:

​ type: Método de solicitação GET/POST

url: URL do endereço da solicitação

​ assíncrono: seja assíncrono, o padrão é verdadeiro, o que significa assíncrono

dados: dados enviados ao servidor

dataType: o tipo de dados que deve ser retornado pelo servidor

​ contentType: Defina o início da solicitação

Sucesso: esta função é chamada quando a solicitação é bem-sucedida

erro: Esta função é chamada quando a solicitação falha

dados.json

[
    {
    
    
        "userId":1,
        "userName":"zhangsan",
        "userAge":18
    },
    {
    
    
        "userId":2,
        "userName":"lisi",
        "userAge":19
    },
    {
    
    
        "userId":3,
        "userName":"wangwu",
        "userAge":20
    },
    {
    
    
        "userId":4,
        "userName":"zhaoliu",
        "userAge":21
    }
]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./jquery-3.6.3.js"></script>
    <title>Document</title>
  </head>
  <body>
    <button type="button" id="btn">查询数据</button>
  </body>
  <script>
    //点击按钮，发送Ajax请求，将数据显示到页面上
    $("#btn").click(function () {
      
      
      $.ajax({
      
      
        url: "data.json",
        type: "GET",
        dataType: "json", //将返回值自动封装成json对象
        //请求成功时调用的函数
        success: function (data) {
      
      
          console.log(data);
          //将字符串转化为json对象
          // var obj = JSON.parse(data);
          // console.log(obj);
          //Dom节点操作
          var ul = $("<ul></ul>");

          for (var i = 0; i < data.length; i++) {
      
      
            var user = data[i];
            var li = "<li>" + user.userName + "</li>";
            ul.append(li);
          }
          console.log(ul);
          $("body").append(ul);
        },
      });
    });
  </script>
</html>

$.get

Funcionalidade de solicitação GET simples para substituir o complexo $.ajax

Nenhuma função de retorno de chamada em caso de falha

$.get("Endereço da solicitação", "Parâmetros da solicitação", função (parâmetro formal){

});

$.get("data.json",{
    
    },function(data){
    
    
    console.log(data);
})

$.post

$.post("Endereço da solicitação", "Parâmetros da solicitação", função (parâmetros formais) {

});

$.post("data.json",{
    
    },function(data){
    
    
    console.log(data);
})

$.getJSON

$.getJSON("Endereço da solicitação", "Parâmetros da solicitação", função (parâmetro formal) {

});

O método getJSON requer que o formato dos dados retornados atenda ao formato json (string json).Se os dados retornados não estiverem no formato json, eles não poderão ser obtidos.

$.getJSON("data.json",{
    
    },function(data){
    
    
    console.log(data);
})