当前位置: 首页 > article >正文

四、jQuery笔记

(一)jQuery概述


  • jQuery本身是js的一个轻量级的库,封装了一个对象jQuery,jquery的所有语法都在jQuery对象中

  • 浏览器不认识jquery,只渲染html、css和js代码,需要先导入jQuery文件,官网下载即可

  • jQuery中文说明文档:https://hemin.cn/jq/


(二)jQuery要点


1、jQuery对象 

  • 通过jQuery包装DOM对象后产生的对象。
  • jQuery对象用$符号表示
  • 给jQuery对象命名引用时,通常标识符前面加个$符,与DOM对象的引用区分开来
  • jQuery代码和js代码可以混着用,比如绑定事件处理函数仍旧可以用js的几种方式,只是js对象调用DOM方法和属性,jQuery对象也调用自己的方法
  • DOM对象和jQuery对象可以互相转换:
    • 用$符号把DOM对象括起来就变成了jQuery对象,如:$(this)
    • jQuery加上[0]就变成了DOM对象,如:$("p")[0]

2、jQuery的语法 

可以概括为$(selector).action()的形式,

2.1 selector

选择器和筛选器:

  • id选择器拿到的是唯一的标签对象;
  • 其他选择器得到的是标签对象数组;
  • jquery会自动循环处理每个元素,不用自己再写循环语句一个个处理
(1)基本选择器 

基本格式:$("css-selector") 

(1.1)通用选择器
$("*").css("color", "green")
(1.2)id选择器
$("#jquery").css("color", "red")
(1.3)class选择器
$(".hl").css("color", "gold")
(1.5)标签选择器
$("div").css("color", "black")
(1.6)并列多选选择器
$(".hl,div").css("color", "gold")
(2)层级选择器
(2.1)后代选择器 
$(".hl div").css("color", "red")
(2.2)子代选择器 
$(".hl>div").css("color", "red")
(2.3)毗邻选择器(下面紧挨着的兄弟标签)
$(".hl+p").css("color", "blue")
(2.4)下方兄弟选择器(不用紧挨着)
$(".hl~p").css("color", "red")
(3)属性选择器
$("[name]").css("color", "red")
$("[name='789']").css("color", "blue")
$("[name='789'][alex='111']").css("color", "red")
(4)表单选择器(只有inpput的type属性才行)
$(":text").css("color", "blue")
(5)基本筛选器
(5.1)first:第一个
$(".hl~p:first").css("color", "gold")
(5.2)last:最后一个
$(".hl~p:last").css("color", "gold")
(5.3)eq(index):指定索引序号
$(".hl~p:eq(0)").css("color", "gold")
(5.4)even:奇数行
$(".hl~p:even").css("color", "gold")
(5.5)odd:偶数行
$(".hl~p:odd").css("color", "gold")
(5.6)gt(index):大于指定索引序号
$(".hl~p:gt(0)").css("color", "gray")
(5.7)lt(index):小于指定索引序号
$(".hl~p:lt(2)").css("color", "gray")
(6)过滤筛选器
$(".hl~p").eq(0).css("color", "gold") //筛选任意一个.eq(index)
$(".hl~p").first().css("color", "gray") //筛选第一个.first()
$(".hl~p").last().css("color", "gray") //筛选最后一个.last()
$(".hl~p").even().css("color", "red") //筛选奇数行的标签.even()
$(".hl~p").odd().css("color", "blue") //筛选偶数行的标签.odd()
console.log($(".hl~p").hasClass("456") ) //判断标签是否有这个class属性,返回boolean值
(7)查找筛选器
//7.1只找子代元素children(selector)
$("#jquery").children("p").css("color", "blue")
//7.2找后代元素find(selector)
$("#jquery").find("p").css("color", "blue")
//7.3找下面的元素next()
$("li").next().css("color", "blue") //查找第二个及往后的li标签
$("li").eq(0).next().css("color", "blue") //查找第几个li标签的下一个的li标签
//7.4找下面的元素nextAll()
$("li").nextAll().css("color", "red") //查找第二个及往后的li标签
$("li").eq(1).nextAll().css("color", "red") //查找第几个li标签的下面所有li标签
//7.5找下面的元素nextUntil()
$("li").nextUntil(".liend").css("color", "gold")//查找终止标签(不包含)上面除了第一个的li标签和下面所有的li标签
$("li").eq(0).nextUntil(".liend").css("color", "gold")//查找第几个li标签的下面到终止标签(不包含)的li标签
//7.6找上面面的元素prev()
$("li").prev().css("color", "blue") //查找除了最后一个的li标签
$("li").eq(2).prev().css("color", "blue") //查找第几个li标签的上一个的li标签
//7.7找上面的元素prevAll()
$("li").prevAll().css("color", "red") //查找除了最后一个的li标签
$("li").eq(3).prevAll().css("color", "red") //查找第几个li标签的上面所有li标签
//7.8找上面的元素prevUntil()
$("li").prevUntil(".liend").css("color", "gold")//查找终止标签(不包含)上面所有的li标签和下面除了最后一个的li标签
$("li").eq(7).prevUntil(".liend").css("color", "gold")//查找第几个li标签的上面到终止标签(不包含)的li标签
//7.9查找父级标签parent
$("#parents p").parent().css("color", "red")
//7.9查找所有祖宗标签parents
$("#parents p").parents().css("color", "red")
//7.9查找区间祖辈标签parentUntil
$("#parents p").parentsUntil().css("color", "black") // 不写参数,类同parents()
$("#parents p").parentsUntil("#parents").css("color", "black") // 查找所有终止祖辈下面的祖辈标签
//7.10查找兄弟标签
$("ul").siblings().css("color", "black")
(8)练习-左侧菜单
<body><div style="clear: both">练习-左侧菜单:<br><div class="outer2"><div class="menu"><div class="item"><div class="title" onclick="f1(this)">菜单一</div><div class="con"><div>111</div><div>111</div><div>111</div></div></div><div class="item"><div class="title" onclick="f1(this)">菜单二</div><div class="con hide"><div>222</div><div>222</div><div>222</div></div></div><div class="item"><div class="title" onclick="f1(this)">菜单三</div><div class="con hide"><div>333</div><div>333</div><div>333</div></div></div></div><div class="content"></div></div></div>
</body>function f1(self) {$(self).next().removeClass("hide");$(self).parent().siblings().children(".con").addClass("hide");
}
 

