Java Web学习day22------JQuery（基本语法、选择器、DOM）

最新推荐文章于 2024-07-25 11:26:35 发布

挨踢农民工dsh

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量98

点赞数

分类专栏： Java Web学习文章标签： jquery js html

本文链接：https://blog.csdn.net/dsh789/article/details/111224441

版权

Java Web学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1、JQuery快速入门

1.1、JQuery介绍

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

1.2、JQuery快速入门

（1）开发思路
a) 编写 HTML 文档。
b) 引入 jQuery 文件。
c) 使用 jQuery 获取元素（使用 $(选择器) 获取元素）。
d) 使用浏览器测试。
（2）代码实现

<!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>

（3）总结及注意事项
a) jquery的位置问题，代码加载的顺序要一致，谁在前谁先加载（也就是说jqueryd的引入位置必须在使用之前）
b) $==jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--位置1-->
    <!--使用jquery之前需要引入jquery的库,引入的jquery库必须在最前面-->
    <!--<script>-->
        <!--let jqDiv=$("#div");-->
        <!--alert(jqDiv);-->
        <!--alert(jqDiv.html());-->
    <!--</script>-->

    <!--引入jquery-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!--写自定义方法-->

    <!--位置2-->
    <!--<script>-->
        <!--// let jsDiv=document.getElementById("div");-->
        <!--let jsDiv = document.getElementById("div");-->
        <!--// alert(jsDiv);-->
        <!--// alert(jsDiv.innerHTML);-->

        <!--let jqDiv=$("#div");-->
        <!--alert(jqDiv);-->
        <!--alert(jqDiv.html());-->

    <!--</script>-->
</head>
<body>
    <!--位置3-->
    <!--<script>-->
        <!--// let jsDiv=document.getElementById("div");-->
        <!--let jsDiv = document.getElementById("div");-->
        <!--// alert(jsDiv);-->
        <!--// alert(jsDiv.innerHTML);-->

        <!--let jqDiv=$("#div");-->
        <!--alert(jqDiv);-->
        <!--alert(jqDiv.html());-->

    <!--</script>-->
    <div id="div"> 我是一个div</div>


    <!--位置4-->
    <!--通过位置2,3,4的切换,可以得知,js和jquery都需要写在节点之后-->
    <script>
        let jsDiv = document.getElementById("div");
        let jqDiv=$("#div");

        //类型转换
        // let jqDiv=$(jsDiv);
        // let jsDiv=jqDiv[0];
        //js的弹窗
        alert(jsDiv);
        alert(jsDiv.innerHTML);
        //jquery的弹窗
        // alert(jqDiv);
        // alert(jqDiv.html());

    </script>
</body>
</html>

2、JQuery基本语法

2.1、JS对象和JQuery对象转换

（1） jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。
（2）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());

（3） 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);

（4）总结及注意事项
a) jquery对象和js对象的关系：
jQuery== Object[]
js==Object
为了验证是否是这样，我们想下数组要有length，因为我们把js对象(一个div元素)放入到了该数组中，所以该数组也就是这个jQuery对象的length为1.并且下标为0的元素就是我们的js对象
在这里插入图片描述

2.2、事件的基本使用

（1）常用的事件
在这里插入图片描述
在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。

（2）代码实现

<!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>

（3）总结及注意事项

a) 格式：
jQuery对象.jQuery的方法
b) js和jquery方法对比
在这里插入图片描述

2.3、事件的绑定和解绑

（1）绑定事件

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

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

（2）解绑事件
如果不指定事件名称，则会把该对象绑定的所有事件都解绑
jQuery 对象.off(事件名称);

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

2.4、事件的切换

（1） 方式一：单独定义
$(元素).事件方法名1(要执行的功能)；
$(元素).事件方法名2(要执行的功能)；

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

（2）方式二：链式定义
$(元素).事件方法名1(要执行的功能) .事件方法名2(要执行的功能)；
链式定义中，每一个事件返回值是$(元素)本身

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

2.5、遍历操作

（1）方式一：传统方式
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);
      }
  });

