依赖：
jquery.js
jstree.js
//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css

备注：
绑定页面元素可以直接选中，绑定json数据则需要在ready.jstree事件中选中。

0、从 DOM 中删除 jstree 的所有痕迹，并销毁所有的实例
$.jstree.destroy ()

1、创建实例
1)直接绑定页面元素
$('#jstree').jstree();
2)绑定json数据

$('#jstree').jstree({
	'core' : {
	'data' : [ {
			"id" : "node1",
			"text" : "Root node 1",
			"children" : [ {
			"id" : "child_node_1",
			"text" : "Child node 1",
			"selected" : true
		}, {
			"id" : "child_node_2",
			"text" : "Child node 2"
		} ]
	}, {
		"id" : "node2",
		"text" : "Root node 2"
	} ]
	}
});

　　

2、获取一个已存在实例的引用
$.jstree.reference('jstree');
$.jstree.reference('#jstree');
$.jstree.reference($('#jstree'));
$.jstree.reference(document.getElementByID('jstree'));

3、获取一个已存在的节点
$('#jstree').jstree("get_node", "child_node_1");

4、当根节点（root）第一次加载时触发
$('#jstree').jstree().bind('loaded.jstree', function(e, data) {//加载事件
data.instance.open_all();
data.instance.refresh();
});

5、当所有节点都加载完毕时触发
$('#jstree').jstree().bind('ready.jstree', function(obj, e) {//初始化准备完成事件
$('#jstree').jstree(true).select_node('child_node_1');
});

6、选中事件
$('#jstree').jstree().on('select_node.jstree', function(e, data) {//选中事件
console.log("1~" + data.node.id + ":" + data.node.text);
});

7、改变事件
$('#jstree').jstree().on("changed.jstree",function(e, data) {//改变事件
console.log("2~" + "The selected nodes are:" + data.selected[0]);
});

8、点击事件
$('#jstree').jstree().on('activate_node.jstree', function(e, data) {//点击事件
console.log("3~" + data.node.id + ":" + data.node.text);
})

绑定的json属性列表
{
　　id : "string" // will be autogenerated if omitted
　　text : "string" // node text
　　icon : "string" // string for custom
　　　state : {
　　　　opened : boolean // is the node open
　　　　disabled : boolean // is the node disabled
　　　　selected : boolean // is the node selected
　　},
　　children : [] // array of strings or objects
　　li_attr : {} // attributes for the generated LI node
　　a_attr : {} // attributes for the generated A node
}

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>
	<script src="jstreeGroup/jquery-3.3.1.js"></script>
	<link rel="stylesheet"
	href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
	<script src="jstreeGroup/jstree.min.js"></script>
</head>
<body>
	<div id="jstree">
		<!-- in this example the tree is populated from inline HTML -->
		<ul>
			<li id="node1">Root node 1
				<ul>
					<li id="child_node_1">Child node 1</li>
					<li id="child_node_2">Child node 2</li>
				</ul>
			</li>
			<li id="node2">Root node 2</li>
		</ul>
	</div>
	<script>
		$(function() {

			/**
			$('#jstree').jstree().on('select_node.jstree', function(e, data) {//选中事件
			console.log("1~" + data.node.id + ":" + data.node.text);
			}).on(
			"changed.jstree",
			function(e, data) {//改变事件
			console.log("2~" + "The selected nodes are:"
			+ data.selected[0]);
			}).on('activate_node.jstree', function(e, data) {//点击事件
			console.log("3~" + data.node.id + ":" + data.node.text);
			}).bind('loaded.jstree', function(e, data) {//加载事件
			data.instance.open_all();
			data.instance.refresh();
			});
			**/

			$('#jstree').jstree({
				'core' : {
					'data' : [ {
						"id" : "node1",
						"text" : "Root node 1",
						"children" : [ {
							"id" : "child_node_1",
							"text" : "Child node 1",
							"selected" : true
						}, {
							"id" : "child_node_2",
							"text" : "Child node 2"
						} ]
					}, {
						"id" : "node2",
						"text" : "Root node 2"
					} ]
				}
			}).on('select_node.jstree', function(e, data) {//选中事件
				console.log("1~" + data.node.id + ":" + data.node.text);
			}).on("changed.jstree",function(e, data) {//改变事件
				console.log("2~" + "The selected nodes are:" + data.selected[0]);
			}).on('activate_node.jstree', function(e, data) {//点击事件
				console.log("3~" + data.node.id + ":" + data.node.text);
			}).bind('loaded.jstree', function(e, data) {//加载事件
				data.instance.open_all();
				data.instance.refresh();
			}).bind('ready.jstree', function(obj, e) {//初始化准备完成事件
				$('#jstree').jstree(true).select_node('child_node_1');
				//$('#jstree').jstree('select_node', 'child_node_2');
				//$.jstree.reference('#jstree').select_node('child_node_1');

				/**
				//获取一个已存在实例的引用
				$.jstree.reference('jstree');
				$.jstree.reference('#jstree');
				$.jstree.reference($('#jstree'));
				$.jstree.reference(document.getElementByID('jstree'));
				**/

				/**
				var node = $('#jstree').jstree("get_node", "child_node_1");//根据 ID 获取节点
				console.log(node.text);
				**/
			});
		});
	</script>
</body>
</html>