使用jQuery的将桌面应用程序引入浏览器_jquery

// This will show every <div> tag in the page. Note that it will show
// every <div>, not the first matching, or the last matching.
// Traversing Arrays is discussed later in the article.
$("div").show();

// This will give a red background to every <p> tag in the page.
$("p").css("background", "#ff0000");

// This will set the innerHTML of a span element with the id of "sampleText" to "Hi".
// Note the initial "#" in the command. This is the syntax used by jQuery to search
// for IDs, and must be included. If it is excluded, jQuery will search for the HTML
// tag instead, and with no <sampleText> tags on a page, will ultimately do
// nothing, leading to frustrating and hard-to-find bugs (not that that has ever
// happened to me of course).

$("#sampleText").html("Hi");

// This will create a red background on every element on the page with a CLASS of
// "redBack". Notice that it doesn't matter which HTML element this "redBack"
// CLASS tag is attached to. Also notice the period in the front of the query
// term -- this is the jQuery syntax for finding the CLASS names.

$(".redBack").css("background", "#ff0000");

<p class="redBack">This is a paragraph</p>
<div class="redBack">This is a big div</div>
<table class="redBack"><tr><td>Sample table</td></tr></table>

// This will hide every <p>, <span>, or <div>.
$("p, span, div").hide();

// This will hide every <p> tag on a page
$("p").hide();

// This will hide the first element on a page, no matter its HTML tag
$(":first").hide();

// Notice how these can be used in combination to provide more fine tuning of
// search criteria. This will hide only the first <p> tag on a given page.
$("p:first").hide();

// Will loop through each <p> tag on the page. Notice the use of the
// inline function here -- this is analogous with the anonymous classes in Java.
// You can either call a separate function, or write an inline function like this.

var increment = 1;
$("p").each(function(){

 // now add a paragraph count in front of each of them. Notice how we use the
 // $(this) variable to reference each of the paragraph elements individually.

 $(this).text(increment + ". " + $(this).text());
 increment++;
});

// the eq() function lets you reference an element in the array directly.
// In this case, it will get the 3rd paragraph (0 referenced of course) and hide it
$("p").eq(2).hide();

// The slice() function lets you input a start and an end index in the array, to
// create a subset of the array. This will hide the 3rd through 5th paragraphs on the
// page
$("p").slice(2,5).hide();

<input type=text class=validate><span></span>

function validateForm()
{
 $(".validate:text").each(function(){
 if ($(this).val()=="")
 // We'll loop through each textfield on the page with a class of "validate"
 // and if they are blank, we will put text in the <span> immediately afterwards
 // with the error message.

  $(this).next().html("This field cannot be blank");
});
}

<!-- The first step is creating the Select All checkbox itself.
we give it a unique ID on the page -->

<input type=checkbox id=selectall>

<!-- The next step is giving each of the rows their own checkbox.
we put each row's checkbox into the 'selectable' class, since there can be many rows,
and we want each of the rows' checkboxes to have the same behavior. -->

<input type=checkbox class=selectable>

<!-- The final step is bringing it all together with some jQuery code. -->

// remember that all jQuery setup code must be in this document.ready() function,
// or contained within its own function in order to function correctly.

$(document).ready(function(){
 // We use the jQuery selection syntax to find the selectall checkbox on the page
 // (note the '#' which signifies ID), and we tell jQuery to call the selectAll()
 // function every time someone clicks on the checkbox (we'll get to Events in a
 // future article).

 $("#selectall").click(selectAll);
});

// This function will get called every time someone clicks on the selectall checkbox
function selectAll()
{
 // this line determines if the selectall checkbox is checked or not. The attr()
 // function, discussed in a future article, simply returns an attribute on the
 // given object. In this case, it returns a boolean if true, or an undefined if
 // it's not checked.

 var checked = $("#selectall").attr("checked");

 // Now we use the jQuery selection syntax to find all the checkboxes on the page
 // with the selectable class added to them (each row's checkbox). We get an array
 // of results back from this selection, and we can iterate through them using the
 // each() function, letting us work with each result one at a time. Inside the
 // each() function, we can use the $(this) variable to reference each individual
 // result. Thus, inside each loop, it finds the value of each checkbox and matches
 // it to the selectall checkbox.

 $(".selectable").each(function(){
  var subChecked = $(this).attr("checked");
  if (subChecked != checked)
   $(this).click();
 });
}