JS简单总结(前端ES6和JQ)

JS基础数据对象

1.0 Array 对象
    var arr = [1,2,5,9];    // [1,2,5,9]
    var arr = new Array(2,5,9); // [2,5,9]
1.1 属性
    arr.length
1.2 方法
    arr.concat();   // 连接多个数组,并返回新数组
    arr.join(); // 用参数连接每一个数组内容,并返回一个连接后的字符串;
    // 如果传入空字符串"",则返回每项直接连接的字符串
    arr.pop();  // 删除数组的最后一项并返回结果
    arr.push(); // 在数组最后加入一个或多个内容并返回新的长度
    arr.reverse();  // 将数组内容的前后顺序反转
    arr.shift();	// 删除数组首元素并返回其值
    arr.unshift();	// 向数组的开头添加一个或多个元素,并返回新的长度
    arr.slice();	// 切片操作
    arr.splice(start, num, [...insert]);// 从start索引开始(包含),删除num个元素,并插入insert元素
    // splice方法可以用于删除、插入和替换数组元素
    arr.sort([sortFunction]);	// 排序
2.0 String 对象
    var str = 'abcd';
    var str = new String("acfg");
2.1 属性
    str.length
2.2 方法
    str.charAt();   // 查找并返回索引位置上的字符
    str.charCodeAt();   // 查找并返回索引位置上的字符的编码值:a=97,A=65
    str.indexOf();  // 顺序 查找并返回字符串上第一次出现的索引位置,未找到返回-1
    str.lastIndexOf();  // 倒序 查找并返回字符串上第一次出现的索引位置,未找到返回-1
    str.split();    // 以传入参数分割字符串,并返回分割后的数组;
    // 如果传入空字符串"",则每个字符均被分割;如果传入参数不存在,则返回整字符串的数组
    str.substr(m, n);   // 从索引位置m开始,获取n个字符,并返回子字符串;
    // 如果n参数省略,则返回从m起到最后的子串
    str.substring(m, n);    // 获取并返回索引位置从m到n的子字符串;
    // 如果n参数省略,则返回从m起一直到最后的子串
    str.toLowerCase();  // 将字符串中的字母转换成小写形式
    str.toUpperCase();  // 将字符串中的字母转换成大写形式
2.3 占位符
	var variable = 'string';
    console.log("This is {{variable}}");	// This is string
3.0 Math 对象
3.1 属性
	Math.E;	// 自然常数e
	Math.PI;	// 圆周率 Π
3.2 方法
    Math.pow(m, n); // 求m的n次方
    Math.abs(n);    // 求n的绝对值
    Math.sqrt(n);	// 求n的算数平方根
    Math.round(n);  // 求n的四舍五入值
    Math.floor(n);  // 求n的向下取整值:不大于n的最大整数
    Math.ceil(n);   // 求n的向上取整值:不小于n的最小整数
    Math.random();  // 获取一个[0,1)区间的随机数
4.0 Date 对象
    var dt = new Date();    // 创建一个当前时间的时间日期对象
    var dt = new Date("1999/9/9 6:6:6");    // 创建一个指定的时间日期对象
    var dt = new Date(1999,9,9,6,6,6);  // 创建一个指定的时间日期对象
    // 注意:月份从0开始(0~11)=>(1月~12月)
    var dt = new Date(2345678954321);   // 创建一个指定的时间日期对像
    // 注意:从1970.01.01 00:00:00开始记录的毫秒数:时间戳
4.1 方法
    Date.toLocaleString();  // 转换成本地时间格式
    Date.getFullYear(); // 获取年份 -> 年
    Date.getMonth();    // 获取月份 -> 月
    Date.getDate();     // 获取日期 -> 日
    Date.getHours();    // 获取时   -> 时
    Date.getMinutes();  // 获取分   -> 分
    Date.getSeconds();  // 获取秒   -> 秒
    Date.getMilliseconds(); // 获取毫秒
    Date.getDay();  // 获取星期
    Date.getTime(); // 获取时间戳(1970年1月1日0时0分0秒起)
    
    Date.setFullYear(); // 设置年份
    Date.setMonth();    // 设置月份
    Date.setDate(); 	// 设置日期
    Date.setHours();    // 设置时
    Date.setMinutes();  // 设置分
    Date.setSeconds();  // 设置秒
    Date.setMilliseconds(); // 设置毫秒

DOM事件

5.0 事件
5.1 鼠标事件
    onclick;    // 单击
    ondblclick; // 双击
    onmouseover;    // 鼠标移入
    onmouseout; // 鼠标移出
    onmousedown;    // 鼠标(左键)按下
    onmouseup;  //鼠标(左键)松开
