JQuery

发表于 更新于 分类于 阅读次数：

…

选择器

$(selector).action() 形式。

入口函数如：

1
2
3
4
5
6
7
$(document).ready(function(){
    //..
});

$(function(){
    //...
});
1
2
3
4
5
6
7
8
9
10
// 元素选择器
$("p")
// ID选择器
$("#test")
// 类选择器
$(".test")
// 当前标签
$("this")
// 属性选择器
$("[href]")

事件

1
2
3
$("p").click(function(){
    // 动作触发后执行的代码
});

常见有：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
click()
dblclick()
mouseenter()
mouseleave()
hover()

keypress()
keydown()
keyup()

submit()
change()
focus()
blur()

load()
resize()
scroll()
unload()

效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 显示与隐藏
hide(speed, callback)
show(speed, callback)
toggle(speed,callback)

// 渐入渐出
fadeIn(speed, callback)
fadeOut(speed, callback)
fadeToggle(speed, callback)
fadeTo(speed, opacity, callback)

// 滑动
slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)

// 动画
animate({params},speed,callback)
stop(stopAll,goToEnd);
// 如
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

链

函数可以链式调用：

1
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

DOM 操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
text()
html()
val()
attr("href") // 读取
attr("href", value) // 写入
attr{
    "href": val,
    "title": tit
} // 写入

// 使用回调
$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

插入元素内容

1
2
3
4
$("p").append("追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

删除元素

1
2
3
$("#div1").remove();
$("#div1").empty();
$("p").remove(".italic");

使用Data

1
2
var f1 = $(this).data('id');
var f2 = $(this).attr('data-id');

CSS 操作

1
2
3
4
5
6
// 给标签添加几个类
addClass()
removeClass()
toggleClass()
// 返回样式设置
css("background-color", "red")

尺寸

1
2
3
4
5
6
width()   // Element
height()
innerWidth()  // Padding
innerHeight()
outerWidth()    // border
outerHeight(true)   // Margin

遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
parent()
parents()
parentsUntil()
children()
find()
find("*")
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

遍历后还可以过滤：

1
2
3
4
5
first()
last()
eq()
filter()
not()

AJAX

load 方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
$(selector).load(URL,data,callback);

// 例如
$("#div1").load("demo_test.txt");
$("#div1").load("demo_test.txt #p1");  // 送入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与post：

1
2
3
4
5
6
7
8
9
10
11
12
$.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});

$.post("/try/ajax/demo_test_post.php",
{
    name:"菜鸟教程",
    url:"http://www.runoob.com"
},
function(data,status){
    alert("数据: \n" + data + "\n状态: " + status);
});

ajax方法：

1
2
3
4
5
6
7
8
$.ajax({
    url:"demo_test.txt",
    async:true,  // 是否异步，默认是
    contentType:"",  
    success:function(result){
        $("#div1").html(result);
    }
});

jQuery 参考

选择器

事件方法

效果

HTML/CSS

遍历

AJAX

其他