JS和JQuery总结

Posted 2020-08-17 玉广Blog

目录
目录    2

js部分
一、词法结构

    1、区分大小写

    2、注意   // 单行      /*  多行注释  */

    3、字面量(直接量  literal)

        12  //数字

        5.8 // 小数

        "hello"  

        ‘hello‘

        true

        /js/gi  //正则

        null    //空

        {x:1,y:2}

        [1,2,3,4]

    4、标示符(变量)和保留字

    5、分号可以省略但是可能会产生问题，js会自动补;

    var y = x+f

    (a+b).toString()  

    等价于

    var y = x+f(a+b).toString();

二、类型、值和变量

    1、原始类型   数字、字符串和布尔   null空  undefined未定义

    2、对象类型

    3、类  Array  Function Date RegExp  Error

    4、js解析器 中集成了垃圾回收

    5、任意js的值都可以转为布尔值

        undefined

        null

        0

        -0

        NaN

        ""     都被转换为false
6、包装对象

        var s= "hello";  //原始类型 （没有方法）

        s.len = 4;     //当调用原始类型的属性或方法的时候（原始类型是没有属性和方法的）

                 //只要引用了字符串的属性或方法，就会调用new String(s)把原始类型，包装成对象

                 //以后调用s.len 是调用String对象的属性和方法，一旦引用结束，新创建的临时对象会销毁

        var n = s.len;   //此时为undefined

        alert(n);



        //调用字符串  布尔 数字的属性或方法时，创建的临时对象。是包装对象

        显示定义包装对象  var S = new String("hello")

            var s = "hello";  是不同的

    7、==和===

    8、类型转换

        var n = 17;

        alert(n.toString(2));  //二进制  10001

        alert(n.toString(8));  //  021

        alert(n.toString(16)); //  0x21

        alert(n.toString(10));  alert(n.toString());

    9、toString()  valueOf()

        var date = new Date(2011,1,3);

        date.valueOf()   返回毫秒数代表的时间

    10、js是动态类型  var n = 10;  程序运行期间 才会确定变量的类型

    11、变量作用域

        函数作用域和声明提前

            函数内定义的变量 声明自动提前到函数顶部

    12、作用域链scope chain

        在不包含函数的函数体内，作用域链有两个对象，第一个是定义函数

        参数和局部变量的对象，第二个是全局对象。

        在一个嵌套函数体内，作用域链上至少有三个对象。



        定义一个函数时，它保存了一个作用域链。调用函数时，它创建一个

        新的对象存储它的局部变量，并将这个对象添加到保存的那个作用域链

        上，同时创建一个新的更长的表示函数调用作用域的“链”。对于嵌套函数

        每次调用外部函数时，内部函数会重新定义一遍。每次调用外部函数的时候

        作用域链是不同的。

    13、delete  in  eval  void


