jQuery-jQuery爱好选择器&事件

最新推荐文章于 2022-11-11 20:15:24 发布

轻小說控

最新推荐文章于 2022-11-11 20:15:24 发布

阅读量460

点赞数

分类专栏：前端 jQuery 文章标签： jQuery-jQuery爱好选择器&事件

本文链接：https://blog.csdn.net/Aqours/article/details/100855991

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

jQuery

练习——爱好选择器

        <form>
          你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

          <br/>
          <input type="checkbox" name="items" value="足球"/>足球
          <input type="checkbox" name="items" value="篮球"/>篮球
          <input type="checkbox" name="items" value="羽毛球"/>羽毛球
          <input type="checkbox" name="items" value="乒乓球"/>乒乓球
          <br/>
          <input type="button" id="checkedAllBtn" value="全　选"/>
          <input type="button" id="checkedNoBtn" value="全不选"/>
          <input type="button" id="checkedRevBtn" value="反　选"/>
          <input type="button" id="sendBtn" value="提　交"/>
        </form>
        <script type="text/javascript"  src="jquery-1.10.1.js"></script>
        <script type="text/javascript">

在这里插入图片描述

            var $checkedAllBox=$('#checkedAllBox');
            var $items=$(':checkbox[name=items]');
            //1. 点击'全选': 选中所有爱好
            $('#checkedAllBtn').click(function(){
              $items.prop('checked',true);
              $checkedAllBox.prop('checked',true);
            });
            //2. 点击'全不选': 所有爱好都不勾选
            $('#checkedNoBtn').click(function(){
              $items.prop('checked',false);
              $checkedAllBox.prop('checked','false');
            });
            //3. 点击'反选': 改变所有爱好的勾选状态
            $('#checkedRevBtn').click(function(){
              $items.each(function(){
                this.checked=!this.checked;
              });
              $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0);
            });
            //4. 点击'提交': 提示所有勾选的爱好
            $('#sendBtn').click(function(){
              $items.filter(':checked').each(function(){
                alert(this.value)
              });
            });
            //5.点击'全选/全不选': 选中所有爱好, 或者全不选中
            $checkedAllBox.click(function(){
              $items.prop('checked',this.checked);
            });
            // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
            $items.click(function(){
              $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0);
            });

文档_增删改

            <ul id="ul1">
              <li>AAAAA</li>

              <li title="hello">BBBBB</li>
              <li class="box">CCCCC</li>

              <li title="hello">DDDDDD</li>
              <li title="two">EEEEE</li>
              <li>FFFFF</li>
            </ul>
            <br>
            <br>
            <ul id="ul2">
              <li>aaa</li>
              <li title="hello">bbb</li>
              <li class="box">ccc</li>
              <li title="hello">ddd</li>
              <li title="two">eee</li>
            </ul>

添加/替换元素

append(content)
向当前匹配的所有元素内部的最后插入指定内容

/*
 需求:
 1. 向id为ul1的ul下添加一个span(最后)
 */
  var $ul1=$('#ul1');
  $ul1.append('<span>appendTo()添加的span</span>');
  $('<span>appendTo()添加的span</span>').appendTo($ul1);

prepend(content)
向当前匹配的所有元素内部的最前面插入指定内容

/*
 2. 向id为ul1的ul下添加一个span(最前)
 */
  $ul1.prepend('<span>prepand()添加的span</span>');
  $('<span>prepand()添加的span</span>').prependTo($ul1);

before(content)
将指定内容插入到当前所有匹配元素的前面

/*
 3. 在id为ul1的ul下的li(title为hello)的前面添加span
 */
  $ul1.children('li[title=hello]').before('<span>before()添加的span</span>');

after(content)
将指定内容插入到当前所有匹配元素的后面替换节点

/*
 4. 在id为ul1的ul下的li(title为hello)的后面添加span
 */
  $ul1.children('li[title=hello]').after('<span>after()添加的span</span>');

replaceWith(content)
用指定内容替换所有匹配的标签删除节点

/*
 5. 将在id为ul2的ul下的li(title为hello)全部替换为p
 */
  $('#ul2>li[title=hello]').replaceWith('<p>全部都替换成p</p>');

2.删除元素

empty()
删除所有匹配元素的子元素但是还有父元素

remove()
删除所有匹配的元素父元素也被删除了

/*
 6. 移除id为ul2的ul下的所有li
 */
