Javascript开发（四）

第四篇主要讲常用的js库

# loash.js

# Array

_.chunk：将一个数组拆分成多个size长度的区块，并用这些区块组成一个新数组

_.compact：去掉原数组中所有的假值元素，创建一个新数组

_.concat：将所有参数组合，创建一个新数组，

_.difference：返回过滤后的新数组，去除重复值

_.differenceBy：

_.drop：去除数组中的前n个元素

_.dropRight：去除数组尾部的n个元素

_.dropRightWhile：

_.union: 创建一个按顺序排列的唯一值的数组, 可以合并数组。

_.unionWith: 这个方法类似_.union (opens new window)，除了它接受一个 comparator 调用比较arrays数组的每一个元素。

_.unionBy: 这个方法类似_.union (opens new window) ，除了它接受一个 iteratee （迭代函数），调用每一个数组（array）的每个元素以产生唯一性计算的标准。

_.uniq(array)：创建一个去重之后的数组副本

_.uniqBy(array)：创建一个去重之后的数组副本

_.uniqWith(array)：创建一个去重之后的数组副本

_.zip()：创建一个分组元素的数组，数组的第一个元素包含所有给定数组的第一个元素，数组的第二个元素包含所有给定数组的第二个元素，以此类推。

_.zipWith()：这个方法类似于_.zip (opens new window)，不同之处在于它接受一个 iteratee（迭代函数），来指定分组的值应该如何被组合。该iteratee调用每个组的元素

_.zipObject():

_.zipObjectDeep():

_.unzip()：这个方法类似于_.zip (opens new window)，除了它接收分组元素的数组，并且创建一个数组，分组元素到打包前的结构。

_.unzipWith()：此方法类似于_.unzip (opens new window)，除了它接受一个iteratee指定重组值应该如何被组合。iteratee 调用时会传入每个分组的值

_.fromPairs()：接受数组，返回一个由键值对构成的对象

_.tail()：返回数组中去除第一个元素之后的数组

_.pull()：移除数组array中所有和给定值相等的元素

_.pullAll()：与pull方法功能相同，只是这个方法接收一个数组

_.pullAllBy(): 与pull方法功能相同，区别是这个方法接受一个 iteratee（迭代函数）调用 array 和 values的每个值以产生一个值，通过产生的值进行了比较。

_.pullAllWith():这个方法类似于_.pullAll (opens new window)，区别是这个方法接受 comparator 调用array中的元素和values比较。

_.pullAt():根据索引 indexes，移除array中对应的元素，并返回被移除元素的数组。

_.intersection():创建唯一值的数组，这个数组包含所有给定数组都包含的元素

_.intersectionBy(): 类似于intersection, 区别是它接受一个 iteratee 调用每一个arrays的每个值以产生一个值，通过产生的值进行了比较

_.intersectionWith():类似于intersection, 区别是它接受一个 comparator 调用比较arrays中的元素。结果值是从第一数组中选择

_.take(): 创建一个数组切片，从array数组的起始元素开始提取n个元素

_.takeRight(): 创建一个数组切片，从array数组的最后一个元素开始提取n个元素

_.takeRightWhile(): 从array数组的最后一个元素开始提取元素，直到 predicate 返回假值

_.takeWhile(): 从array数组的起始元素开始提取元素，，直到 predicate 返回假值

_.xor(): 创建一个给定数组唯一值的数组

_.xorBy(): 除了它接受 iteratee（迭代器），这个迭代器调用每一个 arrays（数组）的每一个值，以生成比较的新值

_.xorWith(): 该方法是像_.xor (opens new window)，除了它接受一个 comparator ，以调用比较数组的元素

# Object

_.assign:返回一个对象

_.at:返回所选中对象属性组成的数组

_.findKey:返回满足value条件的key

_.findLastKey:

_.pick：返回一个从object中选中的属性的对象

_.pickBy：返回一个从object中判断为真的属性的对象

_.omit:与pick返回结果相反

_.omitBy：与pickBy返回结果相反

_.invert：返回一个原对象key-value倒置的对象

_.invertBy：返回一个原对象key-value倒置的对象，与invert不同的是value是一个数组

_.values：返回一个object可枚举属性组成的数组

_.valuesln：返回一个object自身和继承的可枚举属性组成的数组

_.toPairs: 创建一个object对象自身可枚举属性的键值对数组