第五章 对象

    1、对象的基本操作  create  set  query delete test  enumerate

    2、对象的属性特性  可写  可枚举  可配置（是否可删除）

    3、对象的对象特性  

        对象的原型 prototype

        对象的类  标示对象类型的字符串

        对象的扩展标记  是否可添加新属性

    //创建对象的三种方法

    4、对象直接量

        var empty = {};

        var point = {x:0,y:0};

    5、new创建对象

        var o = new Object();  //空对象  和{}一样

        var a = new Array();

    6、Object.create()

        var o1 = Object.create({x:1,y:2});  //o1 继承自对象原型{x:1,y:2}

        var o2 = Object.create(null);       //o2不继承任何属性和方法

        var o3 = Object.create(Object.prototype);  

        //空对象和 {} new Object()一样

    7、属性的操作  作为关联数组的对象

        object.property

        object["property"]   散列  映射  字典 关联数组

    8、继承

        js的继承只能从父类获取属性的值，而不能修改原型链

        如果对象book为null或undefined

         book.subtitle.length会报错

         解决方法

         var len = book && book.subtitle && book.subtitle.length;



         删除属性

         delete book.subtitle



         检测属性  in  hasOwnPreperty()  propertyIsEnumerable()

         var o = {x:1};

         "x" in o

         "toString" in o



        hasOwnPreperty();判断属性是否是自己的。继承属性返回false



        propertyIsEnumerable() 只有是自有属性，并可枚举





        获取所有属性

        Object.keys()

        Object.getOwnPropertyNames()

    9、属性getter和setter

         var o = {

            x: 0,

            y: 1,

            set r(value) { value = this.r;},

            get r() { return this.x + this.y;}

        };

        x数据属性，r存取器属性

    10、属性的特性  ecmascript5   老的ie不支持如下用法

        数据属性的特性：值value 可写性writable

                可枚举enumerable

                可配置configurable

        存取器属性特性：get  set

                可枚举enumerable

                可配置configurable

        //返回{value:1,writable:true,emunerable:true,configurable:true}

        Object.getOwnPropertyDescriptor({x:1},x)

        //查不到属性 返回undefined

        

        设置属性的特性  不能修改继承的属性特性

        Object.defineProperty()

        //设置不可枚举属性

        var o = {};

        Object.defineProperty(o,"x",{

            value:1,

            writable:true,

            emunerable:false,

            configurable:true

        })



        //设置只读

        Object.defineProperty(o,"x",{writable:false})



        修改多个属性特性

        Object.defineProperties()



        扩展Object.prototype   书 P137

    11、对象的三个属性

        prototype  class  extensible attribute



        查询对象的原型

        ecmascript5中 Object.getPrototypeOf(o1)

        ecmascript3中 o1.constructor.prototype



        通过对象直接量或new Object()方式创建的对象

        包含一个constructor的属性，指Object()的构造函数

        constructor.prototype才是真正的原型



        p.isPrototypeOf(o)检测对象p是否是o的原型





        //获取对象的类型 字符串

        Object.prototype.toString.call(o1).slice(8,-1)

    12、对象的可扩展性

        对象是否可以新加属性

        Object.preventExtensions() 设置对象不可扩展

        Object.isExtensible()

        Object.seal()  除了将对象设置为不可扩展，还将属性设置为不可配置

        Object.freeze()

        除了将对象设置为不可扩展，将属性设置为不可配置，还把属性设置为只读



第8章 函数

    1、函数调用，方法调用

        function t(){ }

        t();  函数调用  this是全局对象  严格模式下是undefined



        var o = {a:function(){}};

        o.a()  方法调用  this是当前调用的对象

    2、构造函数调用

        var o = new Object();  var o= new Object;

        o继承自构造函数的prototype属性  内部的this是此对象



        var r = new o.m();中的this不是o

    3、P184 函数的执行用到了作用域链，这个作用域链是函数定义的时候创建的。

        嵌套的函数f()定义在这个作用域链里，其中的变量scope是局部变量





        作用域链    

        

        调用s()将创建函数s的执行环境(调用对象),并将该对象置于链表开头，

        然后将函数t的调用对象链接在之后，最后是全局对象。然后从链表开头寻找变量name   



        调用ss()     ss() ==>  t()  ==> window

        name="lwy";  

        function t(){  

            var name="tlwy";  

            function s(){  

            var name="slwy";  

            console.log(name);  

            }  

            function ss(){  

            console.log(name);  

            }  

            s();  

            ss();  

        }  

        t();  



        每次调用函数，都会生成一个新的作用域链。包括新的内部变量


jQuery是什么？(了解)
 www.github.com
    ?    jQuery 其实就是一堆的js函数，是普通的js，只不过应用广泛，形成了行业标准。
    ?    参考书：锋利的jQuery
    ?    学习参考：http://www.w3school.com.cn/jquery/
    ?    官网：http://jquery.com/
    ?    
