JavaWeb系列三: JavaScript学习 下

文章目录

  • js数组
    • 定义方式
    • 数组遍历
  • js函数
    • 函数入门
    • 函数使用方式
      • 使用方式一
      • 使用方式二
    • 函数注意事项
    • 函数练习题
  • 定义对象
    • 使用object定义
    • 使用{}定义
  • 事件
    • onload事件
    • onclick事件
    • 失去焦点事件
    • 内容发生改变事件
    • 表单提交事件
      • 静态注册
      • 动态注册
      • 表单作业
  • dom对象
  • 文档对象模型
  • document对象
    • 应用实例一
    • 应用实例二
    • 应用示例三
    • 应用案例四
  • DOM节点
    • 节点常用方法
      • 通过id获取节点
      • 获取所有option节点
      • 通过name获取节点
      • 查找id=language下所有li节点
      • 获取指定dom对象的所有子节点
      • 获取第一个子节点
      • 获取父节点
      • 获取前后兄弟节点
      • 设置文本域内容
  • js dom 乌龟吃鸡游戏
    • 静态注册实现

在这里插入图片描述

js数组

定义方式

array_define.html
在这里插入图片描述
在这里插入图片描述

数组遍历

traversal-array.html
在这里插入图片描述

js函数

函数入门

simple_function.html
在这里插入图片描述

函数使用方式

使用方式一

1.function-use.html
在这里插入图片描述

使用方式二

2.function-use.html
在这里插入图片描述

函数注意事项

function-detail.html
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

函数练习题

function-exercise.html
在这里插入图片描述

定义对象

使用object定义

1.object_difine.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义对象</title><script type="text/javascript">//自定义对象的方式一//person是一个空对象, 没有自定义的函数和属性var person = new Object();//built-inconsole.log("person类型 = " + typeof(person));//object//增加一个属性nameperson.name = "赵志伟";//增加一个属性ageperson.age = 22;//增加一个函数person.hi = function () {//这里的this就是当前的personconsole.log("person的信息 " + this.name + " " + this.age);}//访问属性console.log("name=" + person.name);//访问方法person.hi();//小细节,如果没有定义某个属性,直接使用,就会出现:变量提升(专业术语),显示undefinedconsole.log(person.email);//undefined//方法不能提升person.say();</script>
</head>
<body></body>
</html>

使用{}定义

2.function_define.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>z自定义对象方法2: {} 形式</title><script type="text/javascript">//演示自定义对象方法2: {} 形式var person = {name: "赵志伟",//多个属性之间使用,隔开age: 23,hi: function () {console.log("person信息 = " + this.name + this.age);},sum: function (n1, n2) {return n1 + n2;}}//使用console.log("person.name=" + person.name + ", person.age=" + person.age);person.hi();console.log("sum=" + person.sum(1, 2));</script>
</head>
<body>
</body>
</html>

事件

在这里插入图片描述

  1. 事件的注册(绑定)
    事件注册(绑定),当事件响应(触发)后要浏览器执行哪些操作代码,叫做事件注册或事件绑定;
  2. 静态注册事件
    通过html标签的事件属性直接赋予事件响应后的代码,这种方式叫做静态注册;
  3. 动态注册事件(dom)
    通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function () {} 这种形式叫做动态注册
    步骤:(1)获取标签对象dom对象; (2)标签对象.事件名 = function() {}

onload事件

onload.html
在这里插入图片描述

onclick事件

onclick.html在这里插入图片描述

失去焦点事件

onblur.html
在这里插入图片描述

内容发生改变事件

onchange.html
在这里插入图片描述
在这里插入图片描述

表单提交事件

静态注册

onsubmit.html
在这里插入图片描述

动态注册

onsubmit1.html
在这里插入图片描述
在这里插入图片描述

表单作业

onsubmit-作业.html
在这里插入图片描述
在这里插入图片描述

dom对象

  1. DOM 全称是 Document Object Model 文档对象模型;
  2. 就是将文档中的标签, 属性, 文本转换成对象来管理;
    在这里插入图片描述

文档对象模型

  1. 当网页被加载时, 浏览器会创建页面的文档对象模型(Document Object Model)
  2. html dom 树

