JavaScript和jQuery知识点总结

Js

1. 常用方法
    1.document.getElementById('id'); 根据id获取元素对象 

2. 常用事件
    0. onload : 页面加载完成
    1. onclick : 点击事件
    2. onmouseover : 鼠标悬浮事件
    3. onmouseout : 鼠标离开事件
    4. onfocus : 获取焦点
    5. onblur : 失去焦点
    6. onkeyup : 键盘抬起
    7. onsubmit : 表单提交事件

3. (元素对象)常用属性

    js元素对象属性,与html元素属性基本一致. 只罗列特殊的.

    1. id : id
    2. className : 元素类样式
    3. innerHTML : 内部文本/内部标签   <>内部文本</>
    4. style : 行内样式
        style.fontSize : 文字大小.
        ....省略,带-的改为驼峰即可.

4. 数组常用属性/方法

    1. length : 长度
    2. xxx[index] : 根据索引获取xxx的某一项
    3. join('-') : 以某个字符拼接数组,返回string
    4. push(),pop() : 末尾添加和删除成员
    5. reverse() : 反转数组
    6. indexOf() : 获取成员第一次出现的索引
    7. splice() : 增加/替换或删除成员

5. 字符串常用方法


    3. split('-') : 以某个字符分割字符串,返回数组
    4. indexOf() : 获取字符/字符串出现的索引
    5. substring() : 截取字符串

6. 字符串转为数值
    1. parseInt("要转的字符串") : 将数字字符串转换为整数
    2. parseFloat("要转的字符串") : 将数字字符串转换为小数

JQuery

1.$()函数的用法

    1. $(匿名函数) : 页面加载完成事件
    2. $('选择器') : 获取元素对象
    3. $('标签代码') : 创建元素对象

        $('<li></li>')

    4. $(js对象) : 将js对象转换为jq对象



2. 选择器

    $('#myId') //选择id为myId的网页元素
    $('.myClass') // 选择class为myClass的元素
    $('li') //选择所有的li元素
    $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
    $('input[name=first]') // 选择name属性等于first的input元素

3. 选择器过滤方法

    $('div').has('p'); // 选择包含p元素的div元素
    $('div').not('.myClass'); //选择class不等于myClass的div元素
    $('div').eq(5); //选择第6个div元素

4. 选择器转移方法 (层级方法)

    $('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
    $('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
    $('#box').next(); //选择id是box的元素后面紧挨的同辈元素
    $('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
    $('#box').parent(); //选择id是box的元素的父元素
    $('#box').children(); //选择id是box的元素的所有子元素
    $('#box').siblings(); //选择id是box的元素的同级元素
    $('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素

5. 常用方法

    1. css() : 获取/设置样式 (行内样式操作)
    2. addClass()/removeClass()/toggleClass() : 类样式操作
    3. index() : 获取元素索引值(自家排行老几)
    4. prop() : 获取/设置自带属性  attr() : 操作自定义数据
    5. html() : 获取/设置内容
    6. animate() : 动画
    7. delegate() : 委托


6. 常用动画

    fadeIn()  淡入  (透明度动画)
    fadeOut() 淡出
    fadeToggle() 切换淡入淡出
    hide() 隐藏元素 (对角线动画:传参数)
    show() 显示元素
    toggle() 切换元素的可见状态
    slideDown() 向下展开  (高度/卷拉门动画)
    slideUp() 向上卷起
    slideToggle() 依次展开或卷起某个元素

7. 常用事件

    给js的事件去掉on即可.

    blur() 元素失去焦点
    focus() 元素获得焦点
    click() 鼠标单击     
    mouseover() 鼠标进入 
    mouseout() 鼠标离开 
    mouseenter() 鼠标进入 
    mouseleave() 鼠标离开 
    hover() 同时为mouseenter和mouseleave事件指定处理函数
    ready() DOM加载完成 (结构添加完成)
    submit() 用户递交表单

8. 节点操作方法

    1. append : A append B , A将B添加到子节点末尾            
    2. prepend : A prepend B , A将B添加到子节点首位  
    3. after : A after B,  A将B添加到同级之后        
    4. before : A before B,  A将B添加到同级之前

9. 异步请求

    1. ajax

        $.ajax({
            url:'js/data.json',  // 请求地址,接口 --- url : http://www.baidu.com?username=xxx&password=xxx
            type:'get',          // 请求类型
            dataType:'json',    //  与服务器传输的数据类型 , json数据类型
            data:{key:value}   // 请求参数
        })
        .done(function(dat){   // 完成,请求成功的回调函数 . data: 服务器返回的数据
            alert(dat.name);
            $('.user_login_btn').hide();
            $('.user_info em').html( dat.name ).parent().show();

        })
        .fail(function(error){   // 失败, 请求失败的回调函数
            console.log(error);
            alert('服务器超时，请重试！');
        })

    2. jsonp

        将dataType : 改为jsonp即可

JavaScript和jQuery知识点总结

Js

JQuery

猜你喜欢