JS事件流

事件的概念:HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。

事件流:事件流描述的是从页面中接收事件的顺序;包括3个阶段:

  1. 事件捕获阶段;

  2. 处于目标阶段;

  3. 事件冒泡阶段。

1、addEventListener

  addEventListener 是DOM2 级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件 处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

2、document、documentElement和document.body三者之间的关系:

  (1). document代表的是整个html页面;

  (2). document.documentElement代表的是<html>标签;

  (3). document.body代表的是<body>标签;

首先在事件捕获过程中,document对象首先接收到click事件,然后事件沿着DOM树依次向下,一直传播到事件的实际目标,就是id为btn的a标签。

接着在事件冒泡过程中,事件开始时由最具体的元素(a标签)接收,然后逐级向上传播到较为不具体的节点(document)。

注意:JQuery不支持事件捕获阶段,只有事件冒泡阶段

JQuery的事件对象和事件冒泡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的事件对象和事件冒泡</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: grey;
}
p{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<p class="p1"></p> <a href="https://wwww.baidu.com">去百度</a>
</div> </body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// ev为事件对象;会传递到函数中
$('.p1').click(function(ev){
// 事件属性
console.log(ev.type); // 获取事件的类型
console.log(ev.target); // 获取事件发生的DOM对象
console.log(ev.pageX); // 获取光标相对于页面的x轴的坐标
console.log(ev.pageY); // 光标相对于页面y轴的坐标 alert('当前事件触发了')
// 事件方法
// 常用方法:1. 阻止事件冒泡; 2. 阻止默认事件
// 1. 阻止事件冒泡
ev.stopPropagation(); // 当点击这个p标签时,只有这个p标签中的alert会触发,#box中的alert将不再被触发;因为阻止了向父盒子中冒泡 }) $('#box').click(function(){
alert('#box盒子事件触发了')
}) // 2. 阻止默认事件
// 默认事件如 a标签的点击事件,form表单的submit事件
// 注意:所有DOM元素都能加点击事件
$('a').click(function(ev){
// ev.preventDefault(); // 阻止默认事件
// ev.stopPropagation(); // 这两句代码可合并成一句,如下 alert('哈哈哈') return false; // return false 表示阻止事件的默认行为和冒泡行为(jquery没有捕获)
}) </script>
</html>

JQuery事件的邦定和移除、自定义事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery事件的邦定和移除&自定义事件</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box"> </div>
<button>按钮</button> </body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 1. 事件的邦定 // 给当前的元素邦定事件: JQuery对象.bind(事件类型,fn) ; 事件类型可添加多个,中间用空格隔开
// 多个事件做同一件事情
// $('#box').bind('click mouseenter',function(){
// alert('事件被邦定了')
// }) // 不同事件对应不同的函数 (对象的形式)
function add1(){
console.log('邦定click事件')
}
function add2(){
console.log('邦定mouseenter事件')
}
$('#box').bind({
'click':add1,
'mouseenter':add2
}) // 2. 事件的移除: .unbind() ; 如果unbind()中没有参数,意味着移除元素的所有事件
setTimeout(function(){
// // $('#box').unbind()
// $('#box').unbind('mouseenter') // 仅移除 mouseenter 事件;如果移除多个事件,用空格隔开
},3000) // 添加的事件不能发生在未来 ---> 动态生成的元素不能直接添加到对象,所以里面的事件也就不能发生 ---> 解决方法:事件代理
$('body').append('<div class="box" style="width:100px;height:100px;background:yellow">哈哈哈哈</div>') // 3. 邦定自定义的事件
$('button').bind('myClick',function(ev,a,b,c){ // ev是事件对象;a,b,c是 trigger()中数组里面的元素(按顺序解析分配)
alert(111); alert(a);
alert(b);
alert(c);
})
// 触发自定义的事件: myClick事件需要通过 下面的代码去触发
$('button').trigger('myClick',[1,2,3]);
})
</script>
</html>

