JQuery笔记

一、jQuery基本使用

1. 基础语法： $(selector).action()

   • jQuery 入口函数

     $(document).ready(function(){
         // 执行代码
     });
     或
     $(function(){
         // 执行代码
     });

   • jQuery 入口函数与 js入口函数的区别

     • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
     • js的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行
   • jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScirpt属性和方法

2. jQ对象与DOM对象转换

   • DOM对象转换为jQuery对象 : $(DOM对象)
   • jQuery对象转换为DOM对象 S('div')[index] 或 $('div').get(index)

二、常用api

2.1、jQ选择器

• 基础语法： $(selector)，基于css各种选择器，可以使用元素名、id、类名等进行选择

  | 名称 | 用法 | 描述 |
  | --------------------- | ----------------- | ------------------------ |
  | ID选择器 | $("#id") | 获取指定D的元素 |
  | 全选选择器 | $(*) | 匹配所有元素 |
  | 类选择器 | $(".class") | 获取同一类 |
  | class的元素标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
  | 并集选择器 | $(“div,p,li”) | 选取多个元素 |
  | 交集选择器 | $(“li.current”) | 交集元素 |

  更多实例

2.2、筛选方法

2.3、样式操作

1. 操作css

   $(this).css('属性名') //参数仅有属性名 ，则返回属性值
   
   $(this).css('属性名', 'value') //参数有属性名和值，则设置属性
   
   let lst = {'属性1':'value' , '属性2':'value'}
   $(this).css(lst)
   //参数传入对象 

2. 对css的类操作

   $(this).addClass('classname') //向被选元素添加一个或多个类
   $(this).removeClass('classname') //从被选元素删除一个或多个类
   
   //其中的类名无需加 ‘.’
   
   $(this).toggleClass('classname') //对被选元素进类的切换操作,点击后在原来类和切换类中进行改变

   • 进行操作时不会对原有类名进行覆盖 ， 但原生js会对类名进行覆盖

2.4、JQuery其他操作

1. JQuery效果

2. 属性值操作

   • $(this).prop('属性名') 获取元素固有属性的值
   • $(this).attr('属性名' , 'value') 当参数仅有属性名时为获取自定义属性，有value时则为自定义属性添加值

3. 设置元素内容

   • $(this).html() 设置元素内容
   • $(this).text()设置元素文本
   • $(this).val() 设置表单值

4. 元素操作

   • 遍历

     $('div').each(function( index , domele ){
         console.log(index);
     })
     // 回调函数的第一个参数是索引，第二个是dom对象

   • 遍历元素

     $.each(object , fuction(index , element){
            
     })
     // 可用于遍历各种对象

   • 元素创建、添加、删除

     $(function() {
         // 创建元素
         var elm = $('<li> 创建一个li <li/>');
         // 添加元素
         $('div').append(elm); //内部添加，放到内容最后面
         $('div').prepend(elm); //内部添加，放到内容最前面
         
         $('div').after(elm); //内部添加，放到内容最后面
         $('div').before(elm); //内部添加，放到内容最前面
         // 删除元素 
         $('div').remove(); // 保留子节点
         $('div').empty(); // 该节点及其子节点全部清空
         $('div').html(''); //  使节点的孩子全部清空
     })

5. 尺寸位置操作

   | 方法 | 属性 |
   | --------------------------- | -------------------------------------------------- |
   | width()、height() | 设置或返回宽度或高度（不包括内边距、边框或外边距） |
   | innerWidth()、innerHeight() | 返回元素宽度或高度（包括内边距） |
   | outerWidth()、outerHeight() | 方法返回元素的宽度或高度（包括内边距和边框） |

   offset()
   //获取元素相对于文档的偏移坐标，跟父级没有关系
   
   offset({
       top: 100,
       left: 200
   })
   //设置元素相对于文档的偏移坐标
   
   position()
   //获取距离带有定位父级位置（偏移），只能获取不能设置

三、事件

3.1、事件处理

• 多事件处理 on：$(this).on({选择器集合 , function})

$('div').on( {
    click: function(){},
    mouseover: function(){},
    'mouseenter mouseon': function(){} 
} )

• on可以进行事件委托（点击父元素，子元素做出响应）

  事件委托就是把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素

  $('div').on('click' , 'span' , function(){})

• 移除on()方法添加的事件

  $(this).off() //移除div所有事件
  
  $(this).off('click') //移除div指定事件
  
  $('div').off('click' , 'li') //移除事件委托

• 只触发一次的事件

  $('div').one('click' , function(){})

• 自动触发事件

  $('div').trigger('事件')

3.2、事件对象

• 阻止默认行为： event.preventDefault()
• 阻止冒泡： event.stopPropagation()

$('div').on('click' , function(event) {
    console.log('点击');
    event.stopPropagation();
})
//此时不会打印输出‘点击’

对象的拷贝：

$.extend([deep] , 拷贝对象 , 目标)

• deep 默认为false（浅拷贝）
• 进行拷贝时会覆盖目标原有内容