document对象

  1. document 它管理了所有的HTML 文档内容;
  2. document 它是一种树结构的文档;
  3. 有层级关系, 在 dom中把所有的标签都 对象化;
  4. 通过document 可以访问所有的标签对象;

应用实例一

getElementById.html
在这里插入图片描述

应用实例二

1.静态注册

getElementsByName.html

在这里插入图片描述
在这里插入图片描述
2.动态注册
getElementsByName-动态注册.html
在这里插入图片描述
在这里插入图片描述

应用示例三

getElementsByTagName.html
在这里插入图片描述

  • 升级版:做到猫狗切换

思路:根据value值判断选择具体的执行方法
在这里插入图片描述

应用案例四

createElements.html
在这里插入图片描述

DOM节点

在HTML DOM(文档对象模型)中,每个部分都是节点

  1. 文档 本身是文档节点;
  2. 所有 HTML元素 是元素节点;
  3. 所有 HTML属性 是属性节点;
  4. HTML元素内的 文本 是文本节点;
  5. 注释是 注释 节点;

节点常用方法

通过id获取节点

html-dom-01.html
在这里插入图片描述

获取所有option节点

html-dom02.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//动态注册window.onload = function () {//查找所有option节点var btn02 = document.getElementById("btn02");btn02.onclick = function () {//id --> getElementById()//name --> getElementsByName()//元素标签 --> getElementsByTagName()var options = document.getElementsByTagName("option");//HTMLCollectionfor (var i = 0; i < options.length; i++) {alert("options[" + (i + 1) + "] = " + options[i].innerText);}};};</script>
</head>
<body>
<div><div><p>你当前的女友是谁:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋枫</option><option>冬梅</option></select></div>
</div>
<div id="btnList"><div><button id="btn02">查找所有option节点</button></div>
</div>
</body>
</html>

通过name获取节点

html-dom03.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//动态注册window.onload = function () {//查找name=sport节点var btn03 = document.getElementById("btn03");btn03.onclick = function () {var sports = document.getElementsByName("sport");// alert(sports);//NodeListfor (var i = 0; i < sports.length; i++) {if (sports[i].checked) {alert("运动是 = " + sports[i].value);}}};}</script>
</head>
<body>
<div><div><p>你喜欢的运动项目:</p><input type="checkbox" name="sport" value="soccer" checked="checked"/>足球<input type="checkbox" name="sport" value="basketball" checked="checked"/>蓝球<input type="checkbox" name="sport" value="pingPang" checked="checked"/>乒乓球</div>
</div>
<div id="btnList"><div><button id="btn03">查找name=sport节点</button></div>
</div>
</body>
</html>

查找id=language下所有li节点

html-dom04.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//动态注册window.onload = function () {//查找id=language下所有li节点var btn04 = document.getElementById("btn04");btn04.onclick = function () {var lis = document.getElementById("language").getElementsByTagName("li");// alert("lis=" + lis);//HTMLCollectionfor (var i = 0; i < lis.length; i++) {alert("lis[" + (i + 1) + "] = " + lis[i].innerText);}};};</script>
</head>
<body>
<div><div><p>你的编程语言:</p><ul id="language"><li id="java">Java</li><li>Python</li><li>Go语言</li></ul></div>
</div>
<div id="btnList"><div><button id="btn04">查找id=language下所有li节点</button></div>
</div>
</body>
</html>

获取指定dom对象的所有子节点

html-dom05.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//动态注册window.onload = function () {//返回id=sel01的所有子节点var btn05 = document.getElementById("btn05");btn05.onclick = function () {//var options = document.getElementById("sel01").getElementsByTagName("option");//alert(options.length);//5 不算换行符//1. 如果使用document.getElementById("sel01").childNodes; 获取的是[object Text],[object HTMLOptionElement]//2. 如果不希望得到 text对象, 需要将所有的内容放在一行var childNodes = document.getElementById("sel01").childNodes;//alert(childNodes);//NodeList//alert(childNodes.length);//11, 加上文本, 在这里换行符属于文本[object Text]for (var i = 0; i < childNodes.length; i++) {//alert(childNodes[i]);//HTMLOptionElementif (childNodes[i].innerText != undefined && childNodes[i].selected) {alert("女友有 = " + childNodes[i].innerText);}}alert("===============还有一个方法===============");//1.sel01 是 HTMLSelectElement => 本身具有集合的特点var sel01 = document.getElementById("sel01");alert(sel01);//HTMLSelectElementalert(sel01[0]);//HTMLOptionElementfor (var i = 0; i < sel01.length; i++) {alert("sel01[" + (i + 1) + "] = " + sel01[i].innerText);}};};</script>
</head>
<body>
<div><div><p>你当前的女友是谁:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋枫</option><option>冬梅</option></select></div>
</div>
<div id="btnList"><div><button id="btn05">返回id=sel01的所有子节点</button></div>
</div>
</body>
</html>

