Java programmer's JavaScript learning notes (7 -- Basic jQuery mechanism), learning notes jquery

Last Update:2014-10-24 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Java programmer's JavaScript learning notes (7 -- Basic jQuery mechanism), learning notes jquery
We plan to complete this note in the following order:

Concept.
Copy and inherit attributes.
This/call/apply.
Closure/getter/setter.
Prototype.
Object-Oriented Simulation.
JQuery basic mechanism.
JQuery selector.
JQuery tool method.
JQuery-extension at the class level.
JQuery-extensions at the "object" level.
JQuery-extension selector.
JQuery UI.
Extend the jQuery UI.

This is Part 1 of the notes. Let's talk about the basic mechanism of jQuery. At the same time, we try to implement a scaled version of jQuery. We call it jQ.

We believe that readers are familiar with jQuery before reading this article.

Articles 7th to 9th are a unit. In this unit, we will go deep into jQuery and fully learn the best design and programming practices of JavaScript.

First, push the syntax.
1. view the following code for the push Syntax:
// Code segment 1

(function(){    console.log('this is a function be called immediately.')})();

The first pair of parentheses is a statement that returns a function and then calls the function directly through the second pair of parentheses.
Running output: this is a function be called immediately.

You can pass the parameter to this parameter. In JavaScript, $ and _ are both valid variable names.

// Code segment 2 (function (_) {console. log (_); // output: window, depending on the specific content output by the browser}) (this );

In the global context, this points to window.

You can obtain the return value using the following method.

// Code segment 3var f = (function (_) {function func () {console. log ('I am invoked by' + this, 'arguments: '+ _); // output: I am invoked by [object Window] arguments: param value} return func;}) ('Param value'); f ();

You can also append the value or method to be returned to the window attribute to "return.

// Code snippet 4 (function () {function func ($) {console. log ('I am invoked by' + this);} window. func = func; // It is equivalent to directly defining the global function func window. $ = new func (); // defines the global variable $. In JavaScript, $ is a valid variable name .}) (); Func (); console. log ($. toString (); // output: [object Object]

2. We expect a js Code framework, jQ, to implement the following functions:
2.1. You can use jQ ('# id') to obtain the dom object through id.
2.2 For A jQ object (that is, the object returned by the jQ method), you can use the html () method to obtain or set its content. The syntax is as follows:
Jq('your id'{.html (); // return its content
Jq('your id'contents .html ('new content'); // you can specify the content of the object.
2.3. You can use $ to replace jQ. The syntax is as follows:
Registrant certificate ('regionid'apps.html ();

3. Implement 3.1. Based on the preceding syntax, we use the view to implement the functions proposed by 2.1.

Code segment 5

<!DOCTYPE html>

After obtaining the dom object, the system returns the result directly. This method requires encapsulation. It is best to return in the form of function object (function is the first-class citizen in js and has the strongest function.

In addition, you want the return value to be an instance of the jQ "class.


// Code snippet 6 (function () {var jQ = function (id) {var ret = new jQ (); ret. innerDom = 'blabla'; return ret;} jQ. prototype = {innerDom: null} window. jQ = jQ ;}) (); console. log (jQ ('# divtest '));

Uncaught RangeError: Maximum call stack size exceeded, an endless loop.

If new is not available directly, you can use the factory method.


// Code snippet 7 (function () {var jQ = function (id) {var ret = jQ. prototype. getInstance (id); return ret;} jQ. prototype = {innerDom: null, getInstance: function (id) {// todo: init innerDom by id return this; // caller, that is, jQ} window. jQ = jQ ;}) (); console. log (jQ ('# divtest') = jQ (' # divTest1 '); // output: true

The last line of code above is intended to construct two different objects, and the returned objects are the same. This is incorrect.

The corrected code is as follows.


// Code snippet 8 (function () {var jQ = function (id) {var ret = new jQ. prototype. getInstance (id); // Add the new keyword return ret;} jQ. prototype = {innerDom: null, getInstance: function (id) {// todo: init innerDom by id return this; // caller, that is, jQ} window. jQ = jQ ;}) (); console. log (jQ ('# divtest') = jQ (' # divTest1 '); // output: false

According to the semantics of the new Keyword:

Var ret = new jQ. prototype. getInstance (id );

Equivalent

Var ret = {};

JQ. prototype. getInstance. apply (ret); // call the getInstance method through ret. this in the getInstance method is bound to ret.

Ret. _ proto _ = jQ. prototype. getInstance. prototype; // the prototype of the specified ret is the prototype of the getInstance. A problem occurs because the prototype of the getInstance is an Object (almost empty ).



To make up for the shortcomings of the new Keyword, the correction code is as follows:


// Code snippet 9 (function () {var jQ = function (id) {var ret = new jQ. prototype. getInstance (id); return ret;} jQ. prototype = {innerDom: null, getInstance: function (id) {// todo: umimpl init innerDom by id this. innerDom = 'dom by' + id; return this; // this caller, that is, the newly created object}, html: function () {// todo: impl the method return this. innerDom; // this caller, that is, the newly created object} jQ. prototype. getInstance. prototype = jQ. prototype; // new code is added. Because it is a reference transfer, you do not have to worry about the circular reference problem window. jQ = require (); // output: dom by includivtestconsole.log(jq('{divtest2'{.html (); // output: dom by # divTest23.2. Now we have added the 2.2 description function: html Method
// Code segment 10 <! DOCTYPE html> 3.3 It is easier to reference the 2.3 description through $. Just add one sentence after window. jQ = jQ:

Window. $ = jQ;

Modify the called statement:

Lele.log({}('{divtest', window#.html (); // output: blabla

Optional values ('your divtest', window0000.html ('brand new'); // The page content changes accordingly.

Lele.log({}('{divtest', window#.html (); // output: BRAND NEW




Complete merit!



Now, as a java programmer, the javascript framework jQuery is used in project development.
Jquery is mainly used to operate the foreground. If you are only using the background, there may not be too many channels:
I just said what I used.
1: the front-end and the back-end do not refresh operations to achieve data interaction, of course, also package refreshing upload
2: If you use jquert easyUI, you may need to use more json files, such as no new tables, no new books, and no new drop-down boxes, all the spaces on the front-end can be easily implemented with easyUI,
3: some space values are verified when the table is submitted. For example,

If you have a clear division of labor, you don't need to thank you. You only need to return json in the background, and you don't need to worry about the front-end.

If you have any questions, ask

What level should java programmers master in javascript?
In fact, there are source code available on the net, and the js frameworks they use, such as jquery and ajax frameworks, such as dojo, extjs, and dwr, As long as programmers can write common javascript, such as form verification, tree menu, shutter menu, etc. And must be familiar with common methods of commonly used objects, such as document, widow, form. I am developing at the company and spend more time on the front end than on the back end. Programmers also need to understand css,

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Java programmer's JavaScript learning notes (7 -- Basic jQuery mechanism), learning notes jquery

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support