• jQuery

    1.jQuery概述

    1.jQuery介绍

    jQuery 是一个 JavaScript 库

    框架：Mybatis （jar包） 大工具

    插件：PageHelper （jar包） 小工具

    库：js库：jquery (js文件) 小工具 （对于原生语言的升级，扩展）

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

    2.jQuery快速入门 

    1.编写 HTML 文档

    2.引入 jQuery 文件

    3.使用 jQuery 获取元素

    4.使用浏览器测试

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>快速入门title>
    7. head>
    8. <body>
    9.     <div id="div">我是divdiv>
    10. body>
    11.     <script src="jquery-3.7.1.js">script>
    12.     <script>
    13.         //JS方式，通过id属性值来获取div
    14.         let jsDiv = document.getElementById("div");
    15.         //alert(jsDiv);
    16.         //alert(jsDiv.innerHTML);
    17.  
    18.         //jQuery方式，通过id属性来获取div元素
    19.         let jqDiv = $("#div");
    20.         alert(jqDiv);
    21.         alert(jqDiv.html());
    22.     script>
    23. html>

    jQuery 是一个 JavaScript 库。

    就是定义好的一个 JS 文件，内部封装了很多功能，可以大大简化我们的 JS 操作步骤。

    要想使用，必须要引入该文件。

    jQuery 的核心语法 $();

    下载地址：http://jquery.com/download/​​​​​​

    2.jQuery基本语法

    1.JS对象和JQuery对象转换

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

    JS的DOM对象转换成JQuery对象

    $(JS的DOM对象)

    jQuery对象转换成JS对象

    jQuery对象[索引]

    jQuery对象.get(索引)

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>对象转换title>
    7. head>
    8. <body>
    9.     <div id="div">我是divdiv>
    10. body>
    11.     <script src="jquery-3.7.1.js">script>
    12.     <script>
    13.         // JS方式，通过id属性值获取div元素
    14.         let jsDiv = document.getElementById("div");
    15.         alert(jsDiv.innerHTML);
    16.         //alert(jsDiv.html());  JS对象无法使用jQuery里面的功能
    17.  
    18.         // 将 JS 对象转换为jQuery对象
    19.         let jq = $(jsDiv);
    20.         alert(jq.html());
    21.  
    22.         // jQuery方式，通过id属性值获取div元素
    23.         let jqDiv = $("#div");
    24.         alert(jqDiv.html());
    25.         // alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能
    26.  
    27.         // 将 jQuery对象转换为JS对象  ( 将获取到的js对象放入一个数组中，jq对象就是一个包含了js对象的数组)
    28.         let js = jqDiv[0];
    29.         alert(js.innerHTML);
    30.     script>
    31. html>

    2.事件的基本使用

    常用的事件

    事件名说明
    onload某个页面或图像被完成加载
    onsubmit当表单提交时触发该事件
    onclick鼠标单击事件
    ondblclick鼠标双击事件
    onblur元素失去焦点
    onfocus元素获得焦点
    onchange用户改变域的内容

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>事件的使用title>
    7. head>
    8. <body>
    9.     <input type="button" id="btn" value="点我">
    10.     <br>
    11.     <input type="text" id="input">
    12. body>
    13. <script src="jquery-3.7.1.js">script>
    14. <script>
    15.     //单击事件
    16.     $("#btn").click(function(){
    17.         alert("点我干嘛?");
    18.     });
    19.  
    20.     //获取焦点事件
    21.     // $("#input").focus(function(){
    22.     //     alert("你要输入数据啦...");
    23.     // });
    24.  
    25.     //失去焦点事件
    26.     $("#input").blur(function(){
    27.         alert("你输入完成啦...");
    28.     });
    29. script>
    30. html>

    3.事件的绑定和解绑 

    绑定事件

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

    解绑事件

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>事件的绑定和解绑title>
    7. head>
    8. <body>
    9.     <input type="button" id="btn1" value="点我">
    10.     <input type="button" id="btn2" value="解绑">
    11. body>
    12.     <script src="jquery-3.7.1.js">script>
    13.     <script>
    14.         //给btn1按钮绑定单击事件
    15.         $("#btn1").on("click",function(){
    16.         alert("点我干嘛?");
    17.         });
    18.  
    19.         //通过btn2解绑btn1的单击事件
    20.         $("#btn2").on("click",function(){
    21.         $("#btn1").off("click");
    22.         });
    23.  
    24.     script>
    25.  
    26. html>

    4.事件的切换

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

    方式一：单独定义

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

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

    1. //方式一 单独定义
    2. $("#div").mouseover(function(){
    3.     //背景色：红色
    4.     //$("#div").css("background","red");
    5.     $(this).css("background","red");
    6.     });
    7. $("#div").mouseout(function(){
    8.     //背景色：蓝色
    9.     //$("#div").css("background","blue");
    10.     $(this).css("background","blue");
    11. });

    方式二：链式定义

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

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

    5.遍历操作

    方式一：传统方式

    1. for(let i = 0; i < 容器对象长度; i++){
    2.     执行功能;
    3. }

    方式二：对象.each()方法

    1. 容器对象.each(function(index,ele){
    2.     执行功能;
    3. });

    方式三：$.each()方法

    1. $.each(容器对象,function(index,ele){
    2.     执行功能;
    3. });

    方式四：for of语句

    1. for(ele of 容器对象){
    2. 	执行功能;
    3. }
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>遍历title>
    7. head>
    8. <body>
    9.     <input type="button" id="btn" value="遍历列表项">
    10.     <ul>
    11.         <li>周杰伦li>
    12.         <li>许嵩li>
    13.         <li>薛之谦li>
    14.     ul>
    15. body>
    16. <script src="jquery-3.7.1.js">script>
    17. <script>
    18.     //方式一：传统方式
    19.     $("#btn").click(function(){
    20.         let lis = $("li");//传入的是一个标签名，就会获取所有的标签对象，将标签对象放入jQuery对象
    21.         for(let i = 0 ; i < lis.length; i++) {
    22.             alert(i + ":" + lis[i].innerHTML);
    23.         }
    24.     });
    25.  
    26.     //方式二：对象.each()方法
    27.     $("#btn").click(function(){
    28.         let lis = $("li");
    29.         lis.each(function(index,ele){// 匿名函数作为参数传递给each方法，就是由each方法内部来调用
    30.             alert(index + ":" + ele.innerHTML);
    31.             // each方法第一次调用匿名函数时，0 , lis[0]
    32.             // each方法第二次调用匿名函数时，1 , lis[1]
    33.         });
    34.     });
    35.  
    36.     //方式三：$.each()方法
    37.     $("#btn").click(function(){
    38.         let lis = $("li");
    39.         $.each(lis,function(index,ele){
    40.             alert(index + ":" + ele.innerHTML);
    41.         });
    42.     });
    43.  
    44.     //方式四：for of 语句遍历
    45.     $("#btn").click(function(){
    46.         let lis = $("li");
    47.         for(ele of lis){
    48.             alert(ele.innerHTML);
    49.         }
    50.     });
    51.  
    52. script>
    53. html>

    3.jQuery选择器 

     1.基本选择器

    选择器：类似于 CSS 的选择器，可以帮助我们获取元素。

    例如：id 选择器、类选择器、元素选择器、属性选择器等等

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

    选择器语法作用
    元素选择器$(“元素的名称”);根据元素名称获取元素对象们
    id选择器$("#id的属性值");根据id属性值获取元素对象
    类选择器$(".class的属性值");根据class属性值获取元素对象们
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>基本选择器title>
    7. head>
    8. <body>
    9.     <div id="div1">div1div>
    10.     <div class="cls">div2div>
    11.     <div class="cls">div3div>
    12. body>
    13. <script src="jquery-3.7.1.js">script>
    14. <script>
    15.     //1.元素选择器   $("元素的名称")
    16.     let divs = $("div");
    17.     //alert(divs.length);
    18.  
    19.     //2.id选择器    $("#id的属性值")
    20.     let div1 = $("#div1");
    21.     //alert(div1);
    22.  
    23.     //3.类选择器     $(".class的属性值")
    24.     let cls = $(".cls");
    25.     alert(cls.length);
    26. script>
    27. html>

    2.层级选择器 

    选择器语法作用
    后代选择器$(“A B”);A下的所有B(包括B的子级)
    子选择器$(“A > B”);A下的所有B(不包括B的子级)
    兄弟选择器$(“A + B”);A相邻的下一个B
    兄弟选择器$(“A～B”);A相邻的所有B

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>层级选择器title>
    7. head>
    8. <body>
    9.     <div>
    10.         <span>s1
    11.             <span>s1-1span>
    12.             <span>s1-2span>
    13.         span>
    14.         <span>s2span>
    15.     div>
    16.  
    17.     <div>div>
    18.     <p>p1p>
    19.     <p>p2p>
    20. body>
    21. <script src="jquery-3.7.1.js">script>
    22. <script>
    23.     // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)
    24.     let spans1 = $("div span");
    25.     //alert(spans1.length);
    26.  
    27.     // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)
    28.     let spans2 = $("div > span");
    29.     //alert(spans2.length);
    30.  
    31.     // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    32.     let ps1 = $("div + p");
    33.     //alert(ps1.length);
    34.  
    35.     // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B
    36.     let ps2 = $("div ~ p");
    37.     alert(ps2.length); 
    38. script>
    39. html>

    3.属性选择器 

    选择器语法作用
    属性名选择器$(“A[属性名]”);根据指定属性名获取元素对象们
    属性值选择器$(“A[属性名=属性值]”);根据指定属性名和属性值获取元素对象们
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>属性选择器title>
    7. head>
    8. <body>
    9.     <input type="text">
    10.     <input type="password">
    11.     <input type="password">
    12. body>
    13. <script src="jquery-3.7.1.js">script>
    14. <script>
    15.     //1.属性名选择器   $("元素[属性名]")
    16.     let in1 = $("input[type]");
    17.     //alert(in1.length);
    18.  
    19.     //2.属性值选择器   $("元素[属性名=属性值]")
    20.     let in2 = $("input[type='password']");
    21.     alert(in2.length);
    22. script>
    23. html>

    4.过滤器选择器 

    选择器语法作用
    首元素选择器$(“A:first”);获得选择的元素中的第一个元素
    尾元素选择器$(“A:last”);获得选择的元素中的最后一个元素
    非元素选择器$(“A:not(B)”);不包括指定内容的元素
    偶数选择器$(“A:even”);偶数，从0开始计数
    奇数选择器$(“A:odd”);奇数，从0开始计数
    等于索引选择器$(“A:eq(index)”);指定索引元素
    大于索引选择器$(“A:gt(index)”);大于指定索引元素
    小于索引选择器$(“A:lt(index)”);小于指定索引元素

    语法： 基本选择器/层级选择器 : 过滤选择器

    基本选择器 不包含id选择器

    过滤选择器，是从多个结果中选择一个或多个

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>过滤器选择器title>
    7. head>
    8. <body>
    9.     <div>div1div>
    10.     <div id="div2">div2div>
    11.     <div>div3div>
    12.     <div>div4div>
    13. body>
    14. <script src="jquery-3.7.1.js">script>
    15. <script>
    16.     // 1.首元素选择器	$("A:first");
    17.     let div1 = $("div:first");
    18.     //alert(div1.html());
    19.  
    20.     // 2.尾元素选择器	$("A:last");
    21.     let div4 = $("div:last");
    22.     //alert(div4.html());
    23.  
    24.     // 3.非元素选择器	$("A:not(B)");
    25.     let divs1 = $("div:not(#div2)");
    26.     //alert(divs1.length);
    27.  
    28.     // 4.偶数选择器	    $("A:even");
    29.     let divs2 = $("div:even");
    30.     //alert(divs2.length);
    31.     //alert(divs2[0].innerHTML);
    32.     //alert(divs2[1].innerHTML);
    33.  
    34.     // 5.奇数选择器	    $("A:odd");
    35.     let divs3 = $("div:odd");
    36.     //alert(divs3.length);
    37.     //alert(divs3[0].innerHTML);
    38.     //alert(divs3[1].innerHTML);
    39.  
    40.     // 6.等于索引选择器	 $("A:eq(index)");
    41.     let div3 = $("div:eq(2)");
    42.     //alert(div3.html());
    43.  
    44.     // 7.大于索引选择器	 $("A:gt(index)");
    45.     let divs4 = $("div:gt(1)");
    46.     //alert(divs4.length);
    47.     //alert(divs4[0].innerHTML);
    48.     //alert(divs4[1].innerHTML);
    49.  
    50.     // 8.小于索引选择器	 $("A:lt(index)");
    51.     let divs5 = $("div:lt(2)");
    52.     alert(divs5.length);
    53.     alert(divs5[0].innerHTML);
    54.     alert(divs5[1].innerHTML); 
    55. script>
    56. html>

    5.表单属性选择器

    选择器语法作用
    可用元素选择器$(“A:enabled”);获得可用元素
    不可用元素选择器$(“A:disabled”);获得不可用元素
    单选/复选框被选中的元素$(“A:checked”);获得单选/复选框选中的元素
    下拉框被选中的元素$(“A:selected”);获得下拉框选中的元素
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>表单属性选择器title>
    7. head>
    8. <body>
    9.     <input type="text" disabled>
    10.     <input type="text" >
    11.     <input type="radio" name="gender" value="men" checked>男
    12.     <input type="radio" name="gender" value="women">女
    13.     <input type="checkbox" name="hobby" value="study" checked>学习
    14.     <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    15.     <select>
    16.         <option>---请选择---option>
    17.         <option selected>本科option>
    18.         <option>专科option>
    19.     select>
    20. body>
    21. <script src="jquery-3.7.1.js">script>
    22. <script>
    23.     // 1.可用元素选择器  $("A:enabled");
    24.     let ins1 = $("input:enabled");
    25.     //alert(ins1.length);
    26.  
    27.     // 2.不可用元素选择器  $("A:disabled");
    28.     let ins2 = $("input:disabled");
    29.     //alert(ins2.length);
    30.  
    31.     // 3.单选/复选框被选中的元素  $("A:checked");
    32.     let ins3 = $("input:checked");
    33.     //alert(ins3.length);
    34.     //alert(ins3[0].value);
    35.     //alert(ins3[1].value);
    36.     //alert(ins3[2].value);
    37.  
    38.     // 4.下拉框被选中的元素   $("A:selected");
    39.     let select = $("select option:selected");
    40.     alert(select.html());  
    41. script>
    42. html>

    4.jQuery  DOM 

    1.操作文本

    常用方法

    方法作用
    html()获取标签的文本
    html(value)设置标签的文本内容，解析标签
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>操作文本title>
    7. head>
    8. <body>
    9.     <div id="div">我是divdiv>
    10.     <input type="button" id="btn1" value="获取div的文本">
    11.     <input type="button" id="btn2" value="设置div的文本">
    12. body>
    13. <script src="jquery-3.7.1.js">script>
    14. <script>
    15.      //1. html()   获取标签的文本内容
    16.      $("#btn1").click(function(){
    17.          //获取div标签的文本内容
    18.          let value = $("#div").html();
    19.          alert(value);
    20.      });
    21.  
    22.      //2. html(value)   设置标签的文本内容，解析标签
    23.      $("#btn2").click(function(){
    24.          //设置div标签的文本内容
    25.          //$("#div").html("我真的是div");
    26.          $("#div").html("我真的是div");
    27.      });
    28. script>
    29. html>

    2.操作对象 

    常用方法

    方法作用
    $(“元素”)创建指定元素
    append(element)添加成最后一个子元素，由添加者对象调用
    appendTo(element)添加成最后一个子元素，由被添加者对象调用
    prepend(element)添加成第一个子元素，由添加者对象调用
    prependTo(element)添加成第一个子元素，由被添加者对象调用
    before(element)添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
    after(element)添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
    remove()删除指定元素(自己移除自己)
    empty()清空指定元素的所有子元素

    append，appendTo，prepend，prependTo是父子关系的操作（父亲添加儿子，或者是，儿子添加到父亲）

    before，after是兄弟关系的操作

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>操作对象title>
    7. head>
    8. <body>
    9.     <div id="div">div>
    10.     <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>
    11.  
    12.     <input type="button" id="btn2" value="将加油添加到城市列表最下方">    
    13.     <input type="button" id="btn3" value="将加油添加到城市列表最上方">    
    14.     <input type="button" id="btn4" value="将雄起添加到上海下方">    
    15.     <input type="button" id="btn5" value="将雄起添加到上海上方">    
    16.     <ul id="city">
    17.         <li id="bj">北京li>
    18.         <li id="sh">上海li>
    19.         <li id="gz">广州li>
    20.         <li id="sz">深圳li>
    21.     ul>
    22.     <ul id="desc">
    23.         <li id="jy">加油li>
    24.         <li id="xq">雄起li>
    25.     ul>  <br><br><br>
    26.     <input type="button" id="btn6" value="将雄起删除">    
    27.     <input type="button" id="btn7" value="将描述列表全部删除">    
    28. body>
    29. <script src="jquery-3.7.1.js">script>
    30. <script>
    31.     // 按钮一：添加一个span到div
    32.     $("#btn1").click(function(){
    33.         let span = $("span");
    34.         $("#div").append(span);
    35.     });
    36.  
    37.     //按钮二：将加油添加到城市列表最下方
    38.     $("#btn2").click(function(){
    39.         //$("#city").append($("#jy"));
    40.         $("#jy").appendTo($("#city"));
    41.     });
    42.  
    43.     //按钮三：将加油添加到城市列表最上方
    44.     $("#btn3").click(function(){
    45.         //$("#city").prepend($("#jy"));
    46.         $("#jy").prependTo($("#city"));
    47.     });   
    48.  
    49.     //按钮四：将雄起添加到上海下方
    50.     $("#btn4").click(function(){
    51.         $("#sh").after($("#xq"));
    52.     });
    53.  
    54.     //按钮五：将雄起添加到上海上方
    55.     $("#btn5").click(function(){
    56.         $("#sh").before($("#xq"));
    57.     });
    58.  
    59.     //按钮六：将雄起删除
    60.     $("#btn6").click(function(){
    61.         $("#xq").remove();
    62.     });
    63.  
    64.     //按钮七：将描述列表全部删除
    65.     $("#btn7").click(function(){
    66.         $("#desc").empty();
    67.     });
    68. script>
    69. html>

    3.操作样式 

    常用方法

    方法作用
    css(name)根据样式名称获取css样式
    css(name,value)设置CSS样式
    addClass(value)给指定的对象添加样式类名
    removeClass(value)给指定的对象删除样式类名
    toggleClass(value)如果没有样式类名，则添加。如果有，则删除
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>操作样式title>
    7.     <style>
    8.         .cls1{
    9.             background: pink;
    10.             height: 30px;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <div style="border: 1px solid red;" id="div">我是divdiv>
    16.     <input type="button" id="btn1" value="获取div的样式">   
    17.     <input type="button" id="btn2" value="设置div的背景色为蓝色">  
    18.     <br><br><br>
    19.     <input type="button" id="btn3" value="给div设置cls1样式">   
    20.     <input type="button" id="btn4" value="给div删除cls1样式">   
    21.     <input type="button" id="btn5" value="给div设置或删除cls1样式">   
    22. body>
    23. <script src="jquery-3.7.1.js">script>
    24. <script>
    25.     // 1.css(name)   获取css样式
    26.     $("#btn1").click(function(){
    27.         alert($("#div").css("border"));
    28.     });
    29.  
    30.     // 2.css(name,value)   设置CSS样式
    31.     $("#btn2").click(function(){
    32.         $("#div").css("background","blue");
    33.     });
    34.  
    35.     // 3.addClass(value)   给指定的对象添加样式类名
    36.     $("#btn3").click(function(){
    37.         $("#div").addClass("cls1");
    38.     });
    39.  
    40.     // 4.removeClass(value)  给指定的对象删除样式类名
    41.     $("#btn4").click(function(){
    42.         $("#div").removeClass("cls1");
    43.     });
    44.  
    45.     // 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除
    46.     $("#btn5").click(function(){
    47.         $("#div").toggleClass("cls1");
    48.     }); 
    49. script>
    50. html>

    4.操作属性 

    常用方法

    方法作用
    attr(name,[value])获得/设置属性的值
    prop(name,[value])获得/设置属性的值(checked，selected)

    prop专门用于操作单选框，复选框，下拉列表

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>操作属性title>
    7. head>
    8. <body>
    9.     <input type="text" id="username"> 
    10.     <br>
    11.     <input type="button" id="btn1" value="获取输入框的id属性">    
    12.     <input type="button" id="btn2" value="给输入框设置value属性">
    13.     <br><br>
    14.  
    15.     <input type="radio" id="gender1" name="gender">男
    16.     <input type="radio" id="gender2" name="gender">女
    17.     <br>
    18.     <input type="button" id="btn3" value="选中女">
    19.     <br><br>
    20.     
    21.     <select>
    22.         <option>---请选择---option>
    23.         <option id="bk">本科option>
    24.         <option id="zk">专科option>
    25.     select>
    26.     <br>
    27.     <input type="button" id="btn4" value="选中本科">
    28. body>
    29. <script src="jquery-3.7.1.js">script>
    30. <script>
    31.     // 1.attr(name,[value])   获得/设置属性的值
    32.     //按钮一：获取输入框的id属性
    33.     $("#btn1").click(function(){
    34.         alert($("#username").attr("id"));
    35.     });
    36.     
    37.     //按钮二：给输入框设置value属性
    38.     $("#btn2").click(function(){
    39.         $("#username").attr("value","hello...");
    40.     });
    41.  
    42.     // 2.prop(name,[value])   获得/设置属性的值(checked，selected)
    43.     //按钮三：选中女
    44.     $("#btn3").click(function(){
    45.         $("#gender2").prop("checked",true);
    46.     });
    47.  
    48.     //按钮四：选中本科
    49.     $("#btn4").click(function(){
    50.         $("#bk").prop("selected",true);
    51.     });
    52. script>
    53. html>

    5.案例 随机图片

    动态切换小图分析

    1.准备一个数组

    2.定义一个计数器

    3.定义定时器对象

    4.定义图片路径变量

    5.为开始按钮绑定单击事件

    6.设置按钮状态

    7.设置定时器，循环显示图片

    8.循环获取图片路径

    9.将当前图片显示到小图片上

    10.计数器自增

    显示大图分析

    1.为停止按钮绑定单击事件

    2.取消定时器

    3.设置按钮状态

    4.将图片显示到大图片上

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>随机图片title>
    7. head>
    8. <body>
    9.     
    10.     <div style="background-color: red;border: dotted;height: 50px;width: 50px;">
    11.         <img src="OIP-C.jpg" id="small" style="width: 50px; height: 50px;" >
    12.     div>
    13.     
    14.     <div style="border: double;width: 400px; height: 400px; position: absolute; left: 500px;">
    15.         <img src="" id="big" style="width: 400px; height: 400px; display: none;" >
    16.     div>
    17.  
    18.     
    19.     <input id="startBtn" type="button" style="width: 150px; height: 150px; font-size: 20px;"value = "开始">
    20.     <input id="stopBtn" type="button" style="width: 150px; height: 150px; font-size: 20px;"value = "停止">
    21. body>
    22. <script src="jquery-3.7.1.js">script>
    23. <script>
    24.     //1.准备一个数组
    25.     let imgs = [
    26.         "OIP-C.jpg",
    27.         "OIP-C (2).jpg",
    28.         "OIP-C (3).jpg",
    29.         "OIP-C (4).jpg"];
    30.     //2.定义一个计数器变量
    31.     let count = 0;
    32.     //3.声明定时器对象
    33.     let time = null;
    34.     //4.声明图片路径变量
    35.     let imgSrc = "";
    36.     //5.为开始按钮绑定单击事件
    37.     $("#startBtn").click(function(){
    38.         //6.设置按钮状态
    39.         //禁用开始按钮
    40.         $("#startBtn").porp("disabled",true);
    41.         //启用停止按钮
    42.         $("#stopBtn").porp("disabled",false);
    43.         //7.设置定时器，循环显示图片
    44.        time = setInterval(function(){
    45.             //8.循环获取图片路径
    46.             let index = count % imgs.length; //0%10=0 1%10=1 2%10=2...9%10=9 10%10=0
    47.             //9.将当前图片显示到小图片上
    48.             imgSrc = imgs[index];
    49.             $("#small").prop("src",imgSrc);
    50.             //10.计数器自增
    51.             count++;
    52.         },10);
    53.     });
    54.  
    55.     //11.为停止按钮绑定单击事件
    56.     $("#stopBtn").click(function(){
    57.         //12.取消定时器
    58.         clearInterval(time);
    59.         //13.设置按钮状态
    60.         //启用开始按钮
    61.         $("#startBtn").prop("disabled",false);
    62.         //禁用停止按钮
    63.         $("#stoptBtn").prop("disabled",true);
    64.         //14.将图片显示到大图上
    65.         $("#big").prop("src",imgSrc);
    66.         $("#big").prop("style","width: 400px; height: 400px;");
    67.     });
    68. script>
    69. html>

  • 相关阅读:
    Java设计模式总结
    设计模式之——简单工厂模式
    MPI学习笔记（三）：矩阵相乘的分块并行(行列划分法)
    Docker停电事件未解之谜
    重置手机网络虽然麻烦，但效果杠杠的！如何重置安卓手机的网络
    Nginx的location和rewrite
    ns-3 多天线设置与ns-3信道设置
    未来世界：16项改变人类社会的新技术
    Vue3 JS 与 SCSS 变量相互使用
    nodejs+vue 医院病历管理系统
  • 原文地址：https://blog.csdn.net/weixin_61611746/article/details/133611630