Jquery Selector Introduction

Post Views : 149

हेलो दोस्तों आज हम इस post में jquey selector के बारेमे जानेगे!. simple से समजे तो selector यानि हम किस element से action perform करते है! उसे हम selector कह सकते है!. Jquery में selector के तोर पर हम element tag name, ID, class वगेरे हो सकते है!.

Jqyert selector syntax:

$(selector) or jQuery("selector")

The Element tag name as selector

Jquery selector के तोर पर हम html document create करने में इस्तेमाल होने वाले सभी element tag के name का selector के तोर पर इस्तेमाल कर सकते है!. element tag name जैसे की body,div,section,h1 to h6,p ,img जैसे tag का selector के तोर पे इस्तेमाल कर सकते है!.

Example:

$(document).ready(function(){
  $("div").click(function(){
    $("p").show();
  });
});

ऊपर के example में देख सकते है की हमने element tag name div selector के तोर पे इस्तेमाल किया है इसमें क्या होता है की div element tag पे click करते है तो p tag show होगा. इस तरह हम कई action perform करा सकते है जैसे किसी element tag name के click पैर किसी perticuler element tag को hide करा सकते है या इस tag में css add करा सकते है तो ऐसे कई सारे acton perform करा सकते है!.

The Element ID as selector

जब हम html document ready करते है तो element tag में हम specific id attribute में ID define करते है जो पुरे document में unique होता है!. तो element के इस ID का इस्तेमाल हम jquery selector के तोर पर कर सकते है!.

Example:

$(document).ready(function(){
  $("#id").click(function(){
    $("p").show();
  });
});

ऊपर के ID selector example में देख सकते है की jquery में element id को define करने के लिए # symbol का इस्तेमाल किया जाता है!. और इस ID का selector के तोर पर इस्तेमाल करके jquery से कई action perform करा सकते है!.

The Element class name as selector

jquery में selector के तोर पर हम element के class name का इस्तेमाल कर सकते है!. jquery में element के class name को define करने के लिए ( . ) dote का इस्तेमाल से define कर सकते है!.

Example:

$(document).ready(function(){
  $(".className").click(function(){
    $("p").show();
  });
});

jquery के दूसरे selectors और उसके example

$(“*”) selector

$(“*”) का मतलब यह होता है की document में जितने बी element का इस्तेमाल हुवा है ये सभी को select कर लेता है!.

Example:

$(document).ready(function(){
  $(".className").click(function(){
    $("*").css('color','red');
  });
});

$(this) selector

$(this) selector का मतलब वह current html element को select करता है!.

Example:

$(document).ready(function(){
  $(".className").click(function(){
    $(this).hide();
  });
});

$(div.demo) selector

div element के साथ class=”demo” होंगे वह सभी div element को select करेगा!.

$(document).ready(function(){
  $("#ID").click(function(){
    $("div.demo").hide();
  });
});

$(div.first) selector

first div element को selects करेगा.

$(document).ready(function(){
  $("#ID").click(function(){
    $("div:first").hide();
  });
});

$(“ul li:first”) selector

first <ul> element के <li> element को selects करेगा.

$(document).ready(function(){
  $("#ID").click(function(){
    $("ul li:first").hide();
  });
});

$(“ul li:first-child”) selector

हरेक <ul> element के first <li> element को select करेगा!.

$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first-child").hide();
  });
});