（2）方式二：对象.each()方法
容器对象.each(function(index,ele){
执行功能;
});

  //方式二：对象.each()方法   list[]{ele,els}  list[]{a,b}
  $("#btn").click(function(){
      let lis = $("li");  
      lis.each(function(index,ele){
          alert(index + ":" + ele.innerHTML);
      });
  });

（3）方式三：$.each()方法

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

  //方式三：$.each()方法
  $("#btn").click(function(){
      let lis = $("li");
      $.each(lis,function(index,ele){
          alert(index + ":" + ele.innerHTML);
      });
  });

（4）方式四：for of语句
for(ele of 容器对象){
执行功能;
}

  //方式四：for of 语句遍历  for( c of "同门都很努力")
  $("#btn").click(function(){
      let lis = $("li");
      for(ele of lis){  
          alert(ele.innerHTML);
      }
  });

（5）注意：
循环不仅仅可以循环dom元素也可以循序自定义数组，但第二种是不行的

3、JQuery选择器

3.1、基本选择器

（1）选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
例如：id 选择器、类选择器、元素选择器、属性选择器等等。
（2）Query 中选择器的语法：$()
$("元素的名称")
$("#id的属性值")
$(".class的属性值")
在这里插入图片描述
（3） 代码演示

  <!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>

（4）总结及注意事项
a) id尽量是唯一的,如果存在多个id,只会取第一个节点(元素)
b) 其他的属性可以是多个,也会获取全部的节点(元素)

3.2、层级选择器

在这里插入图片描述
（1）代码演示

  <!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相邻的下一个B
      let ps1 = $("div + p");
      //alert(ps1.length);
  
      // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B
      let ps2 = $("div ~ p");
      alert(ps2.length);
  </script>
  </html>

（2）总结及注意事项
a) 与空行空格无关
b) 后代选择器(A B)：是将该A下所有的B元素全部获取(所有的子辈、孙辈…)，而子选择器(A > B)只会获取直接下级B(由自己生的孩子)
c) 兄弟选择器 A + B:获取相邻的B元素,最多1个元素,最少0个元素 ; A ~ B:获取所有相邻的B元素,最多N个元素,最少0个元素
d) 重点
$("A B")
$("A > B")

3.3、属性选择器

在这里插入图片描述
（1）代码演示

  <!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>

（2）总结及注意事项
a) $("元素[属性名=属性值]")在$("元素[属性名]")基础上在有添加了一个条件，此条件是属性名的值必须为指定的值

3.4、过滤器选择器

在这里插入图片描述
（1）代码实现

  <!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>

（2）总结及注意事项
a) 过滤选择器是通过索引来过滤的，索引选择器的索引是从0开始,首元素选择器等同于Object[0].
b) 只获取一个元素的选择器：首元素选择器、尾元素选择器、等于索引选择器
c) 获取多个元素的选择器：非元素选择器、偶数选择器、奇数选择器、大于索引选择器、小于索引选择器
d) 偶数选择器是索引为0,2,4…的元素；奇数选择器是索引为1,3,5…的元素
e) 重点如下
aa) $(“A:even”)：偶数选择器
bb) $(“A:odd”)：奇数选择器
cc) 三个索引选择器
aaa) 等于索引选择器 $(“A:eq(index)”)
bbb) 大于索引选择器 $(“A:gt(index)”)
ccc) 小于索引选择器 $(“A:lt(index)”)

3.5、表单属性选择器

在这里插入图片描述
（1）代码演示

  <!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>

（2）总结及注意事项
a) 表单属性选择器主要选择的是表单元素，表单元素有input(radio,text,password…)/select/checkbox/textarea等

4、JQuery DOM

4.1、操作文本

（1）常用方法
在这里插入图片描述
（2）代码演示

  <!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、操作对象

（1）常用方法
在这里插入图片描述
（2）代码实现

  <!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>