2. jQuery的重点
    ?    2.1 jQuery入口函数(全球都会)
    ?    2.2 jQuery的选择器(其实就是CSS的选择器)
    ?    2.3 jQuery的Dom操作
    ?    2.4 jQuery的样式操作
    ?    2.5 jQuery的动画
    ?    2.6 jQuery的事件处理
3.jQuery的入口函数
    ?    3.1 语法
    ?    jQuery(document).read(function(){ });
    ?    $(function(){ });// **
    ?    window.onlaod = function(){}
    ?    $ === jQuery // $是jQuery全局函数的别名。
    ?    3.2注意事项： （重点）
    ?    document ready: 是html文档准备就绪，也就是dom树创建完成了。可以进行dom操作了。
    ?    重要的是：html页面下载完成，并准备就绪
    ?    window.onload: 是整个页面所有的资源都加载完成，图片、js、css等...
    ?    3.3 文档加载顺序： （重点）
    ?    下载html页面，解析html标签，遇到link标签加载css，遇到script加载js..
4. jQuery 选择选取元素
4.1 jQuery选择器
    ?    4.1.1 ID选择器（js一般尽量用ID选择器，效率最高） （重点）
    ?    $("#id").html();
    ?    4.1.2 类选择器 （重点）
    ?    $(".className").text();
    ?    4.1.3 标签选择器 （重点）
    ?    $(‘p‘).click();
    ?    4.1.4 属性选择器
    ?    $("li[id]")、 $("li[id=‘link‘]").fadeIn();
    ?    4.1.5 层级选择器 （重点）
    ?    $("li .link").show();
    ?    4.1.6 父子选择器
    ?    $("ul > li")
    ?    4.1.7 伪类选择器
    ?    $("p:first")
    ?    $("ul li:eq(3)")
    ?    4.1.8 表单选择器
    ?    $(":text")
    ?    $(":checkbox")
    ?    $(":checked")
4.2 选择器汇总
*               $("*")              所有元素

#id             $("#lastname")      id="lastname" 的元素

.class          $(".intro")         所有 class="intro" 的元素

element         $("p")              所有 <p> 元素

.class.class    $(".intro.demo")    所有 class="intro" 且 class="demo" 的元素

:first  $("p:first")    第一个 <p> 元素

:last   $("p:last")     最后一个 <p> 元素

:even   $("tr:even")    所有偶数 <tr> 元素

:odd    $("tr:odd")     所有奇数 <tr> 元素

:eq(index)      $("ul li:eq(3)")    列表中的第四个元素（index 从 0 开始）

:gt(no)         $("ul li:gt(3)")    列出 index 大于 3 的元素 greater than

:lt(no)         $("ul li:lt(3)")    列出 index 小于 3 的元素 less than

:not(selector)  $("input:not(:empty)")  所有不为空的 input 元素



:header         $(":header")        所有标题元素 <h1> - <h6>

:animated       所有动画元素

:contains(text)     $(":contains(‘W3School‘)")  包含指定字符串的所有元素

:empty              $(":empty")                 无子（元素）节点的所有元素

:hidden             $("p:hidden")               所有隐藏的 <p> 元素

:visible            $("table:visible")          所有可见的表格



s1,s2,s3            $("th,td,.intro")            所有带有匹配选择的元素

[attribute]         $("[href]")         所有带有 href 属性的元素

[attribute=value]   $("[href=‘#‘]")     所有 href 属性的值等于 "#" 的元素

[attribute!=value]  $("[href!=‘#‘]")    所有 href 属性的值不等于 "#" 的元素

[attribute$=value]  $("[href$=‘.jpg‘]") 所有 href 属性的值包含以 ".jpg" 结尾的元素

:input      $(":input")         所有 <input> 元素

:text       $(":text")          所有 type="text" 的 <input> 元素

:password   $(":password")      所有 type="password" 的 <input> 元素

:radio      $(":radio")         所有 type="radio" 的 <input> 元素