获取第一个子节点

html-dom06.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//动态注册window.onload = function () {//返回id=sel01 的第一个子节点var btn06 = document.getElementById("btn06");btn06.onclick = function () {var sel01 = document.getElementById("sel01");var childNodes = sel01.childNodes;alert(childNodes[0]);//object Textvar firstChild = sel01.firstChild;alert(firstChild);//object Text]alert(sel01[0]);//直接得到第一个option节点 object HTMLOptionElement}};</script>
</head>
<body>
<div><div><p>你当前的女友是谁:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋枫</option><option>冬梅</option></select></div>
</div>
<div id="btnList"><div><button id="btn06">返回id=sel01的第一个子节点</button></div>
</div>
</body>
</html>

获取父节点

html-dom07.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//动态注册window.onload = function () {//返回id=java的父节点var btn07 = document.getElementById("btn07");btn07.onclick = function () {var java = document.getElementById("java");alert(java);//HTMLLIElementvar parentNode = java.parentNode;alert(parentNode);//HTMLUListElementalert(parentNode.innerText);alert(parentNode.innerHTML);//<li id="java">Java</li>var childNodes = parentNode.childNodes;alert(childNodes.length);//7for (var i = 0; i < childNodes.length; i++) {if (childNodes[i].innerText != undefined) {//换行符[文本]也算一个节点alert("childNodes[" + (i + 1) + "] = " + childNodes[i].innerText);}}var parentElement = java.parentElement;alert(parentElement);//HTMLUListElement};}</script>
</head>
<body>
<div><div><p>你的编程语言:</p><ul id="language"><li id="java">Java</li><li>Python</li><li>Go语言</li></ul></div>
</div>
<div id="btnList"><div><button id="btn07">返回id=java的父节点</button></div>
</div>
</body>
</html>

获取前后兄弟节点

html-dom08.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//动态注册window.onload = function () {var btn08 = document.getElementById("btn08");btn08.onclick = function () {var ct = document.getElementById("ct");alert(ct.previousSibling);//Text[换行符]alert(ct.previousSibling.previousSibling);//HtmlOptionElementalert(ct.previousSibling.previousSibling.innerText);//霞燕alert(ct.nextSibling);//Text[换行符]alert(ct.nextSibling.nextSibling);//HTMLOptionElementalert(ct.nextSibling.nextSibling.innerText);//秋枫};};</script>
</head>
<body>
<div><div><p>你当前的女友是谁:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋枫</option><option>冬梅</option></select></div>
</div>
<div id="btnList"><div><button id="btn08">返回id=ct的前后兄弟节点</button></div>
</div>
</body>
</html>

设置文本域内容

html-dom09.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//动态注册window.onload = function () {//设置#person的文本域var btn10 = document.getElementById("btn10");btn10.onclick = function () {var person = document.getElementById("person");person.innerText = "刀剑神域";//设置文本域}};</script>
</head>
<body>
<div><div><p>个人介绍:</p><textarea name="person" id="person">个人介绍</textarea></div>
</div>
<div id="btnList"><div><button id="btn10">设置#person的文本域</button></div>
</div>
</body>
</html>

