jQuery学习

最新推荐文章于 2023-09-27 19:18:36 发布

Smile Hun

最新推荐文章于 2023-09-27 19:18:36 发布

阅读量302

点赞数

分类专栏： jsp学习文章标签： jquery

本文链接：https://blog.csdn.net/SmileJayNew/article/details/120116268

版权

jsp学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

5.jQuery

jQuery是辅助JavaScript开发的js类库，是JavaScript和Query结合的产物

核心思想：Write less，do more。

5.1 jQuery的导入

在jQuery下载地址完成jQuery的下载，之后导入到项目所在路径。

<head>
    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">

        //页面加载完之后执行{}中的内容，相当于window.onload = function(){}
        $(function (){
            var $btnObj = $("#id001");
            $btnObj.click(function (){
                alert("jQuery 单击事件");
            });
        });
    </script>

</head>
<body>
    <button id="id001">点击触发</button>
</body>

5.2 jQuery的核心函数$()

当传入参数为函数时

表示页面加载完成之后，相当于window.οnlοad=function(){}

当传入参数为HTML字符串时

表示创建这个HTML标签对象。

注：要写在$(function(){})；里面，否则无法正常执行

<head>
    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           $("<button id=\"id001\">点击触发</button>").appendTo("body");
       });
    </script>

</head>
<body>

</body>

在body标签内容为空时，出现按钮组件。

当传入参数为选择器字符串时

返回5.5

$("#id属性值")；根据id查询标签对象

$(“标签名”)；根据标签名查询对象

$(".class属性值")；根据class属性查询对象
当传入参数为DOM对象时

会把DOM对象转换为jQuery对象。

5.3 jQuery与Dom对象

DOM对象Alert出来的效果为 [object HTML标签名Element]
jQuery对象Alert出来的效果为 [object Object]
jQuery对象的本质：数组，存放dom对象的数组，同时包含jQuery提供的函数

5.4 jQuery的选择器与过滤器

5.4.1层级选择器

$(“祖标签后代标签名”)：找祖先标签下的所有匹配的后代标签

$(“父标签 > 子标签”)：找父标签下的所有匹配的子标签

$(“prev标签 + next标签”)：找prev标签的下一个next标签

$(“prev标签 ~ next标签”)：找与prev同级的所有next标签

5.4.2 普通过滤器

$(“标签名：first”)：获取第一个元素

$(“标签名：last”)：获取最后一个元素

$(“标签名：not(：属性名)”)：获取不包含某属性的标签

$(“标签名：even”)：获取所有索引值为偶数的元素

$(“标签名：odd”)：获取所有索引值为奇数的元素

$(“标签名：eq(索引值)”)：获取指定索引值的元素(从零开始)

$(“标签名：gt(索引值)”)：获取大于索引值的元素

$(“标签名：lt(索引值)”)：获取大于索引值的元素

$(“标签名：header”)：获取所有标题

$(“标签名：animated”)：获取正在执行动画效果的标签

5.4.3 内容过滤器

$(“标签名：contains(‘内容’)”)：获取包含指定内容的标签

$(“标签名：empty”)：获取不包含子元素或文本的空元素

$(“标签名：has(选择器名)”)：获取包含选择器所匹配的元素的元素

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           
           //选中包含p标签的div标签，为其添加class属性为test
           $("div:has(p)").addClass("test");
           
       });
    </script>

</head>
<body>
    <div><p>Hello</p></div>
    <div>Hello个屁呢！</div>
</body>

效果图如下，在body标签中并未给div标签设置属性，但是执行完之后，发现第一个div标签有了class属性，且值为test。

5.4.4 属性过滤器

$(“标签名[属性名]”)：获取包含某属性的标签

$(“标签名[属性名 = ‘属性值’]”)：获取包含某属性且属性值为特定值的标签

$(“标签名[属性名！= ‘属性值’]”)：获取包含某属性且属性值不为特定值的标签

注：两种情况都会被选出来，第一：不包含该属性；第二：属性值不是给定值

验证如下：

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           $("div[name != 'Smile']").addClass("test");
       });
    </script>

</head>
<body>
    <div name = "Smlie">Hello</div>
    <div>Hello个屁呢！</div>
    <div name = "sry">Hello个屁呢！</div>
</body>

在标签name属性为为sry以及不包含name属性的div标签均出现新的class属性

$(“标签名[属性名 ^= ‘属性值’]”)：获取包含某属性且以某些值开头的标签

比如<div name = “Smile”>，就可以通过<div ^= ‘Sm’>查到

