JQuery快速入门教程

1、JQuery快速入门

1.1、JQuery介绍

  • jQuery 是一个 JavaScript 库。
  • 所谓的库,就是一个 JS 文件,里面封装了很多预定义的函数,比如获取元素,执行隐藏、移动等,目的就 是在使用时直接调用,不需要再重复定义,这样就可以极大地简化了 JavaScript 编程。
  • jQuery 官网:https://www.jquery.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f6PQwjpb-1692509599138)(.\img\JQuery介绍.png)]

1.2、JQuery快速入门

  • 开发思路
  1. 编写 HTML 文档。
  2. 引入 jQuery 文件。
  3. 使用 jQuery 获取元素。
  4. 使用浏览器测试。
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title>
</head>
<body><div id="div">我是div</div>
</body>
<!--引入 jQuery 文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>// JS方式,通过id属性值来获取div元素let jsDiv = document.getElementById("div");//alert(jsDiv);//alert(jsDiv.innerHTML);// jQuery方式,通过id属性值来获取div元素let jqDiv = $("#div");alert(jqDiv);alert(jqDiv.html());
</script>
</html>

1.3、小结

  • jQuery 是一个 JavaScript 库。
  • 说白了就是定义好的一个 JS 文件,内部封装了很多功能,可以大大简化我们的 JS 操作步骤。
  • jQuery 官网:https://www.jquery.com。
  • 要想使用,必须要引入该文件。
  • jQuery 的核心语法 $();

2、JQuery基本语法

2.1、JS对象和JQuery对象转换

  • jQuery 本质上虽然也是 JS,但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象,而不是 JS 方式获得的 DOM 对象,二者的 API 方法不能混合使用,若想使用对方的 API,需要进行对象的转换。

  • JS 的 DOM 对象转换成 jQuery 对象

    //$(JS 的 DOM 对象);// JS方式,通过id属性值获取div元素
    let jsDiv = document.getElementById("div");
    alert(jsDiv.innerHTML);
    //alert(jsDiv.html());  JS对象无法使用jQuery里面的功能// 将 JS 对象转换为jQuery对象
    let jq = $(jsDiv);
    alert(jq.html());
    
  • jQuery 对象转换成 JS 对象

    /*jQuery 对象[索引];
    jQuery 对象.get(索引);*/// jQuery方式,通过id属性值获取div元素
    let jqDiv = $("#div");
    alert(jqDiv.html());
    // alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能// 将 jQuery对象转换为JS对象
    let js = jqDiv[0];
    alert(js.innerHTML);
    

2.2、事件的基本使用

  • 常用的事件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j3h1iODJ-1692509599139)(.\img\常用事件.png)]

  • 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的使用</title>
    </head>
    <body><input type="button" id="btn" value="点我"><br><input type="text" id="input">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>//单击事件$("#btn").click(function(){alert("点我干嘛?");});//获取焦点事件// $("#input").focus(function(){//     alert("你要输入数据啦...");// });//失去焦点事件$("#input").blur(function(){alert("你输入完成啦...");});
    </script>
    </html>
    

2.3、时间的绑定和解绑

  • 绑定事件

    //jQuery 对象.on(事件名称,执行的功能);

    //给btn1按钮绑定单击事件
    $("#btn1").on("click",function(){
    alert("点我干嘛?");
    });
    
  • 解绑事件

    如果不指定事件名称,则会把该对象绑定的所有事件都解绑

    //jQuery 对象.off(事件名称);

    //通过btn2解绑btn1的单击事件
    $("#btn2").on("click",function(){
    $("#btn1").off("click");
    });
    

2.4、时间的切换

