先导知识及网站推荐
CDN
CDN全称为Content Delivery Network，即内容分发网络。其行为模式及作用就像是快递站点，快递都集中在一起，根据地点不同，再次分发到各地的站点。网络将信息集中起来，利用CDN的分发性能，快速实现信息的传送，降低中心平台的负荷。但CDN是构建在现有网络基础上的智能虚拟网络，依靠各地的边缘服务器，通过这种新平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥堵，提高用户访问的响应速度和命中率。
CDN的关键技术主要有内容存储和分发技术。将内容部分存储到缓存设备中，根据用户的访问内容，利用分发技术使得用户获得信息。
BootCDN
BootCDN是一个免费的致力于为Bootstrap、jquery等前端开源项目提供稳定的、快速的CDN加速服务的网站，其收录的开源项目主要同步于cdnjs开源项目仓库。可在网站上获取所需的jquery包、Bootstrap包、Vue包等。
jQuery
建议先看：
关于jquery和$的相关问题：https://blog.csdn.net/qq_44681872/article/details/108025638
jquery api 中文文档：https://jquery.cuishifeng.cn/
jquery官方文档： https://jquery.com/
jquery由于vue的普及、CSS3的流行等原因，使用率在不断下降，但是至今没有一个框架的使用率可以比得上jquery。在使用jquery时，没必要将jquery下载到服务器上，且速度不一定快，这时就需要CDN加速网站，直接从网站上获取，且速度相对来说更快。在平常使用时，我们一般用min版，体积小，比较精简。
使用方法一：
使用时，直接复制script标签即可。在html页面添加script标签即可
使用方法二：
复制链接并打开，在本地建文件juqery-版本.js，复制粘贴成为本地文件。
最简便的获取jquery包的方式，在浏览器搜索栏输入unpkg.com/jquery就会出现一个jquery包，复制链接，像方法一那样添加即可。也可在其后加上其他的需要的包名，也可以获得。
1、jquery和$
使用jquery时，不要将jquery和原生javascript结合在一起写
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
console.log($); // 占用的全局变量：$ 和 jQuery，两者无啥区别
console.log(jQuery);
</script>
console.log( $('#wrap') );
// 相当于
function $(){ // 相当于构造函数的一个入口
return new Init()
}
class Init{} // 这才是构造函数
/**
* $()的参数：
* 选择器字符串
* DOM对象 、 DOM对象列表
* 函数function
*/
console.log( $("#wrap") === $("#wrap") ); // false,实例与实例间不全等
let $wrap = $("#wrap")
console.log( $wrap === $wrap ); // true
console.log( $wrap === $("#wrap") ); // false
jquery对象和DOM对象
console.log( $('#wrap') ); // 返回一个JQ对象,其中是没有那些DOM操作方法的
$('#wrap').style.color = 'red' // 没有那些DOM操作，所以报错,
console.dir( $('#wrap') ); // jq对象，使用jq定义的API来操作页面
console.dir( document.getElementById("wrap") );// DOM对象，使用原生js提供DOM API来操作页面
// 将ID名为wrap的div标签中的a标签字体颜色变为red
// DOM操作
document.getElementById('#wrap a').forEach(n => {
n.style.color = "red"
});
// JQ操作,自带遍历操作
$('#wrap a').css("color","red") // 此处的参数为一个时，是获取；两个时，是设置。
JQ对象与DOM对象转换
// JQ对象 ---> DOM对象 通过下标取值
$("#wrap a")[0].style.color = "green" // $("#wrap a")[0] 返回的是DOM对象
// 等价于
$("#wrap a").get(0).style.color = "green"
// DOM对象 ---> JQ对象 直接$(DOM对象 | DOM对象列表)
let a = document.querySelectorAll("#wrap a")
console.log( $(a) ); // 直接传入a，返回JQ对象
2、jq的属性API
jq 的技巧：
- 所有的返回值都可用有返回值的函数代替
- 所有的API都是有参数时为设置；无参数值为获取
- 都可用键值对的方式去设置
// 可简化
let $wrap = $("#wrap") // 一般用$开头，表明是JQ对象，在获取方面看，可节约时间
/**
* API 1： attr 操作自定义标签属性
* 参数 （“属性名”，“属性值”）
* API 2: removeAttr 移除自定义标签属性
* API 3: prop | removeProp 操作合法标签属性,一个参数为获取
* API 4: addClass | removeClass | toggleClass 添加 | 删除 | 添加或删除
* API 5： html | text 解析标签 | 不解析标签
* API 6： val 设置、获取value值，要使用在有value值的标签中
*/
$wrap.attr("name","csdn") // 结果：<div id="wrap" name="csdn"> </div>
// 也可写为
$wrap.attr({ // 键值对形式，值也可用有返回值的函数代替
name : "csdn",
age : 18
})
// 也可写为
$wrap.attr("csdn", ()=>{ // 属性值可用有返回值的函数代替
let x = 10;
let y = 20;
return x+y
})
// attr 获取私有属性值
$wrap.attr("name") // csdn
// removeattr 移除标签属性
$wrap.removeAttr("name")
// prop | removeProp 操作合法标签属性
$wrap.prop("title","name")
$wrap.removeProp("title","name")
$wrapP.addClass("pp")
$wrapP.removeClass("pp")
$wrapP.toggleClass("pp") // 已有的，删除；没有的，添加
$wrap.html("<b>加粗标签</b>")
$wrap.text("<b>加粗标签</b>")
$input.val("请输入内容")
$input.val() // 获取value值
3、jq的CSS API
/**
* API 1： css 设置获取样式
* API 2: offset 设置获取定位属性
* API 3: scrollTop 滚动高
* API 4: width | height 获取设置宽高
* API 5： innerWidth | innerHeight 宽/高+padding
* API 6： outerWidth | outerHeight 宽/高+padding+border
*/
let $wrap = $("#wrap")
$wrap.css("width","10px")
// 等价于
$wrap.css("width",10) // 默认单位为px
$wrap.css("width") // 获取
let $nav = $("#wrap .nav")
$nav.offset() // 获取当前标签的top,left,right,bottom
$nav.offset({ // 设置
top : 10, // 此时标签nav的定位top不一定是10px，jq可自动计算。例如：当样式中设置margin-top为20px，这时nav需要向上移动10px，所以定位为-10px
left : 50
} )
// 设置body的高为2000px,使它获得滚动高
let $html = $("html,body") // 谷歌使用时要加上body，不然可能无效，之前获取时也为document.body.scrollTop
$html.scrollTop(200) // 自动跳到高为200px的地方，但浏览器默认回到上次离开的地方，所以可能不明显
$wrap.css("width") // 带单位
$wrap.width() // 不带单位，若样式设置为百分比，也会自动计算
$wrap.width( 200 ) // 设置宽度为200px
$wrap.innerWidth() // 获取宽+padding
$wrap.innerWidth( 200 ) // 设置宽度，会自动计算，减去padding值
$wrap.outerHeight() // 获取高+padding+border
$wrap.outerHeight( 200 ) // 设置高度，会自动计算，减去padding值、border值
4、jq的筛选
/**
* 1: eq
*/
$wrapP.eq(0).css("color","red") // 选择第一个
$wrapP.eq(-1).css("color", "pink") // 选择倒数第一个
/**
* 2: hasClass 判断是否有class名，返回值为布尔值
*/
$wrap.hasClass("csdn"); // 判断是否有class名为csdn的标签
/**
* 3: filter 过滤
*/
$p
.css("font-weight", "bolder")
.filter(".aa") // 过滤出class为aa的标签
.css("color","red")
/**
* 4: not 筛选不满足条件的标签
*/
$p
.css("font-weight", "bolder")
.not(".aa") // 过滤出class不为aa的标签
.css("color","red")
/**
* 5: children 获取指定对象的所有孩子，并将其放到一个jq对象中
*/
$wrap.children()
/**
* 6: parent 获取指定对象的父亲，并将其放到一个jq对象中
* parents 获取指定对象所有父级，并将其放到一个jq对象中
* offsetParent
*/
$wrap.parent()
$wrap.parents("html") // 筛选只满足html选择器的父级
$wrap.offsetParent() // html
/**
* 7: find 从所有后代中筛选符合条件的标签
*/
$wrap.find(".aa")
/**
* 8: siblings 同级兄弟筛选
*/
$("ul li").click( function () { // 点击li标签时，被点击的变蓝，其他变黑
$(this).css("color", "blue")
.siblings()
.css("color", "black")
})
/**
* 9: addBack jq对象变为上一层和当前这层
*/
$wrap.css("background-color","blue")
.find("p") // 此处的jq对象是p
.css("color","green")
.addBack() // 此处的jq对象是wrap和p
.css("margin", "10px")
/**
* 10: end 返回上一层
*/
$wrap.css("background-color","blue")
.find("p") // 此处的jq对象是p
.css("color","green")
.end() // 此处的jq对象是wrap
.css("margin", "10px")
5、jq的链式操作
let $wrap = $("#wrap")
$wrap.html("<p>哇哈哈哈</p>")
.css("background-color", "blue")
.addClass("yahou")
......// 只要返回值为jq对象，可一直链式操作下去，一般不是获取操作的返回值都是jq对象
6、jq文档处理的API
/**
* API 1: append()参数： (无获取功能)
* -普通字符串
* -带标签的字符串，可解析
* -DOM对象(已存在，移动位置)
* -JQ对象(已存在，移动位置)
*/
$wrap.append( document.createElement("a") ) // 不影响已有元素
$wrap.append( $("<b>加粗</b>") ) // 添加jq对象，一般是let $b = $("<b>加粗</b>")
/**
* API 2: appendTo 只有JQ对象才能appendTo
*/
$b.appendTo( $wrap )
/**
* API 3: prepend 往前面加
* prependTo
*/
$wrap.prepend($b)
/**
* API 4: insertBefore 要插入的jq对象.insertBefore("已存在页面中的jq对象")
* insertAfter 要插入的jq对象.insertAfter("已存在页面中的jq对象")
*
*/
$b.insertBefore($p);
$p.insertAfter($b);
/**
* API 5: empty 杀掉孩子
* remove 杀掉自己和孩子
*/
$wrap.empty() // 清除子级
$wrap.remove() // 清除自己
/**
* API 6: clone 克隆复制
*/
$wrap.append( $p.clone() ) // 只克隆结构，但不克隆事件
$wrap.append( $p.clone(true) ) // 克隆结构和事件
7、jq事件(都为DOM二级事件)
// 事件1： click
$wrap.click(function (){
console.log(this); // 此处指向的是DOM对象
console.log($(this)); // jq对象
})
// 事件2： hover 是mouseenter和mouseleave的组合,一个函数时，代表两个事件共用一个函数
$wrap.hover(function (){
console.log("enter");
}, function (){
console.log("leave");
})
// 补充内容：事件委托
// 原始代码。有多少个p标签，执行多少次
let op = document.querySelectorAll("p");
op.forEach(n =>{
n.onclick = fucntion() {
alert(this.innerText);
}
})
// 1、DOM事件委托代码
let owrap = document.getElementById("wrap")
owrap.onclick = function(e){ // 将事件委托给父级，事件冒泡，点击p，冒泡到wrap
alert(e.target.innerText) // e.target代表触发这个事件的最底层标签
}
// 2、on事件委托代码
$wrap.on("click", "p", function(){
console.log($(this).text()); // this指向子元素p
})
// 事件3：on
// 事件4：off
$wrap.on("click", function(){
alert("添加事件")
})
$wrap.on({ // 一次性添加多个事件
clcik(){
console.log("触发点击事件");
},
mouseenter(){
console.log("触发enter事件");
}
})
// 为一个标签添加多个相同事件
$wrap.click(function (){
console.log(1);
})
$wrap.on("click", function(){
console.log(2);
})
// 取消所有click事件
$wrap.off("click")
// 取消一个click事件,为事件加名字
$wrap.on({
"click.aa" : function(){},
"click.bb" : function(){}
})
$wrap.off("click.aa")
// 事件5： one 触发一次
$wrap.one("click",function(){
console.log("触发了，就没了");
})
8、index
let $wrapP = $("#wrap p")
$wrapP.click(function(){
console.log($(this).index()); // 获取子标签在父级的所有子元素中的序号
console.log($(this).index("#wrap p")); // 指定选择器
})
9、特效
/**
* hide() 隐藏,改变宽高
* show() 显示
* toggle() 显示或隐藏 最终结果为display none或block
*/
$wrap.hide() // 瞬间
$wrap.show()
$wrap.hide(3000) // 逐渐消失，动画
/**
* fadeIn 淡入，默认300ms，改变opacity
* fadeOut 淡出
* fadeToggle 淡入或淡出 最终结果为display none或block
* fadeTo 指定opacity值
*/
$wrap.fadeIn()
$wrap.fadeTo(3000,0.5) // 3000ms内将透明度变为0.5
/**
* slideUp 向上收起
* slideDown 向下显示
* slideToggle 向上或向下 最终结果为display none或block
*/
$wrap.slideDown()
// 动画API animate，同时执行,颜色无动画
$wrap.animate({
width : 400,
top : 300
},3000)
// 分开写时，队列效应，哪个在前，哪个先执行
$wrap.animate({
width : 400
},3000)
$wrap.animate({
top : 300
},3000)
$("#wrap ul li").hover(function(){
$(this).find("div").slideDown(500) // 此时因为队列，会出现鼠标离开后，还保留大量slidedown未执行，所以一直在执行，可用stop停止，加新队列之前，先清空队列
$(this).find("div").stop.slideDown(500)
},function(){
$(this).find("div").slideDown(500)
$(this).find("div").stop.slideDown(500)
})
// 手动队列
// 只有动画有队列，不是动画瞬间执行
// 原代码
$wrap.animate({ //第二个执行
width : 300
},1000)
$wrap.css("backgroundColor", "red") // 第一个执行
$wrap.animate({ // 第三个执行
height : 300
},1000)
// 手动队列代码一:添加回调函数，回调函数内可加动画
$wrap.animate({
width : 300
},1000,function(){
$(this).css("backgroundColor", "red")
})
.animate({
height : 300
},1000)
// 手动队列代码二：queue()
$wrap.animate({
width :300
},1000)
.queue(function(){ // 不知什么时候停止，所以需要设置手动退出队列
$(this).css("backgroundColor", "red")
$(this).dequeue() // 手动退出队列
})
.delay(1000) // 延迟，只有队列中有延迟
.animate({
height : 300
},1000)
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