$(“标签名[属性名 $= ‘属性值’]”)：获取包含某属性且以某些值结尾的标签

$(“标签名[属性名 *= ‘属性值’]”)：获取包含某属性包含某些值开头的标签

$(“标签名[属性选择][属性选择]”)：获取包含某属性包含某些值开头的标签

5.4.4 表单过滤器

$("：input")：获取所有表单内的input、select、textarea、button等标签

$("：text")：获取所有表单内的type=text的标签

$("：password")：获取所有表单内的type=password的标签

$("：hidden")：获取所有表单内的type=hidden以及style="display：non"的标签

$("：enabled")：获取所有表单内的可用标签

$("：disabled")：获取所有表单内的不可用标签，内容存在，但不可操作

$("：checked")：获取所有表单内被选中标签(一般值单选框、复选框，不包含下拉框)

$("：selected")：获取所有表单内被选中的下拉框标签

5.5 jQuery属性操作

html()

可以设置和获取起始标签和结束标签中的内容。与dom属性的innerHTML相同。

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           //传参则设置，不传参则获取
           //获取是获取第一个，设置，是设置所有
           console.log($("div").html());//获取div标签中的内容，包含html标签
           console.log($("p").html());//获取p标签中的内容
           //console.log($("div").html("关你屁事！"));//将所有div标签中的内容改为关你屁事
           $("div").html("<span>关你屁事！</span>");//将所有div标签中的内容改为关你屁事，且添加span标签
       });
    </script>

</head>
<body>
    <div name = "Smlie"><span>Hello!</span></div>
    <p>Hello个屁呢！</p>
    <div name = "sry">Hello个屁呢！</div>
    <h1>放大的屁！</h1>
</body>

效果图如下

页面内容：

控制台内容：

text()

可以设置和获取起始标签和结束标签中的文本。与dom属性的innerText相同。

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           //不传参是获取，传参是设置
           console.log($("div").text());
           console.log($("p").text());
           //console.log($("div").html("关你屁事！"));
           console.log($("p").text("<span>关你屁事！</span>"));
       });
    </script>

</head>
<body>
    <div name = "Smlie">div标签<span>div中的span标签</span></div>
    <p>这次我不在p标签里骂人了！<span>我在span里骂</span></p>
</body>
</html>

可以看到在控制台输出div标签中的内容时，并未包含span标签，而是直接将两个标签内的内容进行输出，在修改内容时，直接将span标签当成文本输出。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Ataw4Zi-1630828689558)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20210816110306735.png)]

val()

可以设置和获取表单项(见2.4.10)的value属性值。跟dom属性的value相同

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           //不传参是获取，传参是设置
           $("button").click(function (){
               alert($("#Smile").val());
               console.log($("smile").val());
           });
       });
    </script>

</head>
<body>
    <div name = "Smlie">div标签<span>div中的span标签</span></div>
    <input name="smile" type="text"/>
    <button>测试val()</button>
</body>

测试过程中发现， $KaTeX parse error: Expected 'EOF', got '#' at position 40: \dotsug()复习[核心函数传参](#̲核心函数传参)在点击测试val\dots$ ("#Smile").val()无法使用。

attr() 获取和设置属性的值
prop()获取和设置属性的值

注：attr()在访问表单中的复选框时，若复选框未选中，会返回undefined，因此官方给出来更优解prop()，在复选框未选中时，会返回false。

attr() ：不推荐操作checked、readOnly、selected、disabled等等

attr可以操作非标准属性，比如自定义属性。

修改a标签的class属性
```
$("a:last").click(function (){
   if($("this[class = 'showmore']")) { //过滤选择类型为showmore的标签
      $("li").show();

      $(this).attr("class", "showless");//将showmore改为showless
      alert("调用成功");
      return false;
   }
   else{


   }
```
prop() : 只推荐操作checked、readOnly、selected、disabled等等

格式：$("：表单类型").attr(“想获取的属性名（，想修改的值）”)

格式：$("：表单类型").prop(“想获取的属性名（，想修改的值）”)

5.6 DOM对象的增删改

5.6.1 内部插入

a.appendTo(b) 将a插入到b子元素的末尾，成为最后一个子元素

a.prependTo(b) 将a插入到b所有子元素前面，成为第一个子元素

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           $("<span>prependto测试</span>").prependTo("div");
           $("<span>appendTo测试</span>").appendTo("button");

       });
    </script>

</head>
<body>
    <div id = "Smlie">div标签<span>div中的span标签</span></div>
    <input id="smile" type="text"/>
    <button >测试val()</button>
