文章目录
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对象
})
})