黑马程序员技术交流社区

标题: 【郑州校区】python前端jQuery高级 [打印本页]

---

作者: 谷粒姐姐    时间: 2018-12-7 15:41
标题: 【郑州校区】python前端jQuery高级
知识点预习

• 1、jQuery事件冒泡2、事件委托        3、元素节点操作        4、正则表达式及表单验证实例
  
  

01- submit事件

[AppleScript] 纯文本查看 复制代码

//监听 提交的事件

$("form").submit(function (abc) {

    //阻止系统的默认行为

   // abc.preventDefault();

    return false;

})

- 事件冒泡的原理在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事
件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的
父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最
顶层，即document对象（有些浏览器是window）。
事件冒泡验证

• 事件的传递: 子 --> 父-->祖父-->window
• 冒泡: 父元素 有同样的事件
• 事件冒泡机制有时候是不需要的，需要阻止掉
  • 通过 event.stopPropagation() 来阻止
  • 合并写法：return false; 可以阻止冒泡也可以阻止事件的默认行为
    
    
  
  

04- 弹框案例

• 点击按钮显示,但要注意阻止它的冒泡点击document对象隐藏
• 点击提示框时不隐藏提示框,阻止冒泡
• 点击关闭按钮时隐藏提示框,单独实现,因为父级阻止冒泡了
  
  

05- 事件冒泡小结

• 只有在父子都要处理相同事件时才去考虑事件冒泡问题,一般情况不用关心它!优点
  • 如果父子有相同事件,而且相同事件的功能都一样 时,可以只用给父级添加事件,减少添加绑定事件次数,减少代码量,提升性能效率
    
    
• 弊端:
  • 如果父子有相同事件,但相同事件的功能不一样 时,就要阻止冒泡
    
    
  
  

06- 事件委托

• 事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
• 事件委托的优点:
  • 1.减少事件绑定次数,减少代码量
  • 2.后面新添加的子元素也可以正常执行事件
    
    
  
  

07- 节点操作

• 创建节点
• [AppleScript] 纯文本查看 复制代码

  var $div = $('<div>'); // 空节点/空标签
  
  var $div2 = $('<div>这是一个div元素</div>');

• 插入节点
  • 1、在现存元素的内部，从后面插入元素
    • 现存元素.append('插入的元素')插入的元素.appendTo('现存元素')2、在现存元素的内部，从前面插入元素        现存元素.prepend('插入的元素')         插入的元素.prependTo('现存元素')3、在现存元素的外部，从后面插入元素         现存元素.after('插入的元素')         插入的元素.insertAfter('现存元素')4、在现存元素的外部，从前面插入元素         现存元素.before('插入的元素')         插入的元素.insertBefore('现存元素')删除节点
    • [AppleScript] 纯文本查看 复制代码

      $('#div1').remove();

    • TODOList案例
      • 1.获取元素2.判断是否为空        3.将新增的内容 添加到列表        4.删除   上移动  下移动        5. 判断 到头 和到尾
        
        
      09- 正则复习
      • 1、什么是正则表达式：
        • 能让计算机读懂的字符串匹配规则。
          2、正则表达式的写法：
        • [AppleScript] 纯文本查看 复制代码

          var re=new RegExp('规则', '可选参数');
          
          var re=/规则/参数;

        • 规则中的字符
        • [AppleScript] 纯文本查看 复制代码

          1）普通字符匹配： 如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
          
          2）转义字符匹配：
          
          \d 匹配一个数字，即0-9
          
          \D 匹配一个非数字，即除了0-9
          
          \w 匹配一个单词字符（字母、数字、下划线）
          
          \W 匹配任何非单词字符。等价于A-Za-z0-9_
          
          \s 匹配一个空白符
          
          \S 匹配一个非空白符
          
          \b 匹配单词边界
          
          \B 匹配非单词边界
          
          .匹配一个任意字符
          
          var sTr01 = '123456asdf';
          
          var re01 = /\d+/;
          
          //匹配纯数字字符串
          
          var re02 = /^\d+$/;
          
          alert(re01.test(sTr01)); //弹出true
          
          alert(re02.test(sTr01)); //弹出false

        • 4、量词：对左边的匹配字符定义个数
        • [AppleScript] 纯文本查看 复制代码

          ? 出现零次或一次（最多出现一次）
          
          "+" 出现一次或多次（至少出现一次）
          
          "*" 出现零次或多次（任意次）
          
          {n} 出现n次
          
          {n,m} 出现n到m次
          
          {n,} 至少出现n次

        • 、任意一个或者范围
        • [AppleScript] 纯文本查看 复制代码

           xxxxxxxxxx [abc123] : 匹配‘abc123’中的任意一个字符[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

        • 限制开头结尾
        • ^ 以紧挨的元素开头$ 以紧挨的元素结尾
        • 修饰参数：
        • [AppleScript] 纯文本查看 复制代码

          g： global，全文搜索，默认搜索到第一个结果接停止
          
          i： ingore case，忽略大小写，默认大小写敏感

        • 8、常用函数
        • [AppleScript] 纯文本查看 复制代码

          1、test
          
          用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
          
          2、replace
          
          用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符
          
          正则默认规则
          
          匹配成功就结束，不会继续匹配，区分大小写
          
          var sTr01 = 'abcdefedcbaCef';
          
          var re01 = /c/;
          
          var re02 = /c/g;
          
          var re03 = /c/gi;
          
          var sTr02 = sTr01.replace(re01,'*');
          
          var sTr03 = sTr01.replace(re02,'*');
          
          var sTr04 = sTr01.replace(re03,'*');
          
          alert(sTr02); // 弹出 ab*defedcbaCef
          
          alert(sTr03); // 弹出 ab*defed*baCef
          
          alert(sTr04); // 弹出 ab*defed*ba*ef

        • 常用正则规则
        • [AppleScript] 纯文本查看 复制代码

          //用户名验证：(数字字母或下划线6到20位)
          
          var reUser = /^\w{6,20}$/;
          
          //邮箱验证：        
          
          var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
          
          //密码验证：
          
          var rePass = /^[\w!@#$%^&*]{6,20}$/;
          
          //手机号码验证：
          
          var rePhone = /^1[34578]\d{9}$/;

        • - 注册表单验证
          • 提示内容
            • xx不能为空!
            • 用户名只能是6到20位字母数字,还包含"_"
            • 密码只能是6到20位字母数字,还包含"_!@#$%^&*"字符
            • 两次输入的密码不一致!
            • 你输入的邮箱格式不正确
              1.判断输入是否为空,如果为空弹不能为空提示2.如果不为空,就用正则匹配输入是否符合规则
              
              
          • 3.密码确认,只需要判断两个密码是否一样
          • 4.只要点击文本输入框就隐藏提示
          • 5.单选框的判断
          • js写法:单选框标签对象.checked == truejQuery写法:单选框标签对象.is(:checked) == true
          • 6.定义bool变量用来记录输入是否正确,注意因为单选框默认就是勾选,所以用来判断它的变量默认值要能通过判断
          • 当所有输入都没有问题之后才能提交数据
            
          
          
        
        
      
      
    
    
  
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2