[JQuery]使用 jQuery，第 2 部分: 构建未来的 Web 应用程序

// make the "myButton" click.  This will cause the button to click and any actions
// tied to it will occur - for example, it could submit a form, or other
// jQuery actions could be tied to it.
$("#myButton").click();
// use jQuery to setup what will actually happen when the "myButton" is
// actually clicked.
$("#myButton").click(function(){
$("#myDiv").toggle();
});
// A common pattern in jQuery when setting up actions on a page is to trigger the
// action to occur initially when the page is loaded.  This occurs frequently
// with AJAX setups, where the values come from the server.
// In this example, the myDiv has its visibility toggled every button click.  When
// the page is loaded, we call click() immediately, which toggles the view
// as soon as the page views (not a practical example, but you should see the design)
$("#myButton").click(function(){
$("#myDiv").toggle();
}).click();

// This demonstrates the hover() function as implemented by jQuery.  You define two
// functions:  what happens when the mouse moves over the specified element
// and what happens when the mouse moves off the element.
// In this example, each row in a table will get a red background when
// the mouse moves over it and a white background when the mouse leaves.
$("tr").hover(function(){
$(this).css("background","#0000ff");
},
function(){
$(this).css("background","#ffffff");
});

<img src="/images/space.gif" id="spacer" class="a b c" alt="blank">
// Calls to the attr() function will return the following
$("#spacer").attr("src"); // will return "/images/space.gif"
$("#spacer").attr("alt"); // will return "blank"
// Similarly, you can access the ID in the same way
$(img).each(function(){
$(this).attr("id"); // will return "spacer"
});

<!-- This would appear in the top frame as a tab.  The CSS file would control how
the tab appears, and the only HTML code needed would be this -->
<td>
<div class="tab" id="/messages.jsp">Messages</div>
</td>
// This code would appear in the jQuery section.  Notice how we get the ID from the tab,
// and use that information to set the bottom frame, named 'content' with the content
// on the page "messages.jsp"
$(".tab").click( function() {
window.parent.frames['content'].location = $(this).attr("id");
});

// will change the image source, and the image displayed on the page will change
$("img").attr("src", "myimage.jpg");
// will change all the links on the page to go to one specific page
$("a").attr("href", "mypage.html");
// will change the maxLength on all password fields to 10 characters
$(":password").attr("maxLength", "10");

// will get the text contained in the text field and check that it's not blank
$(":textfield").each(function(){
// use the val() function to get the text inside the textfield
if ($(this).val() == "")
$(this).next().text("Error");
});
// on a new password page, this will compare the new one with the confirmation,
// to make sure they are equal
if ($("#newPassword").val() != $("#confirmPass").val())
$("#newPassword").next().text("Error");

// this will examine every <td> tag, and if the value is blank, it will insert
// a "-" into it, as a placeholder.
$("td").each(function(){
// check the text of the table cell
if ($(this).text() == "")
$(this).text("-");
});
// this will convert every paragraph's text to lowercase
$("p").each(function(){
var oldText = $(this).text();
var newText = oldText.toLowerCase();
$(this).text(newText);
});
<-- This shows the difference between text() and html() -->
<div id="sample"><b>This is the example</b></div>
$("#sample").html(); // will return "<b>This is the example</b>"
$("#sample").text(); // will return "This is an example"

// create the div like we did above, but without any specific information.  In this
// way we can create a generic HTML layout and customize it in our jQuery code.
<td>
<div class="tab"></div>
</td>
// Now customize each tab in the jQuery code.
$(".tab").eq(0).text("Messages");
$(".tab").eq(0).data("link", "messages.jsp");
$(".tab").click(function(){
window.parent.frames['content'].location = $(this).data("link");
});
// Taking this a step further, you can picture all this information coming from
// an external properties file via a Java array.  This would be the code on a JSP
// page.
<%
// array containing tab names
String[] tabNames;
// array containing tab links
String[] links;
for (int i=0; i<tabNames.length; i++) {
%>
$(".tab").eq(<%=i%>).text("<%=tabNames[i]%>");
$(".tab").eq(<%=i%>).data("link", "<%=links[i] %>");
<% } %>
$(".tab").click(function(){
window.parent.frames['content'].location = $(this).data("link");
});

// change the background of every div to red
$("div").css("backgroundColor", "#ff0000");
// - or -
$("div").css("backgroundColor", "red");
// - or -
$("div").css({backgroundColor: "#ff0000"}); // notice the braces and lack of quotes

// will add the "input_error" class to any form elements that fail to validate
// you can picture the "input_error" class in the external CSS file defining
// a red border and red text
$(":textfield").each(function(){
if ($(this).val() == "")
{
$(this).next().text("Error");
// this will turn the text field's border/text red
$(this).addClass("input_error");
}
// this tests if the text field has the class attached already
else if ($(this).hasClass("input_error"))
{
$(this).next().text("");
// this will remove the class, restoring a normal border/text
$(this).removeClass("input_error");
}
});

// First we add the rows to the table.  Each row is a member of the "messageRow" class.
//  We also give an ID to each row, and this ID is the message number itself, which is
// gotten from the Java data object. Keep in mind this sits in a for loop in a JSP file.
<%
for (int i=0; i<messages.size(); i++)
{
MessageData message = messages.get(i);
%>
<tr class="messageRow" id="<%=message.id %>">
// Now that the table has been laid out, we can define our jQuery code to capture single
// mouse clicks and double mouse clicks.
// Notice how we capture a single click on the table row with the click() function.  Next
// notice how we use addClass() and removeClass() instead of manipulating the CSS
// directly with a css() function.  This lets us change the stylesheet underneath
// the code without modifying our jQuery code.
$(".messageRow").click(function() {
$(".messageRow").removeClass("message_selected");
$(this).addClass("message_selected");
});
// Now we capture the double click on a table row.  Ignore the AJAX methods with the
// post() function, which we'll get to in the next article.
// We use the dblclick() function here to capture double clicks.
// Notice in the AJAX call, how we get the ID out of the table row that was double
// clicked.
// We pass this ID to the server in order to get the information about the message back
// from the server.  We defined the message number in the JSP code, so that the ID
// contained the message number.
$(".messageRow").dblclick(function() {
if ($(this).hasClass("mail_unread"))
{
$(this).removeClass("mail_unread");
}
$.post("<%=HtmlServlet.READ_MESSAGE%>.do",
{
messageId: $(this).attr("id"),
view: "<%=view %>"},
function(data){
// Do AJAX stuff here
});
});
});