2.2 action() 

jQuery操作属性的方法 

(1)标签属性类
// 获取属性值
console.log($(".attr1 .a1").attr("class")) 
//设置属性值,不适用设置input标签的checked属性,因为不默认选中(手动勾选)是undefined,默认选中是cheched
$(".attr1 .a1").attr("class", "a2") 
// 删除属性
$(".attr1 .a1").removeAttr("class") 
//获取固有属性值,不适用自定义属性,因为prop找不到,获取到的是undefined,但适用input标签的checked属性,因为其值是true或false
console.log($(".attr1 .a2").prop("class")) 
// 设置固有属性值
$(".attr1 .a2").prop("class", "a3")
// 删除固有属性
$(".attr1 .a3").removeProp("class") 
//对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
//对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
//像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此,需要使用prop方法去操作才能获得正确的结果。
(2)css样式类
// 增加class属性列表的元素
$(".attr1 .a3").addClass("a4")
// 删除class属性列表的元素
$(".attr1 .a4").removeClass("a4")
// 设置css样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});
(3)HTML代码/文本/值 
$(".attr1 .a3").html("456<h1>123</h1>") //相当于js的innerHTML,加参数是替换原本内容
$(".attr1 .a3").text("<p>111</p>") //相当于js的innerText,加参数是替换原本内容为纯文本
$(".attr1 .a3").val() //获取标签的固有属性value,不能获取自定义属性
$(".attr1 input").val("789") // 加上参数是修改固有属性value值
(4)jQuery的循环语句
  • 方式一:

$.each(object[循环的对象,如数组], function(index[, value]){
    代码块
})

  • 方式二:

$("p").each(function(){
    代码块;//每一个标签对象是$(this)
}) 

