ref: https://www.runoob.com/jquery/jquery-tutorial.html
jQuery API参考手册:https://www.runoob.com/manual/jquery/
1. src引入
<head> <script src="jquery-1.10.2.min.js"></script> </head>
2. 语法
$() <-> new jQuery()
$("#id/.class/tagName[condition]").action(xxx)
等html页面加载完全: $(document).ready(function(){...code here...});
3. Dom event
click, dbclick, mouseenter, mouseleave, hover
keypress, keydown, keyup
$("input").keypress(function(){ $("span").text(i+=1); });
submit, change, focus, blur
load, resize, scroll, unload
4. effect
hide, show, toggle(切换)
$(selector).hide(speed,callback);
fadeIn, fadeout, fadeToggle, faseTo
$(selector).fadeTo(speed,opacity,callback);
slideDown, slideUp, slideToggle
animate
$(selector).animate({params},speed,callback);
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
stop
$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任//何//排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
//callback, ordered
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
//or chain, ordered
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//paralle
$("button").click(function(){
$("p").hide(1000);
alert("段落现在被隐藏了");
});
5. get DOM text
text(), html(), val(), attr() ---- val() - 设置或返回表单字段的值
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
append(), prepend(), after(), before() -- 添加元素,的后,的前,后,前
remove(), empty() --- 删除元素,删除元素的子元素,参数选择
6. CSS operation
addClass(), removeClass(), toggleClass, css()
//get css propoties
$("p").css("background-color");
//set css
$("p").css("background-color","yellow");
css({"propertyname":"value","propertyname":"value",...});
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("body div:first").addClass("important blue");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<div id="div1">这是一些文本。</div>
<div id="div2">这是一些文本。</div>
<br>
<button>为第一个 div 元素添加类</button>
</body>
</html>
7. 元素尺寸图
8. 遍历
parent(), parents(), parentsUnitil()
children(), find()
siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()
first(), last(), eq(), filter(), not()
9 AJAX - Asynchronous JavaScript and XML
"简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示"
load()
$("#div1").load("demo_test.txt");
$("#div1").load("demo_test.txt #p1"); //to id="p1"
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
$.get(url, callback)
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$.post(url, data, callback)
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
此处代码中的data 来自php文件的echo输出
9. 避免$符号冲突
$.noConflict(), 然后其他框架可以用$,自己用jQuery()