Learn JQuery from scratch, Lecture 2_jquery

In this lecture, we mainly give a brief introduction to JQuery's selector and how JQuery obtains the value. Without further ado, let’s just post the code and let’s talk based on the DEMO.

Copy code The code is as follows:

<%@ Page Language="C#" AutoEventWireup= "true" CodeBehind="JQuery2.aspx.cs" Inherits="JQuery_1.JQuery2" %>


< ;head runat="server">

As you can see from the first line of the code, this is actually an aspx page. In fact, it doesn’t matter if you remove the first line, because JQuery is a JavaScript script, and it can also be used in HTML The same can be run. Because I wrote JQuery using VS, I added the aspx page directly.

There are very few things in the code. There are two JavaScript scripts written in the head. There is a text input box and two buttons in the body. One button has onclick="btnclick();" event, and the other does not. Judging from the running effect, the two buttons actually achieve the same effect, and both pop up the content entered in the text box. Now let's briefly analyze these two pieces of JS

In the first piece of JS, a function is customized, named: btnclick(), and a variable t1 is defined using the var keyword in the function body. The value of T1 is obtained through JQuery's selector. $("#txt1") creates a JQuery object. # takes the ID. If you change it to name, you will not get the value. The val() method of $("#txt1") obtains the value of the text box. $("#txt1").val() is equivalent to document.getElementById("txt1").value in JavaScript;

The onclick event in the first Button executes the customization in the first JS function, then there is no onclick event in the second Button. How to achieve the same effect as the first Button? Let's analyze the second piece of JS code next.

In the second piece of JS code, a JQuery document object is created directly from the beginning, and the ready event of the document object is called. The ready event will be executed immediately after the DOM is loaded. In the ready event, a JQuery object $("#btn2") is created. From this object, it can be seen that JQuery selects the control with the id of btn2. When creating $("#btn2"), the onclick(); method is called. It is this method that allows Button 2 to achieve the same effect as Button 1. Let me briefly explain here, in the second piece of JS code, if you remove the $(document).ready(function() {}); event, write directly $("#btn2").click(function() { var t1 = $("#txt1").val(); alert(t1); }); Then clicking the second Button will have no effect.

That’s it for today’s lecture. I won’t go into details about anything else. If you have any questions or need source code, you can join the group: 34979719. In the next lecture, we will talk about the value acquisition and assignment of commonly used controls.