JQuery入门笔记
JQuery语法
$(selector).action()
常用
$(document).ready(function(){
// do something
});
或
$(function() {
//do something
});
上面两者都是在文档加载完毕后调用的。
可以防止类似下面的错误
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小。
选择器
选择标签:
$("p")
选择id:
$("#SelectedId")
选择类
$(".SelectedClass")
除此之外,还有:
- 选择子标签
- 选择满足条件的标签
- 选取当前标签
JQuery事件
鼠标事件 | 键盘事件 | 表单事件 | 文档窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
$("p").click(function() {
//do something
});
JQuery效果
显示与隐藏
$("p").show(time, "linear", function() {
//this is call back function
});
$("p").hide(time, "linear", function() {
//this is call back function
});
/*
And you can change it by toggle in turn
*/
$("p").toggle(1000, "linear", function() {
//this is call back function
});
淡入淡出
$("p").fadeIn(3000, callback);
$("p").fadeOut("slow", callback);
$("p").fadeToggle();
$("p").fadeTo(time, opacity, callback);
滑动
slideDown()
slideUp()
slideToggle()
动画
$("p").animate({
//css style
}, time, callback);
$("p").stop() // stop animation
HTML
捕获/设置内容
$("p").text(); // innerHTML
$("p").html(); // including html content
$("p").val(); // for forms
// set text to another string
$("p").text("Hello, world.")
添加元素
$("p").append(); // add element at the end of the selector
$("p").prepend(); // add ... at the begining
$("p").after(); //add after the selector
$("p").before();
删除元素
$("#div1").remove(".SelectedClass");
$("#div2").empty();
添加/删除类
常用这种方式方便地改变css样式。
$("p, div, h1").addClass("important red");
$("p, div, h1").removeClass("important red");
$("p, div, h1").toggleClass("important red");
css方法
$("p").css("background-color"); //get background-css attr
$("p").css({"background-color": "red"}); // change css style
AJAX
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。
$("#div1").load("demo.txt #p1"); // load element p1 in 'demo.txt' to #div1
$.post(url, data={
"text": text;
}, callback=funtion() {
// this is callback function
});
// $.get();
$.ajax(settings);
一个人没有梦想,和咸鱼有什么区别!