（2）总结及注意事项
a) append/prepend是添加一个子元素
b) appendTo/prependTo添加一个兄弟元素
c) remove能够删除自己的
d) empty只能清理所有的子元素,不能删除自己
e) 重点如下
aa) $(“元素”)：创建指定元素。
bb) append(element)：添加成最后一个子元素.
cc) prepend(element)：添加成第一个子元素.
dd) before(element)：添加到当前元素的前面，两者之间是兄弟关系.
ee) after(element)：添加到当前元素的后面，两者之间是兄弟关系.
ff) remove()：删除指定元素(自己移除自己)

4.3、操作样式

（1）常用方法
在这里插入图片描述
（2）代码演示

  <!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、操作属性

（1）常用方法
在这里插入图片描述
（2）代码演示

  <!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>

（3）总结及注意事项
a) prop()是 jQuery 1.6 开始新增了一个方法，官方建议具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr(),俩个方法没有本质的区别

5、综合案例复选框

5.1、案例效果

在这里插入图片描述

5.2、分析和实现

（1）功能分析
a) 全选
aa) 为全选按钮绑定单击事件。
bb) 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。
b) 全不选
aa) 为全不选按钮绑定单击事件。
bb) 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。
c) 反选
aa) 为反选按钮绑定单击事件
bb) 获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。

（2）代码实现

<!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>

6、综合案例随机图片

6.1、案例效果

在这里插入图片描述
效果简介：

点击开始按钮后
- 按钮状态变化
  - 开始按钮不可点击
  - 停止按钮可点击
- 小图一直循环的变化，小图循环的改变小图img标签中的src属性
点击停止按钮后
- 按钮状态变化
  - 停止按钮不可点击
  - 开始按钮可点击
- 小图停止变化
- 大图显示小图的图片

6.2、动态切换小图的分析和实现

（1）功能分析
a) 准备一个数组
b) 定义计数器
c) 定义定时器对象
d) 定义图片路径变量
e) 为开始按钮绑定单击事件
f) 设置按钮状态
g) 设置定时器，循环显示图片
h) 循环获取图片路径
i) 将当前图片显示到小图片上
j) 计数器自增
（2）代码实现

  <!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 style="background-color:red;border: dotted; height: 50px; width: 50px">
      <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
  </div>
  <!-- 大图 -->
  <div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
      <img src="" id="big" style="width: 400px; height: 400px; display:none;">
  </div>
  
  <!-- 开始和结束按钮 -->
  <input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
  <input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
  </body>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
      //1.准备一个数组
      let imgs = [
          "img/01.jpg",
          "img/02.jpg",
          "img/03.jpg",
          "img/04.jpg",
          "img/05.jpg",
          "img/06.jpg",
          "img/07.jpg",
          "img/08.jpg",
          "img/09.jpg",
          "img/10.jpg"];
  		
      //2.定义计数器变量
      let count = 0;
      
      //3.声明定时器对象
      let time = null;
      
      //4.声明图片路径变量
      let imgSrc = "";
      
      //5.为开始按钮绑定单击事件
      $("#startBtn").click(function(){
          //6.设置按钮状态
          //禁用开始按钮
          $("#startBtn").prop("disabled",true);
          //启用停止按钮
          $("#stopBtn").prop("disabled",false);
          
          //7.设置定时器，循环显示图片
          time = setInterval(function(){
              //8.循环获取图片路径
              let index = count % imgs.length; // 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0  
                      
              //9.将当前图片显示到小图片上
              imgSrc = imgs[index];
              $("#small").prop("src",imgSrc);
                      
              //10.计数器自增
              count++;
          },10);
      });
  </script>
  </html>

6.3、显示大图的分析和实现

（1）功能分析
a) 为停止按钮绑定单击事件–用到了2.2事件的基本使用(click)+jQuery选择器
b) 取消定时器
c) 设置按钮状态 --用到了4.4操作属性+jQuery选择器
d) 将图片显示到大图片上–用到了4.4操作属性+jQuery选择器
（2）代码实现

  //11.为停止按钮绑定单击事件
  $("#stopBtn").click(function(){
      //12.取消定时器
      clearInterval(time);
  
      //13.设置按钮状态
      //启用开始按钮
      $("#startBtn").prop("disabled",false);
      //禁用停止按钮
      $("#stopBtn").prop("disabled",true);
  
      //14.将图片显示到大图片上
      $("#big").prop("src",imgSrc);
      $("#big").prop("style","width: 400px; height: 400px;");
  });

