1 基本概念
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发。
JavaScript的缺点：
- window.onload有事件覆盖问题，只能写一个；
- 代码容错性差；
- 浏览器兼容性问题；
- 书写繁琐，代码多；
- 代码较乱，各个页面都有；
- 动画效果难以实现。
2 jQuery的使用
1 引入
2 入口函数
3 JavaScript对象与jQuery对象
4 选择器
5 动画效果
6 属性操作
7 文档（标签）操作
8 表单操作
9 位置操作
10 事件流
11 其他方法
12 Ajax方法
1 引入
<script type="text/javascript" src="jquery-3.4.0.js"></script>
2 入口函数
<script type="text/javascript" src="jquery-3.4.0.js"></script>
<script type="text/javascript">
console.log($(document)); //jquery对象，类似伪数组
console.log($(document)[0]); //js对象，该html文件对象//入口函数，类似js中window.onload(),但不会出现事件重叠现象
//方式1
$(document).ready(function(){
alert(1);
});
//方式2
$(function(){
alert(2);
});//方式3
$(window).ready(function(){
alert(3);
});
</script>
3 JavaScript对象与jQuery对象
$(function(){
var oDivJq = $("#box1"); //jQuery对象
var oDivJs = document.getElementById('box2'); //JavaScript对象console.log(oDivJq);
console.log(oDivJs);//转换
//jQuery-->JavaScript
console.log(oDivJq[0]);
console.log(oDivJq.get(0));
//JavaScript-->jQuery
console.log($(oDivJs));
});
4 选择器
//1 基本选择器
//标签选择器
$(function(){
$("div").click(function(){
console.log(this); //此时this为js对象
console.log($(this));console.log(this.innerText);
console.log($(this).text());
});
});
//类选择器
console.log($(".box"));
//id选择器
console.log($("#box"));
//2 层级选择器
// 后代选择器(所有级子代)
console.log($('div p'));
// >子代选择器（最近一级的子代，亲儿子）
console.log($('div > p'));
// +毗邻选择器 匹配 所有紧接在#brother元素后的下一个元素
$('#brother+li').css('color','yellow');
// ~兄弟选择器
// 匹配所有#brother之后的所有兄弟姐妹元素
$('#brother~li').css('background','#996633');
//3 基本过滤选择器
//:first 获取第一个元素
$('li:first').text('真的吗？')
//:last 获取最后一个元素
$('li:last').html('我是最后一个元素？')//:odd 匹配所有索引值为奇数的元素，从0开始计数
$('li:odd').css('color','green');
//:even 匹配所有索引值为偶数的元素，从0开始计数
$('li:even').css('color','red')//:eq(index) 获取给定索引值的元素 从0开始计数
$('li:eq(1)').css('font-size','30px')
//:gt(index)匹配所有大于给定索引值的元素
$('li:gt(1)').css('font-size','40px')
//:lt(index) 匹配所有小于给定索引值的元素
$('li:lt(1)').css('font-size','40px')
//4 属性选择器
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$("li[id]").css('color','red')//[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px')
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen')//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','red')
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow')
//匹配给定的属性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF')
//5 筛选选择器
//获取第n个元素 数值从0开始
$('span').eq(0).css('font-size','30px')//first()获取第一个元素
$('span').first().css('background','red')
//last()获取最后一个元素
$('span').last().css('background','red')//.parent() 选择父亲元素
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'})
//.children() 选择孩子元素
$('span').children('.p1').css({width:'300px',height:'300px',background:'yellow'})
//.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red')
//.find() 查找所有的后代元素
$('div').find('button').css('background','#313131')
//选项卡
$(function(){
$("#box1 li").click(function(){
$(this).css('color', 'red');
//恢复其他兄弟节点的样式
$(this).siblings('li').css('color','black');
});
5 动画效果
//动画和定时器一样，要先清理stop()，再开动画
//show 对角线变化来动态显示隐藏的匹配元素,show(speed,callback)
//speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值
//callback:在动画完成时执行的函数，执行一次
$("#box").click(function(){
$(".box").stop().show(10000, function(){
$(".box").stop().hide(5000);
});
});
//hide 表示隐藏显示的元素, hide(speed,callback)
//toggle 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
//slideDown 通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数
//slideUp 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
//slideToggle 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
//fadeIn 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
//这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
//fadeOut 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
//fadeToggle 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
//fadeTo 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。
//animate 用于创建自定义动画的函数, animate(params,[speed],[fn])
//params:一组包含作为动画属性和终值的样式属性和及其值的集合
//speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值
//fn:在动画完成时执行的函数，每个元素执行一次。
var cc = {
width: 100,
height: 100,
top: 200,
left: 200,
};
$("#hh").click(function(){
$(".box").stop().animate(cc, 5000);
})//stop 停止所有在指定元素上正在运行的动画, stop([clearQueue],[jumpToEnd])
//clearQueue:如果设置成true，则清空队列。可以立即结束动画。
//gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
//delay 用来做延迟的操作,
delay(1000); //毫秒
6 属性操作
//1 html属性操作(标签)：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
//attrn设置属性值或者 返回被选元素的属性值
//获取值：attr()设置一个属性值的时候 只是获取值
var id = $('div').attr('id')
console.log(id)
//设置值(不建议用此方式设置类名)
//1.设置一个值 设置div的class为box
$('div').attr('class','box')
//2.设置多个值，参数为对象，键值对存储
$('div').attr({name:'hahaha',class:'happy'})
//removeAttr 删除某个属性
$("div").removeAttr("id")
//2 DOM属性操作(对象)：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
//prop 获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。
//removeProp 删除
//3 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
//addClass（添加多个类名）为每个匹配的元素添加指定的类名。
$('div').addClass("box"):添加一个类名
$('div').addClass("box box2"):添加多个类名
//removeClass 从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')移除指定的类
$('div').removeClass()移除全部的类
//toggleClass 如果存在（不存在）就删除（添加）一个类。
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
//4 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
//html
//获取值：是获取选中标签元素中所有的内容
var c = $('ul').html();
//设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('ul').html('<a href="#">百度一下</a>')
//可以使用函数来设置所有匹配元素的内容
$('ul').html(function(){
return '哈哈哈'
})
//text
//获取值：获取匹配元素包含的文本内容
var a = $("div").text();
//设置值：设置该所有的文本内容
$("div").text("aaaaaaaa");
注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中//val
//获取值：用于表单控件中获取值，比如input textarea select等等
var a = $('input').val();
//设置值：
$('input').val('设置了表单控件中的值')
7 文档（标签）操作
//1、插入操作
//1、父元素.append(子元素) 追加某元素 父元素最后位置中添加新的元素 string | element | jquery元素
//如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈'
$('ul').append('<li>1233</li>') //string
$('ul').append(oli) //element
$('ul').append($('#app')) //jquery
//2、子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('hu')//3、prepend（） 前置添加， 添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
//4、prependTo 后置添加，第一个元素添加到父元素中
$('<a href="#">路飞学诚</a>').prependTo('ul')//5、兄弟.after(兄弟) 在匹配的元素之后插入内容 与 兄弟.insertAfter(兄弟)
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')//对于这种多行的，用反引号``
var a = "alex"; //插入变量
$('ul').after(`
<li>
<a href="">${a}</a>
</li>
`)//6、兄弟.before(兄弟) 在匹配的元素之前插入内容 与 兄弟.insertBefor(兄弟)
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
//2、复制操作
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
//3、替换操作
//1、被替换.replaceWith(替换值)：将所有匹配的元素替换成指定的HTML或DOM元素。
$('h5').replaceWith('<a href="#">hello world</a>')
$('h5').replaceWith($('#app'));//2、替换值.replaceAll(被替换):用匹配的元素替换掉所有
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
//4、删除操作
//1、remove() 删除节点后，事件也会删除（删除了整个标签）
$('ul').remove();//2、detach() 删除节点后，事件($btn)会保留
var $btn = $('button').detach()
//此时按钮能追加到ul前
$('ul').prepend($btn)//3、empty(): 清空元素中的所有后代节点
//清空掉ul中的子元素，保留ul
$('ul').empty()
8 表单操作
<body>
<button>lala</button>
<form action="">
<input type="radio" name="sex" value="112" />男
<input type="radio" name="sex" value="11" checked="" />女
<input type="radio" name="sex" value="11" />gay<input type="checkbox" value="a" checked=""/>吃饭
<input type="checkbox" value="b" checked=""/>睡觉
<input type="checkbox" value="c" checked=""/>打豆豆<select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
<script type="text/javascript" src="jquery-3.4.0.js"></script>
<script type="text/javascript">
$(function(){
//单选框
//获取值 被选中的， :checked
console.log($("input[type=radio]:checked").val());
//设置值
$("input[type=radio]:checked").val('hahahaha');
console.log($("input[type=radio]:checked").val());//复选框
console.log($('input[type=checkbox]:checked').val()); //a 第一个被选中的//下拉表单
//获取值 被选中的， ：selected
console.log($("#timespan option:selected").val());
//设置值
$("button").click(function(){
$("select option").get(2).selected = true; //get的是索引值
})//文本框
console.log($("input[type=text]").val())//获取文本框中的值
//设置值
$('input[type=text]').val('试试就试试')
});
</script>
</body>
9 位置操作
//position
//weight 取得匹配元素当前计算的宽度值
//获取值
$('#box').width()
//设置值
$('#box').width(300)//height 取得匹配元素当前计算的高度值
//获取值
$('#box').height()
//设置值
$('#box').height(300)//innerHeight 获取第一个匹配元素内部区域高度（包括补白、不包括边框）
console.log($('#box').innerHeight())
//innerWidth 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
console.log($('#box').innerWidth())
//outerHeight 获取第一个匹配元素外部高度（默认包括补白和边框）
console.log($('#box').outerHeight())
//outerWeight 获取第一个匹配元素外部宽度（默认包括补白和边框）
console.log($('#box').outerWidth())
//offset
//offset 获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性：top 和 left
$("p").offset()
$('div').offset().top
$("p").offset().left
//scoll
//scrollTop 获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值
//scrollLeft 获取匹配元素相对滚动条左侧的偏移 文档被卷起的像素值
$(document).scrollTop()
$(document).scrollLeft()//监听文档滚动的jquery方法
$(document).scroll(function(){
console.log($(document).scrollTop())
console.log($(document).scrollLeft())
})
10 事件流
//“DOM2级事件”规定的事件流包括三个阶段：
//1 事件捕获阶段
//2 处于目标阶段
//3 事件冒泡阶段
程序：
var oBtn = document.getElementById('btn');oBtn.addEventListener('click',function(){ //默认为false，即不显示捕获阶段
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false);document.addEventListener('click',function(){
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false);document.documentElement.addEventListener('click',function(){
console.log('html处于事件捕获阶段');
}, true);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false);document.body.addEventListener('click',function(){
console.log('body处于事件捕获阶段');
}, true);
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false);
结果：
document处于事件捕获阶段
html处于事件捕获阶段
body处于事件捕获阶段
btn处于事件捕获阶段
btn处于事件冒泡阶段
body处于事件冒泡阶段
html处于事件冒泡阶段
document处于事件冒泡阶段
冒泡事件
//给按钮绑定事件，在所有事件回调函数中有默认的事件对象，且为js对象
$(".father button").click(function(event){
console.log(event);//event.stopPropagation(); //阻止冒泡产生
console.log($(this).text()) //发生事件冒泡，同时打印出父级事件的内容
})$(".father").click(function(){
alert("父亲")
})
11 其他方法
//mouseover mouseout穿过被选元素及其子元素都会触发
$(".father").mouseover(function(){
console.log("移入了");
})$(".father").mouseout(function(){
console.log("移出了");
})//mouseenter mouseleave只有穿过被选元素才会触发
$(".father").mouseenter(function(){
console.log("移入了");
})$(".father").mouseleavet(function(){
console.log("移出了");
})
//鼠标选中focus，失去选中blur
$("input[type=text]").focus(function(){
console.log("获取焦点");
})$("input[type=text]").blur(function(){
console.log("失去焦点");
})
//捕获键盘按下keydown，键盘弹起keyup
$('input[type=text]').keyup(function(e){
console.log(e.keyCode); //e为输入字符
})
//鼠标移动mousemove
//鼠标按下mousedown，鼠标弹起mouseup