JQuery学习笔记(一)

概述

JQuery是一个JavaScript库，封装了很多方法，简化了JavaScript编程。

文档准备事件

能够保证页面完全载入后才执行函数

$(document).ready(function(){

});

常见结构

$(选择器).动作()

$(selector).action()
选择HTML元素：

• 通过标签名：$(“p”).hide();
• 通过id名：$(“#div1”).hide();
• 通过class名：$(“.btn”).hide();

鼠标事件

mouseenter();鼠标进入
mouseleave();鼠标离开
mousehover();相当于鼠标进入和离开结合
mousedown();鼠标按下
mouseup();鼠标弹起

---

focus();获得焦点，例如输入框
blur();失去焦点
hide(speed,callback)
show(speed,callback)

Q:为什么要使用callback回调函数？

A:JS是一行一行执行的，所以有可能，一个动画效果执行了，但是还没有结束，会接着执行下一行代码，使用回调函数保证了会在动画结束之后才调用。
例如下面两段程序：

$(".btn").click(function(){$("h1").hide("slow",function(){alert("Hidden");//会在完全消失后弹窗});});

$(".btn").click(funtion(){$("h1").hide("slow");alert("Hidden");//还没消失就弹窗})

常见效果

淡入淡出

都有形如(speed,callback)的函数

fadeIn();
fadeOut();
fadeToggle();切换
fadeTo();

滑动

都有形如(speed,callback)的函数

sledeDown();
slideUp();
slideToggle();

动画

要修改HTML元素的位置，需要将CSS属性设置为relative、fixed或obsolute

animate();
stop();
如：

animate({left:'250px',opacity:'0.5'})//绝对animate({left:'+=250px'});//相对

添加动画序列：

var div=$("div");div.animate();div.animate();.x().y().z();//方法链

DOM操作

text();get或set指定文本内容，包括标签
html();get或set元素内容
val();get或set某个输入域的值
attr();get或set某个元素属性的值

如：.attr(“href”:”http://lidengju.com“,”title”:”blog”);

---

append();在元素内后面增加
prepend();在元素内前面增加
after();元素后增加
before();元素前增加

---

remove();删除指定元素，包括子元素
empty();只是清空子元素

元素class设置和获取

通过增删class，可以动态整体改变其CSS属性

addClass();
removeClass();
toggleClass();

css设置和获取

css(“prop1”:”val1”,”prop2”:”val2”);

获取HTML标签的大小

width()和height()：本身的大小
innerWidth()和innerHeight():再加上padding的大小
outerWidth()和outerHeight():再加上边框(border)大小
outerWidth(true)和outerWidth(true):再加上margin大小