jquery.data(key, value)

jquery.data(key, value)

$('#something').data('foo', 52);        
alert($('#something').data('foo')); 

http://answers.oreilly.com/topic/1634-how-to-attach-objects-and-data-to-dom-with-jquery-data-to-avoid-memory-leak-issues/

How to attach objects and data to DOM with jQuery.data to avoid memory leak issues

Properties added to an object or DOM node at runtime (called expandos) exhibit a number of issues because of flawed garbage collection implementations in some web browsers. This excerpt from jQuery Cookbook shows you how to avoid memory leak issues by using .data().

jquery get the value of a select box

jquery get the value of a select box

make the select box or input box into a $jq object first, then
use $jquery_object.val().

http://api.jquery.com/val/


        console.log(product_text_color.val());
        console.log(button_text_color.val());

        changeProductTextColor({'color': product_text_color.val()}, '2');
        changeTextColor({'color': button_text_color.val()},'install','2');

using jscolor programatically (no jquery)

jscolor is a color picker javascript

it lets u make an input type="text" into a color picker, just by adding the class .color to the <input tag>

1
it inside a function
(the input tag element, referenced as this) is an OBJECT with property .color which is the chosen color in the colorpicker

2
therefore, you can pass

product_text_color.attr('class', 'color'); // the input box has been made into a jquery object first
// attach color picker to it by adding a class .color to it

{'color': product_text_color.val()}
programatically passing an OBJECT with prop .color to a function:
since you can't directly get the colorpicker, USE JQUERY TO DO IT, and this is the way how.
and then the fn taking this OBJECT as arg, references it like this: colorObj.color





Refer to next post:
jquery get the value of a select box

changing tag attributes with jquery

changing tag attributes with jquery


http://api.jquery.com/attr/

<p>
  Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>

  The title of the emphasis is:<div></div>
<script>
var title = $("em").attr("title");

jslint javascript validator for IE7

No trailing ',' comma, don't miss out any closing ';' semicolons to write IE7-compatible javascript

else js execution just STOPs at those places with error.


IE7 javascript validator
http://www.jslint.com/

jquery/javascript - where should I put my script code?

put jquery code in body or head?

http://stackoverflow.com/questions/4647806/where-should-i-put-my-javascript-code

You should probably put your code right at the end of the body tag.

Check out Steve Souder's High Performance Web Sites - Evolution of Script Loading

If you have multiple script includes and need to convince yourself that they will load in the correct order for you, check out WebSiteOptimization.com's Article on the Defer Attribute, where you can see the order your scripts execute.

http://www.dreamincode.net/forums/topic/109666-running-jquery-inside-%26lt%3Bbody%26gt%3B-tag/

It is because the link is after your Javascript. Move the link above it/javascript below the link and it should work fine. It's trying to select an element that doesn't yet exist.

EDIT: Aah you fixed it, spot on

writing a jquery plugin

writing a jquery plugin - Google Search

http://docs.jquery.com/Plugins/Authoring



http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial
http://www.queness.com/resources/html/simpleplugin/jquery-simple-plugin-queness.html

• Home
• Posts
• About
• Contact

http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/

 Data

Often times in plugin development, you may need to maintain state or check if your plugin has already been initialized on a given element. Using jQuery's data method is a great way to keep track of variables on a per element basis. However, rather than keeping track of a bunch of separate data calls with different names, it's best to use a single object literal to house all of your variables, and access that object by a single data namespace.

(function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
         
         var $this = $(this),
             data = $this.data('tooltip'),
             tooltip = $('<div />', {
               text : $this.attr('title')
             });
         
         // If the plugin hasn't been initialized yet
         if ( ! data ) {
         
           /*
             Do more setup stuff here
           */

           $(this).data('tooltip', {
               target : $this,
               tooltip : tooltip
           });

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
http://www.websanova.com/tutorials/jquery/10-coding-tips-to-write-superior-jquery-plugins



http://www.codeproject.com/Articles/291290/How-To-Write-Plugin-in-jQuery

5 articles about jquery and boilerplate

http://netbeans.org/kb/docs/web/js-toolkits-jquery.html

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

http://www.queness.com/post/10905/16-useful-boilerplates-to-start-your-project-quickly

http://www.codeproject.com/Articles/157446/What-is-jQuery-and-How-to-Start-using-jQuery