JQuery
JavaScript库
定制设计一个封装好的特定的集合（定制设计方法和函数）。定制设计在这个库里面，定制设计封装了很多定义好的函数，支持js定制设计的常规操作以及拓展
JQuery
定制设计是一个快速、简介的js库，定制设计设计的宗旨"write less，do more"
学习jquery的本质：定制设计学习调用这些函数（方法）
JQuery的使用
-
引入jq文件
-
下方使用script标签
<script src="./jquery-3.6.0.js"></script><script> var box1 = document.querySelector(".box1") console.log(box1); var box1Jq = $('.box1') console.log(box1Jq); </script> JQuery定制设计的入口函数
-
定制设计定制设计定制设计等待文档加载完成（定制设计定制设计图片不需要加载完成），执行代码
$(document).ready(function () { console.log(1, $(".box1")); }) -
等待文档加载完成（图片不需要加载完成），执行代码，定制设计是上一个的缩写
$(function () { console.log(2, $(".box1")); }) -
等待文档加载完成（定制设计定制设计图片需要加载完成），执行代码
$(window).on("load", function () { console.log(3, $(".box1")); }) $(window).on("load", function () { console.log(33, $(".box1")); }) -
原生写法，（图片需要加载完成）
window.onload = function () { console.log(4, $(".box1")); } // 定制设计原生的写法是会被覆盖的 window.onload = function () { console.log(44, $(".box1")); }
JQuery定制设计的顶级对象$
$是jQuery的别称，可以使用jQuery代替的，定制设计但是为了方便，定制设计一般直接使用$
JQuery常用API
JQuery的选择器
原生的js获取DOM定制设计的方法很多，定制设计但是有一些有兼容性的问题，所以jq定制设计封装选择方法，使我们获取元素有一个统一的标准
$(选择器) 返回的是Jq对象，是一个数组，不是dom数组 ，要使用jq的方法，就必须使用jq的对象来调用
<div class="box1"></div> <div id="box1"> <div class="box2"></div> </div> <script> // 返回的不论是id还是类全部都是一个jq的对象数组 // 选择器的使用和CSS的选择器是一样 console.log($(".box1")); console.log($("#box1")); console.log($("div")); console.log($(".box2")); console.log($("#box1 .box2")); </script> 隐式迭代
遍历内部的DOM元素的过程叫做隐式迭代
jq会自动给匹配的元素进行循环遍历，执行相应的方法，我们不需要自己来写循环遍历的操作，简化代码
// 为五个li添加点击事件 // 原生的写法 var lis = document.querySelectorAll("li") for (var i = 0; i < lis.length; i++) { lis[i].style.color = 'red' } // jq的写法 var liss = $('li') liss.css("color", "blue") 获取指定下标的元素
// 获取指定下标的元素，使用eq方法获取对应下标的元素 console.log(liss.eq(i)); liss.eq(i).css("color", colors[i]) 获取当前元素的下标
liss.click(function () { // console.log(this); // 使用$将this转换成jq对象 console.log($(this).index()); }) 排他思想
当前元素设置样式，其他的兄弟元素清楚样式
()：返回被选子元素的同级元素
lis.click(function () { // console.log(this); // lis.css("color", 'black') // 将当前的这个元素的字体颜色设置成红色 $(this).css("color", "red") // 获取到当前元素的兄弟元素， // 可以传入一个选择器，表示只查找兄弟元素并且符合选择器规则的元素 console.log($(this).siblings('.item')); $(this).siblings('.item').css("color", "black") }) 链式编程
JQ的对象是可以一直调用jq函数的，可以把所有代码写在一行
lis.click(function () { $(this).css("color", "red").siblings('.item').css("color", "black") }) 样式操作
-
$(选择器).css(属性)：获取属性的值
console.log($('.box1').css("background-color")); -
$(选择器).css(属性,值)：设置属性的值
$('.box1').css("background-color", 'blue') -
如果要设置的属性很多，可以使用对象来设置
// 设置属性的值 $('.box1').css({ width: '200px', height: "200px", color: 'white', // 参数为对象的时候，要使用驼峰命名的方式 fontSize: '50px', // 或者使用keb-base的字符串写法 'background-color': 'blue' }) -
控制元素的类名，设置类名
-
添加类：$(选择器).("类名")
$('.add').click(function () { $('.box1').addClass("box4") }) -
删除类：$(选择器).removeClass("类名")
$('.del').click(function () { $('.box2').removeClass("box2") }) -
切换类：$(选择器).("类名")
$('.toggle').click(function () { $('.box3').toggleClass("box4") })
-
动画
显示隐藏
show(speed,callback)
speed：规定动画的速度，值可以是slow，fast，也可是毫秒数
callback：回调函数，动画结束后才会执行的函数
show hide toggle
$('.btn1').click(function () { $('.container').show(1000, function () { console.log("动画结束了"); }) }) $('.btn2').click(function () { // console.log(this); // 获取container容器 // hide隐藏元素 $('.container').hide(1000, function () { console.log("动画结束了"); }) }) $('.btn3').click(function () { $('.container').toggle(1000, function () { console.log("动画结束了"); }) }) 滑动
slideDown slideUp slideToggle
$('.btn1').click(function () { $('.container').slideDown(1000, function () { console.log("动画结束了"); }) }) $('.btn2').click(function () { $('.container').slideUp(1000, function () { console.log("动画结束了"); }) }) $('.btn3').click(function () { $('.container').slideToggle(1000, function () { console.log("动画结束了"); }) }) 淡入淡出
fadeIn fadeOut fadeToggle
fadeTo(speed,opacity,callback)
opacity：切换透明度到指定值
$('.btn1').click(function () { $('.container').fadeIn(1000, function () { console.log("动画结束了"); }) }) $('.btn2').click(function () { $('.container').fadeOut(1000, function () { console.log("动画结束了"); }) }) $('.btn3').click(function () { $('.container').fadeToggle(1000, function () { console.log("动画结束了"); }) }) $('.btn4').click(function () { $('.container').fadeTo(1000, 0.5, function () { console.log("动画结束了"); }) }) 自定义动画
animate(params,speed,callback)
params：终止的时候的样式属性
speed：速度，和上面一样
callback：回调函数，和上面一样
$('.btn1').click(function () { $('.container').animate({ width: '200px', height: '200px', backgroundColor: '#00f', fontSize: '80px', color:'white' }, 1000, function () { console.log("动画结束了"); }) }) 停止动画
停止正在执行的动画
$('.btn2').click(function () { $('.container').stop() }) 属性操作
1、固有属性
prop("属性名") 获取属性值
prop("属性名","属性值") 设置属性值
元素本身自带的属性
1、如果元素有对应的属性，则返回指定的属性值
2、如果元素没有对应的属性值，则返回空字符串，如果这个属性不是元素自带的则返回undefined
$("img").prop("src", imgUrl) 2、自定义属性
attr("属性名") 获取自定义属性值
attr("属性名","属性值") 设置自定义属性值
1、如果元素有对应的属性，则返回指定的属性值
2、如果元素没有对应的属性值，则返回undefined
$("img").attr("src", imgUrl) 3、数据缓存
data，可以在指定的元素上存取数据，不会改变dom结构，页面刷新，存放的数据就消失了
data("属性名") 获取自定义属性值
data("属性名","属性值") 设置自定义属性值
<!-- 在标签上写数据需要使用data-属性值 -->console.log($("img").data("src"));$("img").data("src", imgUrl)console.log($("img").data("title"));console.log($("img").data("href")); 区别
prop和attr只能存字符串，data可存任意类型
prop>attr prop>data data和attr的效率不一定
内容文本
html() 获取或者设置元素的内容 相当于 innerHTML
text() 获取或者设置元素的文本内容 相当于 innerText
val() 获取或者设置表单元素的值 相当于value
console.log($('.box1').text()); console.log($('.box1').html()); $('.box1').text("<button>这是一个按钮</button>") $('.box1').html("<button>这是一个按钮</button>") console.log($('input').val()); $('input').val("修改后的值") 遍历操作
jq的隐式迭代会对同一类元素做一样的操作，如果要想对不同元素做不同操作，需要用到遍历
遍历DOM元素
jqDom.each(function (index,domEl) {})
index：索引号
domEl：DOM元素对象，不是jq对象，要用jq的方法要先转换成jq对象
// 只能循环jq的dom数组 $("li").each(function (index, domEl) { console.log(index, domEl); // domEl.style.color = colors[index] $(domEl).css('color', colors[index]) }) 遍历所有对象
$. each(obj,function (index,item) {})
obj：被遍历的对象，任何对象都可以，主要用于数据处理
index：索引号
item：遍历的元素
// 可以遍历任何对象 $.each($('li'), function (index, item) { console.log(index, item); }) 元素操作
1、创建元素
var li = $(`<li>4</li>`)
2、添加元素
-
内部
append(el) // 添加到内部元素的末尾
prepend(el) // 添加到内部元素前面
-
外部
before(el) // 添加到元素外部前面
after(el) // 添加到元素外部后面
$('ul').append(li) $('ul').prepend(li) $('ul').after(li) $('ul').before(li) // 同时操作同一个元素，最终的结果会是最后调用的那一个操作 3、删除元素
remove() 删除匹配的元素，包括本身
empty() 删除匹配的元素的子元素，不包括本身
html('') 情况匹配的元素内容
尺寸操作、位置操作
1、尺寸
console.log($(".box1").width()); // 获取匹配元素的宽度，只计算width console.log($(".box1").height());// 获取匹配元素的高度，只计算height console.log($(".box1").innerWidth());// 获取匹配元素的宽度，包含padding console.log($(".box1").innerHeight());// 获取匹配元素的高度，包含padding console.log($(".box1").outerWidth());// 获取匹配元素的宽度，包含padding、border console.log($(".box1").outerHeight());// 获取匹配元素的高度，包含padding、border console.log($(".box1").outerWidth(true));// 获取匹配元素的宽度，包含padding、border、margin console.log($(".box1").outerHeight(true));// 获取匹配元素的高度，包含padding、border、margin 2、位置
-
offset
用来设置或者放回被选择元素相对于文档的偏移，和父级没有关系
// 可以直接获取两个属性：top、left 相对于文档左侧和顶部的距离 console.log($(".box1").offset()); // 也可以设置位置 $(".box1").offset({ left: 0, top: 60, }); -
position
用来返回整个元素相对于父元素的位置（父元素必须有position属性），没有则往上级找，直到body，会把margin一起算到位置中，只能获取不能设置
// 可以直接获取两个属性：top、left 相对于父元素左侧和顶部的距离 console.log($(".box1").position());
3、滚动事件
$(document).scroll(function () { // scrollTop()/scrollLeft 用来获取滚动的长度 if ($(document).scrollTop() > 400) { $(".top").fadeIn(1000); } else { $(".top").fadeOut(1000); } }); $(".top").click(function () { // 设置滚动的高度为0，实现回到顶部的效果 $(document).scrollTop(0); }); 事件
1、单个事件注册
el.事件类型(function(){
// 事件处理程序
})
-
hover事件 模仿鼠标悬停
$(".box1").hover( function () { $(".box1").css({ width: "200px", height: 200, }); }, function () { $(".box1").css({ width: "100px", height: 100, }); } );
2、事件处理 on绑定事件
el.on('events',fn)// events 一个或者多个用空格分隔的事件类型// fn 要执行的函数 优点
-
可以绑定多个函数
// 绑定多个函数，如果多个事件都是同一个操作 // 可以多个写在一起 $(".box1").on("mouseenter mouseleave click", function () { console.log(1); }); // 绑定多个函数，如果多个事件做的是不同操作 // 使用对象的形式 $(".box1").on({ click: function () { console.log(1); }, mouseenter: function () { console.log(2); }, mouseleave: function () { console.log(3); }, }); -
给子元素动态绑定事件
// 把事件委托给父元素 // 可以给动态生成的元素绑定事件 $("ul").on("click", "li", function () { console.log(this); });
off解绑事件
// 解除事件绑定 // 解除所有事件 $("button").off(); // 解除单个事件 $("button").off("click");有事件 one事件 只触发一次
$("button").one("click", function () { sendMsg();}); 自动触发事件
$("button").click(); jq的事件处理对象
// 冒泡事件 // 点击子元素的时候如果父元素上有一样事件类型，则父元素也会被触发 $(".box1").click(function (e) { console.log("box1"); }); $(".box2").click(function (e) { e.stopPropagation(); console.log("box2"); }); // 默认事件 $("a").click(function (e) { e.preventDefault(); console.log("a"); });