Jquery Selectors Quick Quide

9th Sep 2010 at 8:08 AM | Posted in Jquery | Leave a comment 

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

Radio Button:

jQuery('#radio_form input:radio:checked').val();
$("#myform input[type='radio']:checked").val();
$('input:radio[name=bar]:checked').val();
$("input[@name='rdio']:checked") . Val();

Checkbox:

$('input:checkbox:checked').val();
$('#checkBox').attr('checked');
$('#edit-checkbox-id').is(':checked');

$("input[@type=checkbox][@checked]").each(
function(){
// Insert code here
} );

$("input[@name='chkBox']").click(function(){
// your code here
});

$("input[type='checkbox']:checked").each(function(){
//Insert code here
});

Drop Down:

$("select option:selected").each(function () {
/Insert cod here
});

Get Selected value:
$('#selectId :selected').val()

Get Selected value Text:
$(<'#selectId :selected').text()

Get Selected Values:
$(document).ready(function() {
$("#a").click(function(){
$("select option:selected").each(function(){
alert($(this).val());//you can create an array here
});
});
});

jquery prev()

28th Jan 2010 at 2:33 PM | Posted in Jquery | Leave a comment

<script>
//cresting an array of colors
var $color_arr= new Array(“#000000″,”green”,”blue”,”red”);
var $i=0;
var col=”;
$(document).ready(function(){
var $curr = $(“#start”);
$curr.css(“background”, “#f99″);
$(“button”).click(function () {
/*code when controls comes to 1st div stsrts */
if($curr.attr(‘id’)==1) //when controles comes to the first div
$curr=$(‘#8′).next();//locate next of last div to the $curr
// use $curr=$(‘#8′); and see the changes.
/*code when controls comes to 1st div ends */

$curr = $curr.prev();
$(“div”).css(“background”, “”);
$curr.css(“background-color”, $color_arr[$i]);
$i++;
if($i>=$color_arr.length) // for rotate colors
$i=0;
});

});
</script>
<style>
div { width:40px; height:40px; margin:10px;
float:left; border:2px blue solid;
padding:2px; }
span { font-size:14px; }
p { clear:left; margin:10px; }
</style>
</head>
<body>
<div id=”1″></div>
<div id=”2″></div>
<div id=”3″></div>
<div id=”4″></div>
<div id=”5″></div>
<div id=”6″></div>
<div id=”start”></div>
<div id=”8″></div>
<p><button>Go to Prev</button></p>
</body>
</html>

jquery live/die

12th Jan 2010 at 11:25 AM | Posted in Jquery | Leave a comment

live:

Binds a handler to an event (like click) for all current – and future – matched element. Can also bind custom events.

<script>
  $(document).ready(function(){
    
    $("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });

  });
  </script>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>


 <p>Click me!</p>
  <span></span>




die:

This does the opposite of live, it removes a bound live event.Without any arguments, all bound live events are removed.


You can also unbind custom events registered with live.


<script>
  $(document).ready(function(){
    
    function aClick() {
      $("div").show().fadeOut("slow");
    }
    $("#bind").click(function () {
      $("#theone").live("click", aClick)
                  .text("Can Click!");
    });
    $("#unbind").click(function () {
      $("#theone").die("click", aClick)
                  .text("Does nothing...");
    });

  });
  </script>
  <style>
  button { margin:5px; }
  button#theone { color:red; background:yellow; }
  </style>


 <button id="theone">Does nothing...</button>
  <button id="bind">Bind Click</button>
  <button id="unbind">Unbind Click</button>
  <div style="display:none;">Click!</div>

jquery Events/trigger

12th Jan 2010 at 11:14 AM | Posted in Jquery | Leave a comment
Trigger an event on every matched element.

This will also cause the default action of the browser with the same name (if one exists) to be executed. For example, passing ‘submit’ to the trigger() function will also cause the browser to submit the form. This default action can be prevented by returning false from one of the functions bound to the event.

<script>
  $(document).ready(function(){

    $("button:first").click(function () {
      update($("span:first"));
    });
    $("button:last").click(function () {
      $("button:first").trigger('click');
      update($("span:last"));
    });
    function update(j) {
      var n = parseInt(j.text(), 10);
      j.text(n + 1);
    }
  });
  </script>
  <style>
  button { margin:10px; }
  div { color:blue; font-weight:bold; }
  span { color:red; }
  </style>
  <button>Button #1</button>
  <button>Button #2</button>
  <div><span>0</span> button #1 clicks.</div>
  <div><span>0</span> button #2 clicks.</div>

jquery Events/bind/unbind

12th Jan 2010 at 9:52 AM | Posted in Jquery | Leave a comment
Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.

Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error, ready

<style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>

<script>
$(document).ready(function(){

$(“p”).bind(“click”, function(e){

      var str = "( " + e.pageX + ", " + e.pageY + " )";
      $("span").text("Click happened! " + str);
    });
    $("p").bind("dblclick", function(){
      $("span").text("Double-click happened in " + this.tagName);
    });
    $("p").bind("mouseenter mouseleave", function(e){
        $(this).toggleClass("over");
    });
});
</script>
<p>Paragraph</p>
<span></span>

Unbind:

This does the opposite of bind, it removes bound events from each of the matched elements.

Without any arguments, all bound events are removed. If the type is provided, all bound events of that type are removed. If the function that was passed to bind is provided as the second argument, only that specific event handler is removed.
You can also unbind custom events registered with bind.

<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
$(document).ready(function(){
function aClick() {
$(“div”).show().fadeOut(“slow”);
}
$(“#bind”).click(function () {
// could use .bind(‘click’, aClick) instead but for variety…
$(“#theone”).click(aClick).text(“Can Click!”);
});
$(“#unbind”).click(function () {
$(“#theone”).unbind(‘click’, aClick).text(“Does nothing…”);
});
});
</script>
<button id=”theone”>Does nothing…</button>
<button id=”bind”>Bind Click</button>
<button id=”unbind”>Unbind Click</button>
<div style=”display:none;”>Click!</div>

jquery addClass & removeClass

12th Jan 2010 at 9:26 AM | Posted in Jquery | Leave a comment

<style>
.red
{
background-color:#CC0033;
color:green;
font-weight:bold;
}
.green
{
background-color:#003300;
color:red;
font-weight:bold;
}
#myDiv
{
border:3px double #000000;
}
</style>
<script>
$(document).ready(function(){
$(“#addclass_red”).click(function ()
{
$(“#myDiv”).addClass(“red”);
$(“#myDiv”).removeClass(“green”);
});
$(“#addclass_green”).click(function ()
{
$(“#myDiv”).addClass(“green”);
$(“#myDiv”).removeClass(“red”);
});
});
</script>
<div id=”myDiv” style=”width:100px; height:30px;”>div 1</div>
<input type=”button” id=”addclass_red” name=”addclass_red” value=”Add Red” />
<input type=”button” id=”addclass_green” name=”addclass_green” value=”Add Green” />
when click on “Add Red” button the function add red class to div myDiv & removing the class green.

similarly, when click on “Add Green” button the function add greenclass to div myDiv & removing the class red.

JQUERY next()

12th Jan 2010 at 9:05 AM | Posted in Jquery | Leave a comment

we can access the div or span… using jquery next() function.

$(document).ready(function(){
$(“#myDiv”).css(“border”,”3px solid red”);
$(“#myDiv”).click(function ()
{
$(this).hide(“slow”);
$(this).show(“slow”, function(){
$(this).css(“border”,”3px solid blue”);
$(this).next(‘div’).next(‘span’).css(“color”,”red”);
});
});
});

<div id=”myDiv” style=”width:100px; height:30px;”>div 1</div>
<div>div 2</div>
<span>span 1</span>

In this example i accessed the span that is next to div2 which is next to div1(div1->div2->span1) by jquery next function.

Example: 2

<script>
$(document).ready(function(){
$(“button[disabled]“).next().text(“this button is disabled”);
});
</script>
<style>
span { color:blue; font-weight:bold; }
button { width:100px; }
</style>
</head>
<body>
<div><button disabled=”disabled”>First</button> – <span></span></div>
<div><button>Second</button> – <span></span></div>
<div><button disabled=”disabled”>Third</button> – <span></span></div>
</body>
</html>

jquery

11th Jan 2010 at 2:33 PM | Posted in Jquery | Leave a comment

jQuery is a new kind of JavaScript Library.
First download the js file from here: http://jquery.com.

Now write your 1st jquery script:

include the js file in your page like :
<div style=”border:3px
<script type=”text/javascript” src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“#myDiv”).css(“border”,”3px solid red”);
/* when click on the div this will hide slowly */
$(“#myDiv”).click(function ()
{
$(this).hide(“slow”);
$(this).show(“slow”);
});
});
</script>
<div id=”myDiv” style=”width:100px; height:10px;”></div>

Here, when click event fire on the div the function will call to hide this div slowly & then show function this div slowly.

Now do something more with the same example:

<script>
$(document).ready(function(){
$(“#myDiv”).css(“border”,”3px solid red”);
$(“#myDiv”).click(function ()
{
$(this).hide(“slow”);
$(this).show(“slow”, function(){
$(this).css(“border”,”3px solid green”);
});
});
});
</script>

Now we added a css style to this div when it will be shown by show function.
We can add attribute using  attr(‘style’,'border:3px solid blue’).
Ex: $(this).attr(‘style’,'border:3px solid blue’);

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.

Follow

Get every new post delivered to your Inbox.