总代码:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//动态注册window.onload = function () {//查找id=java节点var btn01 = document.getElementById("btn01");//绑定onclick事件btn01.onclick = function () {var java = document.getElementById("java");alert("java节点文本 = " + java.innerText);};//查找所有option节点var btn02 = document.getElementById("btn02");btn02.onclick = function () {//id --> getElementById()//name --> getElementsByName()//元素标签 --> getElementsByTagName()var options = document.getElementsByTagName("option");//HTMLCollectionfor (var i = 0; i < options.length; i++) {alert("options[" + (i + 1) + "] = " + options[i].innerText);}};//查找name=sport节点var btn03 = document.getElementById("btn03");btn03.onclick = function () {var sports = document.getElementsByName("sport");// alert(sports);//NodeListfor (var i = 0; i < sports.length; i++) {if (sports[i].checked) {alert("运动是 = " + sports[i].value);}}}//查找id=language下所有li节点var btn04 = document.getElementById("btn04");btn04.onclick = function () {var lis = document.getElementById("language").getElementsByTagName("li");// alert("lis=" + lis);//HTMLCollectionfor (var i = 0; i < lis.length; i++) {alert("lis[" + (i + 1) + "] = " + lis[i].innerText);}};//返回id=sel01的所有子节点var btn05 = document.getElementById("btn05");btn05.onclick = function () {//var options = document.getElementById("sel01").getElementsByTagName("option");//alert(options.length);//5 不算换行符//1. 如果使用document.getElementById("sel01").childNodes; 获取的是[object Text],[object HTMLOptionElement]//2. 如果不希望得到 text对象, 需要将所有的内容放在一行var childNodes = document.getElementById("sel01").childNodes;//alert(childNodes);//NodeList//alert(childNodes.length);//11, 加上文本, 在这里换行符属于文本[object Text]for (var i = 0; i < childNodes.length; i++) {//alert(childNodes[i]);//HTMLOptionElementif (childNodes[i].innerText != undefined && childNodes[i].selected) {alert("女友有 = " + childNodes[i].innerText);}}alert("===============还有一个方法===============");//1.sel01 是 HTMLSelectElement => 本身具有集合的特点var sel01 = document.getElementById("sel01");alert(sel01);//HTMLSelectElementalert(sel01[0]);//HTMLOptionElementfor (var i = 0; i < sel01.length; i++) {alert("sel01[" + (i + 1) + "] = " + sel01[i].innerText);}};//返回id=sel01 的第一个子节点var btn06 = document.getElementById("btn06");btn06.onclick = function () {var sel01 = document.getElementById("sel01");var childNodes = sel01.childNodes;alert(childNodes[0]);//object Textvar firstChild = sel01.firstChild;alert(firstChild);//object Text]alert(sel01[0]);//直接得到第一个option节点 object HTMLOptionElement}//返回id=java的父节点var btn07 = document.getElementById("btn07");btn07.onclick = function () {var java = document.getElementById("java");alert(java);//HTMLLIElementvar parentNode = java.parentNode;alert(parentNode);//HTMLUListElementalert(parentNode.innerText);alert(parentNode.innerHTML);//<li id="java">Java</li>var childNodes = parentNode.childNodes;alert(childNodes.length);//7for (var i = 0; i < childNodes.length; i++) {if (childNodes[i].innerText != undefined) {//换行符[文本]也算一个节点alert("childNodes[" + (i + 1) + "] = " + childNodes[i].innerText);}}var parentElement = java.parentElement;alert(parentElement);//HTMLUListElement};//返回id=ct的前后兄弟节点var btn08 = document.getElementById("btn08");btn08.onclick = function () {var ct = document.getElementById("ct");alert(ct.previousSibling);//Text[换行符]alert(ct.previousSibling.previousSibling);//HtmlOptionElementalert(ct.previousSibling.previousSibling.innerText);//霞燕alert(ct.nextSibling);//Text[换行符]alert(ct.nextSibling.nextSibling);//HTMLOptionElementalert(ct.nextSibling.nextSibling.innerText);//秋枫};//读取id=ct的value属性值var btn09 = document.getElementById("btn09");btn09.onclick = function () {var ct = document.getElementById("ct");alert(ct.value);ct.innerText = "春桃姑娘";//修改文本域};//设置#person的文本域var btn10 = document.getElementById("btn10");btn10.onclick = function () {var person = document.getElementById("person");person.innerText = "刀剑神域";//设置文本域}};</script>
</head>
<body>
<div><div><p>你喜欢的运动项目:</p><input type="checkbox" name="sport" value="soccer" checked="checked"/>足球<input type="checkbox" name="sport" value="basketball" checked="checked"/>蓝球<input type="checkbox" name="sport" value="pingPang" checked="checked"/>乒乓球<hr/><p>你当前的女友是谁:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋枫</option><option>冬梅</option></select><hr/><p>你的编程语言:</p><ul id="language"><li id="java">Java</li><li>Python</li><li>Go语言</li></ul><br/><br/><hr/><p>个人介绍:</p><textarea name="person" id="person">个人介绍</textarea></div>
</div>
<div id="btnList"><div><button id="btn01">查找id=java节点</button></div><div><button id="btn02">查找所有option节点</button></div><div><button id="btn03">查找name=sport节点</button></div><div><button id="btn04">查找id=language下所有li节点</button></div><div><button id="btn05">返回id=sel01的所有子节点</button></div><div><button id="btn06">返回id=sel01的第一个子节点</button></div><div><button id="btn07">返回id=java的父节点</button></div><div><button id="btn08">返回id=ct的前后兄弟节点</button></div><div><button id="btn09">读取id=ct的value属性值</button></div><div><button id="btn10">设置#person的文本域</button></div>
</div>
</body>
</html>

