jQuery (3)补充

1、jquery的入口函数

1.1、什么是入口函数

为了防止文档在完全加载之前运行jQuery代码，将jQuery放在入口函数中，即在DOM加载完成之后，才可以对DOM进行操作。

1.2、入口函数的使用

• 方法一

// 第一种: 较简易，使用较多
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

• 方法二

// 第二种: 较麻烦，不推荐
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

1.3、onload和入口函数的区别

//onload事件函数
 window.onload = function(){
	...
}
// 1,等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
// 2,在同一个页面中只能出现一次，

//jquery入口函数
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ;
//1,等DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成
//2,同一个页面中可以出现多次

2、jquery事件处理

• on(): 用于事件绑定，用的最多
• off(): 事件解绑
• trigger() / triggerHandler(): 自动触发事件
• one() 事件只触发一次

• off()

// 先给元素绑定多个事件
$('div').on('click',function(){
    console.log(1);
})
$('div').on('mouseover',function(){
    $(this).css({'background':'yellow'})
})

// off()不同情况下
$('button').on('click',function(){
   $('div').off();  //移除div身上所有事件
   $('div').off('click'); //移除div上的点击事件
})

• trigger() / triggerHandler():

$('div').click(); //普通方式
$('div').trigger('click'); //自动触发click事件
$('div').triggerHandler('click'); //自动触发click事件

区别：
triggerHandler()不会触发事件的默认行为。

3、jquery动画

我们之前讲到过以下方法！

• show() 显示
• hide() 隐藏
• toggle() 显示与隐藏

• fadeIn() 淡入
• fadeOut() 淡出
• fadeToggle() 淡入与淡出

今天我们再讲讲其他的动画方法。

• slideDown() 下滑
• slideUp() 上滑
• slideToggle() 上滑与下滑

// 下滑上滑
$(function(){
    $('button').eq(0).on('click',function(){
       $('div').slideDown();
     })
     $('button').eq(1).on('click',function(){
         $('div').slideUp();
     })
     $('button').eq(2).on('click',function(){
         $('div').slideToggle();
     })
 })

• 自定义动画

// 只针对值为数字的属性
$(function () {
    $('button').on('click', function () {
        $('div').animate({
            width: '200px',
            left: '300'
        }, 1000, function () {
            alert('执行完毕')
        })
    })
})

4、jquery动画队列

jQuery stop()  //方法用于停止动画或效果，在它们完成之前。
stop()  //方法适用于所有 jQuery 效果函数

stop();      // 停止当前动画，不清空队列
stop(true);   // 停止当前动画，清空队列(停止全部)
stop(false,true)    // 让当前动画直接到达末状态,不清空队列
stop(true,true); //，直接完成当前动画, 清空队列
finish() // 停止在动画到达结束的状态

$(function () {
   $('button').eq(5).on('click', function () {
        $('div')
        .animate({left:'800px'},3000)
        .animate({top:"300px"},1000)
        .animate({height:"300px"},1000)
    })
    
    $('button').eq(0).on('click',function(){
        $('div').stop(); 
    })
    $('button').eq(1).on('click',function(){
        $('div').stop(true);
    })
    $('button').eq(2).on('click',function(){
        $('div').stop(false,true);
    })
    $('button').eq(3).on('click',function(){
        $('div').stop(true,true);
    })
    $('button').eq(4).on('click',function(){
        $('div').finish();
    })
})

5、jquery发送 ajax 请求

$.ajax({
        url:'01.php',
        type:'GET',
        data:{},
        async:true,
        success(res){
            console.log(JSON.parse(res)); //
        }
    })
   
	参数一： 请求地址
	参数二： 请求类型（POST/GET）
  	参数三： 请求时携带的参数
  	参数四： 是否异步
  	参数五： 请求成功的回调函数

// jquery发送ajax时其余参数(了解）
$.ajax({
    url: './ajax',   // 必填，请求的地址
    type: 'GET',   // 选填，请求方式，默认是 GET（忽略大小写）
    data: {},   // 选填，发送请求时携带的参数
    dataType: 'json',   // 选填，期望返回值的数据类型，默认是 string
    async: true,   // 选填，是否异步，默认是 true
    success () {},   // 选填，成功的回调函数
    error () {},   // 选填，失败的回调函数
    cache: true,   // 选填，是否缓存，默认是 true
    context: div,   // 选填，回调函数中的 this 指向，默认是 ajax 对象
    status: {},   // 选填，根据对应的状态码进行函数执行
    timeout: 1000,   // 选填，超时事件
  })

6、jquery实现jsonp跨域请求

 $.ajax({
	    url:'',
	    dataType:'jsonp',
	    data:{ },
	    success(res){
	        console.log(res);
	    },
	    jsonp: 'callback',//jsonp 请求时回调函数的 key
	    jsonpCallback: 'fn1', //jsonp请求时的回调函数名
})

7、jquery 的多库共存

当引入多个插件库时，可能’$'或’jquery’会发生冲突，这就会导致我们的jquery不能使用了。

• 解决一：更换方法

 var $ = 10;//定义了一个变量名为$
 let $Div = $('div')//注意：此时不能使用$()来获取元素了   

 let $Div = jQuery('div')//那么可以使用另外一种获取元素的方法

• 解决二：交出控制权并更换控制权

var $ = 10;//定义了一个变量名为$

// 加true后，完全交出控制权
var _ =  jQuery.noConflict(true)

// $ : 存在多个$
let $Div = _('div');//使用_来获取元素，相当于$()；

jquery的学习就到这儿了，吧！