</body>

测试结果如下，div标签中最前面的是利用prependTo插入的新标签。

5.6.2 外部插入

a.insertAfter(b) 将a插入到b元素的后面

a.insertBefore(b) 将a插入到b元素的前面

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           $("<span>insertAfter测试</span>").insertAfter("div");
           $("<span>insertBefore测试</span>").insertBefore("button");

       });
    </script>

</head>
<body>
    <div id = "Smlie">div标签<span>div中的span标签</span></div>
    <input id="smile" type="text"/>
    <button >测试val()</button>
</body>

测试结果如下：

5.6.3 替换

a.replaceWith(b) 将a换成b，即使有多个a，只出现一个b

a.replaceAll(b) 将a换成b，每一个a都会被换成

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           $("div").replaceWith("<span>replaceWith测试</span>");

       });
    </script>

</head>
<body>
    <div id = "Smlie">div标签<span>div中的span标签</span></div>
    <div>第二个div标签</div>
    <div>第三个div标签</div>
    <p>第一个p标签</p>
    <p>第2个p标签</p>
    <p>第3个p标签</p>
</body>

图片结果如下：

可以看到，所有的div标签全部被替换为replaceWith测试。

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           $("<h1>replaceAll测试</h1>").replaceAll("p");
       });
    </script>

</head>
<body>
    <div id = "Smlie">div标签<span>div中的span标签</span></div>
    <div>第二个div标签</div>
    <div>第三个div标签</div>
    <p>第一个p标签</p>
    <p>第2个p标签</p>
    <p>第3个p标签</p>
</body>

注：replaceAll，在$符号后面的内容要带标签，否则无法完成替换！

5.6.4 删除

$(“标签名”).remove()：清除内容带标签

$(“标签名”).empty()：清除内容保留标签

5.6.5 代码练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

   $(function (){
      //绑定单击事件
      $("#addEmpButton").click(function (){
         //获取输入框的内容
         var name=$("#empName").val();
         var email=$("#email").val();
         var salary=$("#salary").val();


         //创建行标签对象，添加到上面的表格中
         var $trObj = $("<tr>" +
               "<td>" + name + "</td>" +
               "<td>" + email + "</td>" +
               "<td>" + salary + "</td>" +
               "<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
               "</tr>")

         $trObj.appendTo($("#employeeTable"));

         //补绑单击事件
         $trObj.find("a").click(function (){
            var $rowObj = $(this).parent().parent();
            var name = $rowObj.find("td:first").text();
            if(confirm("确定要删除["+ name +"]吗？")){
               //在事件响应的function中，有this对象，该对象为正在响应事件的dom对象
               $rowObj.remove();
            }

            //阻止默认行为
            return false;
            });
         });
      })

      //a标签的单击事件（删除内容）
      $("a").click(function (){
         //JavaScript提供的一个确认提示框函数，点击确认，则返回true，点击取消则返回false
         //获取行对象，通过得到这个a标签的父元素得到td标签，再向上找父元素找到tr标签
         var $rowObj = $(this).parent().parent();
         var name = $rowObj.find("td:first").text();
         if(confirm("确定要删除["+ name +"]吗？")){
            //在事件响应的function中，有this对象，该对象为正在响应事件的dom对象
            $rowObj.remove();
         }

         //阻止默认行为
         return false;
      });


   
   
</script>
</head>
<body>

   <table id="employeeTable">
      <tr>
         <th>Name</th>
         <th>Email</th>
         <th>Salary</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td>Tom</td>
         <td>tom@tom.com</td>
         <td>5000</td>
         <td><a href="deleteEmp?id=001">Delete</a></td>
      </tr>
      <tr>
         <td>Jerry</td>
         <td>jerry@sohu.com</td>
         <td>8000</td>
         <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr>
         <td>Bob</td>
         <td>bob@tom.com</td>
         <td>10000</td>
         <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
   </table>

   <div id="formDiv">
   
      <h4>添加新员工</h4>

      <table>
         <tr>
            <td class="word">name: </td>
            <td class="inp">
               <input type="text" name="empName" id="empName" />
            </td>
         </tr>
         <tr>
            <td class="word">email: </td>
            <td class="inp">
               <input type="text" name="email" id="email" />
            </td>
         </tr>
         <tr>
            <td class="word">salary: </td>
            <td class="inp">
               <input type="text" name="salary" id="salary" />
            </td>
         </tr>
         <tr>
            <td colspan="2" align="center">
               <button id="addEmpButton" value="abc">
                  Submit
               </button>
            </td>
         </tr>
      </table>

   </div>

