一、什么是JQuery
1.1 JQuery 介绍
JQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使像HTML文档的遍历和操作，事件处理，动画和Ajax的东西简单得多，一个易于使用的API，适用于众多浏览器。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。 
Write Less Do more
1.2 资料
官网 https://jquery.com/
API 手册 https://jquery.cuishifeng.cn/
1.3 JQuery 使用方法
1.3.1 下载Jquery库
1.3.2 在线CDN引入
1.3.3 第一个JQuery程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery-3.6.0.js"></script>
</head>
<body>
<div id="box" style="border: 1px solid;width: 200px;height: 40px"></div>
<script>
$( function () {
// alert('cao')
//var obj = document.getElementById("box");
//obj.style.backgroundColor="red";
$("#box").css('background-color','yellow').width(1000);
});
</script>
</body>
</html>
二、JQuery 选择器
jquery 选择元素的方法就是css选择器，除外还提供了更加灵活的选择方法。
2.1 常用选择器
ID 类选择器
$('#id')
2.2 Class 类选择器
$('.className')
2.3 元素选择器
$('tagName')
2.4 属性选择器
$("selector[attr='value']")
$("a[href='http://www.baidu.com']")
2.5 层级选择
$("selector > selector ")
2.2 其他选择器
2.2.1 过滤(了解)
$("selector:first")
$("selector:last")
$("selector:eq(index)")
2.2.1 表单(了解)
$("input:text")
$("input:checkbox")
2.2.2 状态(了解)
$("input:checked")
$("input:disabled")
三、JQuery 事件
3.1 事件绑定
3.1.1 on 通用事件绑定
obj.on('事件类型',回调函数)
obj.on('click',function(e){
此处写点击后需要做的逻辑代码。
})
//以前
obj.addeventLinsterner( 'click', 回调 )
obj.on('click', 回调)
one 一次性事件，事件只会触发一次。
3.2.1 off 取消事件
obj.off('事件类型')
obj.off('click')
3.2.2 trigger 触发器
obj.trigger('事件类型')
$('.box:last').trigger('click');
3.3 快捷事件
- blur([[data],fn])
- change([[data],fn])
- click([[data],fn])
- dblclick([[data],fn])
- focus([[data],fn])
- keydown([[data],fn])
- keypress([[data],fn])
- keyup([[data],fn])
- mousedown([[data],fn])
- mouseenter([[data],fn])
- mouseleave([[data],fn])
- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- mouseup([[data],fn])
- resize([[data],fn])
- scroll([[data],fn])
- submit([[data],fn])
四、JQuery Dom编程
4.1 Js对象与JQuery对象
DOM
<ul>
<li>小刘</li>
<li>王鑫</li>
<li>小郭</li>
</ul>
JS
$(function(){
// lis 是一个JQuery DOM对象,就是JQuery提供的对象，或者说经过jquery包装过的对象 ,
// 可以使用JQuery方法。
var lis= $("ul li");
//lis.css('color','red');
// lis[i]元素不是一个JQuey对象，一旦对JQuery对象使用[下标] 或者 get(下标),获得的元素就是一个原生的JS对象,
// 原生JS DOM对象无法调用JQuery的方法， 可以使用原生的DOM属性和方法。
//lis[1].css('color','green');
lis.get(1).style.color='green';
// JS 对象 转 JQuery对象 $( js对象 )
var jsobj = lis.get(1);
$(jsobj).css('color','yellow')
})
4.2 样式控制
4.2.1 css( )
类似于与style属性的作用
4.2.2 单个样式
$("div").css('color','green').css('background-color','red'); //控制单个属性可级联调用
4.2.3 多个样式
$("div").css({'color':'green','background-color':'red' }); //控制多个属性
4.2.4 addClass()
.ac{
color:gold;
background-color: #FF0000;
border: 10px solid green;
}
$("div").addClass('ac');
4.2.5 removeClass()
$("div").on('click',function(e){
$("div").removeClass('ac');
});
4.2.6. toggleClass()
$("div").on('click',function(e){
$("div").toggleClass('ac');
});
4.3 值内容
类与 innerText innerHTML value 的作用
4.3.1 text( [content] )
a. 取值
$(function(){
//取值（忽略标签和样式）
var xx= $("div").text();
console.log(xx)
})
b. 赋值
$(function(){
//赋值 （标签不被解析，视为文本）
$("div").text( "<h1>hello jquery</h1>" )
})
4.3.2 html([content])
$(function(){
//取值（连同标签和样式）
var xx= $("div").html();
console.log(xx)
//赋值 （标签被解析）
$("div").html( "<h1>hello jquery</h1>" )
})
4.3.3 val([content])
$(function(){
//取值
var xx = $("input[name='username']").val();
console.log(xx)
//赋值
$("input[name='username']").val("tomcat");
})
4,4 属性
4.4.1 attr()
//赋值
$("a").attr('href','http://www.baidu.com');
//取值
var vv = $("a").attr('href');
alert(vv);
prop() 修改boolean类型属性
4.5 查找
DOM
<ul>
<li class="x">李阳</li>
<li >席端</li>
<li>赵梦非</li>
<li id="son" >冉潘</li>
<li class="x">刘备</li>
<li>关羽</li>
<li class="x">张飞</li>
</ul>
4.5.1 children()
先找到父级节点，通过次方法可以获得该节点全部的后代节点。
$(function(){
//全部的子节点
var arr= $("ul").children();
$( arr[0] ).css('color','red');
})
4.5.2 parent()
先找到其中的一个子节点，通过次方法可以获得该子节点的直接父级节点，全部的父级节点通过示例中其他方法也可获得。
$(function(){
$("#son").parent().css('border','1px solid red'); //直接父级
$("#son").parents().css('border','1px solid red'); //全部父级
$("#son").parentsUntil("html").css('border','1px solid red'); //全部父级直到 什么为止。
}
4.5.3 prev()
先找到其中的一个子节点，通过次方法可以获得该子节点前一个节点，前面的全部节点通过示例中其他方法也可获得。
$(function(){
$("#son").prev().css('color','red'); //前一个
$("#son").prevAll().css('color','red');//前全部
$("#son").prevUntil('.x').css('color','red');//前全部直到 .x为止
})
4.5.3 next()
先找到其中的一个子节点，通过次方法可以获得该子节点后一个节点，后面的全部节点通过示例中其他方法也可获得。
$("#son").next().css('color','red'); // 后一个
$("#son").nextAll().css('color','red');//后全部
$("#son").nextUntil('.x').css('color','red');//后全部直到 .x为止
4.5.4 siblings()
先找到其中的一个子节点，通过次方法可以获得该子节点同级的其他节点。
$("#son").siblings().css('border','1px solid red');
4.5.5 find( 选择器 )
obj.find(“td”) 在obj内部选择td元素
4.6 添加
4.6.1 内部添加
指的是在指定容器的内部添加新的节点
- append( content ) & prepend( content )
obj.append("html代码" ) //内容追加
obj.prepend("html代码" ) //顶部插入
- appendTo( selector ) & prependTo( selector )
$("html代码").appendTo( '.box' );
$("html代码").prependTo( '.box' );
两组api 作用一致， 第一组是容器调用api 添加新增节点 ， 第二组是 新增节点调用api 添加到指定的选择器中。
4.6.2 外部添加
指的是在指定容器外部同级，前后添加新节点。
- after() & before()
obj.after( "html代码" ) //在obj后面添加新节点
obj.before("html代码" ) //在obj前面添加新节点
- insertAfter() insertBefore()
$( "html代码" ).insertAfter("选择器") //在obj后面添加新节点
$( "html代码" ).insertBefore("选择器") //在obj前面添加新节
这两组api 作用也是一样的，区别在于前者是容器节点调用，后者是新增节点调用。
4.7 替换
- replaceWith( content )
obj.replaceWith( "新html代码" ) // 把obj替换为新的html
- replaceAll( selector )
$("新的html代码").replaceAll('选择器')
4.8 删除
- remove()
obj.remove() //移除obj，移除自身。
- empty()
obj.empty() //清空obj的内容， 移除的是全部儿子，自己会保留。
4.9 复制
- clone()
//克隆的dom
var cloneDom = obj.clone();
//插入到其他位置
cloneDom.insertBefore('选择器')
clone( true ) 深度克隆，可以复制事件
4.10 包裹
- wrap() 为选择元素分别添加指定包裹层
- wrapAll() 把所有元素用一个包裹层
//包裹
$("#btn-warp").click( function (){
// $("#box img").wrap("<div style='padding: 4px;border: 1px solid #ccc;display: inline-block;background-color: white ';></div>");
$("#box img").wrapAll( "<div style='padding: 4px;border: 1px solid #ccc;display: inline-block;background-color: white ';></div>" );
});
五、JQuery 动画
5.1 可见性
<button onclick="$('.box').show()">显示</button>
<button onclick="$('.box').hide()">隐藏</button>
<button onclick="$('.box').toggle()">显示隐藏切换</button>
5.2 淡入淡出
<button onclick="$('.box').fadeIn(1000)">淡入</button>
<button onclick="$('.box').fadeOut(1000)" >淡出</button>
<button onclick="$('.box').fadeToggle()">淡入淡出切换</button>
5.3 展开折叠
<button onclick="$('.box').slideUp()" >上拉</button>
<button onclick="$('.box').slideDown()" >下拉</button>
<button onclick="$('.box').slideToggle()">上下拉切换</button>
5.4 自定义
<button onclick="$('.box').animate({'width':'0px'},2000)">自定义</button>
综合实例
<body>
<button onclick="$('.box').show()">显示</button>
<button onclick="$('.box').hide()">隐藏</button>
<button onclick="$('.box').toggle()">显示隐藏切换</button>
<button onclick="$('.box').fadeIn(1000)">淡入</button>
<button onclick="$('.box').fadeOut(1000)" >淡出</button>
<button onclick="$('.box').fadeToggle()">淡入淡出切换</button>
<button onclick="$('.box').slideUp()" >上拉</button>
<button onclick="$('.box').slideDown()" >下拉</button>
<button onclick="$('.box').slideToggle()">上下拉切换</button>
<button onclick="$('.box').animate({'width':'0px'},2000)">自定义</button>
<div class="box"> 示例动画 </div>
</body>
六、JQuery 插件机制
6.1 全局扩展
$.extend({
sayHello(){
alert('hello')
}
})
//调用
$.sayHello();
相当于为$ 类级别的方法扩展。
6.2 实例扩展
$.fn.extend({
sayGoodBye(){
alert('world');
}
});
//调用
$("xx").sayGoodBye();
相当于 为 jquery 对象级别的方法扩展。
2110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