事件代理(也叫“事件委托”)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件代理</title>
</head>
<body>
<ul>
<li class="luffy">路飞</li>
<li class="luffy">路飞</li>
<li class="luffy">路飞</li>
</ul> </body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 通过 bind方法、系统自带的方法(如click)都不能处理 未来添加的元素 // 事件代理:自己处理不了当前的事件,就交给它的父级元素来做这个事件
// 语法: 父级.on('事件名字','所要处理的当前标签元素',fn)
// on和bind都是用于事件邦定,通常事件邦定都用bind,on主要是用于事件代理
$('ul').on('click','#namei,.luffy',function(){ // 第二个参数是选择器;多个选择器用 逗号(,) 分隔
console.log(this)
}) // 后来添加的事件
$('ul').append('<li id="namei">娜美</li>');
// 通过事件代理,后来添加的元素也能够处理相应的事件 </script>
</html>

JQuery的鼠标事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的鼠标事件一</title>
<style type="text/css">
*{padding: 0;margin: 0;}
#box{
width: 200px;
height: 200px;
background: grey;
}
#child{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div id="child"> </div> <input type="text" name="" id="" value="123">
<br>
<input type="password" name=""> </div> </body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 1. 单击事件: click() // 2. 双击事件: dblclick()
/*
$('#box').dblclick(function(){
console.log('dblclick');
})
*/ // 3. 鼠标按下/弹起:mousedown()/mouseup()
/*
$('#box').mousedown(function(){
console.log('mousedown');
})
$('#box').mouseup(function(){
console.log('mouseup');
})
*/ // 4. 鼠标移入/移出: mouseover()/mouseout() ; 移入/移出被选元素或者其子元素的时候触发
/*
$('#box').mouseover(function(){
console.log('mouseover');
})
$('#box').mouseout(function(){
console.log('mouseout');
})
*/ // 5. mouseenter()/mouseleave():鼠标进入/离开;鼠标指针只在穿过/离开被选元素时触发事件(被选元素及其子元素之间的移入移出不会触发)
/*
$('#box').mouseenter(function(){
console.log('mouseover');
})
$('#box').mouseleave(function(){
console.log('mouseout');
})
*/ // 6. mousemove():实时监测鼠标的移动;应用场景:拖拽
/*
$('#box').mousemove(function(){
console.log('mousemove');
})
*/ // 7. 获取焦点/失去焦点(不支持冒泡): focus()/blur()
/*
$('input[type=text]').focus(function(){
console.log($(this).val()) // input,textarea获取值用val();其它的元素用text()或者html()
})
$('input[type=text]').blur(function(){
console.log($(this).val());
})
*/ // 8. keydown()/keyup():键盘按键按下/弹起
$('input[type=password]').keydown(function(){
console.log($(this).val());
})
$('input[type=password]').keyup(function(){
console.log($(this).val());
}) })
</script>
</html>

表单事件

change事件一般仅限于input元素;

select是文本元素发生改变时触发的事件,例如input中拿鼠标复制的时候选中;select仅限于type=text的input和textarea

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的表单事件</title>
<style type="text/css">
.show{
color: red;
}
</style>
</head>
<body>
<form action="https:www.baidu.com">
<select name="sweets" id="" multiple="">
<option value="">巧克力</option>
<option value="" selected="">糖果</option>
<option value="">焦糖</option>
<option value="" selected="">曲奇饼</option>
<option value="">烧饼</option>
<option value="">麦香饼</option>
<option value="">曲奇饼</option>
</select>
<input type="text" name="hello" id="target">
<input type="submit" name="submit">
</form> <textarea id="other">Trigger the handler</textarea> <div class="show"></div> </body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 1. change():表单元素发生改变时触发事件
// change事件仅限于input元素、textarea、select
$('select').change(function(){
$('.show').text($('select option:selected').text()); // 选中的内容添加到show盒子中
}) // 2. select(): 文本元素发生改变时触发事件
// select事件仅限于type类型为text的input和textarea表单元素
$('#other').select(function(){
console.log($(this).val()); // 表单控件的取值用 .val()
}) // 3. submit():表单元素发生改变时触发事件
// form表单有默认的submit行为,当对input type=submit按钮点击的时候会触发form的默认action行为,此时可以调用 jquery的submit方法,通过 e.preventDefault()来阻止默认事件
$('form').submit(function(e){
// 阻止默认事件
e.preventDefault(); // 定义自己的逻辑
alert(111);
}) })
</script>
</html>

JQuery的ajax技术

AJAX = 异步的javascript和XML(Asynchronous Javascript and XML)

