前端优化 jquery

1.前端性能优化 

          1> 一个网站打开速度多少合适？

                 PC：4s以内

                 移动端：3s以内         

          2> 浏览器的渲染过程：

               视觉变化[js操作] ----> style  ----> layout[布局]  ---->  point[绘制] ----> composite[合并] 

          3> 当浏览器输入一个url，按回车的时候，会经历什么步骤?

               ①通过浏览器的解释器，把文本【代码】，解析成html

                    1.1dom树

                    1.2css树

                ②然后进行合并，并且渲染

         4>layout布局   --------->  造成回流  【css3动画改成回流】

              添加/删除 元素

              移动/改变大小元素：offsetLeft、scrollTop、style.width

              修改浏览器大小和字体大小

          5>js优化需要注意的 

                    原型链  作用域链

            var arr =[1,2];
			for(var i =0;i<arr.length;i++){
				if(arr[i]<100){  //当arr[2]找不到时，就会去object原型找，性能慢
					return 1;
				}
			}

2.错误调试：debugger形式

   错误：    ReferenceError  ====> 非法或不能识别的引用数值

                  SyntaxError  ========> 发生语法解析错误

                   TypeError     ==========> 操作类型错误

     try ... catch   :  让错误代码不会影响继续运行

3.1>什么是jQuery？

      jquery官网：jquery.com

      jquery是一个快速、简洁的js框架或者js库。【说白了就是一个js文件】

      jquery是用原生js写的,一般是在pc端网站去使用

  2>jquery使用

      ********jquery版本有很多1.x   2.x   3.x

      使用步骤：1>jquery 引入   

                         2>开头格式

                                $(function(){             ====>     类似于window.onload

                                         $('#main').css('background','blue');

                                })

 4.jquery 中的选择器

      1>基本选择器

          #id     .class     element     selector1,selector2       *(几乎不用)

          ：first     ====> 选择到第一个              ：last   =====>  选择到最后一个

          ：even  =====>  选择索引为偶数的     ：odd  ======>   选择索引为奇数的

          ：eq（index）====> 选择给定索引值的元素  

          ：gt（index） =====> 选择大于给定索引值的元素

          ：lt（index） ======> 选择小于给定索引值的元素

          ：not（selector）  ====>排除索引值以外的元素     ：not（：first）

        2>层级选择器

           a  b   =====> 在给定祖先元素下的所有后代元素

           a>b    =====>在给定祖先元素下的所有子元素

           prev + next   ====>  匹配下一个兄弟

           pre ~ siblings   =====> 匹配下所有兄弟

        3>内容选择器

            ：contains（text）   ======> 含有本文本的节点（模糊搜索）

            ：empty                 ========>  选择不含有子元素的元素

            ：parent                  ========>  选择有子元素的元素

            ：has（selector）   ========>  选取到含有某一个元素的元素

         4>可见性选择器

              ：hidden     =======>     匹配所有不可见元素

              ：visible     ========>   匹配所有可见元素

            **************一般要在判断的时候使用可见性选择器

        5>其他选择器

            属性选择器      $('div[id]')      $('input[type=text]')

            子元素             ：first-child   ：last-child     ：nth-child（n）==>  n的倍数（索引从1开始）

            表单                 ：input

            表单对象属性       ：checked    几乎用来判断的 

5.对象之间的转换

         jquery 对象转换为  dom对象         $('#main')[0]   ||   $('#main').get(0)

         dom对象转换为   jquery 对象         获取main，$(main)

6.节点查找的方法

         子节点    children（）===> 查找的子节点     find（）=====> 查找所有指定后代元素

         父节点    parent （） ====> 查找父节点      parents（）=====>查找所有指定祖先元素

         兄弟节点  next（）====>下一个兄弟           nextAll（）====>下所有兄弟

                         prev（）====>上一个兄弟            prevAll（）====>上所有兄弟

                         siblings（）=====>上下所有兄弟

7.css类

        addClass（）   ==>  添加class                  removeClass （） ==>  删除class

              *****如果不加参数，删除所有类；如果有参数，删除指定类   【重点 】

        toggleClass（）==> 做切换的，如果存在（不存在）就删除（添加）一个类

