[JavaScript知识库]jQuery自学笔记

基本知识

• jQuery就是JavaScript的简单化，方便，快捷，一般开发项目使用未压缩版，方便操作，产品上线使用压缩版

使用jQuery步骤

1、引入jQuery文件
2、写一个入口函数
3、找到你要操作的一元素（jQuery选择器），去操作他（给他添加属性，样式，文本…）

特性

• 会产生隐式迭代
• 会返回自身对象，从而可以链式编程

入口函数

• jQuery的入口函数执行顺序优先于window.onload，并且window.onload只能存在一个，但是jq的函数入口可以存在多个。
• jQuery的基本结构：其实是一个自执行函数

(function(){
	window.jQuery = window.$ = jQuery;
}

这个自执行函数就是给window对象添加一个jQuery属性和$属性，$和jQuery其实是等价的

//引入jQuery后，jQuery和$是等价的
console.log(window.jQuery === window.$);//true

jQuery参数传递

$是一个函数，参数传递不同，效果也不一样：

1. 如果参数传递的是一个匿名函数，就是入口函数

$（function（）{
}）

2. 如果参数传递的是一个字符串，就是一个选择器/创建一个标签
   一般使用一个jQuery选择器，给选择器选中的元素命名前面都会加上$符以示区别

$(“#one”);			选择器；
$(“<div>abc<div>”);	创建一个标签

3. 如果参数是一个dom对象，那他就会把dom对象转换成jQuery对象
   原生JS选择器获取到的对象就是dom对象，只能调用dom方法或者属性，不能调用jQuery的属性或者方法；利用jQuery选择器获取到的对象就是jQuery对象，只能调用jQuery的方法或者属性，不能调用原生jsdom对象的属性或者方法（jQuery是一个伪数组，jQuery对象其实就是一个包装集）

dom对象和jQuery对象互相转换

• dom对象转换成jQuery对象

//使用原生方法来找到dom元素
var div1 = document.getElementById("one");
//使用jquery将dom对象转换成jQuery对象
var $div1 = $(div1);

• jQuery对象转换成dom对象

1. 使用jQuery的下标取出

//使用jQuery方法取出对象集
var $divs = $('div');
//因为jquery对象是一个对象集，我们便使用下标取出
//并转换成dom对象
var div2 = $divs[1];
console.log(div2);
console.log($divs);

2. 使用jQuery的get方法来取出

//使用jQuery的方法来转换
var div3 = $divs.get(1);//索引值
console.log(div3);

注意：

• jQuery的下标并不像原生js一样只用在后面使用[0]来取出下标，而是使用eq()，详情在筛选选择器和过滤选择器

jQuery选择器

jQuery基本选择器

• 和css选择器用法一样

jQuery层次选择器

jQuery过滤选择器

这类选择器都带冒号

…

• 选择器具体参考手册：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

jQuery事件（方法）

this

• 在这里面this代表的是触发事件的元素，但是还是要写成$(this)

text方法

• text（）；是用来获取和设置文本的
• 获取文本：text（）方法不给参数，会获取到这个标签中所有的文本，包括后代元素的文本

  $(function () {
        var wb;
        $("#anniu").click(function () {
            wb = $('.box').text();
            console.log(wb);
        })
    })

• 设置文本：text（）方法给参数，参数里面就是要设置的文本，包含了多个dom元素的jQuery对象，会将里面所有的dom元素都设置上（隐式迭代）

//设置文本
$('#anniu2').click(function () {
    $('.box').text("设置文本");
})

css方法

• 获取样式：在css（）里传入你想要获取的样式名称，但是在IE浏览器中一定要有一个准确的边框信息，比如说想获取边框的宽度就要说border-bottom-width；注意 ：如果获取的是标签名为div的dom元素，则只能获取第一个div的元素样式

  $("#box1").css('width');//获取宽度

• 设置样式：css（样式名，样式值）；要是给标签名为div的元素设置，那就是给所有都设置（隐式迭代）

  //1、设置单样式
        $('#box1').css('width','200px');
        $('#box1').css('height',200);//不带单位就不需要用引号包裹
        $('#box1').css('backgroundColor','red');
        $('#box1').css('border','2px solid blue');
        // 2、设置多样式
        $('#box1').css({
            width : 200,
            'height':'200px',
            backgroundColor:'red',
            border:'2px solid blue'
        })

• class类操作

	- 添加类：使用$(‘element’)addclass(‘添加的类名1 添加的类名2’)；给element添加N个类名，中间用空格隔开
	//添加单个类 
	$('.box').addClass('fsz30');
	// 添加多个类
	$('.box').addClass('w300 h300');
	- 移除类：使用$(‘element’)removeclass(‘添加的类名1 添加的类名2’)；给element添加N个类名，中间用空格隔开，要是不填写参数则代表移除所有
	// 移除单个类
    $('.box').removeClass('fsz30');
    // 移除多个类
    $('.box').removeClass('w300 h300');
    //移除所有
    $('.box').removeClass();
	- 判断类：判断元素是否有某个class，有就返回true，没有false
	//判断.box类是否有fsz30这个类
    $('.box').hasClass('fsz30');
	- 切换类：如果元素没有这个类，就添加这个类，如果有就移除这个类
    //如果元素没有这个类，就添加这个类，如果有就移除这个类
    $('.box').toggleClass('fsz30');

mouseEnter事件和mouseLeave

• 在正常的mouseOver事件，在鼠标移动到选取的元素及其子元素上时都会触发，对于计数来说并不方便，而mouseEnter事件只在鼠标移动到选取的元素上时触发。
• 而mouseLeave是鼠标离开事件

jQuery动画

• jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画功能。
  1. 显示（show）与隐藏（hide）是一组动画；
  2. 滑入（slideDowm）与滑出（slideUp）与切换（slideToggle），效果与卷帘门类似；
  3. 淡入（fadeln）与淡出（fadeOut）与切换（fadeToggle）

show和hide和切换

• show（）和hide（）都可以往里面传参
  • 参数1：代表执行动画的时长，毫秒数，也可以是代表时长的字符串（“fast”，“normal”，“slow”）
  • 参数2：代表动画执行完毕后的回调函数。

  $('#xs').click(function (e) { 
        e.preventDefault();
        //直接出现
        // $('#box').show();
        // $('#box').show('fast');//200毫秒
        // $('#box').show('normal');//400毫秒
        // $('#box').show('slow');//600毫秒
        // $('#box').show(2000);//自定义两千毫秒
        // $('#box').show("faks");//如果写错了，则自动默认认为是normal
        $('#box').show(2000,function () {
            alert('动画执行完了');
        });//自定义两千毫秒，执行完毕之后自动调用后面的匿名函数
    });
    $('#yc').click(function (e) { 
        e.preventDefault();
        $('#box').hide();//直接隐藏
        $('#box').hide('fast');//200毫秒
        $('#box').hide('normal');//400毫秒
        $('#box').hide('slow');//600毫秒
        $('#box').hide(2000);//自定义两千毫秒
        $('#box').hide('sfa');//如果写错了，则自动默认认为是normal
        $('#box').hide(2000,function () {
            alert('动画执行完了');
        });//自定义两千毫秒，执行完毕之后自动调用后面的匿名函数
    });
    $('#qh').click(function (e) { 
        e.preventDefault();
        //如果元素是隐藏的，便执行显示动画；
        //如果元素是显示的，便执行隐藏动画；
        $('#box').toggle();
    });

slideDowm和slideUp和slideToggle

具体操作和show和hide一样

$('#hr').click(function (e) { 
    e.preventDefault();
    //也可以传两个参（具体和show一样）
    //第一个参数是执行动画时长（毫秒）
    //第二个是回调函数
    $('#box').slideDown(2000,function () {
        console.log('滑入结束');
    });
});
$('#hc').click(function (e) { 
    e.preventDefault();
    //也可以传两个参（具体和show一样）
    //第一个参数是执行动画时长（毫秒）
    //第二个是回调函数
    $('#box').slideUp(2000,function () {
        console.log('滑出结束');
    });
});
$('#qh').click(function (e) { 
    e.preventDefault();
    //和show和hide一样，
    //要是滑出了就滑入
    //要是滑入了就滑出
    $('#box').slideToggle();
});

fadeIn和fadeOut和fadeToggle和fadeTo

除了fadeTo其他和show一样

  $('#dr').click(function (e) { 
        e.preventDefault();
        //也可以传两个参（具体和show一样）
        //第一个参数是执行动画时长（毫秒）
        //第二个是回调函数
        $('#box').fadeIn(2000,function () {
            console.log('淡入结束');
        });
    });
    $('#dc').click(function (e) { 
        e.preventDefault();
        //也可以传两个参（具体和show一样）
        //第一个参数是执行动画时长（毫秒）
        //第二个是回调函数
        $('#box').fadeOut(2000,function () {
            console.log('淡出结束');
        });
    });
    $('#qh').click(function (e) { 
        e.preventDefault();
        //和show和hide一样，
        //要是淡入了就淡出
        //要是淡出了就滑淡入
        $('#box').fadeToggle();
    });

fadeTo有两个参数，第一个是时间，第二个是淡入/出的透明度

  $('#drtz').click(function (e) { 
        e.preventDefault();
        //设定淡入/出
        //两个参数，第一个时间，第二个透明度
        $('#box').fadeTo(1000, 0.5);
    });

自定义动画

animate（{params}，[speed] , [easing] , [callback]）;

• {params}：要执行动画的css属性，带数字（必选）；
• speed：执行动画时长（可选）
• easing：执行效果，默认为swing(缓动)，可以是linear(匀速)
• callback：动画执行完后立即执行的回调函数（可选）

  $(function () {
        $('input').click(function (e) { 
            e.preventDefault();
            $('div').animate({
                left : 800,
                width : 200,
                height : 200,
                opacity : 0.5
            },2000,'linear',function () {
                //因为是回调函数，可以再次调用animate
                $('div').animate({
                    left : 400,
                    width : 300,
                    height : 300,
                    opacity : 0.5,
                    top : 150
                },2000)
            })
        });
    })

动画队列

• 要是在执行动画的时候，多次快速重复执行相同动画，但是在动画还没执行完时边再次执行下一个动画，会造成一种情况，动画在还没有执行完，鼠标移到其他地方去之后，动画仍要继续执行，这就是动画队列
• 通过stop（参数1，参数2）；
  • 参数1：是否清除队列
  • 参数2：是否跳转到最终结果
  • 参数1和参数2填写true和false，选择是否跳过动画，如果不写参数，默认就是两个false

 $('input').eq(0).click(function (e) { 
        e.preventDefault();
        $('div').slideDown(2000).slideUp(2000);
    });
    $('input').eq(1).click(function (e) { 
        e.preventDefault();
        $('div').stop(true,false);
    });

jQuery节点操作

创建节点：

	html();
	$(‘<span-这是个span元素</span-‘); 

// 原生js创建节点：document.write();  innerHTML();  document.createElement();
// jQuery创建节点：html();     $();
//1、html();   设置或者获取内容
$('input').eq(0).click(function (e) { 
    e.preventDefault();
    //不传参就是获取所有内容
    $('div').html();
    //传参就是设置内容，会把以前的内容覆盖掉
    //如果设置的内容中包含了标签，是会把标签解析出来
    $('div').html('我是设置的内容<a>百度一下</a>');
});
//2、$();      创建元素，但是需要通过追加才能放入页面中
$('input').eq(1).click(function (e) { 
    e.preventDefault();
    //创建
    var $elem = $('<a href="www.baidu.com">a标签</a>');
    //只存在内存中，需要追加
    $('div').append($elem);
});

追加（添加）节点：

元素.append（节点）			在被选元素的结尾插入内容
元素.perpend (节点)			在被选的元素开头插入内容

ppendTo（节点）/perpendTo(节点)，具体和append，perpend差不多，只是调用不一样：节点.appendTo(元素)
append和perpend（将已经存在的标签作为子元素插入则是作为剪切插入）

元素.before				在被选元素之后插入内容(作为兄弟元素)
元素.after				在被选元素之前插入内容(作为兄弟元素)

清空节点和删除节点：

元素.empty（）		清空指定节点的所有元素，自身保留（清理门户）
元素.remove（）		相比于empty，自身也删除(自杀)

克隆节点clone

元素 .clone(); 返回一个克隆后的元素，需要用一个变量接收

• clone后可以传参数（true，false），要是是true，则表示是把事件也一起克隆，false则是不克隆事件，不给参数则默认是false
• jQuery里面克隆节点 ，只存在内存中，要是想让存在在页面上，就需要再次追加到页面上。

jQuery操作属性

使用attr();设置属性，使用removeAttr()删除属性

• 1、获取属性
  元素 . attr(‘属性名’) 返回值便是属性名所对应的属性值

• 2、设置属性
  元素 . attr（‘属性名’ , ‘属性值’）；要是原来有属性则更改原来的，要是原来没有的属性则添加

// 设置单属性
$('a').attr('href', 'www.baidu.com');
//设置多属性
$('a').attr({
    'aaa' : 'AAA',
    'bbb' : 'BBB'
});

• 3、属性移除
  元素 . removeAttr（‘属性名’）;要是元素没有被移除的属性也不会报错

//移除单属性
$('a').removeAttr('aaa');
// 移除多属性
$('a').removeAttr('aaa bbb ccc');

事件机制

jQuery事件注册

on简单事件注册

$(selector).on(‘click’,function(){})

表示给$(selector)绑定事件，不支持动态绑定。

on注册事件委托

$(selector).on.(‘click’,’span’,function(){});

表示给$（selector）绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定。

事件解绑

// 解除所有事件
$(elem).off();
// 解除click事件
$(elem).off('click');

事件触发trigger（）；

• 一般使用if语句嵌套，当满足if语句的条件之后，触发另外一个事件
• 多用于自定义事件名称，当满足某个条件后，直接触发自定义事件

事件对象

• 注册一个事件，系统就会帮我们生成一个对象记录这个事件触发时候的一些信息（比如出发时间的时候有没有按住某个键；比如触发这个事件的时候的一些坐标信息）
• 在jQuery中用事件参数e来获取（jQuery事件对象是对原生js事件对象的一个封装，帮你处理好了兼容性）
• 在调用事件对象之前，要在事件的函数括号里放入一个形参e，只有这样才会形成事件对象

常用的事件对象：

使用e.XXX调用（都是触发事件的那一瞬间的值）
screenX和screenY 对应屏幕最左上角的值
clientX和clientY 距离页面左上角的位置（忽视滚动条）
pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）；

阻止事件冒泡/跳转

• 当有事件冒泡的时候，我们可以使用e.stopPropagation()来阻止事件冒泡
• 当点击一个链接的时候，要是不想让事件进行跳转，则可以使用e.preventDefault()；来阻止浏览器的默认行为

   $('div').click(function (e) { 
        e.preventDefault();
        alert('div弹窗');
    });
    $('input').click(function (e) { 
        e.preventDefault();//组织浏览器默认行为
        e.stopPropagation();//阻止事件冒泡
        alert('btn弹窗');
    });

使用return false即阻止了事件冒泡，也组织了浏览器的默认行为

获取键盘按键

• 使用e.keyCode（）获取键盘上所按的键所对应的值。（ASCII码）

补充

链式编程

• 如果给元素设置或者调用一个方法，这个方法有返回值，并且返回的是一个jQuery对象，那就可以继续在点出jQuery方法
• 有些时候我们一个方法返回的确实是一个jQuery对象，但是这个对象又不是我们想要的对象，便可以再这个方法的后面加上一个.end()；（表示返回上一个状态，end也是一个jQuery对象，只有jQuery对象才能使用end方法）然后继续在后面点。

显示迭代each（增强for循环）

增强循环，将jQuery对象都进行一次循环，有两个参数（索引值，节点）

$(要遍历的jQuery对象).each(function (index, element) {
    // element == this
});