js和jsquery点击事件中的(this)

最新推荐文章于 2025-05-28 08:33:01 发布

编程小罗

最新推荐文章于 2025-05-28 08:33:01 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： Js和Jqury

本文链接：https://blog.youkuaiyun.com/weixin_44522131/article/details/88529565

本文探讨了JS和jQuery中点击事件的处理方式，包括this关键字的理解，jQuery的遍历机制，以及如何在事件中有效使用jQuery对象。同时，介绍了jQuery的css函数底层实现，mouseover事件的自动遍历特性，以及属性选择过滤器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js和jsquery点击事件中的(this)

另外jsquery中css函数中底层实现遍历,所以jsquery对象调用时不需要循环遍历,但是点击事件中底层没有实现遍历,所以当jsquery对象是数组时就需要遍历得到每个对象.转换成了js对象,可以看成jquery数组由许多个js对象组成.遍历jquery数组得到每个js对象.
jsquery遍历:

$("#btn4").click(function () {
    var $option = $("option:selected");
    for (i=0;i<$option.length;i++) {
        var option1 = $option[i];
        //option1转换成了js对象,可以看成jquery数组由许多个js对象组成.遍历jquery数组得到每个js对象.
          alert(option1.value  )
    }
})
$("#btn10").click(function () {
    $(":animated").css("backgroundColor", "pink");
})

mouseover鼠标移入移出内置了遍历，此时所有tr就全部设置了移入事件,//this:当前事件触发的标签对象,this是JS对象,需要转换成jquery.
点击事件js中用onclick而jquery中用的是click;(js中select中onchange,jquery中用的是change)

$(function () {
          $("tr:gt(2):even").addClass("one");
          $("tr").mouseover(function () {
      $(this).toggleClass("two");//对设置或移除被选元素的一个或多个类进行切换
          });
          $("tr").mouseout(function () {
              $(this).removeClass("two");
          });
      })

属性选择过滤器,可以对点击事件进行过滤,类似于id,class,不能直接选择[type=‘checkbox’] 默认只会选择第一个[type=‘checkbox’]属性,后面的不会选择.

$(function () {
          $("#tab7").click(function () {
      $("tr>td,th [type='checkbox']" ).click();
          })
<tr>
   <td colspan="5"><input type="button" value="删除" id="tab7"></td>
</tr>
<tr>
   <th><input type="checkbox" onclick="selectAll(this) " id="tab6" ></th>
   <th>分类ID</th>
   <th>分类名称</th>
   <th>分类描述</th>
   <th>操作</th>
</tr>
<tr>
   <td><input type="checkbox" class="itemSelect"></td>
   <td>1</td>
   <td>手机数码</td>
   <td>手机数码类商品</td>
   <td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
   <td><input type="checkbox" class="itemSelect"></td>
   <td>2</td>
   <td>电脑办公</td>
   <td>电脑办公类商品</td>
   <td><a href="">修改</a>|<a href="">删除</a></td>
</tr>

克隆所有b元素（并选中这些克隆的副本），然后将它们b前置到所有段落P中最后位置。

 $("b").clone().prependTo("p");
$(function () {
    $("ul>li img").click(function () {
        $(this).clone().appendTo(".word")
        // 克隆所有b元素（并选中这些克隆的副本），然后将它们$(this)后置到".word"中最后位置。
        // $(".word").append($(this));
        // $(this).clone().appendTo(".word");
    });