8.过滤 的方法

        eq（）、first（）、last（）、not（）

       *******eq、first、last、not和选择器功能都一样

       filter（）==> 筛选与指定表达式匹配的元素集合

       is（） ==>  DOM元素或jquery对象来检测匹配元素集合，如果其中至少 有一个元素符合这个                            给定的表达式就返回true

       slice()   ==> 字符串或者数组的slice完全一样

9.插入节点

         内部插入：

                    append（content|fn）

                    appendTo（content）

                    prepend（content|fn）

                    prependTo（content）

                          *************语法：

                                 append、prepend ==> 父元素.方法名称（子元素）

                                 appendTo、prependTo ==> 子元素.方法名称（父元素）

         外部插入：

                     after（content|fn）           ==>    插入到平级元素之后

                     before（content|fn）

                     insertAfter（content）

                     insertBefore（content）

10.删除节点和属性 

             1>删除节点

                   js原生中删除节点用哪个方法？    父元素.removeChild（子元素）

                   jquery中使用remove（）来删除节点              

            2>属性                   

11.文本值

          html（）                   js原生中 ===> innerHTML

          text（）                    js原生中===>innerText

          val（）                     js原生中  ====> value

             *******获取         选择器.方法名称（）

             *******赋值          选择器.方法名称（赋值的内容）

12.尺寸

             height（[val|fn]）

             width（[val|fn]）

                    ******************只是单纯的返回width和height

             innerHeight（）

             innerWidth（）

                     ***********width + padding

             outerHeight（[options]）

              outerWidth（[options]）

                     **********width + padding +border

                                   如果参数是true，则：width + padding + border + margin

13.位置

             offset（）.left

             offset（）.top

                 ***********偏移当前元素距离浏览器左侧【顶部】的偏移量

             scrollTop（）

             scrollLeft（）

14.1>事件绑定

             bind(type,fn)

               让input事件执行，写法如下：

$('#txt').bind('input',function(){
        alert(1);
})

       2>事件委托  ：on（）

             $(父元素).on('事件名称'，‘子元素’，函数)

15.事件对象

           e.pageX                   类似于js原生clientX

           e.pageY                   类似于js原生clientY

           e.preventDefault()         ==>     阻止默认行为

           e.stopPropagation()       ==>       阻止冒泡

16.jquery循环遍历

           方法一：

                    $(选择器).each(function(index,item){

                             //循环体

                    })

           方法二：(数组、对象)

                   $.each(要遍历的对象，function(index,item){

                            //循环体

                   })

17.自带动画

          1>基本动画

             show()

             hide()

                 *********加入参数，就是动画完成的毫秒数

          2>滑动动画

               slideDown([s],[e],[fn])

               slideUp([s],[e],[fn])

         3>淡入淡出

                fadeIn（）

                fadeOut（）

                    ********注意stop（）可以清空动画的队列

   自定义动画

          1>animate(要改变的样式,毫秒数，回调函数)

animate({
      margin:'10px',
      padding:'10px'
}，500，function(){
      alert(11);
})

18.剩下常用的方法

      1>  size()   ==> 获取length

      2>  index() ==>  获取下标

      3>  add()   ==>  用法：$('ul').add('div').css('color','#ccc');

      4> $.trim(str) ==>  去除前后空格

      5> $.inArray('b',arr)  ==>  b在数组中的索引

19.插件：让代码更具有复用性

        1>插件机制方法

             $.fn.extend(object) ==> 扩展jquery元素集来提供新的方法（通常用来制作插件）

                      **********$('ul li').扩展一个方法()

                      **********局部插件

             $.extend(object) ==> 扩展jquery对象本身

                    **********$  扩展方法

                    **********全局插件

         2>如何写插件

            ① 文件引入

                 插件引入

            ② 插件的命名规范

                   jquery.插件名称.js

                      例如：jquery.nav.js      jquery.swiper.js       jquery.scroll.js

             ③插件内部写法

          3>插件传递参数      ???

          4>如何查找插件      

                   jquery插件网站：http://www.jq22.com/

                            账号：zpsthao@163.com

                            密码：laozhang123

                  图片轮播：swiper和jquery没关系

                           swiper官网：https://www.swiper.com.cn/

20.如何看一个框架的源码           时间+技巧

     回顾一下jquery：

                     1.1框架采用匿名函数自执行

                                优势：代码作用域

                                           自己不需要调用，就可以执行

                     1.2$就是jQuery：在源码10286

                                 window.jQuery = window.$ = jQuery;