js dom 乌龟吃鸡游戏

在这里插入图片描述
在这里插入图片描述

静态注册实现

tortoiseGame2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tortoise-hen碰撞游戏</title><script type="text/javascript">//公鸡的坐标var hen_xPos = 200;var hen_yPos = 200;//乌龟图片的宽度和高度var tortoise_width = 94;var tortoise_height = 67;//公鸡图片的宽度和高度var hen_width = 76;var hen_height = 73;function move(obj) {//object HTMLButtonElementvar tortoise = document.getElementById("tortoise");var tortoise_left = tortoise.style.left;//100px 值传递var tortoise_top = tortoise.style.top;//130px  值传递var tortoise_xPos = parseInt(tortoise_left.substring(0, tortoise_left.indexOf("p")));var tortoise_yPos = parseInt(tortoise_top.substring(0, tortoise_top.indexOf("p")));//通过button的 dom对象,获取innerTextswitch (obj.innerText) {case "向上走":tortoise_yPos -= 10;tortoise.style.top =tortoise_yPos + "px";break;case "向下走":tortoise_yPos += 10;tortoise.style.top = tortoise_yPos + 'px';break;case "向左走":tortoise_xPos -= 10;tortoise.style.left = tortoise_xPos + "px";break;case "向右走":tortoise_xPos += 10;tortoise.style.left = tortoise_xPos + "px";break;}//走完之后再判断//4.1 得到乌龟左和公鸡左的距离,纵向距离y// (1)如果乌龟在公鸡上面, 如果纵向距离y < 乌龟图片的高度时, 说明它们可能在纵向发生重叠, 使用 yy 来记录// (2) 吐过乌龟在公鸡下面,如果纵向距离y < 公鸡图片的高度时, 说明它们可能在纵向发生重叠, 使用 yy 来记录// 4.2 得到乌龟和公鸡左上角的距离, 横向距离x// (1)如果乌龟在公鸡左面, 如果横向距离x < 乌龟图片的宽度时, 说明它们可能在横向发生重叠, 使用 xx 来记录// (2)如果乌龟在公鸡右面, 如果横向距离x < 公鸡图片的宽度时, 说明它们可能在横向发生重叠, 使用 xx 来记录var y = Math.abs(tortoise_yPos - hen_yPos);var x = Math.abs(tortoise_xPos - hen_xPos);var yy = 0;//var xx = 0;//默认横向没有重叠if (tortoise_yPos < hen_yPos) {//乌龟在上if (y < tortoise_height) {yy  = 1;}} else {//乌龟在下if (y < hen_height) {yy = 1;}}if (tortoise_xPos < hen_xPos) {//乌龟在左if (x < tortoise_width) {xx = 1;}} else {//乌龟在右if (x < hen_width) {xx = 1;}}if (xx && yy) {//js中 0默认是falsealert("发生碰撞");tortoise.style.left = 100 + "px";tortoise.style.top = 130 + "px";}}</script>
</head>
<body>
<table><tr><td></td><!--1.this表示的是你点击的这个button, 而且已经是一个dom对象3.可以通过dom对象操作属性和方法--><td><button onclick="move(this)">向上走</button><!--静态注册传参 只能用单引号--></td><td></td></tr><tr><td><button onclick="move(this)">向左走</button></td><td></td><td><button onclick="move(this)">向右走</button></td></tr><tr><td></td><td><button onclick="move(this)">向下走</button></td><td></td></tr>
</table>
<img src="./img/1.bmp" id="tortoise" style="position: absolute; left: 100px; top: 130px;" border="1">
<img src="./img/2.bmp" style="position: absolute; left: 200px; top: 200px;" border="1">
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/36292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