</body>
</html>

5.7 jQuery中的样式操作

allclass() 添加样式

removeclass() 删除样式

toggleclass() 有则删除，无则添加

offset() 获取或设置一个样式的坐标

5.8 jQuery中的动画操作

show() 将隐藏的内容显示出来

hide() 将显示的内容隐藏起来

toogle() 隐藏的显示，显示的隐藏

以上动画方法均可添加参数

第一个是动画执行时长，单位：ms

第二个是动画的回调函数(动画执行完成后自动调用的函数)

$("#btn1").click(function(){
   $("#div1").show(2000,function () {
      alert("show动画完成 ")
   });
});

fadeIn() 淡入

fadeOut() 淡出

fadeTo() 淡化到，在指定的时间内将透明度修改到指定值

fadeToogle() 淡化切换

5.9 代码练习：品牌展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
   margin: 0;
   padding: 0;
}

body {
   font-size: 12px;
   text-align: center;
}

a {
   color: #04D;
   text-decoration: none;
}

a:hover {
   color: #F50;
   text-decoration: underline;
}

.SubCategoryBox {
   width: 600px;
   margin: 0 auto;
   text-align: center;
   margin-top: 40px;
}

.SubCategoryBox ul {
   list-style: none;
}

.SubCategoryBox ul li {
   display: block;
   float: left;
   width: 200px;
   line-height: 20px;
}

.showmore , .showless{
   clear: both;
   text-align: center;
   padding-top: 10px;
}

.showmore a , .showless a{
   display: block;
   width: 120px;
   margin: 0 auto;
   line-height: 24px;
   border: 1px solid #AAA;
}

.showmore a span {
   padding-left: 15px;
   background: url(img/down.gif) no-repeat 0 0;
}

.showless a span {
   padding-left: 15px;
   background: url(img/up.gif) no-repeat 0 0;
}

.promoted a {
   color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   $(function() {
      //隐藏后几项内容
      $("li:gt(5):not(:last)").hide();

      //绑定单击事件
      $("a:last").click(function (){

         //状态取反（隐藏/显示）
         $("li:gt(5):not(:last)").toggle();

         //判断是否添加高亮
         if($("li:gt(5):not(:last)").is(":hidden")) {
            $("div div").attr("class", "showmore");
            $("span").text("显示全部品牌");
            $("div ul li:contains('佳能')").removeClass();
            $("div ul li:contains('尼康')").removeClass();
            $("div ul li:contains('奥林巴斯')").removeClass();
            return false;
         }
         else{
            $("div div").attr("class", "showless");
            $("span").text("显示精简品牌");
            $("div ul li:contains('佳能')").addClass("promoted");
            $("div ul li:contains('尼康')").addClass("promoted");
            $("div ul li:contains('奥林巴斯')").addClass("promoted");
            return false;
         }
      });
   });
</script>
</head>
<body>
   <div class="SubCategoryBox">
      <ul>
         <li><a href="#">佳能</a><i>(30440) </i></li>
         <li><a href="#">索尼</a><i>(27220) </i></li>
         <li><a href="#">三星</a><i>(20808) </i></li>
         <li><a href="#">尼康</a><i>(17821) </i></li>
         <li><a href="#">松下</a><i>(12289) </i></li>
         <li><a href="#">卡西欧</a><i>(8242) </i></li>
         <li><a href="#">富士</a><i>(14894) </i></li>
         <li><a href="#">柯达</a><i>(9520) </i></li>
         <li><a href="#">宾得</a><i>(2195) </i></li>
         <li><a href="#">理光</a><i>(4114) </i></li>
         <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
         <li><a href="#">明基</a><i>(1466) </i></li>
         <li><a href="#">爱国者</a><i>(3091) </i></li>
         <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
      </ul>
      <div class="showmore">
         <a href="未知连接" ><span>显示全部品牌</span></a>
      </div>
   </div>
</body>
</html>

5.10 jQuery的事件操作

5.10.1 jQuery与js的页面加载

window.onload()=function(){}

$(function(){});

页面在加载完成后先加载jQuery的事件，再加载原生js的事件
jQuery页面加载完成之后，指的是，浏览器内核解析完页面的标签、创建好dom对象之后执行
原生js页面加载完成之后，除了要等以上任务完成，还要等标签显示时需要的内容加载完成。
同时，原生js页面只会执行最后一个页面加载完成的代码，而jQuery会执行每一个页面加载完成的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   window.onload = function () {
      alert("原生js的页面加载完成之后--1")
   }
   $(function () {
      alert("jquery的页面加载完成 之后--3")
   });
</script>
</head>
<body>
   <button>我是按钮</button>
   
   <iframe src="http://localhost:8080"></iframe>
   <img src="http://localhost:8080/1.jpg" alt=""/>
</body>
</html>

在上面的代码中，执行顺序为，先显示jQuery页面加载完成，再显示原生js页面加载完成。

可以从下图中观察出，标签中需要含有localhost:8080这个页面，以及要包含localhost:8080/1.jpg这个图片，因此页面加载完成，并创建dom对象后显示jQuery加载完成，而在读取完localhost:8080这个页面后显示整个js页面加载完成。

jQuery页面加载完成：

原生js页面加载完成：

5.10.2 jQuery其他事件操作

click() 绑定与触发单击事件

click()传参数，function则是绑定某组件的单击事件，若无参数，则为触发某组件的单击事件。

mouseover() 绑定与触发鼠标移入事件

mouseout() 绑定与触发鼠标移出事件

bind() 可以给元素一次绑定一个或多个事件

bind(“事件名事件名事件名”, “函数”){函数体}

unbind() 解除绑定

unbind(“事件名”)

one() 使用上与bind一样，但是one只触发一次

live() 可以用来绑定选择器匹配的所有元素的时间，后面动态创建出来的标签也有效

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<link href="css/style.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		
			$(function(){
                //单击事件绑定
				$("h5").click(function () { // 传function是绑定事件
					alert('h5单击事件 == click方法绑定')
				});
                
                //单击事件触发
				$("button").click(function () {
   				$("h5").click(); // 不传function是触发事件，触发h5的单击事件
				});
                
                //鼠标移入
				$("h5").mouseover(function () {
					console.log("你进来了");
				});
                
				//鼠标移出
				$("h5").mouseout(function () {
					console.log("你出去了");
				 });
                
			});
		
		</script>
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
			<button>按钮</button>
		</div>
	</body>

</html>

5.10.3 事件对象

事件冒泡：父子元素同时监听同一个事件，当触发子元素的事件时父元素同时触发

防止冒泡的方法：在子元素触发事件之后添加return false

js事件对象

定义：封装有触发的事件信息的一个JavaScript对象

js事件对象的获取

在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数，习惯上取名为event

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

   #areaDiv {
      border: 1px solid black;
      width: 300px;
      height: 50px;
      margin-bottom: 10px;
   }
   
   #showMsg {
      border: 1px solid black;
      width: 300px;
      height: 20px;
   }

