jquery

jquery

Search for: what is jquery?

Here is the home page

can I use JQuery as a templating language

Search for: can I use JQuery as a templating language

very nice. See this note on JTemplates

Search for: john resig micro templating engine

Another nice article: bleroy

Very interesting offering from micrsoft

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

Here is a list of selectors.

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

Sorry there seems to be a new API


$("#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)


$("selector:criteria")

where criteria is

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


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


$("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". 


$("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. 


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

read this

More from John Resig

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

http://jqapi.com/

jquery selectors given a node context

Search for: jquery selectors given a node context

here is a post on understanding jquery context

jquery functions dom objects

Search for: jquery functions dom objects

jquery function itself


<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. 


<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>

jquery get html attribute from an element

Search for: jquery get html attribute from an element


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"));
	}
}

how can i add events to an html node through jquery

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