5.2 表单事件
    onfocus;    // 获得焦点
    onblur; 	// 失去焦点
    onsubmit;   // 提交
    onchange;   // 发生改变
    onreset;    // 重置
5.3 键盘事件
    onkeydown;
    onkeyup;
    onkeypress;
5.4 窗口事件

onload; //页面加载完成事件:attention please

  1. <script> window.onload=init </script>
    // 注意:页面加载完成后自动调用onload,即运行init();若window.onload=init(),则在加载脚本时就会运行init()
  2. <body onload="init()"> ... </body>
    // 页面加载完成后运行init(),分号""内相当于匿名函数
5.5 event 变量对象

保存事件发生时的相关信息

event 必须通过参数形式传递给事件函数
event.clientX;事件发生时鼠标坐标
event.clientY;
event.target || event.srcElement

5.6 this 变量对象
当前元素对象
如果多个页面元素具有相同的触发事件和事件处理函数,那么使用 event 和 this 对象可以大大简化代码复用
6.0 ECMAscript, BOM, DOM
6.1 window: 最高级对象

所有属性方法都属于window下,可以使用window.调用,也可以省略,直接调用

   BOM: 浏览器对象模型(brower object model),浏览器内置对象
       document
           DOM: 文本对象模型(document object model)
       frames
       history
       location
       navigator
       screen
   DOM: 网页便签对象
       anchors: 锚点
       forms: 表单
       images: 图片
       links: 外部链接
       location: 资源定位
       applets: 程序引入
       embeds: 嵌入内容
   window方法:window下属性和方法可省去对象window,直接调用
       window.alert(); // 警告弹窗
       window.prompt(str,defaultStr);  // 输入弹窗:str提示文本,default默认输入;
       // 确认得到str(包括空字符串),取消得到null
       window.comfirm();   // 确认/选择弹窗:确认得到true,取消得到false
       window.open(link, name, setting);   //打开新窗口
       =>    setting: width, height, left, right, scrollbars, toolbar...
       window.close(); // window.close(); close(); self.close();
       // js代码执行的close,只能关闭由js代码打开的窗口
       window.setTimeout(function, delay); // 创建单次定时器:经过指定delay毫秒后运行function
       window.setInterval(function, delay);    // 创建循环定时器:每经过指定delay毫秒后运行function
       window.clearTimeout(time object);   // 清除指定单次定时器对象
       window.clearInterval(time object);  // 清除指定循环定时器对象
       // 注意:要清除定时器,必须给定时器命名 var tim=setTimeout(),匿名定时器无法清除!
6.2 location对象
        location.href;  // 获取当前页面的url地址
        location.assign(url);   // 加载新的url,会产生历史缓存,可以返回
        location.reload();  // 重新加载当前页面(刷新)
        location.replace(url);  // 加载新的url,不可以再返回初始页面
6.3 history对象
        history.length; // 获取与当前页面相关的浏览历史中不同url地址数,相同的url不会重复计数
        history.back(); // 返回历史记录中(当前页面)的上一个页面;相当于浏览器中的返回按钮
        history.forward();  // 前往历史记录中(当前页面)的下一个页面;相当于浏览器中的前进按钮
        history.go(n);  // 跳转到历史记录中指定的页面;n=-1时相当于back()
6.4 screen对象
        screen.height;  // 获取屏幕高度
        screen.width;   // 获取屏幕宽度
        screen.availHeight; // 获取除去任务栏的高度
        screen.availWidth;  // 获取除去任务栏的宽度
6.5 navigator对象
6.5.1 属性
        navigator.appCodeName;  // 代码名,“Mozilla”
        navigator.appName;  // 浏览器名称,“Netscape”
        navigator.appVersion;   // 浏览器平台和版本信息
        navigator.userAgent;    // 用户代理头:浏览器详细信息,包含了以上某些项
        navigator.appMinorVersion;
        navigator.browserLanguage;
        navigator.cookieEnabled;
        navigator.cpuClass;
        navigator.onLine;
        navigator.platform;
        navigator.systemLanguage;
        navigator.userLanguage;
6.6 DOM对象
    .parentNode;    // 父节点
    .childNodes;    // 子节点
    .firstchild;    // 第一个子节点
    .nextSibling:   // 下一个兄弟节点【必须是同父级关系】
    .previousSibling;   // 前一个兄弟节点【必须是同父级关系】

JQuery语法

7.0 JQuery对象:选择器,核心,DOM,事件,动画,插件,ajax
/*核心语法:$("selector[:filter]").action();*/

注意JQuery对象的普通操作返回都是JQuery对象,以便进行链式操作
重点jQuery对象的函数参数中内置参数this,指代当前对象的DOM节点