事件的切换:需要给同一个对象绑定多个事件,而且多个事件还有先后顺序关系。

  • 方式一:单独定义

    $(元素).事件方法名1(要执行的功能);

    $(元素).事件方法名2(要执行的功能);

    //方式一 单独定义
    $("#div").mouseover(function(){//背景色:红色//$("#div").css("background","red");$(this).css("background","red");});
    $("#div").mouseout(function(){//背景色:蓝色//$("#div").css("background","blue");$(this).css("background","blue");
    });
    
  • 方式二:链式定义

    $(元素).事件方法名1(要执行的功能)

    .事件方法名2(要执行的功能);

    //方式二 链式定义
    $("#div").mouseover(function(){$(this).css("background","red");
    }).mouseout(function(){$(this).css("background","blue");
    });
    

2.5、遍历操作

  • 方式一:传统方式

    for(let i = 0; i < 容器对象长度; i++){执行功能;
    }
    
    //方式一:传统方式
    $("#btn").click(function(){let lis = $("li");for(let i = 0 ; i < lis.length; i++) {alert(i + ":" + lis[i].innerHTML);}
    });
    
  • 方式二:对象.each()方法

    容器对象.each(function(index,ele){执行功能;
    });
    
    //方式二:对象.each()方法
    $("#btn").click(function(){let lis = $("li");lis.each(function(index,ele){alert(index + ":" + ele.innerHTML);});
    });
    
  • 方式三:$.each()方法

    $.each(容器对象,function(index,ele){执行功能;
    });
    
    //方式三:$.each()方法
    $("#btn").click(function(){let lis = $("li");$.each(lis,function(index,ele){alert(index + ":" + ele.innerHTML);});
    });
    
  • 方式四:for of语句

    for(ele of 容器对象){执行功能;
    }
    
    //方式四:for of 语句遍历
    $("#btn").click(function(){let lis = $("li");for(ele of lis){alert(ele.innerHTML);}
    });
    

2.6、小结

  • JS 对象和 jQuery 对象相互转换
    • $(JS 的 DOM 对象):将 JS 对象转为 jQuery 对象。
    • jQuery 对象[索引] jQuery
    • 对象.get(索引):将 jQuery 对象转为 JS 对象。
  • 事件
    • 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
    • on(事件名称,执行的功能):绑定事件。
    • off(事件名称):解绑事件。
  • 遍历
    • 传统方式。
    • 对象.each() 方法。
    • $.each() 方法。
    • for of 语句。

3、JQuery选择器

3.1、基本选择器

  • 选择器:类似于 CSS 的选择器,可以帮助我们获取元素。

  • 例如:id 选择器、类选择器、元素选择器、属性选择器等等。

  • jQuery 中选择器的语法:$();

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B8L4YXSu-1692509599139)(.\img\基本选择器.png)]

    代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本选择器</title>
    </head>
    <body><div id="div1">div1</div><div class="cls">div2</div><div class="cls">div3</div>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>//1.元素选择器   $("元素的名称")let divs = $("div");//alert(divs.length);//2.id选择器    $("#id的属性值")let div1 = $("#div1");//alert(div1);//3.类选择器     $(".class的属性值")let cls = $(".cls");alert(cls.length);</script>
    </html>
    

3.2、层级选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukxW6JKD-1692509599139)(.\img\层级选择器.png)]

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>层级选择器</title>
    </head>
    <body><div><span>s1<span>s1-1</span><span>s1-2</span></span><span>s2</span></div><div></div><p>p1</p><p>p2</p>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>// 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)let spans1 = $("div span");//alert(spans1.length);// 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)let spans2 = $("div > span");//alert(spans2.length);// 3. 兄弟选择器 $("A + B");    A相邻的下一个Blet ps1 = $("div + p");//alert(ps1.length);// 4. 兄弟选择器 $("A ~ B");    A相邻的所有Blet ps2 = $("div ~ p");alert(ps2.length);</script>
    </html>
    

3.3、属性选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3dKf6AM-1692509599140)(.\img\属性选择器.png)]

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title>
    </head>
    <body><input type="text"><input type="password"><input type="password">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>//1.属性名选择器   $("元素[属性名]")let in1 = $("input[type]");//alert(in1.length);//2.属性值选择器   $("元素[属性名=属性值]")let in2 = $("input[type='password']");alert(in2.length);</script>
    </html>
    

3.4、过滤器选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PRYznbw7-1692509599140)(.\img\过滤器选择器.png)]

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>过滤器选择器</title>
    </head>
    <body><div>div1</div><div id="div2">div2</div><div>div3</div><div>div4</div>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>// 1.首元素选择器	$("A:first");let div1 = $("div:first");//alert(div1.html());// 2.尾元素选择器	$("A:last");let div4 = $("div:last");//alert(div4.html());// 3.非元素选择器	$("A:not(B)");let divs1 = $("div:not(#div2)");//alert(divs1.length);// 4.偶数选择器	    $("A:even");let divs2 = $("div:even");//alert(divs2.length);//alert(divs2[0].innerHTML);//alert(divs2[1].innerHTML);// 5.奇数选择器	    $("A:odd");let divs3 = $("div:odd");//alert(divs3.length);//alert(divs3[0].innerHTML);//alert(divs3[1].innerHTML);// 6.等于索引选择器	 $("A:eq(index)");let div3 = $("div:eq(2)");//alert(div3.html());// 7.大于索引选择器	 $("A:gt(index)");let divs4 = $("div:gt(1)");//alert(divs4.length);//alert(divs4[0].innerHTML);//alert(divs4[1].innerHTML);// 8.小于索引选择器	 $("A:lt(index)");let divs5 = $("div:lt(2)");alert(divs5.length);alert(divs5[0].innerHTML);alert(divs5[1].innerHTML);</script>
    </html>
    

