码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScripts语法速查

时间:2020-07-26 00:53:16      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:内容   ice   jquery   box   for   world   独立   log   默认   

1. 结构

1.1. 定义

  1. 在html中

    <head>
      <script>
        alert(‘Hello, world‘);
      </script>
    </head>
    
  2. 独立文件,然后在html中import

    <head>
      <script src="/static/js/abc.js"></script>
    </head>
    

有些时候你会看到 <script> 标签还设置了一个type属性:<script type="text/javascript">...</script>。但这是没有必要的,因为默认的type就是JavaScript,所以不必显式地把type指定为JavaScript。

1.2. 调用

1.3. strict模式

如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量:

i = 10; // i现在是全局变量

strict模式将限制这样的定义方式。

‘use strict‘;

2. 语法

2.1. 字符串

var s = ‘Hello, world!‘;

s.length;  // 13
s.toUpperCase();
s.toLowerCase();
s.indexOf(‘world‘);  // 没有找到指定的子串,返回-1
s.substring(0, 5);  // 从索引0开始到5(不包括5),返回‘hello‘

需要特别注意的是,字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果

2.1.1. 多行字符串

由于多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用反引号 * ... * 表示:

var str = `这是一个
多行
字符串`;

2.1.2. 模板字符串

var name = ‘小明‘;
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;

2.2. 数组

var arr = [1, 2, 3.14, ‘Hello‘, null, true];
arr.length; // 6
arr.indexOf(‘Hello‘);
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3
var aCopy = arr.slice(); // 复制数组

arr.push(‘A‘, ‘B‘); // 返回Array新的长度: 4
arr.pop(); // pop()返回‘B‘; 空数组继续pop不会报错,而是返回undefined
arr.unshift(‘A‘, ‘B‘); // 头部insert,返回Array新的长度: 4
arr.shift(); // ‘A‘

arr.sort();
arr.reverse();

var arr = [‘Microsoft‘, ‘Apple‘, ‘Yahoo‘, ‘AOL‘, ‘Excite‘, ‘Oracle‘];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, ‘Google‘, ‘Facebook‘); // 返回删除的元素 [‘Yahoo‘, ‘AOL‘, ‘Excite‘]

var added = arr.concat([1, 2, 3]);
// concat()方法可以接收任意个元素和Array
arr.concat(1, 2, [3, 4]); // [‘A‘, ‘B‘, ‘C‘, 1, 2, 3, 4]

var arr = [‘A‘, ‘B‘, ‘C‘, 1, 2, 3];
arr.join(‘-‘); // ‘A-B-C-1-2-3‘

2.3. 对象

var xiaohong = {
    name: ‘小红‘,
    ‘middle-school‘: ‘No.1 Middle School‘
};

xiaohong的属性名middle-school不是一个有效的变量,就需要用‘‘括起来。访问这个属性也无法使用.操作符,必须用[‘xxx‘]来访问:

xiaohong[‘middle-school‘]; // ‘No.1 Middle School‘
xiaohong[‘name‘]; // ‘小红‘
xiaohong.name; // ‘小红‘

如果我们要检测xiaoming是否拥有某一属性,可以用in操作符:

var xiaoming = {
    name: ‘小明‘,
    birth: 1990,
    school: ‘No.1 Middle School‘,
    height: 1.70,
    weight: 65,
    score: null
};
‘name‘ in xiaoming; // true
‘grade‘ in xiaoming; // false

要判断一个属性是否是xiaoming自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法:

var xiaoming = {
    name: ‘小明‘
};
xiaoming.hasOwnProperty(‘name‘); // true
xiaoming.hasOwnProperty(‘toString‘); // false

2.4. Map/Set

var m = new Map([[‘Michael‘, 95], [‘Bob‘, 75], [‘Tracy‘, 85]]);
m.get(‘Michael‘); // 95

m.set(‘Adam‘, 67); // 添加新的key-value
m.set(‘Bob‘, 59);
m.has(‘Adam‘); // 是否存在key ‘Adam‘: true
m.get(‘Adam‘); // 67
m.delete(‘Adam‘); // 删除key ‘Adam‘
m.get(‘Adam‘); // undefined
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
s.add(4);
s.delete(3);

2.5. for遍历

3. 面向对象

4. JQuery

加载模块:

var $ = require(‘jquery‘);
// 或者
require(‘jquery‘);
  • 第一种的话,jquery 也是一个标准的 CMD 模块,如果存在 jquery 的多个版本时,彼此可以共存。
  • 第二种的话,jquery 是一个,如果一个页面中存在多个 jquery 版本时,全局变量 jQuery / $ 会彼此覆盖。

4.1. jQuery对象

jQuery对象和DOM对象之间可以互相转化:

var div = $(‘#abc‘); // jQuery对象
var divDom = div.get(0); // 假设存在div,获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象

4.2. 选择器

// 查找<div id="abc">:
var div = $(‘#abc‘);


// 按tag查找: 查找<p>xxxx</p>:
var ps = $(‘p‘); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点

// 按class查找
var a = $(‘.red‘); // 所有节点包含`class="red"`都将返回

// 查找同时包含red和green的节点
var a = $(‘.red.green‘); // 注意没有空格
// 符合条件的节点: <div class="blue green red">...</div>

// 按属性查找: 找出<??? name="email">
var email = $(‘[name=email]‘);

// 组合查找
var emailInput = $(‘input[name=email]‘);
var tr = $(‘tr.red‘); // 找出<tr class="red ...">...</tr>

// 多项选择器
$(‘p,div‘); // 把<p>和<div>都选出来
$(‘p.red,p.green‘); // 把<p class="red">和<p class="green">都选出来

层级选择器 $(‘ancestor descendant‘)

$(‘ul.lang li.lang-javascript‘); // [<li class="lang-javascript">JavaScript</li>]
$(‘div.testing li.lang-javascript‘); // [<li class="lang-javascript">JavaScript</li>]

子选择器 $(‘parent>child‘) 类似层级选择器,但是限定了层级关系必须是父子关系

过滤器 : 一般不单独使用,它通常附加在选择器上,帮助我们更精确地定位元素。

$(‘ul.lang li‘); // 选出JavaScript、Python和Lua 3个节点

$(‘ul.lang li:first-child‘); // 仅选出JavaScript
$(‘ul.lang li:last-child‘); // 仅选出Lua
$(‘ul.lang li:nth-child(2)‘); // 选出第N个元素,N从1开始
$(‘ul.lang li:nth-child(even)‘); // 选出序号为偶数的元素
$(‘ul.lang li:nth-child(odd)‘); // 选出序号为奇数的元素

4.3. 表单相关

针对表单元素,jQuery还有一组特殊的选择器:

  • :input :可以选择 <input><textarea><select><button>
  • :file :可以选择 <input type="file"> ,和 input[type=file] 一样;
  • :checkbox :可以选择复选框,和 input[type=checkbox] 一样;
  • :radio :可以选择单选框,和 input[type=radio] 一样;
  • :focus :可以选择当前输入焦点的元素,例如把光标放到一个 <input> 上,用 $(‘input:focus‘) 就可以选出;
  • :checked :选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如 $(‘input[type=radio]:checked‘)
  • :enabled :可以选择可以正常输入的 <input><select> 等,也就是没有灰掉的输入;
  • :disabled :和 :enabled 正好相反,选择那些不能输入的。

4.4. 事件

因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码

浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。

由于不同的浏览器绑定事件的代码都不太一样,所以用jQuery来写代码,就屏蔽了不同浏览器的差异,我们总是编写相同的代码。

  • 鼠标事件

    • click: 鼠标单击时触发;
    • dblclick:鼠标双击时触发;
    • mouseenter:鼠标进入时触发;
    • mouseleave:鼠标移出时触发;
    • mousemove:鼠标在DOM内部移动时触发;
    • hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。
  • 键盘事件

    键盘事件仅作用在当前焦点的DOM上,通常是 <input><textarea>

    • keydown:键盘按下时触发;
    • keyup:键盘松开时触发;
    • keypress:按一次键后触发。
  • 其他事件

    • focus:当DOM获得焦点时触发;
    • blur:当DOM失去焦点时触发;
    • change:当 <input><select><textarea> 的内容改变时触发;
    • submit:当 <form> 提交时触发;
    • ready:当页面被载入并且DOM树完成初始化后触发。仅作用于document对象。

4.4.1. 事件参数

有些事件,如mousemove和keypress,我们需要获取鼠标位置和按键的值,否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数,可以从Event对象上获取到更多的信息:

$(function () {
    $(‘#testMouseMoveDiv‘).mousemove(function (e) {
        $(‘#testMouseMoveSpan‘).text(‘pageX = ‘ + e.pageX + ‘, pageY = ‘ + e.pageY);
    });
});

4.4.2. 取消绑定

function hello() {
    alert(‘hello!‘);
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off(‘click‘, hello);
}, 10000);

4.4.3. 事件触发条件

一个需要注意的问题是,事件的触发总是由用户操作引发的。例如,我们监控文本框的内容改动:

var input = $(‘#test-input‘);
input.change(function () {
    console.log(‘changed...‘);
});

当用户在文本框中输入时,就会触发change事件。但是,如果用JavaScript代码去改动文本框的值,将不会触发change事件:

var input = $(‘#test-input‘);
input.val(‘change it!‘); // 无法触发change事件

有些时候,我们希望用代码触发change事件,可以直接调用无参数的change()方法来触发该事件:

var input = $(‘#test-input‘);
input.val(‘change it!‘);
input.change(); // 触发change事件

input.change()相当于input.trigger(‘change‘),它是trigger()方法的简写。

为什么我们希望手动触发一个事件呢?如果不这么做,很多时候,我们就得写两份一模一样的代码。

JavaScripts语法速查

标签:内容   ice   jquery   box   for   world   独立   log   默认   

原文地址:https://www.cnblogs.com/brt2/p/13377727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!