jQuery

学习JQuery看的是try.jquery.com官网上的视频，链接https://blog.csdn.net/lvjin110/article/details/24272823，下面是我的笔记

一、What is jQuery?

1、为什么使用jQuery?每个了浏览器的DOM接口都不尽相同，只写一段代码，而在流行的浏览器上通用。

2、jQuery(“h1”)= $(“h1”)  可以把jQuery写成$

jQuery(“p”)=$(“p”)

3、$(“h1”)：找到h1,返回h1标签

$(“h1”).text();返回h1的text

$(“h1”).text(“where to?”);需要改变标签的内容，把字符串放到text()中即可。

4、确保DOM加载完成再和HTML互交：

jQuery(document).ready(function(){

       <code>

});

例如：jQuery(document).ready(function(){

       $(“h1”).text(“where to?”);

});

补充：$( function(){})是$(document).ready(function(){})的简写，与之对应的是原生js的window.onload事件，二者的区别：

1.执行时间不同

    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行；$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

     window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个；$(document).ready()可以同时编写多个，并且都可以得到执行

 

 

二、Using jQuery

1、1)download jQuery.

2)load it in your HTML document.

<script src=”jquery.min.js”></script>

3)start using it.

<script src=”application.js”></script>

2、DOM定位元素的几种方法

例如：<h1>Where do you want to go?</h1>

<h2>Travel Destinations</h2>

<p>Plan your next adventure.</p>

<ul id=”destinations”>

       <li>Rome</li>

      <li>Paris</li>

      <li class=”promo”>Rio</li>

</ul>

$(“li”)返回一个包含所有li的jQuery对象。