3.5、表单属性选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A05TWsWf-1692509599140)(.\img\表单属性选择器.png)]

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单属性选择器</title>
    </head>
    <body><input type="text" disabled><input type="text" ><input type="radio" name="gender" value="men" checked><input type="radio" name="gender" value="women"><input type="checkbox" name="hobby" value="study" checked>学习<input type="checkbox" name="hobby" value="sleep" checked>睡觉<select><option>---请选择---</option><option selected>本科</option><option>专科</option></select>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>// 1.可用元素选择器  $("A:enabled");let ins1 = $("input:enabled");//alert(ins1.length);// 2.不可用元素选择器  $("A:disabled");let ins2 = $("input:disabled");//alert(ins2.length);// 3.单选/复选框被选中的元素  $("A:checked");let ins3 = $("input:checked");//alert(ins3.length);//alert(ins3[0].value);//alert(ins3[1].value);//alert(ins3[2].value);// 4.下拉框被选中的元素   $("A:selected");let select = $("select option:selected");alert(select.html());</script>
    </html>
    

3.6、小结

  • 选择器:类似于 CSS 的选择器,可以帮助我们获取元素。
  • jQuery 中选择器的语法:$();
  • 基本选择器
    • $(“元素的名称”);
    • $(“#id的属性值”);
    • $(“.class的属性值”);
  • 层级选择器
    • $(“A B”);
    • $(“A > B”);
  • 属性选择器
    • $(“A[属性名]”);
    • $(“A[属性名=属性值]”);
  • 过滤器选择器
    • $(“A:even”);
    • $(“A:odd”);
  • 表单属性选择器
    • $(“A:disabled”);
    • $(“A:checked”);
    • $(“A:selected”);

4、JQuery DOM

4.1、操作文本

  • 常用方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ApBCn9Z-1692509599140)(.\img\操作文本.png)]

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作文本</title>
    </head>
    <body><div id="div">我是div</div><input type="button" id="btn1" value="获取div的文本"><input type="button" id="btn2" value="设置div的文本">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>//1. html()   获取标签的文本内容$("#btn1").click(function(){//获取div标签的文本内容let value = $("#div").html();alert(value);});//2. html(value)   设置标签的文本内容,解析标签$("#btn2").click(function(){//设置div标签的文本内容//$("#div").html("我真的是div");$("#div").html("<b>我真的是div</b>");});
    </script>
    </html>
    

4.2、操作对象

  • 常用方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-groS0zaW-1692509599141)(.\img\操作对象.png)]

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作对象</title>
    </head>
    <body><div id="div"></div><input type="button" id="btn1" value="添加一个span到div"> <br><br><br><input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;<input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;<input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;<input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;<ul id="city"><li id="bj">北京</li><li id="sh">上海</li><li id="gz">广州</li><li id="sz">深圳</li></ul><ul id="desc"><li id="jy">加油</li><li id="xq">雄起</li></ul>  <br><br><br><input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;<input type="button" id="btn7" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>/*1. $("元素")   创建指定元素2. append(element)   添加成最后一个子元素,由添加者对象调用3. appendTo(element) 添加成最后一个子元素,由被添加者对象调用4. prepend(element)  添加成第一个子元素,由添加者对象调用5. prependTo(element) 添加成第一个子元素,由被添加者对象调用6. before(element)    添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用7. after(element)     添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用8. remove()           删除指定元素(自己移除自己)9. empty()            清空指定元素的所有子元素*/// 按钮一:添加一个span到div$("#btn1").click(function(){let span = $("<span>span</span>");$("#div").append(span);});//按钮二:将加油添加到城市列表最下方$("#btn2").click(function(){//$("#city").append($("#jy"));$("#jy").appendTo($("#city"));});//按钮三:将加油添加到城市列表最上方$("#btn3").click(function(){//$("#city").prepend($("#jy"));$("#jy").prependTo($("#city"));});//按钮四:将雄起添加到上海下方$("#btn4").click(function(){$("#sh").after($("#xq"));});//按钮五:将雄起添加到上海上方$("#btn5").click(function(){$("#sh").before($("#xq"));});//按钮六:将雄起删除$("#btn6").click(function(){$("#xq").remove();});//按钮七:将描述列表全部删除$("#btn7").click(function(){$("#desc").empty();});</script>
    </html>
    

