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

最新推荐文章于 2020-05-18 16:30:10 发布

原创最新推荐文章于 2020-05-18 16:30:10 发布 · 914 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文通过两个实际案例介绍了jQuery的基本用法，包括元素选择、事件处理、DOM操作等关键概念，并探讨了$()、.text()、.appendTo()等常用方法的应用。

开始之前：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/上得到验证。

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

<html>
  <head>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
    <link href='style.css' rel='stylesheet'>

    
  </head>
  <body>

    <div class="menu">
      
      <!-- Menu icon -->
      <div class="icon-close">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
      </div>

      <!-- Menu -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- Main body -->
    <div class="jumbotron">

      <div class="icon-menu">
        <i class="fa fa-bars"></i>
        Menu
      </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

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代码：

    <div class="articles container">
      
      <div class="article current">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 23</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
            <p>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...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW Commercial Aviation</p>
          </div>
          <div class="col-xs-6">
            <p class="title">CSeries Supplier Scramble</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>CSeries Supplier Scramble</h1>
            <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW business aviation</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Flying the Gulfstream G650</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>Flying the Gulfstream G650</h1>
            <p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">New retirements cut RAF VC10 fleet to four</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>New retirements cut RAF VC10 fleet to four</h1>
            <p>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...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </di

    </div>

点击.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
<span style="white-space:pre">			</span>$('.description').hide();/*Hide the descriptions of all articles*/
            $('.current').children('.description').toggle();//open the on we clicked.
<span style="white-space:pre">		</span>}
        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.

$('<h1>') 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() {
  $('<li>').text('New item').appendTo('.items');
});
/**************************************/
$('.btn').click(function() {
  $('<li>').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动作，生成一个<li> 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 $('<li>') to create a new li element;
        //2. use .text(post) to add text to the element
        //3. use .prependTo() to prepend it to the <ul class="posts">...</ul> element.
        $('<li>').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);