JQuery plug-ins are not defined.

I. Introduction Some WEB developers will reference A JQuery class library and write $ (& quot;), $ (& quot;) on the webpage ;), I have been familiar with JQuery for several years. I used to be such a person. I didn't change my opinion on myself until I had a technical exchange in my company. II. I. Introduction Some WEB developers will reference A JQuery class library and write $ ("#"), $ (". ") I have been familiar with JQuery for several years. I used to be such a person. I didn't change my opinion on myself until I had a technical exchange in my company. Ii. JQuery knowledge 1: When Using JQuery to write plug-ins, the core methods are as follows: $. extend (object) can be understood as adding a static method to JQuery. $. Fn. extend (object) can be understood as adding a method to the JQuery instance. Basic definition and call:/* $. extend definition and call ************************************ * ***/$. extend ({fun1: function () {alert ("execution method 1") ;}}); $. fun1 ();/* $. fn. extend definition and call ************************************ * ***/$. fn. extend ({fun2: function () {alert ("execution method 2") ;}}); $ (this ). fun2 (); // equivalent to $. fn. fun3 = function () {alert ("execution method 3") ;}$ (this ). fu N3 (); Knowledge 2: jQuery (function () {}); and (function ($) {}) (jQuery);: jQuery (function () {}); // equivalent to $ (document ). ready (function (){}); /**********************************/(function ($) {}) (jQuery); // equivalent to var fn = function ($) {}; fn (jQuery); jQuery (function (){}); is the code in the execution method after a DOM element is loaded. (Function ($) {}) (jQuery); defines an anonymous function. jQuery represents the real parameter of this anonymous function. It is usually used in JQuery plug-in development to define the private domain of the plug-in. Iii. Develop the standard structure of JQuery plug-in. 1. Define the scope: Define a JQuery plug-in. First, put the code of this plug-in a place that is not subject to external interference. If you are professional, you need to define a private scope for this plug-in. External Code cannot directly access the internal code of the plug-in. The code inside the plug-in does not pollute global variables. This decouples the dependencies between plug-ins and runtime environments. After talking about this, how should we define the private scope of a plug-in? // Step01 defines JQuery's scope (function ($) {}) (jQuery). Don't underestimate this scope, just as c # defines a class keyword for a class. 2. Extend a plug-in for JQuery: After the scope of JQuery is defined, the core and most urgent step is to add an extension method for this JQuery instance. First, we name this Jqury plug-in a method called easySlider. When calling this plug-in, we can pass some parameters to this plug-in through options. For details about the definition method, see the following code: // step01 defines the extension method name of JQuery's function ($) {// step02 plug-in $. fn. easySlider = function (options) {}}) (jQuery); by now, the simplest JQuery plug-in has been completed. $ ("# DomName "). easySlider ({}), or $ (". domName "). easySlider ({}) or more methods to call this plug-in. 3. Set the default value: Define a JQuery plug-in, just like defining a. net Control. A perfect plug-in should have more flexible attributes. Let's look at this Code:. The TextBox Control has the Width and Height attributes. When using TextBox, You can freely set the Height and Width of the control, or do not set the value, because the control has its own default value. When preparing to develop a JQuery plug-in, when the user does not specify the property, there should be a default value, in JQuery can be achieved in two steps such definition, see the following code step03-a, step03-b. // Step01 defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options) ;}} (jQuery); programmers like innovation. Change the variable name to another line. When var defaults = {} is used to represent a default attribute, you may think differently when writing the JQuery plug-in yourself. Therefore, you can use var default01 = {}, var default02 = {} indicates the default attribute. Then the default attribute names are varied and getting worse. Therefore, we recommend that you use the ults variable to represent the default attribute when defining the default attribute when writing the JQuery plug-in. Such code is more readable. Some people see this line of code: var options = $. extend (defaults, options), frowning, indicating not understanding. Let's take a look at the following code: var obj01 = {name: "English name: Sam Xiao", age: 29, girlfriend: {name: "Yang", age: 29} var obj02 = {name: "Chinese name: XiaoJian", girlfriend: {name: "YY" }}; var a = $. extend (obj01, obj02); var B = $. extend (true, obj01, obj02); var c = $. extend ({}, obj01, obj02); var d =$. extend (true, {}, obj01, obj02); copy the code to the development environment and check the values of a, B, c, and d respectively, you will understand var options = $. extend (defaults, options. Indicates that options overwrites the defaults value and assigns the value to options. In the plug-in environment, the value set by the user overwrites the default value of the plug-in. If the default value is not set, the default value of the plug-in is retained. 4. Support for JQuery selector: JQuery selector is a good feature of JQuery. If our plug-in does not support JQuery selector, it is indeed a great pity. For example, if your JQuery plug-in supports multiple selectors, our code should be defined as follows: // step01 defines JQuery's scope (function ($) {// default property var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nextst', nextText: 'Next '//...... }; // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options); // step4 supports the JQuery selector this. each (function () {}) ;}) (jQuery); 5. Support for JQuery link calls: the above Code seems perfect, but not so perfect. Link calling is not supported so far. To achieve the effect of link calling, you must define each element of the loop return // step01 JQuery's scope (function ($) {// default property var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nextst', nextText: 'Next '//...... }; // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options); // step4 supports JQuery selector // step5 supports chained call return this. each (function () {}) ;}} (jQuery); this definition can support link calls. For example, you can call $ (". div "). easySlider ({prevId: "", prevText: "" audio character .css ({"border-width": "1", "border-color": "red ", "border-bottom-style": "dotted"}); 6. Method in the plug-in: a lot of code is required to implement the function of a plug-in, possibly hundreds or thousands of lines, tens of thousands of rows. We need to use function to structure the code. As mentioned in the first article, the methods defined in the plug-in cannot be called directly from outside, and the methods defined in the plug-in do not pollute the external environment. Now try to define some methods in the plug-in: // step01 defines JQuery's scope (function ($) {// default attribute var defaults = {prevId of the step03-a plug-in: 'prevbtn ', prevText: 'previous', nextId: 'nextst', nextText: 'Next '//...... }; // The step06-a defines the method var showLink = function (obj) in the plug-in {$ (obj ). append (function () {return "(" + $ (obj ). attr ("href") + ")"});} // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options); // step4 supports JQuery selector // step5 supports chained call return this. each (function () {// The step06-b defines the method showLink (this) ;}) (jQuery) in the plug-in; Step step06-a: A method named sho is defined in the plug-in. WLink (); this method cannot be directly called outside the plug-in. It is a bit like a private method in the C # class and can only be used inside the plug-in. The step step06-b demonstrates how to call the internal method of the plug-in. 4. Summary Development is not so hard as long as the standards are formed and then the code of others is read. I feel like likes, so that I can learn more about the development standards of JQuery plug-in.