JQuery Learning (3), jquery Learning

JQuery Learning (3), jquery Learning

Create wizard interface navigation:

The following figure shows a reasonable layout for the image to be correctly displayed:

First, write the html code of the navigation bar:

<div id="navMenu">            <ul id="spriteNav">                <li><a href="search.php" rel="searchWindow" class="modal" id="search"><span>Search</span></a></li>                <li><a href="register.php" rel="registerWindow" class="modal" id="register"><span>Register</span></a></li>                <li><a href="login.php" rel="loginWindow" class="modal" id="login"><span>Login</span></a></li>            </ul>           </div>

The most important thing is to understand the image size:

Meaning: from left to right, 100px, 110px. 90px; the upper and lower structures are 30px; reasonable layout makes the background appropriate:

Background-position: horizontal, vertical distance

 #spriteNav li a#search {      width: 100px;   }   #spriteNav li a#register {      width: 110px;      background-position: -100px 0px;   }   #spriteNav li a#login {      width: 90px;      background-position: -210px 0px;   }

Another point

 #spriteNav li a#search span {      background-position: 0px -30px;   }   #spriteNav li a#register span {      background-position: -100px -30px;   }   #spriteNav li a#login span {      background-position: -210px -30px;   }

Finally, let's try the JQuery function:

$(document).ready(function() { $(function() {/*  * set original values -  * the span is set to 0 opacity in anticipation of the hover event * the text is set to be empty that it doesn't show  */$("#spriteNav span").css("opacity", "0");$("#spriteNav span").text('');/* how do we hover? let me count the ways... */$("#spriteNav span").hover(function() {$(this).stop().animate({opacity: 1    }, 10); // end mousein}, function(){$(this).stop().animate({opacity: 0}, 20); // end mouseout}); // end hover function }); // end function}); // end document ready function

Auxiliary:

Remove ul list structure:

  #spriteNav {      height: 30px;      list-style: none;      margin: 0;      padding: 0;   }      #spriteNav li {      float: left;   }

Beginners can directly learn jQuery.

1 jQuery can achieve all the currently known js effects.
2. You can start with it directly, but it will become a bottleneck in the future if you are not familiar with the original code of javascipt. Because object-oriented, closures, and prototype are the same no matter what library you use. When writing jQuery plug-ins, you must go back and learn the basics of javascript.

JQuery is enough for simple js applications. I wish you an early master.

3. In fact, the main job of a web designer is to design a web page. You only need to design a Web page. Constructing a web page and adding JavaScript are the tasks of front-end development engineers. If you want to transform to this aspect, You need to first learn HTML and CSS, and then JavaScript and ajax.

I used to be a web designer and later transformed into a front-end development engineer. JQuery is indeed a shortcut to getting started with js, because it can immediately see the effect. In fact, General web designers do not need to master js. It is enough to master css at most. I hope my answer will help you.

Jquery Learning

1. Read a book first, read the basic knowledge again, learn and master it. These are useful tools for solving practical problems in the future :)
2. Practice more, solve problems in actual work, analyze and compare more.
3. I recommend you a book "sharp jQuery".
Describes jQuery's various functions and method calls in a step-by-step manner. Readers can systematically master jQuery's DOM operations, event listening and animation, form operations, AJAX, and plug-ins, the exercises are carried out in conjunction with the Case demonstration behind each chapter to achieve the goal of mastering core knowledge points. In order for readers to better develop and practice, the last chapter of "sharp jQuery" integrates the knowledge points and effects explained in the first seven chapters to create a website with a unique personality, in addition, it guides readers to participate in project construction from the aspects of case study, website materials, website structure, website style and website script.
This is my method for your reference!