jQuery学习笔记2——温故+知新

开始之前：http://docs.jquery.com/ 是jQuery文档的网站， https://jsfiddle.net/是js的在线验证工具。

如果你没有html,CSS,js,jQuery基础，请学习它们先。

Introduction

Web pages made withHTML andCSS display static content. They don't respond to user actions like clicking a mouse or typing a key.

JavaScript andjQuery are used to make web pages interactive.

• JavaScript is a programming language used to create web pages that change in response to user actions.

• jQuery is a collection of prewritten JavaScript code that lets us easily create interactive effects on our site.

1. 介绍一个实际的例子，可以在https://jsfiddle.net/上得到验证。

这个例子是侧面菜单的点击滑入效果：

  
    
    
    

    
  
  

    

      
      
      

        
      

      
      

        
About
        
Blog
        
Help
        
Contact
      
    

    
    


      

        
        Menu
      
    
    
    
  

CSS:

/* Initial body */
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Initial menu */
.menu {
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
}

/* Basic styling */

.jumbotron {
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png'); 
  height: 100%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;
}

js:

var main = function(){
    $('.icon-menu').click(function(){
        $('.menu').animate({left: '0px'},200);
        $('body').animate({left: '285px'},200);
    });
    $('.icon-close').click(function(){
        $('.menu').animate({left: '-285px'},200);
        $('body').animate({left: '0px'},200);
    });
};

$(document).ready(main);

2. 一个点击显示隐藏的下拉菜单的实例，用到.children().show();

本例中有纵向排列的4个顶级菜单，每个顶级菜单在单击时可以显示它对应的下拉详情。

html总体结构：

html代码：

    

      
      

        

          

            
FLIGHT
          
          

            
Embraer adds third Legacy 500 prototype to flight test campaign
          
          

            
Mar 23
          
        
        

          
 
          

            
Embraer adds third Legacy 500 prototype to flight test campaign
            
The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...
          
          
 
        
      

      

        

          

            
AW Commercial Aviation
          
          

            
CSeries Supplier Scramble
          
          

            
Mar 22
          
        
        

          
 
          

            
CSeries Supplier Scramble
            
Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...
          
          
 
        
      

      

        

          

            
AW business aviation
          
          

            
Flying the Gulfstream G650
          
          

            
Mar 22
          
        
        

          
 
          

            
Flying the Gulfstream G650
            
Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...
          
          
 
        
      
        

          

            
FLIGHT
          
          

            
New retirements cut RAF VC10 fleet to four
          
          

            
Mar 22
          
        
        

          
 
          

            
New retirements cut RAF VC10 fleet to four
            
The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...
          
          
 
        
      

点击.article可以显示它下面的第一个 .description 的内容，使用了.children(). js code:

var main = function(){
    $('.article').click(function(){
         $(this).children('.description').show();
         //children() : nested directly under the current element.
    });
};    
$(document).ready(main);

后面再升级的js: 

var main = function(){
    $('.article').click(function(){
            $('.article').removeClass('current');//remove the current from all
            $('.description').hide();//Hide the descriptions of all
            $(this).addClass('current');//hilight the current article
            $(this).children('.description').show();//show the description of the clicked one
            //children() : nested directly under the current element.
    });
    /*Nice! Now when you click an article, it's shaded gray and its description opens up.*/
    /*Next let's see how to add two keyboard shortcuts. Here's what we want:press o, open the article; press n, open the next article*/
    //create a keypress event handler
    //The event handler should take event as a parameter.
    $(document).keypress(function(event){ 
        if (event.which === 111){//pressed 'o' key
			$('.description').hide();/*Hide the descriptions of all articles*/
            $('.current').children('.description').toggle();//open the on we clicked.
		}
        else if (event.which === 110){
            /*1.Select the current article using the '.current' selector. Save this in a new variable named currentArticle*/
            var currentArticle = $('.current');
            /*2.Select the next article using currentArticle.next(). Save this in a new variable named nextArticle*/
            var nextArticle = currentArticle.next();
            /*3.Remove the 'current' class from currentArticle using .removeClass()*/
            currentArticle.removeClass('current');
            /*4.Add the 'current' class to nextArticle using .addClass()*/
            nextArticle.addClass('current');
        }
    });
};    
$(document).ready(main);