$('#ul2').empty(); //删除了 ul2以下的li和新添加的p
$('#ul2>*').remove();//删除了ul2以下的所有子元素

事件绑定与解绑

            <div class="out">
              外部DIV
              <div class="inner">内部div</div>
            </div>

            <div class='divBtn'>
              <button id="btn1">取消绑定所有事件</button>
              <button id="btn2">取消绑定mouseover事件</button>
              <button id="btn3">测试事件坐标</button>
              <a href="http://www.baidu.com" id="test4">百度一下</a>
            </div>

在这里插入图片描述

1.事件绑定(2种)：

eventName(function(){})
绑定对应事件名的监听, 例如：$(’#div’).click(function(){});

/*
 需求：
 1. 给.out绑定点击监听(用两种方法绑定)
 */
// $('.out').click(function(){
//   console.log('on click out');
// });
$('.out').on('click',function(){
 confirm('on click out');
});//这个是通用方法

on(eventName, funcion(){})
通用的绑定事件监听, 例如：$(’#div’).on(‘click’, function(){})

/*
 2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
 */
  // $('.inner')
  //         .mouseenter(function(){
  //           console.log('enter');
  //         })
  //         .mouseleave(function () {
  //           console.log('leave');
  //         });
  // $('.inner')
  //         .on('mouseenter',function () {
  //           console.log('inner2');
  //         })
  //         .on('mouseleave',function () {
  //           console.log('leave2');
  //         });
  $('.inner').hover(function () {
    console.log('enter3');
  },function () {
    console.log('leave3');
  });

优缺点:
eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
on: 编码不方便, 可以添加多个监听, 且更通用

2.事件解绑：

off(eventName)

/*
 3. 点击btn1解除.inner上的所有事件监听
 */
  $('#btn1').click(function(){
    $('.inner').off();
  });
/*
 4. 点击btn2解除.inner上的mouseover事件
 */
$('#btn2').click(function(){
  $('.inner').off('mouseenter');
});

3.事件的坐标

event.clientX, event.clientY 相对于视口的左上角
event.pageX, event.pageY 相对于页面的左上角
event.offsetX, event.offsetY 相对于事件元素左上角

/*
 5. 点击btn3得到事件坐标
 */
  $('#btn3').click(function () {//event事件对象
    console.log(event.offsetX,event.offsetY);//原点为事件元素的左上角
    console.log(event.clientX,event.clientY);//原点为窗口的左上角
    console.log(event.pageX,event.pageY);//原点为页面的左上角
  })

4.事件相关处理

停止事件冒泡 : event.stopPropagation()

/*
 6. 点击.inner区域, 外部点击监听不响应
 */
  $('.inner').click(function (event) {
    console.log('click inner');
    //停止事件冒泡
    event.stopPropagation();
  });

阻止事件默认行为 : event.preventDefault()

/*
 7. 点击链接, 如果当前时间是偶数不跳转
 */
$('#test4').click(function (event) {
  if(Date.now()%2==0){
    event.preventDefault();
  }
});

mouseover与mouseenter

区别mouseover与mouseenter?
mouseover: 在移入子元素时也会触发, 对应mouseout
mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()
区别on(‘eventName’, fun)与eventName(fun)
on(‘eventName’, fun): 通用, 但编码麻烦
eventName(fun): 编码简单, 但有的事件没有对应的方法

事件的委托

在这里插入图片描述

            <ul>
              <li>1111</li>
              <li>2222</li>
              <li>3333</li>
              <li>4444</li>
            </ul>

            <li>22222</li>
            <br>
            <button id="btn1">添加新的li</button>
            <button id="btn2">删除ul上的事件委托的监听器</button>

事件委托:

将多个子元素(li)的事件监听委托给父辈元素(ul)处理
监听回调是加在了父辈元素上
当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数

事件委托的2方:

委托方: 业主 li
被委托方: 中介 ul

使用事件委托的好处

添加新的子元素, 自动有事件响应处理
减少事件监听的数量: n==>1

jQuery的事件委托API

设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)

移除事件委托: $(parentSelector).undelegate(eventName)

$('ul').delegate('li','click',function () {
  this.style.background='red';
})
$('#btn1').click(function () {
  $('ul').append('<li>新增的li....</li>');
})
$('#btn2').click(function () {
  $('ul').undelegate('click');
})

轻小說控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-jQuery爱好选择器&事件

jQuery练习——爱好选择器 <form> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足...
复制链接

扫一扫