One: Introduction of jQuery
jQuery is essentially a js class library that encapsulates commonly used methods and objects for our convenience.
1. Our previous DOM programming: var obj = Document.getElementById(id); what object is obj obtained here - the DOM object
2. If we want to use some of the methods and attributes already encapsulated in Jquery, we first get the changing jQuery object, and then manipulate the jQuery object with some methods and attributes encapsulated in it.
2: Getting started with jquery
Integration of 2.1 jquery and html
jquery is a separate js file that can be imported via the src attribute of the script tag
2.2 Get a jquery object
$("selector") or jQuery("selector")
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<body>
<input type="text" id="username" value="jack"/>
</body>
<script>
//1. Use native js code to get our input tag above
var username = document.getElementById("username");
//alert(username.value);
//2. Use jQuery to get our above input tag object, note that we get the jQuery object at this point
//var $jQuery = $("selector"); this is the most common method
var $username = $("#username");
//alert($username.val()); //Call the val() method of the jQuery object to get the value property value
//3. Get a jQuery object in another way
var $username2 = jQuery("#username");
alert($username2.val());
</script>
</html>Conversion between 2.3 dom and jquery objects
dom object==>jquery object
$(dom object)
jquery object==>dom object
Mode 1:
jquery object [index]
Mode 2:
jquery object.get(index)
<script>
//Dom-->> jQuery object, conversion $(dom object)
var username = document.getElementById("username");
var $username = $(username);
//alert($username.val());
//jQury Object---> DOM Object
//Mode 1: jQuery object.get(index);
var username2 = $username.get(0);
//alert(username2.value);
//jQury Object---> DOM Object
//Mode 2: jQuery Object [index]
var username3 = $username[0];
alert(username3.value);
</script>2.4 Page load:
Operations in js: window.onload=function() {}// can only be used once in a page, more writes will only perform the last one
jquery can be used multiple times in a page, from top to next execution
Mode 1: (Common) $(function(){...})
Mode 2: $(document).ready(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//With native js, when the page is loaded, I do a few things
//After the entire html page loaded successfully, I popped up a sentence, "Page loaded successfully"
/* window.onload=function(){
//All of this code is executed after the html page has been successfully loaded
//alert("Page loaded successfully ";
//Another way to impose events on a tag (dispatch events)
//Format: dom object. Event name = fucntion(){....}
/*var bt1 = document.getElementById("bt1");
bt1.onclick=function(){
alert("I was clicked on ";
}*/
/*alert("It's really hot today ";
}
*/
//Events of successful page loading,
//Native js code, when the page loads successfully, the entire page can only write one window.onload
/* window.onload=function(){
alert("I am really sleepy at noon. Can I give a recliner chair?
}*/
//Implement successful page loading events using code from jQuery
//Mode 1:
$(function(){
//All of this code is executed when the entire html page family succeeds
//alert("cool weather");
})
//Events to be executed by the second page home after success
//Note: When we use jQuery to execute events after successful page loading, we can execute multiple
$(function(){
//alert("Congratulations on getting an air conditioning fan");
})
//Use jQuery to execute events after successful page loading
//Mode 2:
$(document).ready(function(){
//Code to execute after successful page loading
alert("Mode 2 executed successfully");
})
</script>
</head>
<body>
<input type="button" id="bt1" value="Button"/>
</body>
</html>
2.5 Dispatch Events:
$("selector"). click(function(){...}); equivalent to the dom object in native js. onclick=function(){....}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Common Events</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
//Requirements: Add loss of focus and gain of focus events, keyboard press and keyboard pop-up events to e01
$("#e01").blur(function(){
$("#textMsg").html("Lose focus");
}).focus(function(){
$("#textMsg").html("Get Focus");
}).keydown(function(){
$("#textMsg").html("Keyboard pressed");
}).keyup(function(){
$("#textMsg").html("Keyboard pop-up");
})
//Requirements: Add events to e02 that the mouse moved in and removed,
$("#e02").mouseover(function(){
$("#divMsg").html("Mouse moved in");
}).mouseout(function(){
$("#divMsg").html("Mouse moved out");
})
//Requirements: Add click and double click events to e03
$("#e03").click(function(){
$("#buttonMsg").html("I was clicked");
}).dblclick(function(){
$("#buttonMsg").html("I was double-clicked");
})
})
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="Clickable"/><span id="buttonMsg"></span> <br/>
</body>
</html>Three: The effect in jquery:
Effects in 3.1 jquery
- Hide or show
Show (milliseconds)
Hide (milliseconds)
- Slide in or out
SlideDown (milliseconds): slide down
SlideUp (milliseconds): slide up
Fade in or out
FadeIn (milliseconds): fade in
FadeOut (milliseconds): fade out
Note: The number of milliseconds above indicates how long it will take to complete the change.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border:1px solid #000;
width:100px;
height:100px;
}
</style>
<!-- Import js Library, note: Use src Cannot write content in tag body after attribute-->
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Add a click event to b1
//<input type="button" id="b1" value="show/hide b1Div"/>
$("#b1").click(function(){
//Get id="b1Div",jQuery object
//Show (milliseconds): how long to show
//Hide (milliseconds): how much time to hide
//Toggle (milliseconds): show if hidden, hide if displayed
//$("#b1Div").hide(2000);
$("#b1Div").toggle(2000);
})
//<input type="button" id="b2" value="slide out/into b2Div"/>
$("#b2").click(function(){
//SlideDown (milliseconds): how much time to scroll in from top to bottom
//SlideUp (milliseconds): how much time to scratch from bottom to top
//SlideToggle (milliseconds): If scratched, scratch out, if scratched, scratch in
$("#b2Div").slideToggle(3000);
})
//<input type="button" id="b3" value="fade out/fade in b3Div"/>
$("#b3").click(function(){
//FadeIn (milliseconds): how much time to single in
//FadeOut (milliseconds): how long to fade out
//FadeToggle (milliseconds): fade in, fade out, fade in if fade out
//$("#b3Div").fadeOut(2000);
$("#b3Div").fadeToggle(2000);
})
});
</script>
</head>
<body>
<input type="button" id="b1" value="display/hide b1Div" />
<div id="b1Div"></div> <br/>
<input type="button" id="b2" value="Slide out/Slide in b2Div"/>
<div id="b2Div"></div> <br/>
<input type="button" id="b3" value="Fade out/Fade in b3Div" />
<div id="b3Div"></div>
</body>
</html>Case 1 - Pop-up Advertising
Step Analysis
1. After the page is loaded successfully $(function(){...}) Start a timer setTimeout();
2. Ways to write display advertisements
Get the div and then call the effect method
Set another timer to hide
3. Ways to write hidden ads
Get the div and then call the effect method
<script>
$(function(){
/**
* 1.Display advertisements (timers) every 3 seconds when the page loads successfully
* 2.Ways to Show Advertisements
* 3.You also need to set a timer to hide it every few seconds
*
* How to hide a tag:
* 1.display:none
* 2.style=hidden
*/
window.setTimeout("showAd()",3000);
})
function showAd(){
//Show Advertisements
$("#ad").slideDown(1000);
//Start a timer
window.setTimeout("hideAd()",2000);
}
//Hide Advertisements
function hideAd(){
$("#ad").slideUp(1000);
}
</script>
</head>
<body>
<div id="ad" style="width:100%;display: none;">
<img src="../img/ad_.jpg" width="100%" />
</div>
</body>5: Selector Summary
5.1 Basic Selector
$("#id value") $(".class value") $("label name") Learn: $("*")Understanding: Get multiple selectors separated by commas $("#id value,.class value")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-Basic selector.html</title>
<!-- Introduce jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
/* <input type="button" value="Select the element with ID one.'id='BTN1'/>
<input type="button" value="Select all elements with class mini.'id='btn2'/>
<input type="button" value="Selection element name is all elements of div. "id=" btn3 "/>
<input type="button" value="Select all elements. "id=" btn4 "/>
<input type="button" value="Select all span elements and elements with ID two.'id='btn5'/>*/
//Dispatch time when page loads successfully
//<input type="button" value="select element with ID one." id="btn1"/>
$(function(){
//Dispatch time when page loads successfully
//<input type="button" value="select element with ID one." id="btn1"/>
$("#btn1").click(function(){
$("#one").css("background-color","red")
})
//<input type="button" value="Select all elements with class mini." id="btn2"/>
$("#btn2").click(function(){
$(".mini").css("background-color","green");
})
//input type="button" value="Select element name is all elements of div." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background-color","green");
})
//<input type="button" value="Select all elements." id="btn4"/>
$("#btn4").click(function(){
$("*").css("background-color","green");
})
//<input type="button" value="Select all span elements and elements with ID two." id="btn5"/>
$("#btn5").click(function(){
$("span,#two"). css("background-color","green");
})
})
</script>
</head>
<body>
<button id="reset">Manually reset page elements</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">Automatically reset the page when clicking the following button</label><br /><br />
<h3>Basic selector.</h3>
<!-- Control button -->
<input type="button" value="Choice id by one Elements of." id="btn1"/>
<input type="button" value="Choice class by mini All elements." id="btn2"/>
<input type="button" value="Selection element name is div All elements." id="btn3"/>
<input type="button" value="Select all elements." id="btn4"/>
<input type="button" value="Select All span Elements and id by two Elements of." id="btn5"/>
<br /><br />
<!-- Elements of the test -->
<div class="one" id="one" >
id by one,class by one Of di
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test" >
id by two,class by one,title by test Of div.
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by"none"Of div</div>
<div class="hide">class by"hide"Of div</div>
<div>
Contain input Of type by"hidden"Of div<input type="hidden" size="8"/>
</div>
<span id="mover">Executing animation span element.</span>
</body>
</html>
5.2 Hierarchical Selector
All b descendants of a b - A
A>b--a for all B children (excluding grandchildren)
Next Brother of a+b--a (Big Brother)
All brothers of a~b--a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02-Hierarchical selector.html</title>
<!-- Introduce jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
//When the page loads successfully, we need to send events to each button
$(function(){
//<input type="button" value="Select all div elements within the body." id="btn1"/>
$("#btn1").click(function(){
//All B descendants of a b:a
$("body div").css("background-color","red");
})
//<input type="button" value="Within a body, the selection child element is div."Id=" btn2 "/>
//A>b:a for all B children (excluding grandchildren)
$("#btn2").click(function(){
$("body>div").css("background-color","red");
})
//<input type="button" value="Select the next div element with ID one." id="btn3"/>
//Next Brother of a+b:a (Big Brother)
$("#btn3").click(function(){
$("#one+div").css("background-color","red");
})
//<input type="button" value="Select all div sibling elements after the element with ID two." id="btn4"/>
//All brothers of a~b:a
$("#btn4").click(function(){
$("#two~div").css("background-color","red");
})
})
</script>
</head>
<body>
<h3>Hierarchical selector.</h3>
<button id="reset">Manually reset page elements</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">Automatically reset the page when clicking the following button</label><br /><br />
<input type="button" value="Choice body All within div element." id="btn1"/>
<input type="button" value="stay body within,Selection child element is div Of." id="btn2"/>
<input type="button" value="Choice id by one Next div element." id="btn3"/>
<input type="button" value="Choice id by two All after element of div Brotherhood Element." id="btn4"/>
<br />
<br />
<!-- Elements of the test -->
<div class="one" id="one" >
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test" >
id by two,class by one,title by test Of div.
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by"none"Of div</div>
<div class="hide">class by"hide"Of div</div>
<div>
Contain input Of type by"hidden"Of div<input type="hidden" size="8"/>
</div>
<span id="mover">Executing animation span element.</span>
</body>
</html>
5.3 Basic filter selector:
: frist first
last Last last
Odd index odd number
Even index even
eq(index) Specifies the index
Which value is the gt(index) index greater than
: lt(index) index is less than which value
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03-Basic filter selector.html</title>
<!-- Introduce jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
//<input type="button" value="Select the first div element." id="btn1"/>
$("#btn1").click(function(){
$("div:first").css("background-color","red");
})
//<input type="button" value="Select the last div element." id="btn2"/>
$("#btn2").click(function(){
$("div:last").css("background-color","red");
})
//<input type="button" value="select div element with even index value." id="btn3"/>
$("#btn3").click(function(){
$("div:even").css("background-color","red");
})
//<input type="button" value="Select div element with odd index value." id="btn4"/>
$("#btn4").click(function(){
$("div:odd").css("background-color","red");
})
//<input type="button" value="Select div element with index value equal to 3." id="btn5"/>
$("#btn5").click(function(){
$("div:eq(3)").css("background-color","red");
})
//<input type="button" value="Select div element with index value greater than 3." id="btn6"/>
$("#btn6").click(function(){
$("div:gt(3)").css("background-color","red");
})
});
</script>
</head>
<body>
<h3>Basic filter selector.</h3>
<button id="reset">Manually reset page elements</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">Automatically reset the page when clicking the following button</label><br /><br />
<input type="button" value="Choose the first div element." id="btn1"/>
<input type="button" value="Select Last div element." id="btn2"/>
<input type="button" value="Select an even index value div element." id="btn3"/>
<input type="button" value="Choose an odd index value div element." id="btn4"/>
<input type="button" value="Select an index value equal to 3 div element." id="btn5"/>
<input type="button" value="Select an index value greater than 3 div element." id="btn6"/>
<br /><br />
<!-- Elements of the test -->
<div class="one" id="one" >
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test" >
id by two,class by one,title by test Of div.
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by"none"Of div</div>
<div class="hide">class by"hide"Of div</div>
<div>
Contain input Of type by"hidden"Of div<input type="hidden" size="8"/>
</div>
<span id="mover">Executing animation span element.</span>
</body>
</html>
5.4 Content filtering:
has("selector") - contains the element specifying the selector
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>04-Content Filter Selector.html</title>
<!-- Introduce jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
//<input type="button" value="Select div element with class as mini element." id="btn1"/>
$("#btn1").click(function(){
//: has("selector"): contains the element specifying the selector
$("div:has('.mini')").css("background-color","red");
})
});
</script>
</head>
<body>
<h3>Content Filter Selector.</h3>
<button id="reset">Manually reset page elements</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">Automatically reset the page when clicking the following button</label><br /><br />
<input type="button" value="Select Contains class by mini Elemental div element." id="btn1"/>
<br /><br />
<!-- Elements of the test -->
<div class="one" id="one" >
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test" >
id by two,class by one,title by test Of div.
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by"none"Of div</div>
<div class="hide">class by"hide"Of div</div>
<div>
Contain input Of type by"hidden"Of div<input type="hidden" size="8"/>
</div>
<span id="mover">Executing animation span element.</span>
</body>
</html>
5.5 Visible filter:
Hidden - Elements not shown on a page typically refer to input type="hidden" and display:none in styles
visible - Show Elements on Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>05-Visibility filter selector.html</title>
<!-- Introduce jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
//<input type="button" value="Select all visible div elements" id="b1"/>
$("#b1").click(function(){
//:visible
$("div:visible").css("background-color","red");
})
//<input type="button" value="Select all invisible div elements and display them using the show() method in jQuery" id="b2"/>
$("#b2").click(function(){
//: Hidden does not display elements on pages typically refer to input type="hidden" and display:none in styles
$("div:hidden").css("background-color","red").show(1000);
})
});
</script>
</head>
<body>
<h3>Visibility filter selector.</h3>
<button id="reset">Manually reset page elements</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">Automatically reset the page when clicking the following button</label>
<br/><br/>
<input type="button" value=" Select all visible div element" id="b1"/>
<input type="button" value=" Select all invisible div element, utilize jQuery In show() Method shows them" id="b2"/>
<br /><br />
<div class="one" id="one" >
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test" >
id by two,class by one,title by test Of div.
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by"none"Of div</div>
<div class="hide">class by"hide"Of div</div>
</body>
</html>
5.6 Attribute filter:
[Property Name]
[Property name="value"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>06-attribute selectors.html</title>
<!-- Introduce jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
//<input type="button" value="Select div element with attribute title." id="btn1"/>
$("#btn1").click(function(){
$("[title]").css("background-color","red");
})
//<input type="button" value="select a div element whose attribute title Value is equal to"test"." id="btn2"/>
$("#btn2").click(function(){
$("[title='test']").css("background-color","red");
})
});
</script>
<body>
<button id="reset">Manually reset page elements</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">Automatically reset the page when clicking the following button</label>
<h3> attribute selectors.</h3>
<input type="button" value="Select Containing Attributes title Of div element." id="btn1"/>
<input type="button" value="Select Properties title Value equals " test"Of div element." id="btn2"/>
<br /><br />
<div class="one" id="one" >
id by one,class by one Of div
<div class="mini">class by mini</div>
</div>
<div class="one" id="two" title="test" >
id by two,class by one,title by test Of div.
<div class="mini" title="other">class by mini,title by other</div>
<div class="mini" title="test">class by mini,title by test</div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini">class by mini</div>
<div class="mini" title="tesst">class by mini,title by tesst</div>
</div>
<div style="display:none;" class="none">style Of display by"none"Of div</div>
<div class="hide">class by"hide"Of div</div>
<div>
Contain input Of type by"hidden"Of div<input type="hidden" size="8"/>
</div>
</body>
</html>
5.7 Form filtering:
Input All Form Subtags input, select, textarea, button
Input just gets the input tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>09-Form Selector.html</title>
<!-- Introduce jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
//1. Get all the subtags in the form tag
alert($("#form1 :input").size());
//This way, you can get not only the input tag in the form tag, but also the button,textarea in it
//2. Just get the input tag
//alert($("#form1 input").size());
});
</script>
</head>
<body>
<input type="button" value="Select all form child elements" id="btn1"/><br />
<form id="form1" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" src="1.jpg"/><br/>
<input type="password" /><br/>
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
<input type="reset" /><br/>
<input type="submit" value="Submit"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea rows="5" cols="20"></textarea><br/>
<button>Button</button><br/>
</form>
<div></div>
</body>
</html>