satya - Wednesday, August 05, 2009 10:20:38 AM

what is jquery?

Search for: what is jquery?

satya - Wednesday, August 05, 2009 10:23:01 AM

Here is the home page

satya - Wednesday, August 05, 2009 10:41:13 AM

can I use JQuery as a templating language

Search for: can I use JQuery as a templating language

satya - Wednesday, August 05, 2009 10:44:31 AM

very nice. See this note on JTemplates

satya - Wednesday, August 05, 2009 3:10:50 PM

john resig micro templating engine

Search for: john resig micro templating engine

satya - Wednesday, August 05, 2009 3:13:36 PM

Another nice article: bleroy

satya - Wednesday, August 05, 2009 3:20:34 PM

Very interesting offering from micrsoft

satya - Thursday, August 06, 2009 2:58:05 PM

well I never seem to get out of the loop. Here is another: JqueryUI

satya - Thursday, August 06, 2009 10:21:27 PM

The way you select a DOM element forms the basis of JQuery.

Here is a list of selectors.

The way you select a DOM element forms the basis of JQuery.

satya - Thursday, August 06, 2009 10:23:10 PM

Sorry there seems to be a new API

satya - Thursday, August 06, 2009 10:45:59 PM

Examples


$("#MyElementID") // A specific id
$(".MyClass") //all elements matching this class
$("p") // all paragraphs
$("p.MyClass") //paragraphs with MyClass
$("div") // all divs
$(".MyClass1.MyClass2.MyClass3") // locate three classes
$("div,p,p.MyClass,#MyElementID") //matching all those

//Immediate children
$("#Main > *") // All children of Main
$("parent > child")

//Children and grand children
$("ancestor descendents")
$("form input") // all input fields in a form

$("label + input") // all inputs next to a label
$("prev + next")

//starting at myclass find siblings of type div
$(".myclass ~ div") 
$("prev ~ next)

satya - Thursday, August 06, 2009 10:49:05 PM

Once you select them, you can do this


$("selector:criteria")

where criteria is

first
last
even
odd
eq(index)
lt(index)
gt(index)
header //(h1, h2 etc)
animated

satya - Thursday, August 06, 2009 10:56:27 PM

Once you select and filter you can do the following wit the css function


$("tr:even").css("background-color", "#bbbbff");

satya - Thursday, August 06, 2009 11:01:13 PM

Or this


$("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

locate each div, and on click, for each located div (this), get its color, and write it out to an html element whose id is "result".

satya - Thursday, August 06, 2009 11:03:48 PM

and this


$("p").hover(function () {
      $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
    }, function () {
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
      $(this).css(cssObj);
    });

Every time a mouse passes over a paragraph, apply two colors.

satya - Thursday, August 06, 2009 11:04:50 PM

and this as well


$("p").mouseover(function () {
      $(this).css("color","red");
    });

satya - Friday, August 07, 2009 1:17:04 PM

read this: javascript secrets john resig

read this

satya - Friday, August 07, 2009 1:19:44 PM

More from John Resig

satya - Friday, August 07, 2009 1:27:28 PM

Read this article as well where the templating engine becomes an extension of jquery

satya - Thursday, July 15, 2010 12:45:20 PM

Looks like there is a new site for jquery docs

http://jqapi.com/

satya - Thursday, July 15, 2010 2:20:44 PM

jquery selectors given a node context

Search for: jquery selectors given a node context

satya - Thursday, July 15, 2010 2:21:08 PM

here is a post on understanding jquery context

satya - Thursday, July 15, 2010 2:21:29 PM

jquery functions dom objects

Search for: jquery functions dom objects

satya - Thursday, July 15, 2010 2:23:53 PM

let me see if this helps me

jquery function itself

satya - Monday, June 06, 2011 2:24:51 PM

Here is a simple jquery test


<script>
function callme()
{
 alert('hello');
 jQuery("#MyId").html("Not at all");
}
</script>

<form>
<input type="button" name="button" 
   value="pressme" onClick="javascript:callme();"/>
</form>

<p id="MyId">
Hello there
</p>

This is in drupal. Replace "jQuery" with a "$" in case of straigt jquery.

satya - Monday, June 06, 2011 3:12:21 PM

here is how to hide/show based on hover


<script>
function callme()
{
// alert('hello');
// jQuery("#MyId").html("Not at all");
alert('start');

var s = jQuery.ajax({ 
  url: "/satyatest", 
  async: false 
 }).responseText;

  alert(s);
  alert('done');
}

function c2()
{
  jQuery("#MyId").hover(hoverEnter, hoverLeave); 
  hoverLeave();
  alert('Finished loading');
}

function hoverEnter()
{
   jQuery("#MyHoverId").show();
}

function hoverLeave()
{
   jQuery("#MyHoverId").hide();
}

jQuery(document).ready(c2);

</script>

<form>
<input type="button" name="button" 
   value="pressme" onClick="javascript:callme();"/>
</form>

<div>
<p id="MyId">
Hello there
</p>


<div id="MyHoverId">
<p>This stuff</p>
<p>This stuff</p>
<p>This stuff</p>
<p>This stuff</p>
</div>
</div>

satya - Wednesday, June 08, 2011 3:40:42 PM

jquery get html attribute from an element

Search for: jquery get html attribute from an element

satya - Wednesday, June 08, 2011 3:44:05 PM

you can use attr method


function stm_hover_setup1()
{
	alert('test');
	var elementArray = jQuery(".hover_element");
	alert(elementArray.length);
	
	for(i=0; i<elementArray.length; i++)
	{
		element = elementArray[i];
		alert(jQuery(element).attr("href"));
	}
}

satya - Wednesday, June 08, 2011 3:45:14 PM

how can i add events to an html node through jquery

Search for: how can i add events to an html node through jquery