:checkbox   $(":checkbox")      所有 type="checkbox" 的 <input> 元素

:submit     $(":submit")        所有 type="submit" 的 <input> 元素

:reset      $(":reset")         所有 type="reset" 的 <input> 元素

:button     $(":button")        所有 type="button" 的 <input> 元素

:image      $(":image")         所有 type="image" 的 <input> 元素

:file       $(":file")          所有 type="file" 的 <input> 元素

:enabled    $(":enabled")   所有激活的 input 元素

:disabled   $(":disabled")  所有禁用的 input 元素

:selected   $(":selected")  所有被选取的 input 元素

:checked    $(":checked")   所有被选中的 input 元素
4.3 jQuery选择方法
    ?    4.3.1 获取父级元素
    ?        * $(selector).parent();     //获取直接父级
    ?    
    ?        * $(selector).parents(‘p‘); //获取所有父级元素直到html   
    ?    4.3.2 获取子代和后代的元素
    ?        * $(selector).children();   //获取直接子元素
    ?    
    ?        * $(selector).find("span"); //获取所有的后代元素
    ?    
    ?        * find方法 可能用的多。
    ?    4.3.3 获取同级的元素
    ?        * $(selector).siblings()    //所有的兄弟节点
    ?    
    ?        * $(selector).next()        //下一个节点
    ?    
    ?        * $(selector).nextAll()     //后面的所有节点
    ?    
    ?        * $(selector).prev()        //前面一个的兄弟节点
    ?    
    ?        * $(selector).prevAll()     //前面的所有的兄弟节点
    ?    4.3.4 过滤方法
    ?        * $("div p").last();        //取最后一个元素
    ?    
    ?        * $("div p").first();       //取第一个元素
    ?    
    ?        * $("p").eq(1);             //去第n个元素
    ?    
    ?        * $("p").filter(".intro");  //过滤，选择所有p标签带有 .intro类
    ?    
    ?        $(‘p.intro‘)
    ?    
    ?        * $("p").not(".intro");     //去除，跟上面的filetr正好相反
5.jQuery的Dom操作
5.1 获取html的内容
$(selector).text() - 设置或返回所选元素的文本内容

$(selector).html() - 设置或返回所选元素的内容（包括 HTML 标记）

$(selector).val()  - 设置或返回表单字段的值
    ?    获取和设置相同方法名,通过不同参数来确定是获取还是设置值
    ?        $("#blin").text("贝沃汇力");
    ?    
    ?        var txt = $("#blin").text();
    ?    使用html来创建dom的方式效率比较高。 远大于： document.createElement();

5.2 样式操作
    ?    5.2.1 基本样式操作
    ?        $(selector).css("color","red") |css({})  设置或返回匹配元素的样式属性。
    ?    
    ?        $(selector).height()        设置或返回匹配元素的高度。
    ?    
    ?        $(selector).offset().left   => { left:99, top: 22}     返回第一个匹配元素相对于文档的位置。left,top
    ?    
    ?        $(selector).offsetParent()  返回最近的定位祖先元素。
    ?    
    ?        $(selector).position()      返回第一个匹配元素相对于父元素的位置。
    ?    
    ?        $(window).scrollLeft()    设置或返回匹配元素相对滚动条左侧的偏移。
    ?    
    ?        $(window).scrollTop(0)     设置或返回匹配元素相对滚动条顶部的偏移。
    ?    
    ?        <!-- onscroll -->
    ?    
    ?        $(selector).on("scroll",function(){});
    ?    
    ?    
    ?    
    ?        $(selector).width()         设置或返回匹配元素的宽度。
    ?    5.2.2 样式类操作尽量操作样式类，少直接操作css属性
    ?        $(selector).addClass(‘class‘);     向匹配的元素添加指定的类名。
    ?    
    ?        $(selector).removeClass(‘class‘);  从所有匹配的元素中删除全部或者指定的类。
    ?    
    ?        $(selector).toggleClass(‘class‘)   从匹配的元素中添加或删除一个类。
    ?    
    ?        $(selector).hasClass(‘class‘)      检查匹配的元素是否拥有指定的类。
