This article will help you get started and understand the basic operations of Jquery

This article will help you get started and understand the basic operations of Jquery

1. Steps to use Jquery:

(1) Import js library

<script src="js/jquery-1.11.3.min.js"></script>​
//js/jquery-1.11.3.min.js compressed version (recommended)
//js/jquery-1.11.3.js full version

(2) Page loading event

$(document).ready(function(){
    Business operations;
});​
//After optimization:
$(function(){
    Business operations;
});

2. Conversion between Jq objects and js objects

(1) js object----->jq object

var js object = document.getElementById("id attribute value");
var $jq object = $(js object)

(2) jq object----->js object

var js object = $jq object.get(index);

3.jq's basic selector

//(1)jq's id selector

$("#id attribute value"). Binding event method (function(){
    Business operations;
});

//(2)jq's class selector

$("#.class attribute value"). Binding event method (function(){
    Business operations;
});

//(3) Form selector

$("Selected input tag [tag with specified attributes]"). Binding event method (function(){
    Business operations;
});

//(4)element selector

$("element/tag").html("XXX");

4.jq's hierarchical selector

//Descendant selector $("parent tag child tag")
​
//Child element selector $("parent element > child element")

5. Filter Selector

$("label:first") // matches the first label $("label:even") // matches even number of labels starting from 0 (0,2,4...)
$("label:odd") //matches odd number of elements starting from 1 (1,3,5...)

6. Attribute Selectors

[attribute] //Matches elements with the current given attribute [attribute=value] //Matches elements with a given attribute that is a certain value [attribute!=value] //Matches all elements that do not contain the specified element's attribute, or whose attribute is not equal to a specific value [attribute^=value] //Matches specific elements that start with the specified element [attribute$=value] //Matches elements that end with the specified element [attribute*=value] //Matches elements with given attributes that contain certain values ​​[selector1][selector2]...[selectorN]
    //Meets the attribute selector. Elements that meet multiple attribute conditions at the same time

7.jq document processing

//Append append(content) //Append content to each matching element (recommended)
jq object.appendTo(comtent) //Append the matched content to another specified element set​
//Prepend prepend(content) //Put each matching element in front of content prependTo(content) //Prepend all matching elements to another specified set of elements​
//insertafter(content|fn) //Insert content after each matching elementinsertAfter(content) //Insert the matched elements after contentbefore(content) //Insert content before each matching elementinsetBefore(content) //Insert each matching element before content

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • JavaScript and JQuery Framework Basics Tutorial
  • jQuery selector usage basics example
  • jQuery Basics_Must-see Knowledge Points for Getting Started
  • jQuery Selector Basics Tutorial
  • JQuery Basics Example (1)
  • jQuery Basics Learning Guide

<<:  New settings for text and fonts in CSS3

>>:  Detailed explanation of the difference between tags and elements in HTML

Recommend

How to remove MySQL from Ubuntu and reinstall it

First delete mysql: sudo apt-get remove mysql-* T...

Implementation of multi-site configuration of Nginx on Mac M1

Note: nginx installed via brew Website root direc...

Implementation of MySQL select in subquery optimization

The following demonstration is based on MySQL ver...

How to install JDK and Mysql on Ubuntu 18.04 Linux system

Platform deployment 1. Install JDK step1. Downloa...

Thinking about grid design of web pages

<br />Original address: http://andymao.com/a...

Design and implementation of Vue cascading drop-down box

Table of contents 1. Database design 2. Front-end...

How to build DockerHub yourself

The Docker Hub we used earlier is provided by Doc...

A brief discussion on Linux signal mechanism

Table of contents 1. Signal List 1.1. Real-time s...

Detailed explanation of the use of Refs in React's three major attributes

Table of contents Class Component Functional Comp...

A detailed introduction to HTML page loading and parsing process

The order in which the browser loads and renders H...

HTML implements read-only text box and cannot modify the content

Without further ado, I will post the code for you...

JS 9 Promise Interview Questions

Table of contents 1. Multiple .catch 2. Multiple ...