1、jQuery

jQuery

1、jQuery版本

前jQuery有三个大版本：

1.x 版本

​ 兼容ie678, 使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了

2.x 版本

​ 不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。

3.x 版本

​ 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本

jQuery各个版本：

​ https://www.jq22.com/jquery-info122

2、jQuery使用

有两种办法，一种是使用在线的引用，可以使用百度的，添加如下标签引用即可：

还有一种就是下载到本地后，直接引用，注意下面的写法是网页和js文件在同一个目录下写法。

3、jQuery入门

// JS 事件 : 后面会覆盖前面的相同事件
    window.onload = function() {
        console.log('onload1');
    }
    window.onload = function() {
        console.log('onload2');
    }

    // JQ 事件 ： 不会覆盖
    $(window).load(function(){
        console.log('load1')
    })
    $(window).load(function(){
        console.log('load2')
    })
    
    // ready：等待页面加载完, 比load先执行
    $(document).ready(function(){
        console.log('ready');
    })
    
    // ready的简写
    $(function(){
        console.log('ready2');
    })

    // ready的简写
    $(function(){
        
        // JS
        var box = document.getElementsByClassName('box')[0];
        box.innerHTML = "qian feng";
        
        // JQ: 代码比JS更简洁
        //   会根据css选择器来得到所有的节点
        // html() <=> innerHTML
        $(".box").html("QIAN FENG");
        
        // JS : 给每个li添加点击事件
        var lis = document.getElementsByTagName('li');
        // console.log(lis)
        for (let i=0; i<lis.length; i++) {
            lis[i].onclick = function(){
                // console.log(i, lis[i].innerHTML)
                console.log(i, this.innerHTML);
            }
        }
        
        // JQ : 可以批量添加事件
        $('li').click(function(){
            console.log(this.innerHTML);
        })
        
    })
    
    console.log($);  
    console.log($ == jQuery);  //true

4、JQ对象和JS对象的区别

// JS DOM对象
		console.log(box1)
		
		// JQ 对象
		var jqBox1 = $('#box1');
		console.log(jqBox1)
		
		// JS DOM对象 => JQ对象
		console.log( $(box1) );
		
		// JQ对象 => JS DOM对象
		console.log( $('div').get() );  // 转换成JS数组，可能包含了多个节点
		console.log( $('div').get(0) );  // 转换成JS对象，获取数组的第一个
		console.log( $('div')[0] );  // 转换成JS对象，获取数组的第一个
		
		// eq(index)：获取前面选择器所匹配的第index个JQ对象（index是下标）
		console.log( $('div').eq(0) );  // 不转换成JS对象

5、JQ选择器

// JQ选择器
// 基本选择器（重点掌握）
// css() : 样式
$('#box1').css("color", "red");  // 设置一个css样式
// $('.qianfeng').css({backgroundColor: "pink", "color": 'blue'})
$('.qianfeng').css({'background-color': "pink", "color": 'blue'})
// $('div').css('border', '1px solid green');
$('*').css('font-family', "微软雅黑");
$('#box2, div:first').css('color', 'orange')


// 后代选择器（重点掌握）
// $('#box3 input').css('background', 'red');
// $('#box3').find('input').css('background', 'red');

// 子元素选择器
// $('#box3 > input').css('background', 'red');
// $('#box3').children('input').css('background', 'red');

// 所有兄弟节点（重点掌握）
// $('#box3').siblings('input').css('background', 'red');

// first()（重点掌握）
// $('input:first').css('background', 'red');
// $('input').first().css('background', 'red');

// last()
// $('input:last').css('background', 'red');
// $('input').last().css('background', 'red');



// :first-child
// :last-child
// :nth-child(n)   n从1开始

// :first  找到所有li中的第一个
//$('ul li:first').css('background', 'red');
// :first-child  找到每个ul中的第一个li
//$('ul li:first-child').css('background', 'red');

// :first-child  找到每个ul中的最后一个li
//$('ul li:last-child').css('background', 'blue');