//1.方式一:
var data={'name':"alex", age:18};
var dl=[1,"a",[12,'b'], data];
$.each(data, function(key, value){console.log("key:", key);   //循环object(字典)第一个参数值是:键keyconsole.log("value:", value);
})
$.each(data, function(key){console.log("key:", key);   //循环object(字典)如果只有一个参数值是:键key
})
$.each(dl,function(index,value){console.log("index:", index);   //循环数组第一个参数值是:索引indexconsole.log("value:", value);
})
$.each(dl,function(index){console.log("index:", index);   //循环数组如果只有一个参数值是:索引index
})
//2.方式二:
$("li").each(function(){console.log("$(this):", $(this));console.log("$(this).html():", $(this).html());
})
(5)练习-正反选
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.3.min.js"></script><script>function selectall(){$("table :checkbox").prop("checked",true)}function cancel(){$("table :checkbox").prop("checked",false)}/*js写法function reverse(){let idlist=$("table :checkbox")for(let i=0;i<idlist.length;i++){let element=idlist[i];let ischecked=$(element).prop("checked")if (ischecked){$(element).prop("checked",false)}else {$(element).prop("checked",true)}}}                *//*jQuery循环方式*/function reverse(){$("table :checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));if ($(this).prop("checked")){$(this).prop("checked",false)}else {$(this).prop("checked",true)}});}</script>
</head>
<body><button onclick="selectall();">全选</button><button onclick="cancel();">取消</button><button onclick="reverse();">反选</button><table border="1"><tr><td><input type="checkbox"></td><td>111</td></tr><tr><td><input type="checkbox"></td><td>222</td></tr><tr><td><input type="checkbox"></td><td>333</td></tr><tr><td><input type="checkbox"></td><td>444</td></tr></table>
</body>
</html>
(6)jQuery支持链式查找

对一个标签对象做完操作后,可以用.继续查找其他标签对象进行操作 

$("p").parent().addClass("hide");
$("p").parent().prev().addClass("hide");
// 可以合并成一行:
$("p").parent().addClass("hide").prev().addClass("hide")
 (7)练习-模态对话框
function show(self){$(self).parent().next().removeClass("hide");
}
function cancel(self){$(self).parent().parent().addClass("hide");
}
(8)文档处理 
    <div class="c1">文档操作<p>ppp</p><button class="bo">add</button><div class="lxclone">练习-复制输入框<div class="item"><button class="bc">+</button><input type="text"></div></div></div>$(".bo").on("click", function(){//1.内部插入:父标签内插入子标签// $(".c1").append("<h1>123</h1>"); // 创建新标签方式一:直接在append()里面写上标签内容var $ele = $("<h1></h1>"); //创建新标签方式二:相当于js中var ele=document.cerateElement("h1");var $ele = $("<h1>"); //简化写法$ele.html("hello word");$ele.css("color", "red");$(".c1").append($ele);//给父标签的子标签最后添加创建的新子标签$ele.appendTo($(".c1"));//把创建的新子标签添加到父标签的子标签最后面$(".c1").prepend($ele);//给父标签的子标签最前面添加创建的新子标签$ele.prependTo($(".c1"));//把创建的新子标签添加到父标签的子标签最前面//2.外部插入:插入兄弟标签$(".c1").after($ele);$(".c1").before($ele);$ele.insertAfter($(".c1"));$ele.insertBefore($(".c1"));//3.替换$(".c1 p").replaceWith($ele);//4.删除与清空$(".c1").empty(); //清空标签的内容,但是标签还在$(".c1").remove(); //删除标签//5.复制var $ele2=$(".c1").clone(); //clone()里写个true就不会复制事件$(".c1").after($ele2);
})
(9)练习-复制输入框
    <div class="c1">文档操作<p>ppp</p><button class="bo">add</button><div class="lxclone">练习-复制输入框<div class="item"><button class="bc">+</button><input type="text"></div></div></div>$(".bc").click(function (){var $cloneObj=$(".lxclone .item").clone(); // 这种方式复制的数量会以2的次方倍增,因为复制出来的也是一个class属性,也会被复制var $cloneObj=$(this).parent().clone(); //应该通过这种方式复制,每次就是复制一个$cloneObj.children(".bc").html("-").attr("onclick", "removeObj(this)");$(".lxclone").append($cloneObj);
});
function removeObj(self){$(self).parent().remove();
}