边缘计算VNC智能盒子如何助力HMI设备实现二次开发?

HMI&#xff08;Human-Machine Interface&#xff09;又称人机界面&#xff0c;是用户与机器之间交互和通信的媒介。今天带你了解智能盒子如何助力HMI设备实现二次开发&#xff1f; HMI设备被广泛应用在工业自动化中&#xff0c;具有显示设备信息&#xff0c;实时监测&#xf…

python爬虫--scrapy框架

Scrapy 一 介绍 Scrapy简介 1.Scrapy是用纯Python实现一个为了爬取网站数据、提取结构性数据而编写的应用框架&#xff0c;用途非常广泛2.框架的力量&#xff0c;用户只需要定制开发几个模块就可以轻松的实现一个爬虫&#xff0c;用来抓取网页内容以及各种图片&#xff0c;非…

GPT-5对普通人有何影响

这篇文章对ChatGPT的使用方法和提问技巧进行了讨论&#xff0c;重点强调了背景信息和具体提问的重要性。文章清晰地传达了如何提高ChatGPT回答的质量&#xff0c;以及个人在使用ChatGPT时的体会和建议。然而&#xff0c;文章在逻辑组织和表达方面还有一些可以改进的地方&#x…

静态库和动态库

1、编译过程 1.预处理&#xff1a;解释并展开源程序当中的所有的预处理指令&#xff0c;此时生成 *.i 文件。 2.编译&#xff1a;词法和语法的分析&#xff0c;生成对应硬件平台的汇编语言文件&#xff0c;此时生成 *.s 文件。 3.汇编&#xff1a;将汇编语言文件翻译为对应处理…

压缩pdf文件大小的方法,如何压缩pdf格式的大小

pdf太大怎么压缩&#xff1f;当你需要通过电子邮件发送一个PDF文件&#xff0c;却发现文件太大无法成功发出时&#xff0c;这些情况下&#xff0c;我们都需要找到一种方法来压缩PDF文件&#xff0c;以便更便捷地进行分享和传输。PDF文件的大小通常与其中包含的图片、图形和文本…

入门JavaWeb之 Response 下载文件

web 服务器接收到客户端的 http 请求 针对这个请求&#xff0c;分别创建一个代表请求的 HttpServletRequest 对象&#xff0c;代表响应的 HttpServletResponse 对象 获取客户端请求过来的参数&#xff1a;HttpServletRequest 给客户端响应一些信息&#xff1a;HttpServletRe…

面试相关-接口测试常问的问题

1.为什么要做接口测试 (1)现在大多系统都是前后端分离的项目,前端和后端的进度可能不一样,那为了尽早的进入测试,前端界面没有开发完成的情况下,只要后端的接口开发完了,就可以提前做接口测试了; (2)基于安全考虑,只依赖前端进行限制,已经完全不满足系统的安全性…

电商卖家怎么快速采集复制1688全店宝贝到自己店铺?淘/猫/拼/抖都适用!

1688上面的货源品类丰富&#xff0c;很多卖家都是在这里找厂家&#xff0c;当我们找好厂家后&#xff0c;怎么将厂家店铺里所有宝贝都复制到自己店铺呢&#xff1f; 虽然1688平台本身支持铺货到其他平台&#xff0c;但一个个铺货太耗费时间了。 阿里巴巴中国站获得1688商品详…

【AI大模型RAG】深入探索检索增强生成(RAG)技术

目录 1. 引言2. RAG技术概述2.1 RAG技术的定义2.2 RAG技术的工作原理2.3 RAG技术的优势2.4 RAG技术的应用场景 3. RAG的工作流程3.1 输入处理3.2 索引建立3.3 信息检索3.4 文档生成3.5 融合与优化 4. RAG范式的演变4.1 初级 RAG 模型4.2 高级 RAG 模型4.3 模块化 RAG 模型优化技…