// :nth-child(n)  找到每个ul中的第n个li
//$('ul li:nth-child(3)').css('background', 'green');
//$('ul li:nth-child(2n)').css('background', 'green');
//$('ul li:nth-child(2n+1)').css('background', 'green');




// eq() ：第n个，从0开始。 （重点掌握）
//$('input').eq(0).css('background', 'red');
//$('input:eq(0)').css('background', 'red');

// parent(): 父节点 （重点掌握）
// parents(): 祖先节点 （重点掌握）
console.log( $('#box3').parent()[0].tagName ); // BODY
console.log( $('#box3').parents().size() ); //2
console.log( $('#box3').parents()[0].tagName ); // BODY
console.log( $('#box3').parents()[1].tagName ); // HTML
// 找祖先节点中指定的节点
console.log( $('#box3').parents('html')[0].tagName ); // HTML


// 其他选择器（了解）
// 同级的后一个节点
//$('#box3 + input').css('background', 'red');
//$('#box3').next('input').css('background', 'red');

// 同级的后所有节点
//$('#box3 ~ input').css('background', 'red');
//$('#box3').nextAll('input').css('background', 'red');

// 同级的前一个节点
//$('#box3').prev('input').css('background', 'red');
// 同级的前所有节点
//$('#box3').prevAll('input').css('background', 'red');

// not()
//$('input:not(:last)').css('background', 'red');
//$('input').not(':last').css('background', 'red');

6、JQ属性

// JS属性操作 
//	setAttribute() : 设置属性
//	getAttribute() : 获取属性
//  removeAttribute() : 删除属性
// console.log( star.getAttribute('name') )
// star.setAttribute('abc', 'Jack');
// star.removeAttribute('abc');

// JQ属性操作
//   attr() : 设置/获取属性
console.log( $('#star').attr('name') );  // 获取属性，写一个参数
// $('#star').attr('name', "Jack");  // 设置一个属性
$('#star').attr({'name': "Jack", "age": 40});  // 设置多个属性

// removeAttr() : 删除属性
$('#star').removeAttr('like');


// addClass() : 添加class
// removeClass() : 删除class
// toggleClass() : 切换使用addClass和removeClass
$('#star').mouseenter(function(){
	// this是JS DOM对象
	console.log(this); 
	console.log($(this));   // JQ对象

	// $(this).removeClass('foo1');
	// $(this).addClass('foo2');

	// JQ 链式调用 ： 常用
	$(this).removeClass('foo1').addClass('foo2');
	// $(this).toggleClass('foo2');
})

// JQ中大部分是方法。
// 	如果括号中没有参数，则表示获取
// 	如果括号中有参数，则表示设置
// 如：html(),text(),val()

// JQ           JS
// html() => innerHTML
// text() => innerText
// val()  => value

// html()
console.log( $('#star').html() );  // 获取
$('#star').html("<b>方文山</b>");  // 设置，支持HTML

// text()
console.log( $('#star').text() );  // 获取
$('#star').text("<b>方文山</b>");  // 设置，不支持HTML

// val()
console.log( $('input').val() );  // 获取输入框的内容
$('input').val("蔡徐坤");  // 设置输入框的内容

7、文档操作

// 文档操作：DOM操作
// JS DOM操作：
//	createElement()
//  appendChild()
//	removeChild()
//  cloneNode(true)

// JQ文档操作
// 创建节点
var div = $('<div><b>Go</b></div>');
// 添加:
//   append(), appendTo
// $('#box').append(div);
div.appendTo('#box');

// empty(): 清空节点
//$('#box').empty();

// remove(): 删除节点
// $('#box').remove();

// clone(): 不会复制事件
// clone(true): 会复制事件
$('button').click(function(){
	console.log('hello');
})

// $('button').clone().appendTo('body');
$('button').clone(true).appendTo('body');

8、JQ事件

// JQ 事件
//   JS事件前面都是on开头，JS不需要写on
$('button').on('click', function(){
	console.log('click');
})

// on() : 绑定多个事件
$('button').on({
	'mouseenter': function(){
		console.log('移入');
	},
	'mouseleave': function(){
		console.log('移出');
	}
})