$(“#destinations”)选择是这个ID的所有元素。

$(“.promo”)选择类名为“promo”的所有列表元素

 

 

三、Searching the DOM

1、如何选择<ul>中的<li>,可以用子选择器。

$(“#destinations li”)选择元素ID为destinations下的所有子元素

例如：<h1>Where do you want to go?</h1>

<h2>Travel Destinations</h2>

<p>Plan your next adventure.</p>

<ul id=”destinations”>

       <li>Rome</li>

      <li>

             <ul id=”france”>

                     <li> Paris </li>

            </ul>

      </li>

      <li class=”promo”>Rio</li>

</ul>

只选择“destinations”这个<ul>下的子元素<li>,只是子元素，而不是子元素的子元素。

$(“#destinations > li”);

>告诉jQuery，要找的是直属元素。

2、选择多个元素

$(“.promo,#france”);

,可以选择多个元素

3、选择<ul>下的第一个元素，使用伪选择器

$(“#destinations li:first”);

$(“#destinations li:last”);

$(“#destinations li:odd”); 1,3,5…

$(“#destinations li:even”); 0,2,4…

The index starts at 0

 

 

四、Traversing the DOM

1、$(“#destinations li”);同$(“#destinations”).find(“li”);后者虽然写更多的代码，但速度更快。

$(“li:first”); -> $(“li”).first();

$(“li:last”); -> $(“li”).last();

2、$(“li”).first().parent（）；得到父元素

$(“#destinations”).children(“li”);

find方法选中的是所有的li，只想得到直系子元素li，用children方法。

 

 

五、Manipulating the DOM

1、例如：<li class=”vacation”>

       <h2>Hawaiian Vac…</h2>

       <button>Get Price</button>

       </li>

点击按钮，新添加一个p标签，把按钮删掉

$(document).ready(function(){

       var price=$(‘<p>From $399.99</p>’);

      $(‘.vacation’).append(price);

      $(‘button’).remove();

});（没有实现点击按钮时执行操作，下节完善）

2、before方法 例如：$(‘.vacation’).before(price);

after方法 例如：$(‘.vacation’).after(price);

prepend方法 例如：$(‘.vacation’).prepend(price);新节点变成li的第一个子节点

append方法 例如：$(‘.vacation’).append(price);append方法把price节点加到了<li>的尾端

另外四种写法，这些方法跟之前四个方法不同点在于其语法顺序。

appendTo方法 例如：price.appendTo($(‘.vacation’));参考点是放后面的

prependTo方法

insertAfter方法

insertBefore方法

 

 

六、Acting on Interaction

jQuery对象的on方法，它接收一个事件参数和一个事件处理参数。

$(document).ready(function(){

    $(‘button’).on(‘click’,function(){

        var price=$(‘<p>From $399.99</p>’);

        $(‘.vacation’).append(price);

        $(‘button’).remove();

    });

});

 

 

七、Refactor using Traversing

当有多种度假方案时，点击按钮，按钮全部消失，然后所有的价格都显示出来。

改进（this关键字）

$(document).ready(function(){

    $(‘button’).on(‘click’,function(){

         var price=$(‘<p>From $399.99</p>’);

        $(‘.vacation’).append(price);

        $(this).remove();

    });

});

这时每点击一次按钮价格被添加一次

再次改进

$(document).ready(function(){

    $(‘button’).on(‘click’,function(){

         var price=$(‘<p>From $399.99</p>’);

         //$（this）.after(price)；添加位置不对

        $(this).closest(‘.vacation’).append(price);//找到vacation的父节点，并添加price

        $(this).remove();

    });

});

closest()当它为某个类查找父节点时，它只会查找0或1

parents()会查找这个类的所有父节点

 

 

八、Traversing and Filtering

1、每个按钮点击后有不同的价格

<li class=”vacation onsale” data-price=’399.99’>

       <h2>Hawaiian Vacation</h2>

       <button>Get Price</button>

       <ul class=”comments”>

           <li>Amazing detail!</li>

           <li>Want to go!</li>

       </ul>

</li>

数据标签(data tag)是HTML5的特性，data-xxx属性可以添加到任何元素上，为元素提供额外的信息。js中可以使用data(<name>)来读取属性的值，使用data(<name>,<value>)来设置属性的值。

$(document).ready(function(){

   $(‘button’).on(‘click’,function(){

       var vacation=$(this).closest(‘.vacation’);

       var amount=vacation.data(‘price’);

       var price=$(“<p>Form $’+amount+’</p>”)

       vacation.append(price);

       $(this).remove();

  });

});

2、每次按钮点击时都被调用，不论什么按钮。

改进$(‘.vacation button’).on(‘click’,function(){});

更好的做法$(‘.vacation’).on(‘click’,’button’,function(){});

事件委托

3、HTML上有两个按钮，即将过期和正在热销，点击之后过滤到其他的产品。在js中实现如下：

第一步：选中

1)css选择器：$(‘.vacation.onsale’)；

2)遍历：$(‘.vacation’).filter(‘.onsale’)；先用’.vacation’选出所有的度假产品，然后用filter方法进一步筛选出只带有onsale类。

第二步：给选中的度假产品添加高亮类

可以用jQuery的addClass方法添加class属性，也可以用removeClass方法删除类。

$(‘.vacation’).filter(‘.onsale’).addClass(‘highlighted’);

正在热销：

$(‘#filterrs’).on(‘click’,’.onsale-filter’,function(){

$(‘.vacation’).filter(‘.onsale’).addClass(‘highlighted’);

});

即将过期：

$(‘#filterrs’).on(‘click’,’.expiring-filter’,function(){

$(‘.vacation’).filter(‘.expiring’).addClass(‘highlighted’);

});

但每次点击按钮后一直高亮，改进

$(‘#filterrs’).on(‘click’,’.onsale-filter’,function(){

       $(‘.highlighted’).removeClass(‘highlighted’);

       $(‘.vacation’).filter(‘.onsale’).addClass(‘highlighted’);

});

 

 

九、On DOM Load

1、点击显示更多信息的按钮，显示详细信息

HTML：

<li class=”confirmation”>

       …

       <button>flight details</button>

       <ul class=”ticket”>…</ul>

</li>

CSS:

.ticket{

       display:none;

}

jQuery:

$(document).ready(function(){

       $(‘.confirmation’).on(‘click’,’button’,function(){

      $(this).closest(‘.confirmation’).find(‘.ticket’).slideDown();

      });

});

slideDown()方法用来显示，slideUp()用来隐藏，slideToggle()用来在两种状态间轮流触发

 

 

十、Expanding on on

1、鼠标滑过标题显示详细信息

$(document).ready(function(){

       $(‘.confirmation’).on(‘click’,’button’,function(){

           $(this).closest(‘.confirmation’).find(‘.ticket’).slideDown();

       });

      $(‘.confirmation’).on(‘mouseenter’,’h3’,function(){

           $(this).closest(‘.confirmation’).find(‘.ticket’).slideDown();

     });

});

鼠标事件：

click       、focusin      、mousedown     、mousemove     、mouseover  、mouseenter

dbclick、focusout、 mouseup             、mouseout         、mouseleave

mouseenter当鼠标进入了元素区域时，它就能触发。

代码中有重复部分，改进：

function showTicket(){

  $(this).closest(‘.confirmation’).find(‘.ticket’).slideDown();

}

$(document).ready(function(){

       $(‘.confirmation’).on(‘click’,’button’,showTicket);

       $(‘.confirmation’).on(‘mouseenter’,’h3’,showTicket);

});

只是传入一个函数名，没有将()放在函数后面；如果放了的话，函数将马上被调用。我们只是希望事假触发时，函数才被调用。

 

 

十一、Keyboard Events

输入票数不同，票价也不同

HTML：

<div class=”vacation” data-price=’399.99’>

       <h3>Hawaiian Vacation</h3>

       <p>$399.99 per ticket</p>

       <p>

        Tickets:

       <input type=’number’ class=’quantity’value=’1’/>

       </p>

</div>

<p>Total Price:$<span id=’total’>399.99</span></p>

jQuery:

$document.ready(function(){

       $(‘.vacation’).on(‘keyup’,’.quantity’,function(){

              //得到单价

              var price=+$(this).closest(‘.vacation’).data(‘price’);//+把String转变为number

              //得到输入的数量

var quantity=+$(this).val();//val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。

              //计算单价*数量，设置为总价

              $(‘#total’).text(price*quantity);

      });

});

键盘事件：

keypress      keydown     keyup

Form Events:

blur       select    change focus      submit

 

 

十二、Link Layover

1、点击显示评论的超链接，显示评论，以淡入的效果显示。

HTML:

<ul>

       <li class=”vacation”>

            <a href=”#” class=”expend”>Show Comments</a>

           <ul class=”comments”>

                  <li></li>

                  <li></li>

           </ul>

       </li>

</ul>

CSS：

.comments{

       display:none;

}

jQuery:

$(document).ready(function(){

       $(‘.vacation’).on(‘click’,’.expend’,function(){

              $(this).closest(‘.vacation’).find(‘.comments’).fadeToggle();

       });

});

fadeIn()       fadeout()     fadeToggle()

2、点击页面底部的超链接时，跳转到页面顶部。需要一个方法阻止浏览器的默认行为。

$(document).ready(function(){

       $(‘.vacation’).on(‘click’,’.expend’,function(event){

              //event.stopPropagation();

              event.preventDefault();

              $(this).closest(‘.vacation’).find(‘.comments’).fadeToggle();

        });

});

stopPropagation：当事件发生并尝试冒泡时，stopPropagation可以阻止它冒泡。它将不会冒泡到其他祖先元素。然而，stopPropagation不能防止浏览器的默认行为，仍会被跳转到页面顶部。

 

 

十三、Taming CSS

1、点击li元素时，该元素样式会改变（background-color、border-color、显示价格）

HTML：

<div id=”vacation”>

       <ul>

           <li class=”vacation”>

           <p class=”price”></p>

           </li>

       </ul>

</div>

jQuery:

$(document).ready(function(){

       $(‘#vacation’).on(‘click’,’.vacation’,function(){

              /*$(this).css(‘background-color’,’#252b30’); $(this).css(‘border-color’,’1px solid #967’);*/

              /*$(this).css(‘background-color’,’#252b30’).css(‘border-color’,’1px solid #967’);*/

             $(this).css({‘background-color’:’#252b30’, ‘border-color’:’1px solid #967’});

             //$(this).find(‘.price’).css(‘display’,’block’);

             $(this).find(‘.price’).show();

     });

});

2、把所有的css代码放在css样式表中而不是混杂在JavaScript中。

CSS：

.highlighted{

       background-color:#563;

       border-color:1px solid #967;

}

.highlighted .price{

       display:block;

}

jQuery:

$(document).ready(function(){

       $(‘#vacation’).on(‘click’,’.vacation’,function(){

              $(this).addClass(‘highlighted’);

});

});

3、再次点击li元素时，价格会消失。

$(document).ready(function(){

       $(‘#vacation’).on(‘click’,’.vacation’,function(){

              $(this).toggleClass(‘highlighted’);

       });

});

 

 

十四、Animation

1、实现旅行行程选项在被选中时跳动一下

$(document).ready(function(){

       $(‘#vacation’).on(‘click’,’.vacation’,function(){

              $(this).toggleClass(‘highlighted’);

              if($(this).hasClass(‘highlighted’)){

                 $(this).animate({‘top’:’-10px’},400);

              }else{

                 $(this).animate({‘top’:’0px’},’fast’);

              }

       });

});

2、JavaScript脱离CSS

通过CSS的transition来实现这个动画效果

CSS:

.vacation{

       transition:top 0.2s;//当top元素被改变时，整个过程在0.2s内完成。

}

.highlighted{

       top:-10px;

}

jQuery:

$(document).ready(function(){

       $(‘#vacation’).on(‘click’,’.vacation’,function(){

              $(this).toggleClass(‘highlighted’);

       });

});