6.4、整体的思路(简化):

（1）看效果

a) 先把效果用jQuery完成
在这里插入图片描述

<script> 
    //1为开始按钮绑定单击事件
	$("#startBtn").click(function(){
        //1.1设置按钮状态
        //禁用开始按钮
        $("#startBtn").prop("disabled",true);
        
        
        //1.2设置定时器，循环显示图片
        let time = setInterval(function(){
            //1.3将当前图片显示到小图片上
            $("#small").prop("src",?);        
          
        },10);
    });
    
 	//2.为停止按钮绑定单击事件
    $("#stopBtn").click(function(){
       
        //2.1.取消定时器
        clearInterval(time);
        //2.2.设置按钮状态
        //启用开始按钮
        $("#startBtn").prop("disabled",false);
        //禁用停止按钮
        $("#stopBtn").prop("disabled",true);
            
        //2.3.将图片显示到大图片上
        $("#big").prop("src",?);
        $("#big").prop("style","width: 400px; height: 400px;");
    });
</script>

b) 提取公共变量
发现定时器和图片路径是开始按钮和暂停按钮都需要，提取出来成为公共变量

<script>
    //3.声明定时器对象
    let time = null;
    
    //4.声明图片路径变量,由于不知道怎么获取值,先定义出来
    let imgSrc = "";
    
	$("#startBtn").click(function(){
       ......
        //1.2设置定时器，循环显示图片
        time = setInterval(function(){
            //1.3将当前图片显示到小图片上
            $("#small").prop("src",imgSrc);        
          
        },10);
    });
    
 	//2.为停止按钮绑定单击事件
    $("#stopBtn").click(function(){
       ......
        //2.2.将图片显示到大图片上
        $("#big").prop("src",imgSrc);
        $("#big").prop("style","width: 400px; height: 400px;");
    });
</script>

（2）选取图片
a) 分析
已经有的图片

<script>
	//1.准备一个数组
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];
</script>

b) 选取图片
分析出imgs是一个图片路径数组，我们需要循环该数组获取一个图片的路径，然后赋值给小图，就可以达到效果，我们可以利用定时器来循环该数据

<script>
    //定义计数器变量
    let count = 0;

	$("#startBtn").click(function(){
        .......
		//1.2设置定时器，循环显示图片
        time = setInterval(function(){
            //循环获取图片路径
            
            let index = count % imgs.length; // 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0 11%10=1 
                    
            //将当前图片显示到小图片上
            imgSrc = imgs[index];
            
            //1.3将当前图片显示到小图片上
            $("#small").prop("src",imgSrc);  
            
          	//计数器自增
            count++;
        },10);
    });
    ......
    
</script>

c) 2.2测试
测试整个效果.发现一个bug

<script>
    .......
     //为开始按钮绑定单击事件
    $("#startBtn").click(function(){
        //设置按钮状态
        //禁用开始按钮
        $("#startBtn").prop("disabled",true);
        //启用停止按钮
        $("#stopBtn").prop("disabled",false);
        ......
    }
</script>

挨踢农民工dsh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Web学习day22------JQuery（基本语法、选择器、DOM）

JQuery1、JQuery快速入门1.1、JQuery介绍1.2、JQuery快速入门2、JQuery基本语法2.1、JS对象和JQuery对象转换总结及注意事项2.2、事件的基本使用疑问总结及注意事项2.3、事件的绑定和解绑思考总结2.4、事件的切换思考总结2.5、遍历操作总结2.6、小结3、JQuery选择器3.1、基本选择器思考总结及注意事项3.2、层级选择器思考总结及注意事项3.3、属性选择器思考总结及注意事项3.4、过滤器选择器思考总结及注意事项3.5、表单属性选择器思考总结及注意事项3.6、小
复制链接

扫一扫