JQuery第二天

一、事件-注册 - on的更多用法
1、  给标签同时注册多个事件 =>每一个事件,都拥有不同的处理函数
       $('css选择器').on({事件类型:事件处理函数,事件类型:事件处理函数})
2、  给标签同时注册多个事件=>每一个事件 ,拥有相同的处理函数
       $('css选择器').on('事件类型 事件类型 ',事件处理函数) //多个事件类型以空格隔开,不是逗号
二、事件 - 解绑
       解绑事件  .off()  方法 => 如果不传参数,解绑全部事件
       语法: .off('事件类型 事件类型')=>解绑某一个或者多个
三、one方法的使用及实现原理
       在网页运行期间,只执行一次
       语法: $('css选择器').one('事件类型',事件处理函数)
四、代码主动触发事件
1、  JS原生：用JS代码主动触发事件执行
       1.1、  .onclick()  方法   不会冒泡 (只是方法被调用了,并没有真正的执行事件,因为没有冒泡)
       1.2、  .click()    会冒泡
       1.3、   new CustomEvent('事件类型',{bubbles:true})  创建一个自定义的事件   可以冒泡

 例：<script>
       new CustomEvent('事件类型',{bubbles:true})
       let event = new CustomEvent('click',{bubbles:true})
       sonDiv.dispatchEvent(event)
    </script>

2、  JQ ：用jQ的代码主动触发事件执行
       2.1、click()  可以冒泡
       2.2、trigger('事件类型')  - 触发  可以冒泡   触发标签的默认行为
       2.3、triggerHandler('事件类型')  不可以冒泡  阻止标签的默认行为

  例：<script>
        $('#userInput').on('focus',function () { 
             console.log('光标被聚焦了');
        })
        $('#userInput').triggerHandler('focus')
     </script>

五、事件对象
       1、概念：事件对象: 事件处理函数中,系统通过形参给我们返回的值
       2、内容：事件对象包含什么: 跟事件相关的一些信息 - 事件源 事件类型等
       3、意义：JQ的事件对象 继承自原生的事件对象
六、对象拷贝  $.extend(参数一,参数二)
       过程:将参数二(包含参数二)往后的所有的对象的key+value都合到参数一身上,并且返回参数一
        注：如果有同名的属性,后者覆盖前者
        2、浅拷贝           

例：
   <script>     
      let obj1 = {}
      let obj2 = {
        info: 1,
        name: "zd",
        cc: {
           a: 1,
           b: 2
        },
        arr: [1, 2, 3]
        };
        $.extend(obj1, obj2);
    </script>     

          3、实现深拷贝 $.extend(true,参数一,参数二,..)
七、多库共存
       问题：同名$ 会出现覆盖的情况
       解决：let 变量=jQuery.noConflict()     

例：<script>
      function $1() {
         console.log('假装是自己写的插件');
      }
      let zz = jQuery.noConflict() //将jQ的所有方法都给到了这个变量
      console.log(zz('#myDiv'));
    </script>

八、属性操作
1、JS操作属性
     语法： setAttribute('属性名','值')   设置属性
                getAttribute('属性名')        获取属性
2、 JQ的属性操作
      2.1、操作自定义属性  attr()
              语法：   .attr('属性名','属性值')    设置
                           .attr('属性名')    获取
      2.2、操作标准属性 prop()（标签自带的属性 class id title checked 等等）
              语法：   .prop('属性名','值')     设置
                           .prop('属性名')    获取
3、补：attr()  操作checked出问题
           prop() 操作自定义属性时 不保存在标签身上,保存在内存中
九、文本属性操作（设置  - 传参）（获取  - 不传参）
1、 .html()  - innerHTML  // 可以解析标签    

例：$('#myDiv').html('<p>我是一个p标签</p>')//解析标签并设置内容
    console.log($('#myDiv').html());// 获取内容

2、 .text()  - innerText  // 不可以解析标签     

   例：$('#myDiv').text('<p>我是一个p标签</p>')//设置内容
      console.log($('#myDiv').text());  // 获取内容

3、 .val()   - value  

例： $('input').val(设置的值)  // 设置内容
    console.log($('input').val());// 获取内容

十、一些方法与事件中的注意点
1、 获取JQ对象要注意，JQ对象是一个伪数组   通过Array.from转成真数组才可以使用数组方法

 例：$('.j-checkbox')  //获取对象
     Array.from($('.j-checkbox'))//转化成真数组

2、every方法
     说明：.every() 必须所有的项都为true 结果才为true

 例：Array.from($('css选择器')).every(function (smallC, index) {return 结果})
     //   smallC 是原生dom对象(自定义)

3、each()  方法   JQ做遍历 
     注意: JQ的 each方法 接收参数  和 forEach 相反
     each(参数一，参数二) 参数一:下标          参数二 当前的项
     语法：$('').each(function(index,v){})
     forEach(参数一，参数二)  参数一:当前的项    参数二 : 下标
4、parents() 方法 取得祖先元素
     用途：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）
5、prev() 方法 取得前一个同辈元素
     用途：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
     next() 方法  取得后面同辈元素
     用途：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
6、substr() substring()  截取字符串
     6.1、substr(start, length)
             start  - 所需的子字符串的起始位置  
             length - 字符个数                 可选项
     6.2、substring(start, end) 
             start   - 所需的子字符串的起始位置
             end     - 指明子字符串的结束位置    可选项
7、toFixed(num) 方法
      .toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字
       num 规定小数的位数
8、.remove() 从DOM中删除所有匹配的元素或当前元素
9、.empty()  删除匹配的元素集合中所有的子节点