_.toPairsIn: 创建一个object对象自身和继承的可枚举属性的键值对数组。

_.mapValues: 创建一个对象，这个对象的key与object对象相同，值是通过 iteratee 运行 object 中每个自身可枚举属性名字符串产生的

_.merge: 返回对象的浅拷贝对象，对象自身和继承的可枚举属性到 object 目标对象。

_.mergeWith: 与merge函数功能相同，并且它接受一个 customizer，调用以产生目标对象和来源对象属性的合并值。如果customizer 返回 undefined，将会由合并处理方法代替

# String

_.camelCase：转换字符串为下驼峰写法

_.capitalize：返回首字母为大写、其他字母为小写的字符串

_.upperCase(): 转换字符串string为空格分隔的大写单词

_.upperFirst(): 转换字符串string的首字母为大写

_.lowerCase(): 转换字符串string以空格分开单词，并转换为小写

_.lowerFirst(): 转换字符串string的首字母为小写

_.snakeCase()：转换字符串为snakecase

_.startCase(): 转换字符串为start case

_.startWith: 返回布尔值，是否以该首字母开头

_.toLower：转换整个字符串的字符为小写

_.toUpper：转换整个字符串的字符为大写

_.trim:从字符串中移除前面和后面的空格或指定的字符串

_.trimEnd:移除字符串后面的空格或者指定字符串

_.trimStart: 移除字符串前面的空格或者指定字符串

_.pad(): 如果string字符串长度小于 length 则从左侧和右侧填充字符。如果没法平均分配，则截断超出的长度

_.padEnd(): 如果string字符串长度小于 length 则在右侧填充字符。如果超出length长度则截断超出的部分

_.padStart():如果string字符串长度小于 length 则在左侧填充字符。如果超出length长度则截断超出的部分

_.truncate(): 截断string字符串，如果字符串超出了限定的最大值。被截断的字符串后面会以 omission 代替，omission 默认是 "..."

# 常用函数

# Math

_.ceil：向上取整数

_.floor：向下取整数

_.max：取数组中的最大值

_.maxBy：

_.min：取数组中的最小值

_.minBy

_.mean：计算数组中的平均值

_.meanBy

_.divide：除

# Number

_.clamp：返回限制在上下限之间的值

_.inRange：返回布尔值，判断是否在上下限之间

_.random：产生一个上下限之间的数，可以指定是否为浮点数

_.clamp(-10,-5,5) //5
_.inRange(3,2,4) //true
_.random(0,5)

1
2
3

# fullpage.js

安装

npm install fullpage.js

# Velocity.js

# Momentjs

momentjs是js日期处理类库，js原生对date对象处理比较好，但是对时间戳处理不友好，所以moment在这方面比原生的时间处理函数更强大。

安装

npm install moment --save

引入

import moment from 'moment'

日期格式化

moment().format('MMMM Do YYYY, h:mm:ss a'); // 九月 19日 2020, 2:53:10 下午
moment().format('dddd');                    // 星期六
moment().format("MMM Do YY");               // 9月 19日 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();                          // 2020-09-19T14:53:10+08:00

1
2
3
4
5

获取时间

//获取以秒为单位的时间戳
moment().format('X')          // 返回值为字符串类型
moment().unix()               // 返回值为数值型
//获取以毫秒为单位的时间戳
moment().format('x')          // 返回值为字符串类型
moment().valueOf()            // 返回值为数值型
moment().get('year')          //获取年份
moment().get('11')            //获取月份
moment().get('25')            //获取某一天
moment().day() (0~6, 0: 周日, 6: 周六)
moment().weekday() (0~6, 0: 周日, 6: 周六)
moment().isoWeekday() (1~7, 1: 周一, 7: 周日)
moment().get('day')
mment().get('weekday')
moment().get('isoWeekday')
moment().toArray() // [years, months, date, hours, minutes, seconds, milliseconds] //获取当前年月日时分秒
moment().toObject() // {years: xxxx, months: x, date: xx ...} //获取当前年月日时分秒
moment().seconds()
moment().get('seconds')         //获取秒数
moment().minutes()
moment().get('minutes')         //获取分钟
moment().hours()
moment().get('hours')           //获取小时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

获取相对时间