简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
AJAX最重要的作用是局部刷新和异步处理数据

参考链接: https://www.luffycity.com/python-book/jquery/9413-jqueryde-ajax.html

Bootstrap

Bootstrap 是基于 HTML、CSS、javascript 的,它用于开发响应式布局(自适应的页面)、移动设备优先的 WEB 项目

引入方式:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口的设置:移动设备优先;支持移动端,在多个设备上适应,如PC,Iphone,Android等 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>示例/title> <!-- Bootstrap:必须引入Bootstrap -->
<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --> <!-- 如果是在IE 9 以下浏览器中打开,需要把下面的注释代码打开 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1> <!-- 如果需要引入Bootstrap中的插件,需要先引入JQuery,再引入Bootstrap内的JS --> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> --> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
</body>
</html>

响应式页面

CSS3的媒体查询:使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>媒体查询</title> <!-- 使用@media(媒体查询), 必须做以下操作 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!--
width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0,即代表不缩放)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
--> <style type="text/css">
*{padding: 0;margin: 0;} /*屏幕宽度在300px ~ 600px 之间时显示的样式*/
/*可通过多个 @media 来调整自适应样式*/
/*
@media语法:
@media mediaType and|not|only (media feature) {
CSS-Code;}
*/
@media screen and (min-width: 300px) and (max-width: 600px) {
.box{
width: 200px;
height: 300px;
background: red;
}
}
</style>
</head>
<body>
<div class="box"> </div> </body>
</html>

Bootstrap的栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列

栅格系统的使用:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口的设置:移动设备优先;支持移动端,在多个设备上适应,如PC,Iphone,Android等 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>栅格</title> <!-- Bootstrap:必须引入Bootstrap -->
<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css"> <!-- 不要随意修改Bootstrap提供出来的系统类 -->
<style type="text/css">
[class^='col']{
border: 1px solid red;
}
</style> </head>
<body> <!-- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。 -->
<!-- 固定宽度容器 .container -->
<!-- container和 container-fluid是布局容器, 不能互相嵌套 -->
<div class="container">
<h1>栅格系统工程</h1>
<div class="row">
<!-- 'row'和'col-md-4'是Bootstrap提供的类名 -->
<div class="col-md-4">
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中
</div>
<div class="col-md-4">
“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
通过“行(row)”在水平方向创建一组“列(column)”
</div>
<div class="col-md-4">
你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin也可以用来创建语义化的布局。
</div> </div>
</div> </body>
</html>

浏览器效果:

栅格参数

Bootstrap的CSS全局样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS的全局样式</title> <!-- Bootstrap:必须引入Bootstrap -->
<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css"> <style type="text/css">
[class^='col']{
border: 1px solid red;
} </style> </head>
<body> <!-- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。 -->
<!-- 固定宽度容器 .container -->
<!-- container和 container-fluid是布局容器, 不能互相嵌套 -->
<div class="container">
<h1>栅格系统工程</h1>
<div class="row">
<div class="col-md-4">
<h1>h1. Bootstrap heading</h1>
<!-- small标签为副标题 -->
<h2>h2. Bootstrap heading<small>Secondary text</small></h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<!-- 通过添加 .lead 类可以让内容突出显示 -->
<p>我是<span class="lead">页面</span>主题</p>
</div> <div class="col-md-4">
<!-- 对齐 -->
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<!-- text-nowrap:不对齐 -->
<p class="text-nowrap">No wrap text.</p> <!-- 大小写 -->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">capitalized text.</p>
</div>
<!-- Bootstrap给每个块级元素左右各15px的padding --> <div class="col-md-4"> <!-- 响应式表格 -->
<!-- 将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。 -->
<div class="table-responsive">
<!-- 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线 -->
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>马哥</td>
<td>女</td>
<td>18</td>
</tr>
<tr class="danger">
<td>2</td>
<td>马哥</td>
<td>女</td>
<td>18</td>
</tr>
<tr class="warning">
<td>3</td>
<td>马哥</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
</div> </div> <div class="row">
<div class="col-md-6">
<!-- 表单 -->
<!--
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
-->
<form>
<div class="form-group">
<!-- 'sr-only'是隐藏当前元素 -->
<label for="exampleInputEmail1" class="sr-only">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div> </div> </body>
</html>