5.3 属性操作
    $(selector).attr("id")      设置或返回匹配元素的属性和值

    $(selector).removeAttr()从所有匹配的元素中移除指定的属性。
5.4 动态创建
    $(selector).append()    - 在被选元素的结尾插入内容

        $(selector).append(node)

        $(selector).append(‘<div></div>‘)    

    $(selector).appendTo(); - 追加到..







    $(selector).prepend()   - 在被选元素的开头插入内容

    $(selector).after()     - 在被选元素之后插入内容

    $(selector).before()    - 在被选元素之前插入内容
案例04城市选择案例.html
6. 事件处理
6.1 简单事件绑定方法
    ?    .click(hander) .click() //绑定事件 或者触发 click事件
    ?    .blur() //失去焦点事件，同上
    ?    .hover(mousein, mouseleave) //鼠标移入，移出
    ?    mouseout： 当鼠标离开元素及它的子元素的时都会触发。
    ?    
    ?    mouseleave: 当鼠标离开自己时才会触发，子元素不触发。
    ?    .dbclick() 双击
    ?    change 改变,比如：文本框发送改变，下来列表发生改变等...
    ?    focus 获得焦点
    ?    keyup, keydown, keypress : 键盘 键被按下。
    ?    mousedown, mouseover
    ?    
6.2 绑定事件的方式 bind方式（不推荐，1.7以后的jQuery版本被on取代）
    ?    语法格式：.bind( eventType [, eventData ], handler )
    ?    参数说明
    ?    第一个参数：事件类型
    ?    第二个参数：传递给事件响应方法的数据对象，可以省略。
    ?    事件响应方法中获取数据方式： e.data
    ?    第三个参数：事件响应方法
    ?    第二个参数可以省略。
    ?        例如：    
    ?    
    ?        $("p").bind("click", function(e){
    ?    
    ?            //事件响应方法
    ?    
    ?        });
    ?    
    ?    
    ?    
    ?        $("p").on(‘click‘,function(e){
    ?    
    ?            //事件响应方法
    ?    
    ?        })
6.3 delegate方式（推荐，性能高，支持动态创建的元素）
* 语法格式：$(selector).delegate( selector, eventType, handler )

* 语法说明：

    - 第一个参数:selector， 子选择器

    - 第二个参数：事件类型

    - 第三个参数：事件响应方法



```

    例如：   

    $(".parentBox").delegate("p", "click", function(){

        //为 .parentBox下面的所有的p标签绑定事件

    });



    $(".parentBox").on("click","p", function(){

        //为 .parentBox下面的所有的p标签绑定事件

    });

```

*优势：效率较高*
6.4 one绑定一次事件的方式
* .one( events [, data ], handler )

    例如：

    $( "p" ).one( "click", function() {

      alert( $( this ).text() );

    });



    $("p").on("click",function(){

        $(this).off(‘click‘);//事件方法执行了一次后，就立即解绑事件

    })
6.5 on绑定的方式（整合了bind、delegate 烈建议使用的方式））
    ?    jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
    ?    语法格式：$(selector).on( events [, selector ] [, data ], handler )
    ?    参数介绍：
    ?    第一个参数：events，事件名
    ?    第二个参数：selector,类似delegate
    ?    第三个参数: 传递给事件响应方法的参数
    ?    第四个参数：handler，事件处理方法
    ?        例如：
    ?    
    ?        //绑定一个方法
    ?    
    ?        $( "#dataTable tbody tr" ).on( "click", function() {
    ?    
    ?          console.log( $( this ).text() );
    ?    
    ?        });
    ?    
    ?    
    ?    
    ?        //给子元素绑定事件
    ?    
    ?        $( "#dataTable tbody" ).on( "click", "tr", function() {
    ?    
    ?          console.log( $( this ).text() );
    ?    
    ?        });
    ?    
    ?    
    ?    
    ?        //绑定多个事件的方式
    ?    
    ?        $( "div.test" ).on({
    ?    
    ?          click: function() {
    ?    
    ?            $( this ).toggleClass( "active" );
    ?    
    ?          }, mouseenter: function() {
    ?    
    ?            $( this ).addClass( "inside" );
    ?    
    ?          }, mouseleave: function() {
    ?    
    ?            $( this ).removeClass( "inside" );
    ?    
    ?          }
    ?    
    ?        });