7.1 选择器(“selector[:filter]”)
  1. 层级选择
    ancestor descendant // ancestor祖先元素下的所有descendant后代元素
    parent>child // parent元素下的所有child子元素
    prev+next // 前元素prev后紧挨着的下一个兄弟元素next
    prev~sibling // 前元素prev后的所有sibling兄弟元素
  2. 内容选择
    :contains(str) // 匹配含有str内容的元素
    :empty // 匹配空标签元素
    :has(selector) // 匹配含有selector子元素的父元素,不限层级
    :parent // 匹配作为父元素的元素,即含有子内容的元素(innerHTML非空),非空标签
  3. 基本选择
    :first // 选择第一个匹配元素
    :last // 选择最后一个匹配元素
    :even // 选择索引为偶数的匹配元素
    :odd // 选择索引为奇数的匹配元素
    :eq(index) // 选择索引为index的匹配元素
    :gt(index) // 选择索引大于index的匹配元素
    :lt(index) // 选择索引小于index的匹配元素
    :header // 选择h标签元素
    :not(selector) // 选择除去selector之外的其它匹配元素
  4. 属性选择
    [attr] // 选择具有attr属性的元素
    [attr='value'] // 选择具有attr属性且attr="value"的元素
    [attr!='value'] // 选择具有attr属性且attr!="value"的元素
    [attr^='value'] // 选择具有attr属性且attr值以"value"开头的元素
    [attr$='value'] // 选择具有attr属性且attr值以"value"结尾的元素
    [attr*='value'] // 选择具有attr属性且attr值包含"value"子字符串的元素
    [attr1][attr2][attr3]
  5. 伪类选择
    type child
    :first-child // 第一个子元素
    :first-of-type // 第一个子元素
    :last-child // 最后一个子元素
    :last-of-type // 最后一个子元素
    :nth-child(n) // 第n个子元素
    :nth-of-type(n) // 第n个子元素
    :nth-last-child(n) // 倒数第n个子元素
    :nth-last-of-type(n) // 倒数第n个子元素
  6. 可见性
    :hidden
    :visible
  7. 表单选择
    :input // 所有input标签
    :text // text属性的input标签
    :password // password属性的input标签
    :redio
    :checkbox
    :submit
    :image
    :reset
    :button
    :file
    :hidden
  8. 表单属性
    :enabled
    :disabled
    :checked
    :selected
7.2 属性操作
    .attr("attrName", "attrValue"); //设置属性
    .attr("attrName");  //获取属性值
    .attr({keys:"values"}); //同时设置多个属性
    .attr(key, fn());   //将key属性设置为函数fn()返回值
    removeAttr('attrName'); //删除属性attrName
7.3 CSS类
    .addClass("className"); //添加class属性值className,已有class值不会重复添加
    .removeClass("className");  //删除class属性值className
    .toggleClass("className");  //切换class属性值className,即(根据是否已有className)循环添加和删除className
    
    .html();    //相当于 .innerHTML
    .html("code&text"); //相当于 .innerHTML="code&text"
    .text();    //相当于 .innerText
    .text('txt');   //相当于 .innerText="txt"; 如果txt内容含有标签元素,会被转化成实体字符
    .val(); //获取表单元素的value值
    .val("value");  //设置表单元素的value值
7.4 对象访问
    .length;    //获取对象集合长度
    .size();    //获取对象集合长度
    .each(fn(index, element));  //index:当前索引下标;element:当前DOM元素;内置this也表示当前DOM元素
7.5 文档操作
  1. 内部插入:父子级关系
	$(a).append($(b));  // 元素a末尾处添加子元素b
    $(b).appendTo($(a));    // 元素b添加到父元素a末尾处
    $(a).prepend($(b)); // 元素a开头处添加子元素b
    $(b).prependTo($(a));   // 元素b添加到父元素a开头处
  1. 外部插入:兄弟级关系
	$(a).after($(b));   // 元素a后面添加同级元素b
    $(b).insertAfter($(a)); // 元素b添加到同级元素a后面
    $(a).before($(b));  // 元素a前面添加同级元素b
    $(b).insertBefore($(a));    // 元素b添加到同级元素a前面
  1. 包裹
    $(a).wrap(tag); // 用tag标签元素包裹(每一个)a元素
    $(a).unwrap();  // 取消(每一个)a元素的包裹元素
    $(a).wrapAll(tag);  // 将(所有)a元素整体包裹
    $(a).wrapInner(tag);    // 将父元素a的每个子元素用tag标签元素包裹
  1. 替换
    $(a).replaceWith(HTML); // 将(每一个) a元素 用HTML内容替换
    $(HTML).replaceAll($(a));   // 将所有(每一个)a元素用HTML内容替换
  1. 删除
    $(a).empty();   // 删除a元素内容(innerHTML)
    $(a).remove();  // 删除整个a元素
  1. 克隆
    $(a).clone();   // 获取一个a元素的克隆

