JQuery Basics

############--------jQuery Useful Scripts---#################

### To find the HTML content ##

myhtml1 = jQuery("#narrow-by-list").find("dd.odd ol li a").first().html();

## To make a condition ##

if(myhtml1 == "Quilting Frames_duplicate")
{
jQuery("#narrow-by-list").find("dd.odd ol li a").first().attr('href','http://xyz.com');

}

## To get the href##

jQuery('.wrapper').find('.col .logo11 a').attr('href')

### To get the image src,title###

jQuery('.wrapper').find('.col .logo11 img').attr('src')
jQuery('.wrapper').find('.col .logo11 img').attr('title')


### To change the href###

jQuery("#narrow-by-list").find("dd.odd ol li a").first().attr('href','http://xyz.com');


#### To add a new Class ###

jQuery('.wrapper').find('.col .logo11 a').addClass('hello');

### To Find the HTML content and place the html content in the other div ###

myyhtml = jQuery("#narrow-by-list").find("dd.even").first().html(); //it will get the html content
//alert(myyhtml);// to check what content is coming
jQuery("#narrow-by-list").prepend("<dt>Machine Type</dt><dd class='odddd'>"+myyhtml+"</dd>");

### .prepend() puts data inside an element first index ###

### .append() puts data inside an element at last index ###

### .after() puts the element after the element ###

### .before() puts the element before the element ###

in this case

jQuery("#narrow-by-list").after("<dt>Machine Type</dt><dd class='odddd'>"+myyhtml+"</dd>")
it will place the content after the narrow-by-list id

### The .before() and .insertBefore() methods perform the same task same for the .after() and .insertAfter()
The major difference is in the syntax-specifically, in the placement of the content and target ###
for example:

$( "<p>Test</p>" ).insertBefore( ".inner" );
$( "<p>Test</p>" ).insertAfter( ".inner" );
jQuery("#narrow-by-list dt.odd:eq(0)").before("<dt>Machine Type</dt><dd class='odddd'><ol><li class='jquname'><a href='#'>Industrial Machine</a>(0)</li></ol></dd>")
jQuery(""<dt>Machine Type</dt><dd class='odddd'><ol><li class='jquname'><a href='#'>Industrial Machine</a>(0)</li></ol></dd>").insertBefore("#narrow-by-list dt.odd:eq(0)");

### load() the content from URL:"http://xyz/magento/index.php/customer/account/login/" and .main will load the content of class main ###

<script>
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("#div1").load("http://xyz/magento/index.php/customer/account/login/ .main");
  });
});
</script>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

###jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page###

###Callback function to run when the load() method is completed###

    responseTxt - contains the resulting content if the call succeeds
    statusTxt - contains the status of the call
    xhr - contains the XMLHttpRequest object

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("External content loaded successfully!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
 
###The $.post() method requests data from the server using an HTTP POST request###
$.post(URL,data,callback); 

$.post("demo_test_post.asp",{name:"rahul",city:"sd"},function(data,status){alert("Data: " + data + "\nStatus: " + status);});

Example:

jQuery(".left_part h1").click(function()
{
    var key11=jQuery(".left_part").find("h1").text();
    var key_b11=jQuery(".left_part").find("h1").text();
    //alert(key11);
    jQuery.post("http://xyz/magento/test.phtml",{name:key11,city:key_b11},function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
    });
});           


//In test.phtml file
<?php
echo "name:".$_POST['name']."city".$_POST['city'];

?>