6.6 解绑
    ?    unbind解绑 bind方式绑定的事件( 在jQuery1.7以上被 on和off代替)
    ?    $(selector).unbind(); //解绑所有的事件
    ?    $(selector).unbind("click"); //解绑指定的事件
    ?    undelegate解绑delegate事件
    ?    $( "p" ).undelegate(); //解绑所有的delegate事件
    ?    $( "p" ).undelegate( "click" ); //解绑所有的click事件
    ?    off解绑on方式绑定的事件
    ?    $( "p" ).off();
    ?    $("P").off(‘click‘);
    ?    $( "p" ).off( "click", "**" ); // 解绑所有的click事件，两个*表示所有
    ?    $( "body" ).off( "click", "p", foo );
6.7 触发事件
    ?    6.7.1 简单事件触发
    ?    $(selector).click(); //触发 click事件
    ?    6.7.2 trigger() 方法触发被选元素的指定事件类型。
    ?    $( "#foo" ).trigger( "click" );
    ?    6.7.3 triggerHandler触发 事件响应方法，不触发浏览器行为（triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。）
    ?    $( "input" ).triggerHandler( "focus" );
6.8 event对象的简介
    ?    event.data //传递的额外事件响应方法的额外参数
    ?    event.currentTarget === this //在事件响应方法中等同于this，当前Dom对象
    ?    event.target //事件触发源，不一定===this
    ?    event.pageX //The mouse position relative to the left edge of the document
    ?    event.pageY
    ?    event.stopPropagation()//阻止事件冒泡
    ?    e.preventDefault(); //阻止默认行为
    ?    event.type //事件类型：click，dbclick...
    ?    event.which //鼠标的按键类型：左1 中2 右3
    ?    keydown : a,b,c
    ?    event.keyCode// code的c是大写
7. jQuery动画系统
7.1隐藏显示
* $(selector).show(speed,callback);

* $(selector).hide(1000);

* $(selector).toggle("slow");



* 三个方法的语法都一致，参数可以有两个，第一个是动画的速度，第二个是动画执行完成后的回调函数。

* 第一个参数是：可以是单词或者毫秒数
7.2淡入淡出
$(selector).fadeIn(speed, callback)

$(selector).fadeOut(1000)

$(selector).fadeToggle(‘fast‘,function(){})

参数等同于 7.1



* $(selector).fadeTo(.5); //淡入到  0透明，1不透明
7.3滑动
* $(selector).slideDown(speed,callback);

* $(selector).slideUp(speed,callback);

* $(selector).slideToggle(speed,callback);
7.4动画
* $(selector).animate({params},speed,callback);

    $("button").click(function(){

      $("div").animate({

        left:‘250px‘,

        opacity:‘0.5‘,

        height:‘150px‘,

        width:‘150px‘

      },2000);

    }).animate({},1000);
7.5结束动画
* $(selector).stop()

* $(selector).stop(stopAll,goToEnd);
    ?    案例：
8. jQuery补充
    ?    8.1 each函数
    ?    全局的
    ?    $.each(array, function(index, object){})
    ?    普通jQuery对象的each方法
    ?    $("li").each(function(index, element){} )
参数的顺序是一致的。