jQuery学习2

2018-12-28 本文已影响0人我不信这样也重名

一、jQuery事件

.on( events [,selector ] [,data ], handler(eventObject) )

events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click"， "keydown.myPlugin"，或者 ".myPlugin"；
selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件；
data：当一个事件被触发时，要传递给事件处理函数的event.data；
handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>

<script>
$('.box li').on('click', function(){
    console.log(1)
  var str = $(this).text()
  $('#wrap').text(str)
})

//等同于
$('.box>ul>li').click(function(){
    console.log(2)
  var str = $(this).text()
  $('#wrap').text(str)
})

//也可以这样写
$('.box li').on('click.hello', function(){
    console.log(3)
  var str = $(this).text()
  $('#wrap').text(str)
})
//命名空间没什么特别的作用，只不过在解绑事件时便于区分绑定的事件
$('.box li').off('click.hello')

//可是用如下方法新增的元素是没绑定事件的
$('#btn').on('click', function(){
  var value = $('#ipt').val()
  $('.box>ul').append('<li>'+value+'</li>')
})

//我们可以用事件代理
$('.box ul').on('click', 'li', function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

//上面代码相当于原生 js 的
document.querySelector('.box ul').addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
        //do something
    }
})

//绑定事件的时候我们也可以给事件附带些数据，只不过这种用法很少见
$('.box').on('click', {name: 'hunger'}, function(e){
    console.log(e.data)
})

.one( events [, selector ] [, data ], handler(eventObject) )

同 on，绑定事件，但只执行一次

.off( events,[selector ], [handler ] )

移除一个事件处理函数

$('.box li').off('click')

.trigger( eventType [, extraParameters ] )

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

$('#foo').on('click', function() {
  console.log($(this).text())
});
$('#foo').trigger('click')

二、jQuery动画

基础

.hide([duration ] [,easing ] [,complete ])

用于隐藏元素，没有参数的时候等同于直接设置display属性

$('.target').hide();
//等同于 $('.target').css('display', 'none')

.show( [duration ] [, easing ] [, complete ] )

用于显示元素，用法和hide类似

.toggle( [duration ] [, easing ] [, complete ] )

用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

渐变

.fadeIn( [duration ] [, easing ] [, complete ] )

通过淡入的方式显示匹配元素，参数含义和上面相同

$('#book').fadeIn('slow', function() {
// Animation complete
});

.fadeOut( [duration ] [, easing ] [, complete ] )

通过淡出的方式隐藏匹配元素

$('#book').fadeOut('slow', function() {
// Animation complete.
});

.fadeTo( duration, opacity [, easing ] [, complete ] )

调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果

$('#book').fadeTo('slow', 0.5, function() {
  // Animation complete.
});

.fadeToggle( [duration ] [, easing ] [, complete ] )

通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。

$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear");
});

滑动

.slideDown( [duration ] [, easing ] [, complete ] )

用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

$('#book').slideDown('slow', function() {
    // Animation complete.
});

.slideUp( [duration ] [, easing ] [, complete ] )

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。

$('#book').slideUp('slow', function() {
    // Animation complete.
});

.slideToggle( [duration ] [, easing ] [, complete ] )

用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。

如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

$('#clickme').click(function() {
 $('#book').slideToggle('slow', function() {
 // Animation complete.
 });
});

效果链接

动画队列

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})

//等价于
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完毕了')
    })

自定义动画

.animate( properties [, duration ] [, easing ] [, complete ] )

官方文档
properties是一个CSS属性和值的对象,动画将根据这组对象移动。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

.clearQueue

清除动画队列中未执行的动画

.finish

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列完成后的最后一帧的最终状态

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画

.stop(false, false)：默认值，动画从当前时刻执行接下来的动画队列
.stop(true, false)：清除未执行的动画队列，动画停止在当前时刻
.stop(false, true)：动画跳转至当前动作的最终状态，并从此刻执行接下来的动画队列
.stop(true, true)：清除未执行的动画队列，动画跳转并停止在当前动作的最终状态
演示链接

三、Ajax

jQuery.ajax( [settings ] )

$.ajax({
    url: 'xxx.php',
    method: 'GET',
    data: {
        name: 'Byron',
        age: 24,
        sex: 'Male'
    }
}).done(function(result){

    console.log(result);

}).fail(function(jqXHR, textStatus){

    consloe.log(textStatus);

});

方法提供了几个常用的setting：

async：默认设置下，所有请求均为异步请求（默认设置为 true ）。如果需要发送同步请求，请将此选项设置为 false
beforeSend：请求发送前的回调函数，用来修改请求发送前jqXHR对象，此功能用来设置自定义 HTTP 头信息，等等。该jqXHR和设置对象作为参数传递
cache：如果设置为 false ，浏览器将不缓存此页面。注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"
context：这个对象用于设置Ajax相关回调函数的上下文。默认情况下，这个上下文是一个ajax请求使用的参数设置对象
data：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面，POST请求作为表单数据
headers：一个额外的{键:值}对映射到请求一起发送。此设置会在beforeSend 函数调用之前被设置；因此，请求头中的设置值，会被beforeSend 函数内的设置覆盖
method：HTTP 请求方法 (比如："POST", "GET ", "PUT"，1.9之前使用“type”)

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

jQuery.get( [settings] ) / jQuery.post( [settings ] )

这两个方法专门用来处理get和post请求，相当于：

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

使用一个HTTP GET请求从服务器加载JSON编码的数据，这是一个Ajax函数的缩写，这相当于：

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

从服务器载入数据并且将返回的 HTML 代码并插入至匹配的元素中

$('#result').load('ajax/test.html')

.serialize() / serializeArray()

将用作提交的表单元素的值编译成字符串，方法没有参数，使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作，比如<input>，<textarea> 和 <select>：

<form id="holder">
  <input type="text" name="a" value="1"/>
  <div>
    <input type="text" name="b" value="2" id="b" />
  </div>
  <input type="hidden" name="c" value="3" id="c" />
  <div>
    <input type="checkbox" name="f" value="8" checked="true"/>
    <input type="checkbox" name="f" value="9" checked="true"/>
  </div>
</form>

$("#holder").serialize(); //a=1&b=2&c=3&f=8&f=9

$("#holder").serializeArray();
/*
    [
      {name: 'a', value: '1'},
      {name: 'b', value: '2'},
      {name: 'c', value: '3'},
      {name: 'f', value: '8'},
      {name: 'f', value: '9'}
    ]
*/

serialize和serializeArray都是针对JQuery对象(选中的FORM元素)进行操作，只是返回值格式不同而已。这里特别要注意：这2个API只能操作form，如果将holder改成div，会发现不起作用

四、事件实例

要求：

点击创建时会创建3个产品
点击编辑时，所有产品会展示遮罩，再次点击编辑遮罩会隐藏
点击遮罩按钮时，会删除当前产品

注意的问题：

https://picsum.photos/200/200/?image=1 可以生成一个200x200的图片，如果想更改图片，设置参数 image 的值即可(<100)
如果出现点击按钮页面刷新，需要对a 链接做绑定事件处理，比如< a href="javascript:void(0)"></a>或者使用阻止默认事件

实例代码