详细样式参考:https://v3.bootcss.com/css/

Bootstrap组件的使用

参考链接:https://v3.bootcss.com/components/

Bootstrap插件: https://v3.bootcss.com/javascript/

前端开发:JQuery(2)& Bootstrap的更多相关文章

  1. 前端开发 - JQuery&Bootstrap - 总结

    一.JavaScript和Jquery的区别 1.javascript的缺点: 1.书写繁琐,代码量大 2.代码复杂 3.动画效果,很难实现.使用定时器 各种操作和处理 2.定义: 1.Javascr ...

  2. 前端开发利器: Bootstrap + AngularJS

    http://blog.csdn.net/conquer0715/article/details/51181391 概述 在HTML5盛行的互联网时代,涌现诸多的前端html/css/js框架,基于其 ...

  3. 前端开发 - JQuery - 上

    一.js的缺点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 前端开发—jQuery

    jquery简介 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...

  5. Web前端开发JQuery框架

    JQuery 是一个兼容多浏览器支持的JavaScript库,其核心理念是write less,do more(写得更少,做得更多),它是轻量级的js库,兼容CSS3还兼容各种浏览器,需要注意的是后续 ...

  6. 前端开发 - jQuery

    本节内容 一.jQuery概述 二.选择器 三.操作DOM 四.修改DOM结构 五.事件 六.动画 七.AJAX(待续) 八.扩展(待续) 一.jQuery概述 jQuery 是一个 JavaScri ...

  7. 前端开发 - JQuery - 下

    二十五.jquery的事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. 前端开发 - JQuery - 中

    十四.jquery属性操作 attr prop <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. 1+x证书web前端开发jquery专项练习测试题

    javascript程序设计-题库 1.下面哪一种不属于Jquery的选择器? A. 基本选择器 B. 层次选择器 C. 表单选择器 D. 节点选择器 答案: D 2.如果需要匹配包含文本的元素,用下 ...

  10. 第十一章 前端开发-jQuery

    11.4.0 jQuery 11.4.1 基本知识 定义: jQuery是一个快速,小巧,功能丰富的JavaScript库 作用:它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作, ...

随机推荐

  1. Android最简单的实例 :环境搭建及HelloWorld

    Android开发之旅:环境搭建及HelloWorld 2010-04-12 00:45 by 吴秦, 883961 阅读, 140 评论, 收藏,  编辑 ——工欲善其事必先利其器 引言 本系列适合 ...

  2. 223 Rectangle Area 矩形面积

    在二维平面上计算出两个由直线构成的矩形叠加覆盖后的面积. 假设面积不会超出int的范围. 详见:https://leetcode.com/problems/rectangle-area/descrip ...

  3. hdu 1430 魔板 康托展开 + 很好的映射

    http://acm.hdu.edu.cn/showproblem.php?pid=1430 如果从start ---> end,每一次都bfs进行,那么就肯定会超时. 考虑到先把start映射 ...

  4. sed练习第一节

    ed语法和基本命令 employee.txt文件内容如下: 101,John Doe,CEO 102,Jason Smith,IT Manager 103,Raj Reddy,Sysadmin 104 ...

  5. SQLServer 2012 高效分页

    SQLSERVER2012 出新分页功能啦!!!近两天我在自己工作机的PC(没有并发,单一线程)上做了SqlServer  2000/ (2005/2008)/2012三个版本下的分页性能比较. 大致 ...

  6. mysql 修改 root 密码

    5.76中加了一些passwd的策略 MySQL's validate_password plugin is installed by default. This will require that ...

  7. iOS Programming Localization 本地化

    iOS Programming Localization 本地化 Internationalization is making sure your native cultural informatio ...

  8. Python学习 Day 4 函数 切片 迭代 列表生成式 生成器

    定义函数 def my_abs(x):#求绝对值的my_abs函数 if x >= 0: return x else: return –x def nop():#空函数 pass#占位符 参数检 ...

  9. CAS server 连接mysql的deployerConfigContext.xml配置

    1.deployerConfigContext.xml配置 <?xml version="1.0" encoding="UTF-8"?> <b ...

  10. Oracle中的执行计划

    使用autotrace sqlplus系统参数:SQL> set autotrace trace onSQL> select * from dual;DUM---XExecution Pl ...