Detailed explanation of jquery tag selector application example

Detailed explanation of jquery tag selector application example

This article example shares the specific code of jQuery tag selector application for your reference. The specific content is as follows

1. Set div content uniformly

You can use the tag selector to select all div elements;

<!DOCTYPE html>
<html>
<head>
   <title></title>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 <script>
  function setdiv()
  {
   $("div").html('Set content uniformly;');
  }
 </script>
</head>
<body>
   <h1></h1>
 <div id="div1" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <div id="div2" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <div id="div3" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <div id="div4" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <div id="div5" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <button onclick="setdiv()">Set content</button>
</body>
</html> 

2. jQuery gets all the data of the form

serialize() method,
var data = $("form").serialize();

Serialize the form content into a string;

<!DOCTYPE html>
<html>
<head>
   <title>Form</title>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 <script>
  function getform()
  {
   var data = $("form").serialize();
   alert('form data:' + data);
  }
 </script>
</head>
<body>
   <h1>Registration form</h1>
   <form action="" method="get">
      <p>
         <label>Username:</label>
         <input type="text" name="user" />
      </p>
      <p>
         <label>Password:</label>
         <input type="password" name="password" />
      </p>
      <p>
         <label>Gender:</label>
         <input type="radio" name="gender" value="0" /> Male<input type="radio" name="gender" value="1" /> Female</p>
      <p>
         <label>Love&nbsp;&nbsp;&nbsp;Good:</label>
         <input type="checkbox" name="like" value="0"> Learn<input type="checkbox" name="like" value="1"> python
         <input type="checkbox" name="like" value="2"> Swimming</p>
      <p>
         <label>Personal introduction:</label>
         <textarea name='introduce'></textarea>
      </p>
      <p>
         <label>Native origin:</label>
         <select name="site">
            <option value="0">Beijing</option>
            <option value="1">Shanghai</option>
            <option value="2">Henan</option>
            <option value="3">Hebei</option>
            <option value="4">Shandong</option>
         </select>
      </p>
      <p>
         <input type="submit" name="" value="Submit1">
         <input type="reset" name="" value="Reset 1">
      </p>
   </form>
 <button onclick="getform()">Get Form</button>
</body>
</html> 

$("form"), also a tag selector;

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Introduction to jQuery selector usage
  • Detailed explanation of JQuery selector
  • jQuery implements time selector
  • jQuery selector usage basics example
  • Analysis of JQuery's commonly used selector functions and usage examples
  • Detailed explanation of jQuery form selector usage
  • jQuery attribute selector usage example analysis
  • Detailed explanation of jQuery selector attribute filter selector
  • Detailed explanation of jQuery selector form element selector
  • Detailed explanation of JQuery selector usage

<<:  Basic operations of MySQL data tables: table structure operations, field operation example analysis

>>:  Detailed tutorial on building Gitlab server on CentOS8.1

Recommend

Application nesting of HTML ul unordered tables

Application nesting of unordered lists Copy code T...

Sample code for easily implementing page layout using flex layout

Without further ado, let's get straight to th...

Explanation of the process of docker packaging node project

As a backend programmer, sometimes I have to tink...

Detailed installation tutorial for MySQL zip archive version (5.7.19)

1. Download the zip archive version from the offi...

Docker mounts local directories and data volume container operations

1. Docker mounts the local directory Docker can s...

Install mysql 5.6 from yum source in centos7.4 system

System environment: centos7.4 1. Check whether th...

Detailed explanation of vue simple notepad development

This article example shares the specific code of ...

JavaScript to achieve the effect of clicking on the self-made menu

This article shares the specific code of JavaScri...

Summary of using MySQL online DDL gh-ost

background: As a DBA, most of the DDL changes of ...

Detailed explanation of Nginx status monitoring and log analysis

1. Nginx status monitoring Nginx provides a built...

React + Threejs + Swiper complete code to achieve panoramic effect

Let’s take a look at the panoramic view effect: D...

JavaScript adds prototype method implementation for built-in objects

The order in which objects call methods: If the m...

A brief discussion on Axios's solution to remove duplicate requests

Table of contents 1. Cancel duplicate requests 2....