jQuery学习笔记

前言

此博文是笔者在w3school学习jQuery时整理的笔记，有所不足，欢迎大家批评指正~

1. jQuery语法

基础语法：
$(selector).action()

$ 为 jQuery 的简写

// selector可以为this,id,class名称,标签名字,属性

文档就绪函数
$(document).ready(function(){
	//function内容
});

2. jQuery事件函数

jQuery 事件处理方法是 jQuery 中的核心函数

实例：

$("button").click(function(){});	//点击按钮触发click函数

$(document).ready(function(){});	//文档加载完成触发ready函数

$(selector).dblclick(function(){});	//触发双击事件函数

$(selector).focus(function(){});	//触发获得焦点事件函数

$(selector).mouseover(function(){});	//触发鼠标悬停事件函数

3. 解决$符号的命名冲突

有些JavaScript函数也使用了$作为关键字，
为了避免冲突，jQuery采用了.noConflict()来解决


$.noConflict()和jQuert.noConflict()效果相同，

实例：用a来代替$

jQuery和$效果相同
<script>
var a=$.noConflict();	
a(document).ready(function(){
  a("button").click(function(){
    a("p").text("jQuery 仍在运行！");
  });
});
</script>

4. jQuery方法

4.1 动画方法

jQuery hide() 和 show()方法：

两个参数可选
speed规定隐藏/显示速度，用毫秒作为参数
callback为执行完成后调用执行的函数

$(selector).hide(speed,callback);	
$(selector).show(speed,callback);

toggle() 方法：
此方法可用于切换hide()和show()

淡入淡出方法：
参数同hide()
fadeIn()	//淡入
fadeOut()	//淡出
fadeToggle()	//自动切换淡入或淡出效果
fadeTo(speed,opacity,callback)	//opacity为执行后保持的透明度

滑动方法：
参数同hide()
slideDown()	//一般用于显示
slideUp()	//一般用于隐藏
slideToggle()

4.2 方法链接

下面例子将会一条执行完接着执行下一条：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

4.3 DOM操作方法

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr('attrName') - 设置或返回某个属性字段的值
append() - 在元素的结尾插入内容
prepend() - 在元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
remove() - 删除被选元素和子元素，可接受参数删除指定元素
empty() - 删除被选元素的子元素
addClass() - 向被选元素添加class，多个class用空格隔开
removeClass() - 删除指定class
toggleClass() - 切换class，无就添加，有就删除
css() - 设置或返回css样式
width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）
height() - 设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() - 返回元素的宽度（包括内边距）
innerHeight() - 返回元素的宽度（包括内边距和边框），加入参数true将返回包括外边距的宽度
outerHeight() - 返回元素的宽度（包括内边距和边框）
parent() - 返回被选元素的直接父元素
parents() - 返回被选元素的所有祖先元素
$('儿子').parentsUntil('n级爸爸') - 返回介于两个给定元素之间的所有祖先元素
children() - 返回被选元素的所有直接子元素
find() - 返回被选元素的后代元素，一路向下直到最后一个后代
siblings() - 返回被选元素的所有同胞元素（同级）
next() - 返回被选元素的下一个同胞元素
nextAll() - 返回被选元素的所有跟随的同胞元素
nextUntil('指定同胞') - 返回介于两个给定参数之间的所有跟随的同胞元素
prev()
prevAll()
prevUntil()
first() - 返回被选元素的首个元素
last() - 返回被选元素的最后一个元素
eq(index) - 返回被选元素中带有指定索引号的元素
filter() - 不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not(匹配规则) - 返回不匹配标准的所有元素


text()、html() 以及 val() 的回调函数:
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
然后以函数新值返回您希望使用的字符串。
.html(function(i,origText){return i, origText;})

attr() 以对象的方式设置多个属性：
$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

css() 的设置与返回：
$("p").css("background-color");	//返回background-color的值
$("p").css("background-color","yellow");	//设置一个css属性
$("p").css({"background-color":"yellow","font-size":"200%"});	//设置多个css属性

4.4 几种不同的产生新元素的方法

1. DOM元素创建
var p = document.createElement("p");
p.innerHTML = "content";
document.body.appendChild(p);

2.HTML创建
var p = "<p>content</p>";
document.body.appendChild(p);

3.jQuery创建
var p = $("<p></p>").text("content");
$("body").append(p);

5. 动画

$(selector).animate(function(){
	//css属性名需要使用camel法，如padding-left应写为paddingLeft
},speed,callback)

animate() 使用相对值：
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

animate() 使用预定义的值：
$("button").click(function(){
  $("div").animate({
    height:'toggle'	//可使用show、hide、toggle
  });
});

stop() 方法停止动画：
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

6. Ajax

6.1 关于jQuery和Ajax

编写常规的 AJAX 代码并不容易，
因为不同的浏览器对 AJAX 的实现并不相同。
这意味着您必须编写额外的代码对浏览器进行测试。
使用jQuery的Ajax，我们只需要一行简单的代码，就可以实现 AJAX 功能。

6.2 load()

$(selector).load(URL,data,callback);
load() 方法从服务器加载数据，并把返回的数据放入被选元素中

callback函数：
function(responseTxt,statusTxt,xhr){}

$.get(URL,callback);

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.post(URL,data,callback);

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});