Quickly get started with jQuery in one hour

This tutorial focuses on the theoretical knowledge part, and the practical part will be updated later (in combination with my graduation project!!!)

jQuery object

Dom object

• Element object obtained through js

jQuery object

• The element object obtained through the jQuery method returnsjQuery wrapper set

When using jQuery, be sure to introduce the jQuery file first

Dom object to jQuery object

• Just include it with $

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

Convert jQuery object to Dom object

• Just get the element with the specified subscript in the packaging set

  var div=divjQuery[0];
  

jQuery selector

Basic selector

id selector

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

Element name selector

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

class selector

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

Universal selector

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

Combination selector

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

Hierarchy selector

descendant selector

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

descendant selector

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

adjacent selector

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

Peer selector

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

form selector

form selector

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

text selector

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

Password box selector

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

radio button selector

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

Checkbox selector

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

Submit button selector

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

Image domain selector

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

reset button selector

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

button selector

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

File field selector

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

Manipulate element attributes

Classification of attributes

Intrinsic attributes: id, name, class, style

Boolean attributes when returning value: checked, selected, disabled

Custom attributes: User-defined attributes

If the type of the attribute is boolean, use the prop() method, otherwise use the attr() method

Get properties

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

the difference

• If it is an inherent attribute, both attr() and prop() methods can obtain it.
• If it is a custom attribute, attr() can be obtained, but prop() cannot be obtained.
• If the return value is an attribute of type boolean
  • If the attribute is set, attr() returns the specific value and prop() returns true
  • If the attribute is not set, attr() returns undefined and prop() returns false.

Set properties

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

Remove attributes

removeAttr("属性名");

Manipulate the style of the element

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

Manipulate the content of the element

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

Create elements

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

Add element

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)

When adding an element, if the element itself does not exist (a new element), the element will be appended to the specified position.

If the element itself exists (already has an element), the original element will be directlycutSet to specified location

Delete element

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

Traverse elements

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

The parameter function is the callback function during traversal

index is the sequence number of the traversed element, starting from 0

element is the current element, which is the dom element at this time

<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>

jQuery events

ready loading event

• preload event
• Executed when the DOM structure of the page is loaded.
• Similar to the load event in js
• ready eventYou can write multiple

Mainly to solve the sequential execution characteristics of 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"));
});

bind() bind event

Add one or more event handlers to the selected element and specify a function to run when the event occurs

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

eventType: a string type event type, which is the event you need to bind

[, eventData]: parameters passed, format: {name: value, name2: value2}

handler(eventObject): The function triggered by the event

• Bind a single event

  • bindbind

    $("Element").bind("Event Type",function(){

    });

  • direct binding

    $("Element").Event name(function(){

    });

• Bind multiple events

  • bindbind

    • Bind the same function to multiple events at the same time

      Specify element.bind("Event Type 1 Event Type 2 Event Type 3", function(){

      });

    • Bind multiple events to elements and set corresponding functions

      Specify element.bind("Event type 1", function(){

      }).bind("Event type 2", function(){

      });

    • Bind multiple events to elements and set corresponding functions

      Specify element.bind({

      "Event type":function(){

      },

      "Event type":function(){

      }

      });

  • direct binding

    Specify element.Event name(function(){

    }).Event name(function(){

    });

jQuery Ajax

An asynchronous refreshless technology

Load remote data via HTTP requests.

jQuery underlying AJAX implementation. For simple and easy-to-use high-level implementations, see $.get, $.postetc.\_\_\_$.ajax() returns the XMLHttpRequest object it created. In most cases you won't need to manipulate this function directly unless you need to manipulate less commonly used options for more flexibility.

$.ajax

jquery calls ajax usage:

Format: $.ajax({});

parameter:

​ type: Request method GET/POST

​ url: request address url

​ async: Whether to be asynchronous, the default is true, which means asynchronous

data: data sent to the server

dataType: the data type expected to be returned by the server

​ contentType: Set the beginning of the request

Success: This function is called when the request is successful

​ error: This function is called when the request fails

data.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

Simple GET request functionality to replace complex $.ajax

No callback function on failure

$.get("Request address", "Request parameters", function (formal parameter){

});

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

$.post

$.post("Request Address", "Request Parameters", function (formal parameters) {

});

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

$.getJSON

$.getJSON("Request Address", "Request Parameters", function (formal parameter) {

});

The getJSON method requires that the returned data format meets json format (json string). If the returned data is not in json format, it cannot be obtained.

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