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

Vue implements the frame rate playback of the carousel

This article example shares the specific code of ...

How to mount a new disk on a Linux cloud server

background A new server was added in the company,...

Handwriting implementation of new in JS

Table of contents 1 Introduction to the new opera...

Uniapp implements DingTalk scan code login sample code

Since Uniapp does not have DingTalk authorization...

Analysis of different MySQL table sorting rules error

The following error is reported when MySQL joins ...

How to display percentage and the first few percent in MySQL

Table of contents Require Implementation Code dat...

Understanding the Lazy Loading Attribute Pattern in JavaScript

Traditionally, developers create properties in Ja...

HTML table tag tutorial (8): background image attribute BACKGROUND

Set a background image for the table. You can use...

UDP simple server client code example

I won’t go into details about the theory of UDP. ...

Methods for optimizing Oracle database with large memory pages in Linux

Preface PC Server has developed to this day and h...

Practical record of solving MySQL deep paging problem

Table of contents Preface Why does limit deep pag...

Mysql online recovery of undo table space actual combat record

1 Mysql5.6 1.1 Related parameters MySQL 5.6 adds ...

Simple example of HTML checkbox and radio style beautification

Simple example of HTML checkbox and radio style b...

Using JS to implement a simple calculator

Use JS to complete a simple calculator for your r...