3、css操作

<div class="cssop">CSS操作<p id="ys">1.样式</p><div id="offsetdiv">2.位置<div class="div1">2.1-offset相对视口偏移量</div><div class="div2">2.2-position相对已定位父级偏移量</div></div><div class="gotop hide" style="position: fixed;right: 20px;bottom: 20px;width: 90px;height: 50px;background-color: gray; color:white;text-align: center;line-height: 50px">返回顶部</div><ul><li>111</li><li>222</li><li>333</li></ul>
</div>

3.1 样式

$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});

 3.2 位置

//2.位置
$("*").css({"padding":"0px", "margin":"0px"});
$("#offsetdiv").css({position:"relative"});
$("#offsetdiv .div1").css({width: "200px", height: "200px", "background-color":"blue"});
$("#offsetdiv .div2").css({width: "200px", height: "200px", margin:"20px", padding:"20px", border:"1px solid red", "background-color":"green"});
//2.1-1offset()得到的是偏移量对象,有top和left两个属性:是相对于视口(窗口)的偏移量
console.log($("#offsetdiv .div1").offset().top)
console.log($("#offsetdiv .div1").offset().left)
console.log($("#offsetdiv .div2").offset().top)
console.log($("#offsetdiv .div2").offset().left)
//2.2-position()得到的是偏移量对象,有top和left两个属性:是相对于已定位的父级标签的偏移量
console.log($("#offsetdiv .div1").position().top)
console.log($("#offsetdiv .div1").position().left)
console.log($("#offsetdiv .div2").position().top)
console.log($("#offsetdiv .div2").position().left)
//2.3-scrollTop放在监听事件才有效
//练习-返回顶部
window.onscroll=function(){if($(window).scrollTop()>100){ //窗口滚动滑轮距离顶部的距离$(".gotop").removeClass("hide")} else {$(".gotop").addClass("hide")}
}
$(".gotop").click(function(){$(window).scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//练习-对标签元素应用scrollTop
// var $btEle=$("<button>");
// $btEle.html("回顶部")
// $btEle.addClass("aftb hide")
// $("#offsetdiv .div2").after($btEle);
$("#offsetdiv .div2").after("<button class='aftb hide'>回顶部</button>");
$("#offsetdiv .div2").html("<h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1>")
$("#offsetdiv .div2").css("overflow", "auto");
$("#offsetdiv .div2").scroll(function (){if($(this).scrollTop()>0){ //窗口滚动滑轮距离顶部的距离$(".aftb").removeClass("hide")} else {$(".aftb").addClass("hide")}
});
$(".aftb").click(function(){$("#offsetdiv .div2").scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//2.4-scrollLeft放在监听事件才有效,(左右滑轮,类似上下滑轮)

3.3 尺寸

console.log($("#offsetdiv .div2").height()) // 获取内容的高度
$("#offsetdiv .div2").height("300px") // 修改内容的高度
console.log($("#offsetdiv .div2").innerHeight()) // 获取内容+内边距padding的高度
console.log($("#offsetdiv .div2").outerHeight()) // 获取内容+内边距padding+边框border的高度
console.log($("#offsetdiv .div2").outerHeight(true)) // 获取内容+内边距padding+边框border+外边距margin的高度
console.log($("#offsetdiv .div2").width()) // 获取内容的宽度
$("#offsetdiv .div2").width("300px") // 修改内容的宽度
console.log($("#offsetdiv .div2").innerWidth()) // 获取内容+内边距padding的宽度
console.log($("#offsetdiv .div2").outerWidth()) // 获取内容+内边距padding+边框border的宽度
console.log($("#offsetdiv .div2").outerWidth(true)) // 获取内容+内边距padding+边框border+外边距margin的宽度

3.4 索引

$("ul li").index(); //获取标签集合的索引

相关文章:

四、jQuery笔记

(一)jQuery概述 jQuery本身是js的一个轻量级的库,封装了一个对象jQuery,jquery的所有语法都在jQuery对象中 浏览器不认识jquery,只渲染html、css和js代码,需要先导入jQuery文件,官网下载即可 jQuery中文说明文档:https://hemin.cn/jq/ (二)jQuery要点 1、jQuery对象 …...

SQL进阶实战技巧:如何构建用户行为转移概率矩阵,深入洞察会话内活动流转?

目录 1 场景描述 1.1 用户行为转移概率矩阵概念 1.2 用户行为转移概率矩阵构建方法 (1) 数据收集...

TCP/IP 协议:互联网通信的基石

TCP/IP 协议:互联网通信的基石 引言 TCP/IP协议,全称为传输控制协议/互联网协议,是互联网上应用最为广泛的通信协议。它定义了数据如何在网络上传输,是构建现代互联网的基础。本文将深入探讨TCP/IP协议的原理、结构、应用以及其在互联网通信中的重要性。 TCP/IP 协议概述…...

第25节课:前端缓存策略—提升网页性能与用户体验

目录 前端缓存的重要性HTTP缓存HTTP缓存的基本原理常见的HTTP缓存头Cache-ControlExpiresETagLast-Modified HTTP缓存的类型强缓存协商缓存 服务端渲染与SSR服务端渲染&#xff08;SSR&#xff09;简介SSR的优势SSR的挑战实践&#xff1a;使用SSR框架构建Web应用Next.js安装Nex…...

完美世界C++游戏开发面试题及参考答案

堆栈数据结构有什么区别,举例说明 栈(Stack)和堆(Heap)是两种不同的数据结构,它们在多个方面存在显著区别: 存储方式 栈:栈是一种后进先出(LIFO)的数据结构,它的存储空间是连续的。栈由系统自动分配和释放,用于存储函数调用时的局部变量、函数参数、返回地址等信息…...

LabVIEW无人机航线控制系统

介绍了一种无人机航线控制系统&#xff0c;该系统利用LabVIEW软件与MPU6050九轴传感器相结合&#xff0c;实现无人机飞行高度、速度、俯仰角和滚动角的实时监控。系统通过虚拟仪器技术&#xff0c;有效实现了数据的采集、处理及回放&#xff0c;极大提高了无人机航线的控制精度…...

AtCoder Beginner Contest 391(ABCDE)

A - Lucky Direction 翻译&#xff1a; 给你一个字符串 D&#xff0c;代表八个方向&#xff08;北、东、西、南、东北、西北、东南、西南&#xff09;之一。方向与其代表字符串之间的对应关系如下。 北&#xff1a; N东&#xff1a; E西&#xff1a; W南&#xff1a; S东…...

MINIRAG: TOWARDS EXTREMELY SIMPLE RETRIEVAL-AUGMENTED GENERATION论文翻译

感谢阅读 注意不含评估以后的翻译原论文地址标题以及摘要介绍部分MiniRAG 框架2.1 HETEROGENEOUS GRAPH INDEXING WITH SMALL LANGUAGE MODELS2.2 LIGHTWEIGHT GRAPH-BASED KNOWLEDGE RETRIEVAL2.2.1 QUERY SEMANTIC MAPPING2.2.2 TOPOLOGY-ENHANCED GRAPH RETRIEVAL 注意不含评…...

HTB:LinkVortex[WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用gobuster对靶机进行路径FUZZ 使用ffuf堆靶机…...

3D图形学与可视化大屏:什么是材质属性,有什么作用?

一、颜色属性 漫反射颜色 漫反射颜色决定了物体表面对入射光进行漫反射后的颜色。当光线照射到物体表面时&#xff0c;一部分光被均匀地向各个方向散射&#xff0c;形成漫反射。漫反射颜色的选择会直接影响物体在光照下的外观。例如&#xff0c;一个红色的漫反射颜色会使物体在…...

什么是门控循环单元?

一、概念 门控循环单元&#xff08;Gated Recurrent Unit&#xff0c;GRU&#xff09;是一种改进的循环神经网络&#xff08;RNN&#xff09;&#xff0c;由Cho等人在2014年提出。GRU是LSTM的简化版本&#xff0c;通过减少门的数量和简化结构&#xff0c;保留了LSTM的长时间依赖…...

基于微信小程序的酒店管理系统设计与实现(源码+数据库+文档)

酒店管理小程序目录 目录 基于微信小程序的酒店管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员模块的实现 (1) 用户信息管理 (2) 酒店管理员管理 (3) 房间信息管理 2、小程序序会员模块的实现 &#xff08;1&#xff09;系统首页 &#xff…...

Python-基于PyQt5,pdf2docx,pathlib的PDF转Word工具

前言:日常生活中,我们常常会跟WPS Office打交道。作表格,写报告,写PPT......可以说,我们的生活已经离不开WPS Office了。与此同时,我们在这个过程中也会遇到各种各样的技术阻碍,例如部分软件的PDF转Word需要收取额外费用等。那么,可不可以自己开发一个小工具来实现PDF转…...

Java-数据结构-优先级队列(堆)

一、优先级队列 ① 什么是优先级队列&#xff1f; 在此之前&#xff0c;我们已经学习过了"队列"的相关知识&#xff0c;我们知道"队列"是一种"先进先出"的数据结构&#xff0c;我们还学习过"栈"&#xff0c;是"后进先出"的…...

爬虫基础(四)线程 和 进程 及相关知识点

目录 一、线程和进程 &#xff08;1&#xff09;进程 &#xff08;2&#xff09;线程 &#xff08;3&#xff09;区别 二、串行、并发、并行 &#xff08;1&#xff09;串行 &#xff08;2&#xff09;并行 &#xff08;3&#xff09;并发 三、爬虫中的线程和进程 &am…...

C语言初阶力扣刷题——349. 两个数组的交集【难度:简单】

1. 题目描述 力扣在线OJ题目 给定两个数组&#xff0c;编写一个函数来计算它们的交集。 示例&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[2] 输入&#xff1a;nums1 [4,9,5], nums2 [9,4,9,8,4] 输出&#xff1a;[9,4] 2. 思路 直接暴力…...

Tailwind CSS - Tailwind CSS 引入(安装、初始化、配置、引入、构建、使用 Tailwind CSS)

一、Tailwind CSS 概述 Tailwind CSS 是一个功能优先的 CSS 框架&#xff0c;它提供了大量的实用类&#xff08;utility classes&#xff09;&#xff0c;允许开发者通过组合这些类来快速构建用户界面 Tailwind CSS 与传统的 CSS 框架不同&#xff08;例如&#xff0c;Bootstr…...

Sqoop导入MySQL中含有回车换行符的数据

个人博客地址&#xff1a;Sqoop导入MySQL中含有回车换行符的数据 MySQL中的数据如下图&#xff1a; 检查HDFS上的目标文件内容可以看出&#xff0c;回车换行符位置的数据被截断了&#xff0c;导致数据列错位。 Sqoop提供了配置参数&#xff0c;在导入时丢弃掉数据的分隔符&…...

LightM-UNet(2024 CVPR)

论文标题LightM-UNet: Mamba Assists in Lightweight UNet for Medical Image Segmentation论文作者Weibin Liao, Yinghao Zhu, Xinyuan Wang, Chengwei Pan, Yasha Wang and Liantao Ma发表日期2024年01月01日GB引用> Weibin Liao, Yinghao Zhu, Xinyuan Wang, et al. Ligh…...

stm32硬件实现与w25qxx通信

使用的型号为stm32f103c8t6与w25q64。 STM32CubeMX配置与引脚衔接 根据stm32f103c8t6引脚手册&#xff0c;采用B12-B15四个引脚与W25Q64连接&#xff0c;实现SPI通信。 W25Q64SCK&#xff08;CLK&#xff09;PB13MOSI&#xff08;DI&#xff09;PB15MISO(DO)PB14CS&#xff08…...

FPGA 使用 CLOCK_DEDICATED_ROUTE 约束

使用 CLOCK_DEDICATED_ROUTE 约束 CLOCK_DEDICATED_ROUTE 约束通常在从一个时钟区域中的时钟缓存驱动到另一个时钟区域中的 MMCM 或 PLL 时使 用。默认情况下&#xff0c; CLOCK_DEDICATED_ROUTE 约束设置为 TRUE &#xff0c;并且缓存 /MMCM 或 PLL 对必须布局在相同…...

一个开源 GenBI AI 本地代理(确保本地数据安全),使数据驱动型团队能够与其数据进行互动,生成文本到 SQL、图表、电子表格、报告和 BI

一、GenBI AI 代理介绍&#xff08;文末提供下载&#xff09; github地址&#xff1a;https://github.com/Canner/WrenAI 本文信息图片均来源于github作者主页 在 Wren AI&#xff0c;我们的使命是通过生成式商业智能 &#xff08;GenBI&#xff09; 使组织能够无缝访问数据&…...

C动态库的生成与在Python和QT中的调用方法

目录 一、动态库生成 1&#xff09;C语言生成动态库 2&#xff09;c类生成动态库 二、动态库调用 1&#xff09;Python调用DLL 2&#xff09;QT调用DLL 三、存在的一些问题 1&#xff09;python调用封装了类的DLL可能调用不成功 2&#xff09;DLL格式不匹配的问题 四、…...

C++ Primer 自定义数据结构

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…...

解析 Oracle 中的 ALL_SYNONYMS 和 ALL_VIEWS 视图:查找同义词与视图的基础操作

目录 前言1. ALL_SYNONYMS 视图2. ALL_VIEWS 视图3. 扩展 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 1. ALL_SYNONYMS 视图 在 Oracle 数据库中&#xff0c;同义词&#xff08;Synonym&#xff09;是对数…...

PyTorch框架——基于深度学习YOLOv8神经网络学生课堂行为检测识别系统

基于YOLOv8深度学习的学生课堂行为检测识别系统&#xff0c;其能识别三种学生课堂行为&#xff1a;names: [举手, 读书, 写字] 具体图片见如下&#xff1a; 第一步&#xff1a;YOLOv8介绍 YOLOv8 是 ultralytics 公司在 2023 年 1月 10 号开源的 YOLOv5 的下一个重大更新版本…...

深入探索 Vue 3 Markdown 编辑器:高级功能与实现

目录 1. 为什么选择 Markdown 编辑器&#xff1f;2. 选择合适的 Markdown 编辑器3. 安装与基本配置安装 配置 Markdown 编辑器代码说明 4. 高级功能实现4.1 实时预览与双向绑定4.2 插入图片和图像上传安装图像上传插件配置图像上传插件 4.3 数学公式支持安装 KaTeX配置 KaTeX 插…...

7.攻防世界fileclude

题目描述 进入题目页面如下 看到题目提示应该为文件包含漏洞 解释上述代码 // 输出提示信息&#xff1a;错误的方式&#xff01; WRONG WAY! <?php // 包含名为 "flag.php" 的文件&#xff0c;通常这个文件里可能包含重要的敏感信息&#xff0c;如 flag inclu…...

【自然语言处理(NLP)】深度学习架构:Transformer 原理及代码实现

文章目录 介绍Transformer核心组件架构图编码器&#xff08;Encoder&#xff09;解码器&#xff08;Decoder&#xff09; 优点应用代码实现导包基于位置的前馈网络残差连接后进行层规范化编码器 Block编码器解码器 Block解码器训练预测 个人主页&#xff1a;道友老李 欢迎加入社…...

【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(二)

目录 1 -> HML语法 1.1 -> 页面结构 1.2 -> 数据绑定 1.3 -> 普通事件绑定 1.4 -> 冒泡事件绑定5 1.5 -> 捕获事件绑定5 1.6 -> 列表渲染 1.7 -> 条件渲染 1.8 -> 逻辑控制块 1.9 -> 模板引用 2 -> CSS语法 2.1 -> 尺寸单位 …...