一、引入JQuery、JQueryUI方法：
1.进入JQuery官网：https://jquery.com/
2.依据此图流程下载JQuery库:
3.进入JQueryUI官网:https://jqueryui.com/
4.依据下图下载JQueryUI库:
5. 将JQuery库压缩包里的jquery-x.x.x.min.js拖入工程中，将JQueryUI库压缩包里的jquery-ui.min.js和jquery-ui.min.css拖入工程中
注意：因为JQueryUI库是依赖于JQuery库的，所以引入的时候必须先引入JQuery库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="jquery-3.3.1.min.js"></script>
<script src="JQUI/jquery-ui.min.js"></script>
<link href="JQUI/jquery-ui.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
</body>
</html>完毕！
注意：JQueryUI库 有些方法必须是要求 在某个版本JQuery库下才可以使用，例如：你使用最新版本的JQuery库，但是JQueryUI还不支持最新版本，而导致JQueryUI某些方法使用不了，出现报错等问题，你需要去下载低版本的JQuery库，引入方式一样，把原本的JQuery库删除即可， 并且修改上面的那一行<script src="jquery-3.3.1.min.js></script>
二、正式开始讲解学习我觉得比较难的地方
1.事件冒泡：即事件会抵达目标地响应后，会传送给父容器们继续触发一次，注意是全部父容器都会触发它捆绑的任何事件，但是你必须满足条件才会触发，例如：
<div id="div1">
<div id="div2">
<button id="btn">按钮</button>
</div>
</div>$(document).ready(function(){
$("#div1").dblclick(div1Click);
$("#div2").click(div2Click);
$("#btn").click(btnClick);
});
function div1Click(){
console.log("div1");
}
function div2Click(){
console.log("div2");
}
function btnClick(){
console.log("btn按钮");
}当点击按钮时，会发生（单击）冒泡， 所有上级 控件捆绑的（单击函数都会触发一次），从而div2的函数也会被执行，而div1的事件是双击事件故不会执行，亲测!
所以，事件冒泡准确地说是必须得同种类型的事件才会发生。
如果想阻止冒泡的发生可以这样写：
$(document).ready(function(){
$("#div1").dblclick(div1click);
$("#div2").click(div2click);
$("#div1").click(btnclick);
});
function div1Click(event){
console.log("div1");
event.stopPropagation();//阻止冒泡事件
}
function div2Click(event){
console.log("div2");
event.stopPropagation();//阻止冒泡事件
}
function btnClick(event){
console.log("btn按钮");
event.stopPropagation();//阻止冒泡事件
}2. 与冒泡很相似的一个，阻止触发默认事件，即类似于 a标签，如果给a标签 捆绑了点击 事件，它还会触发默认的href事件跳转页面，如果想不跳转的话就在点击事件 里面加入：
event.stopImmediatePropagation();//阻止之后同一时刻发生的事件 且 事件冒泡也阻止了3. 关于Js的对象写法：（很懵。）
function Person(name) {
var n = "nnnn";//内部变量
var _this = {}
_this.name = name;
_this.sayHello = function () {
alert("Hello world," + _this.name + "|" + n);
}
window.Person = Person;//提供给window调用，不然Person类无法被调用
return _this;
}
function Teacher(name) {
var _this = Person(name);//继承Person
var superSay = _this.sayHello;//父类的sayHello方法
var superName = _this.name;
_this.sayHello = function () {
superSay.call(this);//调用父类的sayHello方法
alert("T_hello,"+ superName);
}
return _this;
}
var t = Teacher("fake");
t.sayHello();4. setTimeout 和 setInterval :
//延迟调用函数setTimeout,延迟1000 ms
var timeout = setTimeout(function(){
...
}, 1000);
//销毁延时器
clearTimeout(timeout);
//循环执行器 1000 ms执行一次
var interval = setInterval(function(){
...
}, 1000);
//销毁循环执行器
clearInterval(interval);5、与PHP服务器进行交互，也就是Ajax异步响应页面请求
以例子形式说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AjaxHtml</title>
<script src="jquery-3.3.1.min.js"></script>
<script src="AjaxHtml.js"></script>
<!--header("Access-Control-Allow-Origin: http://www.ttlsa.com");-->
</head>
<body>
<form>
<input type="text" id="namevalue"/>
<br/>
<!--<button id="btn">Send</button>--><!-- button标签会自动刷新页面 而input就不会! -->
<input type="button" onclick="sendInputName()" value="发送" />
结果:<span id="result"></span>
</form>
</body>
</html>实现一个发送输入框id=namevalue的数据给PHP服务器，然后 服务器的内容 传回来后设置到span标签上.
注意：有HTML文件必须要和PHP文件在同一个目录下，而且是要在Apache服务器的apached.config文件中的DocumentRoot="xxx"这个xxx目录 上，不然嘿嘿，找不到服务器404错误就 来了。
PHP服务器代码如下：
文件为:"AjaxService.php"
<?
if(isset($_GET['name'])){
echo "hello:".$_GET['name'];
}else{
echo "Args error";
}JS代码如下（AjaxHtml.js）：
$(document).ready(function () {
$("#btn").click(function () {
//由于不能跨域传输数据，所以要求html和php文件在一个目录下
// console.log("发送给服务器name" + $("#namevalue").val());
$.get("http://localhost/AjaxTest.php",{name:$("#namevalue").val()},function (data) {
$("#result").text(data);
});
})
});服务器的配置如下：
我的是用idea编辑 软件，挺好用的。
file - settings 然后一直选到下图，然后点"+"号添加一个服务器，设置的内容如下图，其他默认就好了。
接着就可以运行你的PHP文件了，如果不出错就说明成功运行。
前提是你要启动这2个玩意：（变绿就说明正常了）
这个软件是叫XAMPP，可以百度下载后就可以了。
在我另一篇文章有说明比较坑爹的地方：
启动Apache会有些坑，mysql如果原本有安装的话，也会出问题，这个可以百度，就是要你去删除mysql服务，才可以用它来启动mysql.
三、JQueryUI说明：
自己看文档吧，没什么可以说的，只能提醒你，JQueryUI的版本 必须匹配上正确的JQuery版本库，不然有的坑你，当测试的时候出现不如意的情况，一定要按F12查看console 是否出错，有很多原因都是因为方法找不到，没有这个方法，之类的坑爹错误。JQueryUI很强大， 大大地好！
进入JQueryUI官网:https://jqueryui.com/
学习使我 快乐！
老子又回来了！接下来简单说明一下JQueryUI的玩法：
1、According效果如下：
2、AutoComplete:
$(document).ready(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags
});
});3、DatePicker:
4、Dialog:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.3.1.min.js"></script>
<script src="../jquery-ui.min.js"></script>
<link href="../jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
$("#btn").button().on("click",function () {
$("#div").dialog({
resizable: false
});
});
})
</script>
</head>
<body>
<div style="display: none;" id="div">
<p>这是一个对话框Dialog</p>
</div>
<a href="#" id="btn">按钮</a>
</body>
</html>
5、Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<!--<script src="../jquery-3.3.1.min.js"></script>-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="../jquery-ui.min.js"></script>
<script src="Menu.js"></script>
<link href="../jquery-ui.min.css" rel="stylesheet" type="text/css" />
<style>
.ui-menu:after{
content:".";
display:block;
clear:both;
visibility: hidden;
line-height: 0;
height: 0;
}
.ui-menu .ui-menu-item{
display:inline-block;
float:left;
margin:0;
padding:10px;
width:100px;
}
</style>
</head>
<body>
<ul id="uid">
<li>
<a href="#">Java</a>
<ul>
<li><a href="#">Jave EE</a></li>
<li><a href="#">Jave SE</a></li>
<li><a href="#">Jave ME</a></li>
</ul>
</li>
<li>C#</li>
<li>Java</li>
<li>HTML</li>
</ul>
</body>
</html>
6、progressbar
var pb;
var max = 100;
var current = 0;
$(document).ready(function () {
pb = $("#pb");
pb.progressbar({max:100});
//设置时钟间隔100毫秒执行一次changepb
setInterval(changepb, 100);
});
function changepb() {
current++;
if(current >= 100){
current = 0
}
//将pb进度条的值设置为current
pb.progressbar("option", "value", current);
}
7、Slider
var valueSpan,slider;
$(document).ready(function () {
// $("#slider").slider();
slider = $("#slider");
valueSpan = $("#span");
// slider.slider({
// //滑动条改变后
// change:function (event, ui) {
// //可通过直接从slider控件的option中的value取的当前滑动进度
// valueSpan.text(slider.slider("option","value"));
// }
// });
slider.slider({
//滑动条改变中
slide:function (event, ui) {
valueSpan.text(ui.value);
}
});
});
8、spine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spinner</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="../jquery-ui.min.js"></script>
<!--<script src="Slider.js"></script>-->
<link href="../jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script>
$(function () {
$("#ip").spinner();
$("#ip").spinner("value","10");//设置默认值为10
$("#btn").click(function () {
alert($("#ip").spinner("value"));
})
});
</script>
</head>
<body>
<input id="ip" />
<button id="btn">get value</button>
</body>
</html>
9、Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Widgets的Tabs使用方法</title>
<!--效果是点击菜单换页面的效果-->
<!--<script src="../jquery-3.3.1.min.js"></script>-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="../jquery-ui.min.js"></script>
<link href="../jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script>
$(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#hello1">hello1</a></li>
<li><a href="#hello2">hello2</a></li>
<li><a href="#hello3">hello3</a></li>
</ul>
<!--//注意下面的这些id必须与上面href指定的一样，一一对应-->
<!--//而且div必须放在 <div id="tabs">下-->
<p id="hello1">
hello1
hello
hello
hello
hello
hello
</p>
<div id="hello2">
hello2
hello
hello
hello
hello
hello
</div>
<div id="hello3">
hello3
hello
hello
hello
hello
hello
</div>
</div>
</body>
</html>
10、Button
完事。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