上面这个代码作几点总结：

• 要搞你selected的title, 先close all，再show你的那个current
• 对current的使用，相当于一个标签，非常重要！
• .next() 的使用方法，可参考：https://api.jquery.com/next/
• .children() 的使用方法，非常重要
• 最后使用了两个变量 currentArticle & nextArticle来装Object, 同时用到.next()来平移，后面的操作都是针对这两个容器来进行。
• removeClass('active-slide');  //注意这里没有"."
  

最后贴出CSS代码：

body {
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/reader/bg.png');
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

p {
  margin: 0;
}

.row {
  margin: 0;
}

.articles {
  margin-top: 30px;
  margin-bottom: 30px;
}

.article {
  color: #222;
  background: rgba(255,255,255,.9);
  border-spacing: 2px;
  border-color: gray;
  font-family: arial,sans-serif;
  border-bottom: 1px #e5e5e5 solid;
}

.current .item {
  background: rgba(206,220,206,.9);
}

.item {
  cursor: pointer;
  padding-top: 7px;
  padding-bottom: 7px;
  
}

.item .source {
  margin-left: 20px;
}

.item .title {
  font-weight: bold;
}

.item .pubdate {
  margin-right: 20px;
}

.item .pubdate {
  text-align: right;  
}

.description {
  display: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.description h1 {
  margin-top: 0px;
  font-size: 23px;
}

3. 关于$( )

$( )

In jQuery, we often see $( ). It has two main uses:

• To select existing HTML elements on the page.

  $('p') selects all p elements on the page.

• To create new HTML elements to add to the page.

  $('

  ') creates a new h1 element. The < > indicates that we want to create a new HTML element.

.text()

The .text() method adds text to an HTML element.

.appendTo( )  vs .prependTo( )

The .appendTo() method adds HTML elements to the end of the selected element.

$('.btn').click(function() {
  $('
').text('New item').appendTo('.items');
});
/**************************************/
$('.btn').click(function() {
  $('
').text('New item').prependTo('.items');
});

Click the New button in the web page to the right.
The .prependTo() method adds HTML elements to the beginning of the selected element.

.remove( )

Click the Delete button in the web page to the right.
The .remove() method removes the selected HTML element from the web page.

$('.btn').click(function() {
  $('.selected').remove();
});

.text( )

These six jQuery methods let you control more aspects of HTML elements:

• .hide() hides the selected HTML element

• .show() displays an element

• .toggle() alternates hiding and showing an element

• .addClass() adds a CSS class to an element

• .removeClass() removes a class from an element

• .toggleClass() alternates adding and removing a class from an element

4. -理解DOM Document Object Model

• .next( )
• .prev( )
• .children( )

5. 操作elements in html

有很多操作html中elements的方法，详见：http://learn.jquery.com/using-jquery-core/manipulating-elements/
这里我们要说的是.appendTo(), 和 .prependTo()
以下代码实现的是响应 class= "btn" 的按钮的click动作，生成一个

element，然后用prependTo()操纵它放在 ul class = "posts"的列表里。

var main = function(){
    $('.btn').click(function(){   //a click event handler
        var post;
        post = $('.status-box').val();//.val() is like .text() but to Get or set the value of form elements.
        //1. use $('
') to create a new li element;
        //2. use .text(post) to add text to the element
        //3. use .prependTo() to prepend it to the 
...
 element.
        $('
').text(post).prependTo('.posts');
        //create element -> inject text -> manipulate element
    });

    //这里要更新剩余字数Count characters left
    $('.status-box').keyup(function(){ //a keyup event handler
        var postLength = $(this).val().length; //store the length of the massage typed in the status box.
        var charactersLeft = 140 - postLength;
        //update the '.counter' to show the left value
        $('.counter').text(charactersLeft);
    });
}
$(document).ready(main);