4.3、操作样式

  • 常用方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jgHQpb3q-1692509599141)(.\img\操作样式.png)]

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作样式</title><style>.cls1{background: pink;height: 30px;}</style>
    </head>
    <body><div style="border: 1px solid red;" id="div">我是div</div><input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;<input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;<br><br><br><input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;<input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;<input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>// 1.css(name)   获取css样式$("#btn1").click(function(){alert($("#div").css("border"));});// 2.css(name,value)   设置CSS样式$("#btn2").click(function(){$("#div").css("background","blue");});// 3.addClass(value)   给指定的对象添加样式类名$("#btn3").click(function(){$("#div").addClass("cls1");});// 4.removeClass(value)  给指定的对象删除样式类名$("#btn4").click(function(){$("#div").removeClass("cls1");});// 5.toggleClass(value)  如果没有样式类名,则添加。如果有,则删除$("#btn5").click(function(){$("#div").toggleClass("cls1");});</script>
    </html>
    

4.4、操作属性

  • 常用方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LormRxTe-1692509599141)(.\img\操作属性.png)]

  • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作属性</title>
    </head>
    <body><input type="text" id="username"> <br><input type="button" id="btn1" value="获取输入框的id属性">  &nbsp;&nbsp;<input type="button" id="btn2" value="给输入框设置value属性"><br><br><input type="radio" id="gender1" name="gender"><input type="radio" id="gender2" name="gender"><br><input type="button" id="btn3" value="选中女"><br><br><select><option>---请选择---</option><option id="bk">本科</option><option id="zk">专科</option></select><br><input type="button" id="btn4" value="选中本科">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>// 1.attr(name,[value])   获得/设置属性的值//按钮一:获取输入框的id属性$("#btn1").click(function(){alert($("#username").attr("id"));});//按钮二:给输入框设置value属性$("#btn2").click(function(){$("#username").attr("value","hello...");});// 2.prop(name,[value])   获得/设置属性的值(checked,selected)//按钮三:选中女$("#btn3").click(function(){$("#gender2").prop("checked",true);});//按钮四:选中本科$("#btn4").click(function(){$("#bk").prop("selected",true);});
    </script>
    </html>
    

4.5、小结

  • 操作文本
    • html() html(…):获取或设置标签的文本,解析标签。
  • 操作对象
    • $(“元素”):创建指定元素。
    • append(element):添加成最后一个子元素,由添加者对象调用。
    • prepend(element):添加成第一个子元素,由添加者对象调用。
    • before(element):添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用。
    • after(element):添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用。
    • remove():删除指定元素(自己移除自己)。
  • 操作样式
    • addClass(value):给指定的对象添加样式类名。
    • removeClass(value):给指定的对象删除样式类名。
  • 操作属性
    • attr(name,[value]):获得/设置属性的值。
    • prop(name,[value]):获得/设置属性的值(checked,selected)。

5、综合案例 复选框

5.1、案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EFrCnuNP-1692509599142)(.\img\复选框-案例效果.png)]

5.2、分析和实现