会计报表分析

目录 一. 会计报表的种类 \quad 一. 会计报表的种类 \quad 反应财务状况的是资产负债表 反应经营成果的是利润表 有时间点的就是静态表 动态表就是有一个区间的, 比如一年, 一个季度等

探索这些有趣的API,让你的应用与众不同

在这个由数据驱动的时代&#xff0c;我们每天都在与各种应用程序和服务互动&#xff0c;却很少意识到它们背后的技术奇迹。API&#xff0c;作为这些互动的幕后英雄&#xff0c;不仅简化了开发过程&#xff0c;还扩展了技术的边界。有趣的API&#xff0c;特别是那些能够激发创新…

HTTP协议和Nginx

一、HTTP协议和Nginx 1.套接字Socket 套接字Socket是进程间通信IPC的一种实现&#xff0c;允许位于不同主机&#xff08;或同一主机&#xff09;上不同进程之间进行通信和数据交换&#xff0c;SocketAPI出现于1983年BSD4.2实现在建立通信连接的每一端&#xff0c;进程间的传输…

理解MySQL核心技术:外键的概念、作用和应用实例

引言 在数据库管理系统&#xff08;DBMS&#xff09;中&#xff0c;外键&#xff08;Foreign Key&#xff09;是维持数据一致性和实现数据完整性的重要工具。本文将详细介绍MySQL外键的基本概念、作用&#xff0c;以及相关的操作指南和应用实例&#xff0c;帮助读者掌握并灵活…

深入了解PHP的If...Else语句

PHP是目前最流行的服务器端编程语言之一&#xff0c;用于开发动态和交互式网站。在PHP编程中&#xff0c;控制结构是非常重要的概念&#xff0c;它们决定了代码的执行流程。其中&#xff0c;if…else语句是最常用的控制结构之一。本文将深入介绍PHP中的if…else语句&#xff0c…

算子级血缘和血缘查询管理

数据链路 血缘关系 应用场景&#xff1a;数据资产&#xff0c;数据开发&#xff0c;数据治理&#xff0c;数据安全等等 &#xff08;绿色箭头上面是数据治理&#xff09; 场景&#xff1a; 数据链路的高效盘点与理解 数仓模型的长效优化机制 风险影响的及时全面分析 重复…

Android Studio无法正确引入包内存在的类

Android Studio 无法识别同一个 package 里的类&#xff0c;显示为红色&#xff0c;但是 compile 没有问题。 重启&#xff0c;rebuild,clean都没有用。 多半是因为 Android Studio 之前发生了错误&#xff0c;某些 setting 出了问题。 解决方法如下&#xff1a; 点击菜单中的…

6月27日-四象限法则

四象限法则&#xff0c;又称为艾森豪威尔矩阵&#xff08;Eisenhower Matrix&#xff09;&#xff0c;是一种时间管理和任务优先级排序的方法。它将任务分为四个象限&#xff0c;帮助个人识别哪些任务最重要&#xff0c;哪些可以推迟或委托&#xff0c;以及哪些可以完全忽略。以…

【等保2.0超详细解读,收藏这一篇就够了!】

网络安全等级保护是指对国家、法人、其他组织、个人的重要信息&#xff0c;对信息的存储、传输、处理等过程进行的保障。分级保护的基本思路是“分级、按标准、结合技术和管理”&#xff0c;用安全保护和监测预警的方法&#xff0c;对潜在的安全风险进行检测和处理&#xff0c;…

Spring中的InitializingBean接口

使用方法 Slf4j Component public class MyBean implements InitializingBean {public MyBean() {log.info("> 构造方法");}Overridepublic void afterPropertiesSet() throws Exception {log.info("> afterPropertiesSet方法");} }Spring中的Bean注…

生命在于学习——Python人工智能原理(2.4.2)

四、Python的程序结构与函数 4.4 函数 函数能将代码划分为若干模块&#xff0c;每一个模块可以相对独立的实现某一个功能&#xff0c;函数有两个主要功能&#xff0c;分别是降低编程难度和实现代码复用&#xff0c;函数是一种功能抽象&#xff0c;复用它可以将一个复杂的大问…