JQuery Selectors

JQuery Selectors

General JQuery script

=====================

 $("div").text("For this type jQuery found " + input.length + ".")

            .css("color", "red");

    $("form").submit(function () { return false; });

jQuery('element') element ex: div, input, bold, para, span , table, td etc

=================================================================

$("div").css("border","9px solid red");

Value change

============

$("input:disabled").val("this is it");

css change

=========

$("form input").css("border", "2px dotted blue");

class change

==========

$(".myClass").css("border","3px solid red");

:contains() Selector

=================

$("div:contains('John')").css("text-decoration", "underline");

ancestor descendant

==================

jQuery('ancestor descendant')

$("ul.topnav > li").css("border", "3px double red");

jQuery(':disabled')

==================

$("input:disabled").val("this is it");

:enabled Selector

================

$("input:enabled").val("this is it");

:empty Selector and changing text of "<td>"

========================================

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

:eq() Selector

============

The index-related selectors (:eq(), :lt(), :gt(), :even, :odd) filter the set of elements that have matched the expressions that precede them.

$("td:eq(2)").css("color", "red");

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

:file Selector

============

$("input:file").css({background:"yellow", border:"3px red solid"})

:first-child Selector

===================

 $("div span:first-child")

        .css("text-decoration", "underline")

        .hover(function () {

              $(this).addClass("sogreen");

            }, function () {

              $(this).removeClass("sogreen");

            });

jQuery(':first') --:first Selector

===============================

$("tr:first").css("font-style", "italic");

jQuery(':gt(index)') --:gt() Selector

=================================

$("td:gt(4)").css("text-decoration", "line-through");

jQuery('[attribute]') --Has Attribute Selector [name]

==================================================

$("div[id]").one("click", function(){

      var idString = $(this).text() + " = " + $(this).attr("id");

      $(this).text(idString);

    });

jQuery(':has(selector)') -- :has() Selector

=======================================

$("div:has(p)").addClass("test");

jQuery(':header') -- :header Selector

===================================

$(":header").css({ background:'#CCC', color:'blue' });

jQuery('parent > child')--Child Selector (“parent > child”)

=====================================================

$("ul.topnav > li").css("border", "3px double red");

jQuery(':checked') -- :checked Selector

=====================================

function countChecked() {

      var n = $("input:checked").length;

      $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");

    }

    countChecked();

    $(":checkbox").click(countChecked);

jQuery(':checkbox') -- :checkbox Selector

========================================

var input = $("form input:checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});

    $("div").text("For this type jQuery found " + input.length + ".")

            .css("color", "red");

    $("form").submit(function () { return false; }); // so it won't submit

jQuery(':last-child')--:last-child Selector

======================================

<script>

    $("div span:last-child")

        .css({color:"red", fontSize:"80%"})

        .hover(function () {

              $(this).addClass("solast");

            }, function () {

              $(this).removeClass("solast");

            });

</script>

jQuery(':last') -- :last Selector

=============================

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

jQuery(':input')--:input Selector

===============================

allInputs = $(":input");

jQuery(':image') -- :image Selector

================================

 var input = $("input:image").css({background:"yellow", border:"3px red solid"});

jQuery('#id')--ID Selector (“#id”)

================================

$("#myDiv").css("border","3px solid red");

jQuery(':hidden') -- :hidden Selector

==================================

$(":hidden")

jQuery(':last')--:last Selector

============================

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

jQuery('[attributeFilter1][attributeFilter2][attributeFilterN]')--Multiple Attribute Selector [name=value][name2=value2]

==================================================================================

$("input[id][name$='man']").val("only this one");

jQuery('selector1, selector2, selectorN') -- Multiple Selector (“selector1, selector2, selectorN”)

=====================================================================================

$("div,span,p.myClass").css("border","3px solid red");

jQuery('prev + next')---Next Adjacent Selector (“prev + next”)

===========================================================

    <label>Name:</label>

    <input name="name" />

    <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

    </fieldset>

  </form>

  <input name="none" />

<script>$("label + input").css("color", "red").val("Labeled!")</script>

jQuery('prev ~ siblings')--Next Siblings Selector (“prev ~ siblings”)

================================================================

$("#prev ~ div").css("border", "3px groove blue");

ex::

<div>div (doesn't match since before #prev)</div>

  <span id="prev">span#prev</span>

  <div>div sibling</div>

  <div>div sibling <div id="small">div niece</div></div>

  <span>span sibling (not div)</span>

  <div>div sibling</div>

<script>$("#prev ~ div").css("border", "3px groove blue");</script>

jQuery(':not(selector)')--:not() Selector

====================================

 $("input:not(:checked) + span").css("background-color", "yellow");

  $("input").attr("disabled", "disabled");

Ex:::

<div>

  <input type="checkbox" name="a" />

  <span>Mary</span>

</div>

<div>

  <input type="checkbox" name="b" />

  <span>lcm</span>

</div>

<div>

  <input type="checkbox" name="c" checked="checked" />

  <span>Peter</span>

</div>

jQuery(':nth-child(index/even/odd/equation)')---:nth-child Selector

===============================================================

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

jQuery(':only-child')--:only-child Selector

========================================

$("div button:only-child").text("Alone").css("border", "2px blue solid");

jQuery(':odd') -- :odd Selector

============================

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

jQuery(':password')--:password Selector

=====================================

  var input = $("input:password")

jQuery(':parent')--:parent Selector

==============================

$("td:parent").fadeTo(1500, 0.3);

jQuery(':radio')--:radio Selector

==============================

var input = $("form input:radio").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});