功能分析

  • 全选
      1. 为全选按钮绑定单击事件。
      2. 获取所有的商品项复选框元素,为其添加 checked 属性,属性值为 true。
  • 全不选
      1. 为全不选按钮绑定单击事件。
      2. 获取所有的商品项复选框元素,为其添加 checked 属性,属性值为 false。
  • 反选
      1. 为反选按钮绑定单击事件
      2. 获取所有的商品项复选框元素,为其添加 checked 属性,属性值是目前相反的状态。

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复选框</title>
</head>
<body><table id="tab1" border="1" width="800" align="center"><tr><th style="text-align: left"><input style="background:lightgreen" id="selectAll" type="button" value="全选"><input style="background:lightgreen" id="selectNone" type="button" value="全不选"><input style="background:lightgreen" id="reverse" type="button" value="反选"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="item"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="item"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="item"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="item"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//全选//1.为全选按钮添加单击事件$("#selectAll").click(function(){//2.获取所有的商品复选框元素,为其添加checked属性,属性值true$(".item").prop("checked",true);});//全不选//1.为全不选按钮添加单击事件$("#selectNone").click(function(){//2.获取所有的商品复选框元素,为其添加checked属性,属性值false$(".item").prop("checked",false);});//反选//1.为反选按钮添加单击事件$("#reverse").click(function(){//2.获取所有的商品复选框元素,为其添加checked属性,属性值是目前相反的状态let items = $(".item");items.each(function(){$(this).prop("checked",!$(this).prop("checked"));});});
</script>
</html>

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

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

相关文章

微机原理与接口技术 学习笔记(二) 存储器

文章目录 一&#xff0c;存储器1.1 概述1.1.1 半导体存储器的分类按制造工艺&#xff1a; 易失性或挥发性存储器 / 不易失性或不挥发性存储器按制造工艺&#xff1a; 1.1.2 半导体存储器的性能指标1.1.3 半导体存储器的一般结构及组成 1.2 随机存取存储器 RAM1.2.1 静态RAM1.2.…

UML图绘制 -- 类图

1.类图的画法 类 整体是个矩形&#xff0c;第一层类名&#xff0c;第二层属性&#xff0c;第三层方法。 &#xff1a;public- : private# : protected空格: 默认的default 对应的类写法。 public class Student {public String name;public Integer age;protected I…

机器学习知识点总结:什么是GBDT(梯度提升树)

什么是GBDT(梯度提升树) 虽然GBDT同样由许多决策树组成&#xff0c;但它与随机森林由许多不同。 其中之一是GBDT中的树都是回归树&#xff0c;树有分类有回归&#xff0c;区分它们的方法很简单。将苹果单纯分为好与坏的是分类树&#xff0c;如果能为苹果的好坏程度打个分&…

pycharm上传项目到github,版本管理

前提&#xff1a;下载git 设置Git路径 登录Github 此时自动打开浏览器&#xff0c;并打开连接页面&#xff0c;点击 Authorize GitHub。登录&#xff1a; 创建本地仓库 提交到Github 填写初始提交相关信息 origin&#xff0c;它们只是远程服务器的一个别名&#xff0c;否则你就…

小程序前台Boot后台校园卡资金管理系统java web学校进销存食堂挂失jsp源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 小程序前台Boot后台校园卡资金管理系统 系统有2权限&…

React Native expo项目修改应用程序名称

https://expo.dev/accounts/xutongbao/projects npm install --global eas-cli && \eas init --id e32cf2c0-da5b-4a65-814a-4958d58f0ca7 eas init --id e32cf2c0-da5b-4a65-814a-4958d58f0ca7 app.config.js: export default {name: 学习,slug: learn-gpt,owner: x…

虹科方案 | 汽车总线协议转换解决方案

虹科提供的汽车总线协议转换解决方案&#xff0c;有效地解决了车载ECU、总线测试工具等&#xff0c;因通信协议不兼容而无法通信的问题&#xff0c;并在优化测试台架、模拟总线信号等方向有显著的成效。 文章目录 前言一、应用场景1&#xff1a;跨协议通信测试BMS&#xff08;电…

Kotlin 基础教程二

constructor 构造器一般情况下可以简化为主构造器 即: class A constructor(参数) : 父类 (参数) 也可以在构造器上直接声明属性constructor ( var name) 这样可以全局访问 init { } 将和成员变量一起初始化 thread {} ktx 默认创建一个线程 susped 挂起 data class 可以简…

webSocket 聊天室 node.js 版

全局安装vue脚手架 npm install vue/cli -g 创建 vue3 ts 脚手架 vue create vue3-chatroom 后端代码 src 同级目录下建 server: const express require(express); const app express(); const http require(http); const server http.createServer(app);const io req…

数学建模的概念和学习方法(什么是数学建模)

一、初步认识数学建模 数学建模是将数学方法和技巧应用于实际问题的过程。它涉及使用数学模型来描述和分析现实世界中的现象、系统或过程&#xff0c;并通过数学分析和计算来预测、优化或解决问题。数学建模可以应用于各种领域&#xff0c;包括自然科学、工程、经济学、环境科学…

