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

MySQL paging query optimization techniques

In applications with paging queries, queries that...

Summary of 4 solutions for returning values ​​on WeChat Mini Program pages

Table of contents Usage scenarios Solution 1. Use...

Detailed discussion of InnoDB locks (record, gap, Next-Key lock)

Record lock locks a single index record. Record l...

Teach you how to insert 1 million records into MySQL in 6 seconds

1. Idea It only took 6 seconds to insert 1,000,00...

React Native JSI implements sample code for RN and native communication

Table of contents What is JSI What is different a...

Mysql optimization techniques for querying dates based on time

For example, to query yesterday's newly regis...

A quick guide to MySQL indexes

The establishment of MySQL index is very importan...

Solve the error during connect exception in Docker

When you first start using Docker, you will inevi...

Restart all stopped Docker containers with one command

Restart all stopped Docker containers with one co...

MySQL 5.7.17 Compressed Version Installation Notes

This article shares the installation steps of MyS...