//2020年9月19号15点为例
moment("20111031", "YYYYMMDD").fromNow(); // 9 年前
moment("20120620", "YYYYMMDD").fromNow(); // 8 年前
moment().startOf('day').fromNow();        // 15 小时前
moment().startOf('day')                   //获取今天0时0分0秒
moment().startOf('week')                  //获取本周第一天（周日）0时0分0秒
moment().startOf('isoWeek')               //获取本周周一0时0分0秒
moment().startOf('month')                 //获取当前月第一天0时0分0秒
moment().endOf('day').fromNow();          // 9 小时内
moment().endOf('day')                     //获取今天23小时59分59秒
moment().startOf('hour').fromNow();

1
2
3
4
5
6
7
8
9
10
11

日历时间

//2020年9月19号15点为例
moment().subtract(10, 'days').calendar(); // 2020/09/09
moment().subtract(6, 'days').calendar();  // 上星期日14:36
moment().subtract(3, 'days').calendar();  // 上星期三14:36
moment().subtract(1, 'days').calendar();  // 昨天14:36
moment().calendar();                      // 今天14:36
//添加时间
moment().add(1, 'days').calendar();       // 明天14:36
moment().add(3, 'days').calendar();       // 下星期二14:36
moment().add(10, 'days').calendar();      // 2020/09/29

1
2
3
4
5
6
7
8
9
10

获取当前月总天数

moment().daysInMonth()

比较时间

let start_date = moment().subtract(1, 'weeks')
let end_date = moment()

end_date.diff(start_date) // 返回毫秒数

end_date.diff(start_date, 'months') // 0
end_date.diff(start_date, 'weeks') // 1
end_date.diff(start_date, 'days') // 7
start_date.diff(end_date, 'days') // -7
end_date.isBefore(start_date);  // 是否在某日期之前
end_date.isAfter(start_date); // 是否在日期之后
end_date.isSame(start_date);  // 日期是否相同
end_date.isSameOrBefore(start_date);  //是否在某日期之前或者相同
end_date.isSameOrAfter(start_date);  //是否在某日期之后或者相同
moment().isBetween(moment-like, moment-like); //是否在两个时间之间
moment().isLeapYear(); //是否是闰年
moment.isMoment(end_date); //是否是moment对象
moment.isDate(end_date);  //是否是原生date对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

转为js原生时间对象

let m = moment()
let nativeDate1 = m.toDate()

1
2

设置时间

moment().set('year', 2019)            //设置年份
moment().set('month', 11)             //设置月份
moment().set('date', 15)              //设置某个月中的某一天
moment().set('weekday', 0)            //设置日期为本周第一天（周日）
moment().set('isoWeekday', 1)         // 设置日期为本周周一
moment().set('hours', 12)             //设置小时
moment().set('minutes', 30)           //设置分钟
moment().set('seconds', 30)           //设置秒

1
2
3
4
5
6
7
8

https://segmentfault.com/a/1190000015240911

# dayjs

由于momentjs不再维护，因此寻找别的js时间库进行时间操作。

dayjs对时间的操作

# bigNumberjs

bignumber.js是一个用于数学计算的库，支持任意精度

clone()

config()

maximum()、minimum()

random([])

实例方法：

plus():加法。minus():减法

.times():乘法 div():除法。.idiv():除法，只返回整数

.mod():取模/取余。.pow():指数运算 .sqrt():开平方

.comparedTo():比较大小

.dp() 精度调整

.integerValue()：取整

.sd()：有效数字

.toFixed()：返回字符串，截取小数点后位数

.toFormat()：数字格式化

.toNumber()：转换为js基础数值类型

# slidev

在线ppt制作

# shell.js

Shelljs是Node.js下的脚本语言解析器，具有丰富且强大的底层操作(Windows/Linux/OS X)权限。Shelljs本质就是基于node的一层命令封装插件，让前端开发者可以不依赖linux也不依赖类似于cmder的转换工具，而是直接在我们最熟悉不过的javascript代码中编写shell命令实现功能。

使用

//局部模式
var shell = require('shelljs');
//全局模式下，就不需要用shell开头了。
//require('shelljs/global');

if (shell.exec('npm run build').code !== 0) {//执行npm run build 命令
  shell.echo('Error: Git commit failed');
  shell.exit(1);
}

//由于我的用另外一个仓库存放dist目录，所以这里要将文件增量复制到目标目录。并切换到对应目录。
shell.cp ('-r', './dist/*', '../../Rychou');
shell.cd('../../Rychou');