rust入门系列之Rust介绍及开发环境搭建

Rust教程 Rust基本介绍 网站: https://www.rust-lang.org/ rust是什么 开发rust语言的初衷是&#xff1a; 在软件发展速度跟不上硬件发展速度&#xff0c;无法在语言层面充分的利用硬件多核cpu不断提升的性能和 在系统界别软件开发上&#xff0c;C出生比较早&#xff0c;内…

vue3.0 element-plus 不同版本 el-popover 循环优化

表格内循环el-popover 渲染以后的页面&#xff0c;数据量很大的时候页面会卡&#xff0c;生成的代码&#xff1a; 解决思路&#xff1a;将el-popover提出来&#xff0c;不参与循环&#xff0c;让el-popover只渲染一次 1、以1.1.0-beta.24版为例&#xff08;低版本&#xff09;…

从关键新闻和最新技术看AI行业发展(2023.7.10-7.23第三期) |【WeThinkIn老实人报】

Rocky Ding 公众号&#xff1a;WeThinkIn 写在前面 【WeThinkIn老实人报】本栏目旨在整理&挖掘AI行业的关键新闻和最新技术&#xff0c;同时Rocky会对这些关键信息进行解读&#xff0c;力求让读者们能从容跟随AI科技潮流。也欢迎大家提出宝贵的优化建议&#xff0c;一起交流…

保险龙头科技进化论:太保的六年

如果从2013年中国首家互联网保险公司——众安在线的成立算起&#xff0c;保险科技在我国的发展已走进第十个年头。十年以来&#xff0c;在政策指引、技术发展和金融机构数字化转型的大背景下&#xff0c;科技赋能保险业高质量发展转型已成为行业共识。 大数据、云计算、人工智…

Linux笔试题(4)

67、在局域网络内的某台主机用ping命令测试网络连接时发现网络内部的主机都可以连同,而不能与公网连通,问题可能是__C_ A.主机ip设置有误 B.没有设置连接局域网的网关 C.局域网的网关或主机的网关设置有误 D.局域网DNS服务器设置有误 解析&#xff1a;在局域网络内的某台主…

Python爬虫的scrapy的学习(学习于b站尚硅谷)

目录 一、scrapy  1. scrapy的安装  &#xff08;1&#xff09;什么是scrapy  &#xff08;2&#xff09;scrapy的安装 2. scrapy的基本使用  &#xff08;1&#xff09;scrap的使用步骤  &#xff08;2&#xff09;代码的演示 3. scrapy之58同城项目结构和基本方法&…

2023 最新 小丫软件库app开源源码 PHP后端

上传了源码解压之后&#xff0c;在admin/public/config.php修改后台登录账号和密码 后台地址&#xff1a;域名或者ip/admin 然后自己修改配置即可 后端搭建完成&#xff0c;现在导入iapp源码 导入iapp源码之后&#xff0c;修改mian.iyu载入事件的对接api和url就可以打包了 sss …

【OpenVINOSharp】在英特尔® 开发者套件爱克斯开发板使用OpenVinoSharp部署Yolov8模型

在英特尔 开发者套件爱克斯开发板使用OpenVinoSharp部署Yolov8模型 一、英特尔开发套件 AIxBoard 介绍1. 产品定位2. 产品参数3. AI推理单元 二、配置 .NET 环境1. 添加 Microsoft 包存储库2. 安装 SDK3. 测试安装4. 测试控制台项目 三、安装 OpenVINO Runtime1. 下载 OpenVINO…

Linux/Ubuntu 的日常升级和安全更新,如何操作?

我安装的是Ubuntu 20.04.6 LTS的Windows上Linux子系统版本&#xff0c;启动完成后显示&#xff1a; Welcome to Ubuntu 20.04.6 LTS (GNU/Linux 5.15.90.4-microsoft-standard-WSL2 x86_64) * Documentation: https://help.ubuntu.com * Management: https://landscape.c…

中国大学生服务外包创新创业大赛丨借 AI 之力,助“记账”难题

一、中国大学生服务外包创新创业大赛 赛事介绍 中国大学生服务外包创新创业大赛&#xff0c;是响应国家关于鼓励服务外包产业发展、加强服务外包人才培养的相关战略举措与号召&#xff0c;举办的每年一届的全国性竞赛。 大赛均由中华人民共和国教育部、中华人民共和国商务部…