// on：事件委托
// 不使用事件委托
$('button').click(function(){
	console.log('click');
})

// 使用事件委托
$('div').on('click', 'button', function(){
	console.log('点击了button');
})

$('a').click(function(){
	$('<button>新按钮</button>').appendTo('div');
})

// on事件委托的原理
$('div').click(function(e){
	// e 是JS事件对象
	console.log(e.target);  // 所点击的目标元素
	if (e.target.tagName == 'BUTTON') {
		console.log('点击了按钮');
	}
})


// on(): 添加事件
// off(): 删除事件
$('a').click(function(){
	console.log('点击了a标签');
})
$('a').mouseenter(function(){
	console.log('a标签: mouseenter');
})
$('a').off();  // 删除所有事件
$('a').off('click');  // 删除一个事件
$('a').off('click mouseenter');  // 删除多个事件

// trigger() : 主动触发事件
// triggerHandler() : 主动触发事件，不会触发浏览器默认行为
$('a').trigger('click');
$('a').triggerHandler('click');

// hover(): 移入 + 移出
$('div').hover(function(e){
	console.log(e.type);  // mouseenter
	console.log("移入");
}, function(e){
	console.log(e.type);  // mouseout
	console.log("移出");
})

9、JQ效果

// 显示和隐藏
$('#btn').click(function(){

// show/hide
$('div').show();  // 常用，非动画 (重点掌握)
$('div').show('fast');  // fast normal slow 
$('div').show(5000, function(){ alert('动画结束');});

$('div').hide();  // 常用，非动画  (重点掌握)
$('div').hide(5000);
$('div').hide(5000, function(){ alert('动画结束');});
$('div').toggle();
$('div').toggle(2000);

// slideDown/slideUp
$('div').slideDown(4000);
$('div').slideUp(4000);
$('div').slideToggle();

// fadeIn/fadeOut  // (重点掌握)
$('div').fadeIn(4000);  // 淡入
$('div').fadeOut(4000);  // 淡出
$('div').fadeToggle(4000);  // 了解即可

// 变成指定的透明度
// 第一个参数必须提供duration动画时长，第二个参数是透明度（0~1之间）
$('div').fadeTo(4000, 0.5);
})
$('#btn2').click(function(){
$('#box').animate({left:200, top:300}, 4000, function(){
	console.log('动画结束');
});

// 动画队列
$('#box').animate({left: 200}, 1000)
			.animate({top: 300}, 1000)
			.animate({width: 200}, 1000)
			.animate({height: 200}, 1000)
})

// 停止
$('#btn3').click(function(){
$('#box').stop();  // 只停止当前动画
$('#box').stop(true);  // 停止所有动画

$('#box').finish();  // 停止动画并到达目的地
})

// 常用方式：
$('div').stop().animate();

10、JQ实现Ajax

// JQ 写法
$.ajax({
	type: "get",  // http请求方式，默认是get
	url: "json/person.json",  // 接口, 必须写
	data: {name: 'lisi'},  // 参数
	async: true,  // 是否异步，默认异步

// 请求成功后的回调函数
	success: function(res){
		console.log(res);
},
// 请求失败后的回调函数
	error: function(e) {
		console.log(e);
}
});

// $.get()
$.get("json/person.json", function(res){
console.log(res);
})

// 带参数
// $.get("json/person.json", {name: "lisi"}, function(res){
$.get("json/person.json?name=lisi", function(res){
console.log(res);
})

// $.post()
$.post("http://127.0.0.1:5000/post/", {page:1, name: "lisi"}, function(res){
console.log(res);
})

11、JQ的each方法

$(function(){

//each()
//遍历数组
$.each([10,20,30], function(i,n){
// console.log(arguments);
console.log(i, n); // 下标和元素
})

//遍历对象
$.each({name:"张三", age:33}, function(key, value) {
console.log(key, value);
});

//常用
// 遍历jq节点对象
$("div").each(function(i, div){
// console.log(arguments);
// console.log(i, div); 

//console.log(this); // JS对象
console.log( $(this).html() );  // JQ对象
})
})