Home > Developer > Web Develop
today is the last day to learn jquery, last week we were learning JavaScript hard, and then this week we put jquery in the cradle, even though learning too fast we lead to our knowledge is not strong, but we do not have so much time to study so detailed, But there is a lot of knowledge we have to learn, in fact, this said I feel the most correct is: the knowledge of learning often use we need to pay attention to the teaching to us, how to learn how really can only rely on their own. So whether to be able to master these very well only oneself diligently to practice conscientiously. It sounds ridiculous to learn JavaScript in a week's time, but it's not realistic to learn jquery in three days, but first we get to know JavaScript and jquery, so we get started, and then it's a lot easier to learn, okay, To summarize the knowledge of today's study.
I. jquery-linked operations
<script src="Jquery-1.7.1.min.js"></script> <style>. Current {background-Color:pink; } </style> <script>$ (function () {$ (". Level1>a"). Click (function () {$ ( This). AddClass (" Current"). Next (). Show (). Parent (). siblings (). Children ("a"). Removeclass (" Current"). Next (). Hide (); //addclass (): Add a current style, where you use jquery's linked operations. }); }); </script><body> <divclass="Box"> <ulclass="Menu"> <liclass="Level1"> <a href="#none"> Shirts </a> <ulclass="Level2"style="Display:none"> <li><a href="#"> Short Sleeve Shirt </a></li><li><a href="#"> Short Sleeve Shirt </a></li><li><a href="#"> Short Sleeve Shirts </a></li> </ul> </li> <liclass="Level1"> <a href="#none"> Shirts </a> <ulclass="Level2"style="Display:none"> <li><a href="#"> Short Sleeve Shirt </a></li><li><a href="#"> Short Sleeve Shirt </a></li><li><a href="#"> Short Sleeve Shirts </a></li> </ul> </li> <liclass="Level1"> <a href="#none"> Shirts </a> <ulclass="Level2"style="Display:none"> <li><a href="#"> Short Sleeve Shirt </a></li><li><a href="#"> Short Sleeve Shirt </a></li><li><a href="#"> Short Sleeve Shirts </a></li> </ul> </li> </ul> </div></bod Y>
multiple events like the above can be linked together to implement its function, that is, chained operation.
Two. Options and hints for the option box
<script src="Jquery-1.7.1.min.js"></script> <script>$ (function () {$ ("#chk"). Click (function () {if($( This). is(": Checked")) {//use the checked attribute in the input tag to determineAlert"Thank you for your support."); } }); }); </script><body> <form> <input type="checkbox"Id="chk"Name="name"/><label> I have read the above terms </label> </form></body>
three. Show Details
<script src="Jquery-1.7.1.min.js"></script> <style>. Pro {background-color:red; } </style> <script>$ (function () {varLinodes = $ ("ul li:gt (4): Not (: last)"); Linodes.hide (); $("Div. showmore>a"). Click (function (e) {if(!linodes. is(": Visible") ) {linodes.show (); $( This). Find ("span"). Text ("Streamline Display Branding");//Find directly looking for sub tags$("ul Li"). Filter (": Contains (' Fuji '),: Contains (' Sony ')"). AddClass ("Pro"); return false;//Block Bubbling Events } Else{linodes.hide (); $( This). Find ("span"). Text ("Show All Brands"); return false; } }); }); </script><body> <divclass="Subcategorybox"> <ul> <li><a href="#"> Canon </a><i> (30440) </i></li> <li><a href="#"> Sony </a><i> (30440) </i></li> <li><a href="#"> Fuji </a><i> (30440) </i></li> <li><a href="#"> Polaroid </a><i> (30440) </i></li> <li><a href="#"> Canon </a><i> (30440) </i></li> <li><a href="#"> Sony </a><i> (30440) </i></li> <li><a href="#"> Polaroid </a><i> (30440) </i></li> <li><a href="#"> Canon </a><i> (30440) </i></li> <li><a href="#"> Polaroid </a><i> (30440) </i></li> <li><a href="#"> Sony </a><i> (30440) </i></li> <li><a href="#"> Canon </a><i> (30440) </i></li> <li><a href="#"> Sony </a><i> (30440) </i></li> <li><a href="#"> Polaroid </a><i> (30440) </i></li> <li><a href="#"> Sony </a><i> (30440) </i></li> <li><a href="#"> Other brand cameras </a></li> </ul> <divclass="ShowMore"> <a href="more.html"><span> Show All brands </span></a> </div> </div></body>
four. style settings for text boxes
<script src="Jquery-1.7.1.min.js"></script> <script>$ (function () {$ ("#email"). focus (function () {if($( This). Val ('Please enter your email address')) { $( This). Val ("'); }}). blur (function () {$ ("#email"). Val ('Please enter your email address'); }); $("#password"). focus (function () {if($( This). Val ('Please enter your email password')) { $( This). Val ("'); }}). blur (function () {$ ("#password"). Val ('Please enter your email password'); }); }) </script><body> <form> <input type="text"Name="name"Id="Email"Value="Please enter your email address"/><br/><br/> <input type="text"Name="name"Id="Password"Value="Please enter your email password"/><br/><br/> <input type="Button"Name="name"Value="Login"/> </form></body>
today wrote here, hey, will be into the web of learning, is excited, or excited that, hey
The end of jquery learning
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