</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">

   //1.原生javascript获取 事件对象
   // window.onload = function () {
   //     document.getElementById("areaDiv").onclick = function (event) {
   //        console.log(event);
    		//在控制台输出事件的类型，触发方式等信息，包含在event里面
   //     }
   // }
    
   //2.JQuery代码获取 事件对象
   $(function () {
      // $("#areaDiv").click(function (event) {
      //     console.log(event);
      // });
       
   //3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

      $("#areaDiv").bind("mouseover mouseout",function (event) {
         if (event.type == "mouseover") {
            console.log("鼠标移入");
         } else if (event.type == "mouseout") {
            console.log("鼠标移出");
         }
      });


   });



</script>
</head>
<body>

   <div id="areaDiv"></div>
   <div id="showMsg"></div>

</body>
</html>

5.10.4 淘宝服装细节显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hcP3Ke2e-1630828689572)(…/…/AppData/Roaming/Typora/typora-user-images/image-20210904160347126.png)]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
   body {
      text-align: center;
   }
   #small {
      margin-top: 150px;
   }
   #showBig {
      position: absolute;
      display: none;
   }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   $(function(){
      $("#small").bind("mouseover mouseout mousemove",function (event){
         if(event.type == "mouseover"){
            $("div").show();
         }else if(event.type == "mouseout"){
            $("div").hide();
         }else if(event.type == "mousemove"){
            $("div").offset({
               left: event.pageX + 10,
               top:event.pageY + 10
            });
         }
      });
      
   });
</script>
</head>
<body>

   <img id="small" src="img/small.jpg" />
   
   <div id="showBig">
      <img src="img/big.jpg">
   </div>

</body>
</html>

Smile Hun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery学习

5.jQueryjQuery是辅助JavaScript开发的js类库，是JavaScript和Query结合的产物核心思想：Write less，do more。5.1 jQuery的导入在jQuery下载地址完成jQuery的下载，之后导入到项目所在路径。<head> <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script> <script type="
复制链接

扫一扫