shell.exec('git add .');
shell.exec("git commit -m 'autocommit'")
shell.exec('git push')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Robotjs自动化库

控制鼠标移动

// Move the mouse across the screen as a sine wave.
var robot = require("robotjs");

// Speed up the mouse.
robot.setMouseDelay(2);

var twoPI = Math.PI * 2.0;
var screenSize = robot.getScreenSize();
var height = (screenSize.height / 2) - 10;
var width = screenSize.width;

for (var x = 0; x < width; x++)
{
	y = height * Math.sin((twoPI * x) / width) + height;
	robot.moveMouse(x, y);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

控制键盘输入

// Type "Hello World" then press enter.
var robot = require("robotjs");

// Type "Hello World".
robot.typeString("Hello World");

// Press enter.
robot.keyTap("enter");

1
2
3
4
5
6
7
8

获取屏幕数据

// Get pixel color under the mouse.
var robot = require("robotjs");

// Get mouse position.
var mouse = robot.getMousePos();

// Get pixel color in hex format.
var hex = robot.getPixelColor(mouse.x, mouse.y);
console.log("#" + hex + " at x:" + mouse.x + " y:" + mouse.y);

1
2
3
4
5
6
7
8
9

# js-导出读取xlsx包

sheetjs

https://github.com/SheetJS/sheetjs

安装

npm install xlsx

读取本地文件

// 读取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
	var reader = new FileReader();
	reader.onload = function(e) {
		var data = e.target.result;
		var workbook = XLSX.read(data, {type: 'binary'});
		if(callback) callback(workbook);
	};
	reader.readAsBinaryString(file);
}

1
2
3
4
5
6
7
8
9
10

读取网络文件

