jq总结

		      一,jQuery的基本使用
	
		        1.jq的使用    引入 => 获取jq对象 => 操作对象
	
		        2.jq的入口函数
	
		          $(function(){})    // 页面加载完成执行的
	
		          $(document).ready(function(){}) // 页面加载完成执行的
	
		        3.jq中的顶级对象是  $  ||  jQuery
	
		        4.jquery对象的获取      $('div')
	
		        5.jquery对象 转换 js对象   $('div')[0]    $('div').get(0)
	
		      二，jq的选择器
	
		        1.基础选择器   基础选择器不说了   全是 css3 选择器直接使用就行
	
		               $('#id')  $('*div')  $('.calss') $('div') $('div,p') $('li.count')
	
		        2.层级选择器
	
		            子代选择器  $('ul>li')    必须是亲儿子
	
		            后代选择器  $('ul li')    ul 后面的 所有 li  包括孙子
	
		        3.筛选选择器
	
		            :first    获取第一个元素        $('ul>li:first')
	
		            :last     获取最后一个元素      $('ul>li:last')
	
		            :eq(index)通过索引获取元素      $('ul>li:eq(2)')
	
		            :odd      获取奇数元素          $('ul>li:odd')
	
		            :even     获取偶数元素          $('ul>li:even')
	
		      三，样式操作
	
		        1.css简单的元素样式修改   $('div').css('color','red')  $('div').css({'color':'red','font-size':'20px'})
	
		        2.类名设置
	
		          $('div').addClass('active')       //添加类名
	
		          $('div').removeClass('active')    // 删除类名
	
		          $('div').toggleClass('active')    //切换类名 ，存在就不添加类名，不存在就添加类名
	
		      四，jq效果
	
		        1.显示影藏
	
		          show()
	
		          hide()
	
		          toggle()
	
		        2.划入划出
	
		          slideDown()     // 划入
	
		          slideUp()       //划出
	
		          slideToggle()   // 切换划入 划出
	
		        3.淡入淡出
	
		          fadeln()     //淡入
	
		          fadeOut()    //淡出
	
		          fadeToggle()  // 切换淡入 淡出
	
		      五，属性操作
	
		        1.元素固有属性 prop
	
		          $('div').prop('id')
	
		          $('div').prop('id','active')
	
		        2.元素自定义属性 attr
	
		          $('div').attr('active')
	
		          $('div').attr('active','1')
	
		      六，文本属性值
	
		        1.html()  相当于js中的 innerHTML     可以插入html元素
	
		          $('div').html()
	
		          $('div').html('<p>我是div</p>')
	
		        2.text()  相当于js中的 innerText    不能插入html元素
	
		          $('div').text()
	
		          $('div').text('我是div')
	
		        3.val()   相当于js中的 value     只能读取/写入 表单值
	
		          $('div').val()
	
		          $('div').val('11')
	
		      七，元素操作
	
		        1.遍历元素  each      $('div').each((item,i)=>{//在jq遍历里面 每一项是js对象，不是jq对象})
	
		        2.创建元素   $('<li></li>')
	
		        3.添加元素
	
		          var lis = $('<li></li>')
	
		          $('div').append(lis)      在div里面的 最后面 添加元素
	
		          $('div').prepend(lis)     在div里面的 最前面 添加元素
	
		          $('div').after(lis)       在div元素的后面  添加
	
		          $('div').before(lis)      在div元素的前面  添加
	
		          $('div').remove()     删除div的元素
	
		          $('div').empty()   删除匹配元素中的所以子节点
	
		          $('div').html()    清空元素内容
	
		      八，尺寸，位置操作
	
		        1.尺寸操作
	
		          width()                     // 获取元素的宽
	
		          height()                    // 获取元素的高
	
		          innerWidth()                //包含宽和padding
	
		          innerHeight()               // 包含高 和 padding
	
		          outerWidth()                // 包含宽 和 padding 和 border
	
		          outerHeight()               // 包含高 和 padding 和 border
	
		          outerWidth(true)            // 包含宽 和 padding 和 border 和 margin
	
		          outerHeight(true)           // 包含高 和padding 和 border 和 margin
	
		        2.位置操作
	
		          1.offset             //获取 或 设置 元素的偏移量
	
		          2.position           //获取元素的 偏移量
	
		          3.scrollTOP/scrollLeft // 设置或获取元素被卷去的头部 和 左侧
	
		      九，事件处理
	
		        1.事件注册 on()
	
		          $('div').click(()=>{})
	
		          $('div').on('click','li',()=>{})   // 事件委托注册
	
		          $('div').on('click',()=>{})
	
		          $('div').on('click mouseenter',()=>{})  // 多个事件绑定
	
		        2.事件解除 off()
	
		          $('div').off()      // 解除所有事件
	
		          $('div').off('click')  //解除click点击事件
	
		        3.事件多选 event
	
		          $('div').on('click',(event)=>{})
	
		          $('div').on('click',(event)=>{event.preventDefault }) // 阻止默认行为
	
		          $('div').on('click',(event)=>{event.stopPropagation }) // 阻止冒泡行为
	
		        4.jq拷贝对象 extend()
	
		          var str = {}
	
		          var obj = {
	
		            id:1,
	
		            name:'张三'
	
		          }
	
		          $.extend(str,obj)         // 浅拷贝
	
		          $.extend(true,str,obj)    // 深拷贝
	
		          console.log(str);