注意:调用对象必须是jQuery对象,操作的参照对象也必须是明确的已有对象

7.6 事件
  1. 加载事件
        $(document).ready(fn);
        $(fn);  // 简写
        window.onload=fn;   // JS

JS:把页面上的DOM和资源加载完成之后执行
JQ:把页面上的DOM完成之后就会执行;JQ来源于JS,但超越JS

  1. 事件切换
    .hover(fn, fn); // 鼠标悬浮之上和鼠标离开切换触发
  2. 普通事件
    .click(fn); // 点击事件
    .dblclick(fn); // 双击事件
    .focus(fn); // 获焦事件
    .blur(fn); // 失焦事件
    .change(fn);
    .mouseover(fn);
    .mouseout(fn);
    .mousedown(fn);
    .mouseup(fn);
    .mousemove(fn);
  3. 事件处理(绑定)
    .bind("event", fn); / /给Jquery对象绑定新事件
    .bind({"event1":fn1, "event2":fn2}); //给Jquery对象绑定多个事件
    .unbind("event"); //给Jquery对象解除绑定指定事件,没有event参数时解除所有事件的绑定
    .on("event", fn);
    .on({"event1":fn1, "event2":fn2});
    .off("event");
    .one("event", fn); //给Jquery对象绑定仅触发一次的事件,触发后自动解除
7.7 查找元素
.parent();  // 获取当前元素的父元素
.find("selector");  // 获取当前元素下的selector元素
.next();    // 获取下一个兄弟元素
.prev();    // 获取前一个兄弟元素
.closest("selector");   // 获取最近的selector元素,重点!!!可以在特殊域内快速获取当前元素的父元素等操作
注意:对象集合
    .get(); // 获取对象的数组DOM形式
    .filter();  // 筛选出符合条件的对象集合,可以传入选择器或函数(true/false)
    .map(); // 对集合中的每一个DOM节点进行操作,返回内容有fn()决定

注意Jquery对象的多数单对象方法也可以用于对象集合的操作,并返回集合中每个对象的操作结果的集合

7.8 动画
    .show([time, fn]);  // time:动画时间(默认十分迅速);fn:动画完成后的回调函数
    .hide([time, fn]);
    .toggle([time, fn]);    // show/hide自动切换
    .slideUp([time, fn]);   // 上滑隐藏
    .slideDown([time, fn]); / /下拉显示
    .slideToggle([time, fn]);   // Up/Dowm自动切换
    .fadeIn([time, fn]);    // 淡入显示
    .fadeOut([time, fn]);   // 淡出隐藏
    .fadeToggle([time, fn]);    // In/Out自动切换
    .fadeTo([time, Alpha, fn]); // 改变透明度带Alpha

AJAX网络请求

7.9 AJAX
    $.ajax({
        type: 'GET',    // 一般单纯请求资源,通常创建固定相关的新东西
        url: 'url',
        success: function(data){    // 成功获取数据后回调函数
            $.each(data, function(index, element){
                // 数据处理
            });
        }
        error: function() {
            // 请求失败时的回调函数
        }
    });
    $.ajax({
        type: 'POST',   // 一般提交数据并请求相应资源,通常创建跟提交相关的新东西
        url: 'url',
        data: {k: v}
        success: function(newData){ // 成功响应被获取数据后回调函数
            $.each(data, function(index, element){
                // 数据处理
            });
        }
        error: function() {
            // 请求失败时的回调函数
        }
    });
    $.ajax({
        type: 'DELETE', // 一般请求删除某项数据(根据url例如id信息等辨别),通常删除数据
        url: 'url',
        success: function(result){  // 成功响应后回调函数
            // 执行相关的DOM操作
        }
        error: function(error) {
            // 请求失败时的回调函数
        }
    });
error信息:
error.status // 响应状态码(404…)
error.readyState // 当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。
error.statusText // 状态码信息(Not Found…)
error.responseText // 响应文本信息,服务器返回内容

扩展$(selector).delegate(childSelector, event[, data], function)方法(data:可选,规定传递到函数的额外数据)
为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用delegate()方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

    $.ajax({
        type: 'PUT',    // 一般提交并更新某项数据(根据url例如id信息等辨别),通常编辑更新数据
        url: 'url',
        data: {k: v}
        success: function(newData){ // 成功响应被获取数据后回调函数
            // 相关DOM操作
        }
        error: function() {
            // 请求失败时的回调函数
        }
0.0 特殊
修改class属性

==> .style.className

修改float属性

==> .style.cssFloat

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值