// 从网络上读取某个excel文件，url必须同域，否则报错
function readWorkbookFromRemoteFile(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('get', url, true);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function(e) {
		if(xhr.status == 200) {
			var data = new Uint8Array(xhr.response)
			var workbook = XLSX.read(data, {type: 'array'});
			if(callback) callback(workbook);
		}
	};
	xhr.send();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

通过上述代码获取到workbook对象

workbook对象中的SheetNames里面保存了所有的sheet名字，然后Sheets则保存了每个sheet的具体内容（我们称之为Sheet Object）。每一个sheet是通过类似A1这样的键值保存每个单元格的内容，我们称之为单元格对象（Cell Object）

Sheet Object表示一张表格，只要不是!开头的都表示普通cell，否则，表示一些特殊含义，具体如下：

!ref：表示此sheet所有单元格的范围，如A1到F8

[!merges]：存放一些单元格合并信息，是一个数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列；

每一个单元格是一个对象（Cell Object），主要有t、v、r、h、w等字段

t：表示内容类型，s表示string类型，n表示number类型，b表示boolean类型，d表示date类型，等等
v：表示原始值；
f：表示公式，如B2+B3；
h：HTML内容
w：格式化后的内容
r：富文本内容rich text

读取workbook对象

// 读取 excel文件
function outputWorkbook(workbook) {
	var sheetNames = workbook.SheetNames; // 工作表名称集合
	sheetNames.forEach(name => {
		var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
		for(var key in worksheet) {
			// v是读取单元格的原始值
			console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
		}
	});
}

1
2
3
4
5
6
7
8
9
10
11

XLSX.utils.sheet_to_csv：生成CSV格式
XLSX.utils.sheet_to_txt：生成纯文本格式
XLSX.utils.sheet_to_html：生成HTML格式
XLSX.utils.sheet_to_json：输出JSON格式

导出xlsx文件

使用插件官方提供的工具类

aoa_to_sheet: 这个工具类最强大也最实用了，将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据；
table_to_sheet: 将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并；
json_to_sheet: 将一个由对象组成的数组转成sheet；

处理单元格合并

var aoa = [
	['主要信息', null, null, '其它信息'], // 特别注意合并的地方后面预留2个null
	['姓名', '性别', '年龄', '注册时间'],
	['张三', '男', 18, new Date()],
	['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
sheet['!merges'] = [
	// 设置A1-C1的单元格合并
	{s: {r: 0, c: 0}, e: {r: 0, c: 2}}
];
openDownloadDialog(sheet2blob(sheet), '单元格合并示例.xlsx');

1
2
3
4
5
6
7
8
9
10
11
12

http://blog.haoji.me/js-excel.html#dao-chu-excel

# marked.js

marked.js可以将md解析为html

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

使用

let md = `### h3`
let table = marked(md);

1
2

# Showdown.js

Markdown转 html

<script src="/showdown-1.9.0/dist/showdown.min.js"></script>
<script type="text/javascript">
  var content = $('#text').text();
  var converter = new showdown.Converter();
  var htmlcontent = converter.makeHtml(content);
  $("#article").html(htmlcontent);
</script>
<body>
  <p id="text"></p>
  <p id="article"></p>
</body>

1
2
3
4
5
6
7
8
9
10
11

# docsearchjs

首先在Algolia申请一个api。

在Vue中可以使用docsearchjs，配合Algolia使用

yarn add -D docsearch.js

在组件中使用

<template>
	<input
    type="text"
    class="search-input"
   	id="search_input"
    placeholder=""
   />
</template>
<script>
import 'docsearch.js/dist/cdn/docsearch.min.css'
import docsearch from 'docsearch.js'
  
export default {
  mounted () {
    docsearch({
      apiKey: 'feb33c2506cdece7f0267859a856767a'
      IndexName: '',
      inputSelector: '#search_input',
      algoliaOptions: { 'fetchFilters': ['version: v2_0'] },
      debug: false
    })
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

还有组件we-vue可以使用

# hedron.js

# format.js

FormatJS 是一个模块化的 JavaScript 国际化库。可用于格式化数值、日期等显示，使用 i18n 工业标准，提供一些常用的模板和组件库。

已经有很多包内置formatjs，比如react-intl

react-intl npm 包文件可以通过设置package.json 文件的main的方式可以为commnjs, ES6, UMD dev, UMD prod这几个版本，但无论是使用那个版本的React Intl, 它们都提供相同的命名导出如下:

# shepherd.js

引导用户进行网站教程

安装

<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
<script src="shepherd.js/dist/js/shepherd.min.js"></script>

1
2

使用

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'class-1 class-2',
    scrollTo: { behavior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  title: 'Creating a Shepherd Tour',
  text: `Creating a Shepherd tour is easy. too!\
  Just create a \`Tour\` instance, and add as many steps as you want.`,
  attachTo: {
    element: '.hero-example',
    on: 'bottom'
  },
  buttons: [
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary',
      text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'
    }
  ],
  id: 'creating'
});

tour.start();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# react-shepherd

安装

npm install --save react-shepherd

使用

import React, { Component, useContext } from 'react'
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
import newSteps from './steps'

const tourOptions = {
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    }
  },
  useModalOverlay: true
};

function Button() {
  const tour = useContext(ShepherdTourContext);

  return (
    <button className="button dark" onClick={tour.start}>
      Start Tour
    </button>
  );
}

class App extends Component {
  render() {
    return (
      <div>
        <ShepherdTour steps={newSteps} tourOptions={tourOptions}>
          <Button />
        </ShepherdTour>
      </div>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# jquery

jquery是目前使用最广泛的js函数库，在使用JavaScript的网站中，93%使用了jquery，成为了开发者必学的技能

jquery的优势有两个，首先它基本是一个DOM操作工具，可以使操作DOM对象变得异常简单，其次它统一了不同浏览器的api接口，使得代码能够在所有现代浏览器运行，开发者不用担心浏览器之间的差异了

加载jquery可以使用CDN或者本地获取

<script type = "text/javascript"
        src= "//code.jquery.com/jquery-1.11.0.min.js">
</script>
<script>
   window.jQuery || 
   document.write(
     '<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>'
   );
</script>

1
2
3
4
5
6
7
8
9

jquery的基本思想是“先选中某些网页元素，在对其进行某种处理(find something,do something)”

# 与DOM属性相关的方法

addClass、removeClass、toggleClass

addClass用于添加一个类，removeClass用于移除一个类，toggleClass用于折叠一个类，也就是无就添加，有就移除

$('li').addClass('special')
$('li').removeClass('special')
$('li').toggleClass('special')

1
2
3

css方法

css方法用于获取或者改变css的属性

$("h1").css('fontSize')
$("h1").css({
  'padding-left','20px'
})

1
2
3
4

prop、attr、removeProp、removeAttr方法

attr方法读写网页元素的属性，如a元素的href属性，img的src属性

prop方法读写DOM元素的属性，如nodeName，nodeType、tagName

removeProp方法移除某个DOM属性

removeAttr方法移除某个HTML属性

$("a").prop("oldValue",1234).removeProp('oldValue')
$("a").removeAttr("title")

1
2

data方法

用于在一个DOM对象上存储数据

$("body").data("foo",52);
$("body").data("foo")

1
2

# 与DOM相关的方法

Append、appendTo方法

用于将参数插入当前元素的尾部

用法

$('div').append("<p>World</p>")
("<p>World</p>").appendTo("div")
//两种效果相同，<div>hello</div>变为<div>hello <p>World</p></div>

1
2
3

prepend、prependTo方法

将参数中的元素变成当前元素的第一个子元素

$("p").prepend("hello")
$("<p></p>").prependTo("div")
//<p></p>变为<p>hello</p>

1
2
3

After、insertAfter方法

将参数中的元素插在当前元素的后面

$("div").after("<p></p>")
$("<p></p>").insertAfter("div")
//两种效果相同，<div></div>变成<div></div><p></p>

1
2
3

before、insertBefore方法

将参数中的元素插入到当前元素的前面

$("div").before("<p></p>")
$("<p></p>").insertbefore("div")
//两种效果相同，<div></div>变成<p></p><div></div>

1
2
3

wrap、wrapAll、unwrap、wrapInner方法

wrap方法将参数中的元素变成当前元素的父元素

unwrap方法移除当前元素的父元素

wrapAll方法为结果集的所有元素，添加一个共同的父元素

wrapInner方法为当前元素的所有子元素添加一个父元素

$("p").wrap("<div></div>") //<p></p>变为<div><p></p></div>
$("p").unwrap()   //<div><p></p></div>变为<div></div>
$("p").wrapAll("<div></div>")  // <p></p><p></p>变为<div><p></p><p></p></div>
$("p").wrapInner('<strong></strong>')   //<p>hello</p>变为<p><strong>hello</strong></p>

1
2
3
4

clone方法

clone方法克隆当前元素

var clones = $('li').clone();

remove、detach、replaceWith方法

remove方法移除并返回一个元素，取消该元素上所有事件的绑定

detach方法移除并返回一个元素，但不取消该元素上所有事件的绑定

replaceWith用参数中的元素替换并返回当前元素，取消当前元素的所有事件的绑定

$('p').remove()
$('p').detach()
$('p').replaceWith('<div></div>')

1
2
3

# 遍历方法

first方法返回结果集的第一个成员，last方法返回结果集的最后一个成员

//返回div元素内部第一个p元素和最后一个p元素
$("div p").first();
$("div p").last();

1
2
3

next方法紧邻的下一个同级元素，prev方法紧邻的上一个同级元素

$("h2").next();
$("h2").prev();

1
2

siblings方法返回当前元素的所有同级元素，也可以设置参数来过滤对同胞元素的搜索，nextAll方法返回当前元素其后的所有同级元素，prevAll返回当前元素前面的所有同级元素

//返回h2所有同胞元素下的所有p元素
$("h2").siblings("p")
$("h2").nextAll("p")
$("h2").prevAll("p")

1
2
3
4

parent方法返回当前元素的父元素，parents方法返回当前元素的所有上级元素，也可以指定元素类型进行筛选，parentsUntil方法返回介于两个给定元素之间的所有祖先元素

$("span").parent()
$("span").parents("ul")
$("span").parentsUntil("div")

1
2
3

closest方法返回当前元素、以及当前元素的所有上级元素之中第一个符合条件的元素

find方法返回当前元素的所有符合条件的下级元素

$("span").closest("ul").css({"color":"red"})

1
2

filter方法用于过滤结果集，他可以接受多种类型的参数，只返回与参数一致的结果，

not方法返回,与filter方法相反

$("p").filter(".url")
$("p").not(".url")

1
2

has方法与filter方法作用相同，但是只过滤出子元素符号条件的元素

is方法判断当前jquery对象是否符合指定的表达式

hasClass方法判断当前对象所匹配的元素是否含有指定的css类名

$('.object').is("expression")
$('.object').hasClass("className")

1
2

获取子元素是父元素的第几个子元素

$(function(){
  $(".demo ul li").click(function(){
    var index=$(".demo ul li").index(this);
    console.log(index);
  })
})

1
2
3
4
5
6

获取第几个子元素

children方法获取该元素下的直接子集元素

find方法获取该元素下的所有子集元素

//使用eq()方法找到
$('#test').children().eq(1).css({'display':'inline-block'})
$('#test').find('select').eq(2).val();

1
2
3

each方法用于遍历指定的对象和数组，并以对象的每个属性或者数组的每个成员作为上下文来遍历执行指定的函数，上下文是指通过this指针引用该元素

map方法用于处理当前的Jquery对象匹配的所有元素，并将结果封装为新的数组。

$("li").each(function(){
  alert($(this))
})

1
2
3

# 网络请求

$.ajax()方法：执行异步AJAX请求，该方法常用于其他方法不能完成的请求

$.get()方法：使用AJAX的HTTP GET请求从服务器加载数据

$.getJSON()方法：使用HTTP GET请求从服务器加载JSON编码数据

$.getScript()方法：

$.load方法：从服务器加载数据，并把返回的数据放入被选元素中

$.post()方法：使用AJAX的HTTP POST请求从服务器加载数据

$.ajax({url:"demo_test.txt",success:function(result){
  	$("#div1").html(result);
}})

1
2
3

# 使用this

# 动画

jquery提供简单的动画效果，但整体不如css强大

jquery提供以下动画效果：

show：显示当前元素

hide：隐藏当前元素

toggle：显示或隐藏当前元素

fadeIn：将当前元素的不透明度逐渐提升到100%

fadeOut：将当前元素的不透明度逐渐降为0%

fadeToggle：以逐渐透明或逐渐不透明的方式折叠显示当前元素

slideDown：以从上向下滑入的方式显示当前元素

slideDown只能显示被jquery隐藏的元素或者css设置为display：none的元素，使用overflow:hidden隐藏的元素不能被展示

slideUp：以从下向上滑出的方式隐藏当前元素

sildeToggle：以垂直滑入或滑出的方式折叠显示当前元素

这些方法可以不带参数使用，也可以使用毫秒或者预定义的关键字或自定义的关键字。预定义的关键字也可以进行修改。

$('.hidden').show();
$('.hidden').show(300);
$('.hidden').show('slow');

//修改预定义关键字
jQuery.fx.speeds.fast = 50;
jQuery.fx.speeds.slow = 3000;
jQuery.fx.speeds.normal = 1000;

//使用自定义关键字
jQuery.fx.speeds.blazing = 30;

$('.hidden').show('blazing');

1
2
3
4
5
6
7
8
9
10
11
12
13

stop、delay方法

stop方法表示立即停止执行当前的动画，delay方法接受一个时间参数，表示暂停多少秒之后执行

$('#stop').click(function(){
  $(".block").stop();
})
$("#foo").slideUp(300).delay(800).fadeIn(400)

1
2
3
4

animate

除了上面这些，jquery可以使用animate自己写动画效果。

animate接受三个参数，第一个参数是一个对象，表示动画结束时的css属性的值，第二个参数是动画持续的毫秒数。写css属性时，如果带有连字号，则需要使用骆驼拼写法改写；第三个参数表示动画结束时的回调函数

$('div').animate({
 		left:'+=50';
  	opacity:0.25;
  	fontSize:'12px'
	},
  300,
  function(){
     console.log('done!');
	}
)

1
2
3
4
5
6
7
8
9
10

# 事件处理

on方法

on方法是jquery事件绑定的统一接口，事件绑定的那些简便方法都是on方法的简写形式，

on方法接受两个参数，第一个是事件名称，第二个是回调函数

$('li').on('click',function(e){
    console.log($(this),text());
})

1
2
3

为li元素绑定click事件的回调函数

trigger方法

trigger方法用于触发回调函数，它的参数就是事件的名称

$('li').trigger('click')

off方法

off方法用来移除事件的回调函数

$('li').off()

# 插件

# jquery的其他应用

获取浏览器语言

var type= navigator.appName;
if (type == "Netscape"){
  var lang = navigator.language;
}else{
  var lang = navigator.userlanguage;
};
var lang = lang.substr(0,2);
if(lang == "zh"){
   window.location.replace('url')
}else if(lang == "en"){
   window.location.replace('url')
}else{
   window.location.replace('url')
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

获取浏览器类型

← Javascript开发（三） JavaScript开发（五） →