www.webdeveloper.com
Results 1 to 5 of 5

Thread: How works function chain in jQueyr?

  1. #1
    Join Date
    Mar 2014
    Posts
    8

    How works function chain in jQueyr?

    Hi
    after reading, I see some that I don't understand, and this is how jQuery do for chain function, like this
    $('.someClass').width(100).height(100).css('border','1px');
    how works the function chain?
    I mean, I don't use jquery but this interest me a lot.

    Thanks.

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    250
    I don't know jQuery but the concept should be the same... In Method chaining method returns object and then you can invoke another method on that object as a part of a single expression.

    A simple example:

    Code:
          var o = { //define new object
             name: "",
             width: "",
             height: "",
             setName: function(s) { 
                this.name = s;
                return this; //return o object so we can call another method on o in a single expression
             },
             setWidth: function(x) {
                this.width = x;
                return this;
             },
             setHeight: function(x) {
                this.height = x;
                return this;
             }
          }
          
          //use method chaining to set properties of o in a single expression
          o.setName("Test").setWidth(100).setHeight(100);
          document.write("Name: " + o.name + "<br />" + "Width: " + o.width + "<br />" + "Height: " + o.height);
    Last edited by tech_soul8; 03-18-2014 at 04:04 AM.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,223
    This is why we have a JavaScript Frameworks forum for things like JQuery... (hint)
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Mar 2014
    Posts
    8
    Thanks tech_soul8 and \\.\ I don't use jquery but in some codes that use jquery I see this thing.

  5. #5
    Join Date
    Dec 2012
    Posts
    97
    While what tech_soul8 said is correct, this example is probably closer to replicating what JQuery is doing.

    HTML Code:
    <script>
    Element.prototype.width = function(val) {
    	this.style.width = val+"px";
    	return this;
    };
    Element.prototype.height = function(val) {
    	this.style.height = val+"px";
    	return this;
    }
    Element.prototype.css = function(prop,val) {
    	this.style[prop] = val;
    	return this;
    }
    function $(selector) {
    	var elem = document.querySelector(selector);
    	return elem;
    };
    
    $("div.box").width(100).height(50).css("position","absolute");
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles