ComTechnology - 前端 - JavaScript - JQuery
JQuery
1.What is JQuery?
1).JQuery是JS库;
2).Character：轻量级“code less,do more”;
3).Function:（What does JQuery do?）
HTML Element/Tag Selector-选取/Create 创建-增加 Retrieve-检索/取回 Update Delete
HTML Event
HTML DOM遍历和修改
CSS CRUP
JS特效和动画
AJAX
2.JQuery引入
URL:http://jquery.com;
<script src="..."></script>
type="text/javascript"
不必写;JS是H5默认的脚步语言;
内容分发网络（Content Distribution Network）;
内容传递网络（Content Delivery Network）;
性能
Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
Baidu CDN:
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
又拍云CDN：
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>
3.JQuery语法
JQuery构成：1.$(); 2.event/action(); 3.function(){}嵌套与调用组合
1).$(selector);
2).$(function(){
});
3).$(selector).action();
4).$(selector).action(function(){
});
层级写法：
先写选择器；
再写行为动作-事件/方法或叫做函数；
最后写功能函数；
注意闭合；
文档就绪事件
两种写法
$(document).ready(function(){
// 开始写 jQuery 代码...
});
$(function(){
// 开始写 jQuery 代码...
});
4.selector
1).Element选择
2).#id选择器
3).class选择器
4)遍历选择
5.event
DOM Event
Mouse-click/dblclick/mouseenter/mouseleave
Keyboard-keypress/keydown/keyup
form-submit/change/focus/blur
document/window-load/unload/resize/scroll
1.指定一个点击事件：
$("p").click();
2.定义该事件做什么
$("p").click(function{
action;
});
input event
$()
6.JQuery效果
1).隐藏/显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback); 开关/触发器/切换
2).淡入/淡出
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);
3).滑动
jQuery slideDown() 方法用于向下滑动元素
$(selector).slideDown(speed,callback);
jQuery slideUp() 方法用于向上滑动元素
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
4).动画
$(selector).animate({params},speed,callback); adj.有生气的/v.推动
5).停止动画
$(selector).stop(stopAll,goToEnd);
6).Callback
7).Chaining 方法/动作链接
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
7.HTML
1).获取
text() - 设置或返回所选元素的文本内容 <p>
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值 <input>
获取属性 - attr()
get();
set(value);
2).添加元素
append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
3).删除元素
remove() - 删除被选元素（及其子元素）
4).CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
5).JQuery遍历
祖先
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
empty() - 从被选元素中删除子元素
后代
children() 方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
同胞
siblings() 方法返回被选元素的所有同胞元素
8.JQuery AJAX
$(selector).load(URL,data,callback);
$.get(URL,callback);
$.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.html",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
--参考文档
https://www.w3cschool.cn/