jQuery入门

一、jQuery基础

jQuery是轻量级Javascript库，jQuery可以对html元素进行选取和操作，通过程序对css进行控制，其定义了很多html事件函数，能够实现JavaScript特效和动画，而且更方便对html dom进行遍历和修改。jQuery地简化了JavaScript编程，并且很容易学习掌握。

语法：

代码千万行，注释第一行。

JQuery可以选取html元素，并对它们执行操作，jQuery的基础语法如下

$(selector).action()

其中，美元$定义jQuery，selector(选择符)选取html元素，action()执行对元素的操作

$(this).hide() //隐藏当前元素
$("#test").hide() //隐藏所有id="test"的元素
$("p").hide() //隐藏所有段落

jQuery选择器

元素选择器

     JQuery使用css选择器来选取html元素，也就是说选取元素的方法和css是相同的。例如，$("p")选取<p>元素，$(“p.intro”)选取所有的class="intro"的

元素。

属性选择器

      JQuery使用XPath表达式来选择带有给定属性的元素，XPath是一种在xml文档中查找信息的语言，XPath使用路径表达式。

css选择器

css选择器可用来改变元素的css属性。

$("p").css("background-color","red");
<!--把所有p元素的背景颜色改为红色-->

jQuery事件

$(selector).event(function(){
    //响应事件代码
})

jQuery常用的事件如下图所示：

$(document).ready(function) //将函数绑定到文档的就绪事件（当文档完成加载时，开始绑定）
$(document).click(function) //触发或将函数绑定到被选定元素的单击事件
$(document).dbclick(function) //触发或将函数绑定到被选定元素的双击事件, double简写之后就为db，这里可不是指database
$(document).focus(function) //触发或将函数绑定到被选定元素的获得焦点事件
$(document).mouseover(function)//触发或将函数绑定到被选定元素的鼠标悬停事件

元素选择器

二、jQuery特效和动画

jQuery中的隐藏和显示

隐藏和显示，可以想到什么，hide()和show()对吗？是滴，这里我们用这两个常见的小伙伴。在jQuery中，通过hide()和show()两个函数，实现对元素的隐藏和显示，Let we see see 它的语法

$(selector).hide(speed,callback)
$(selector).show(speed,callback)
// speed的属性值，主要有3种，slow(慢)、fast(快)、norMal(正常)

不想用这些单词的话，想表达得更准确些，可以直接在后面写上数字，数字表达之后，单位则变成了毫秒，就如这样：

$("button").click(function(){
    $("p").hide(1000);
})
//在单击button按钮之后，对所有的段落在1000毫秒之后隐藏

jQuery中的切换

toggle()函数使用show()和hide()函数来切换元素的可见状态，包括隐藏显示的元素，显示隐藏的元素，且语法如下

$(selector).toggle(speed,callback)

其中的参数和hide的参数一样，例如

$("button").click(function(){
    $("p").toggle();
});

jQuery中的滑动函数

jQuery拥有3个滑动函数

$(selector).slideDown(speed,callback) //向下滑动，显示被选元素
$(selector).slideUp(speed,callback) //向下滑上，隐藏被选元素
$(selector).slideToggle(speed,callback) //对被选元素向上和向下滑动切换

jQuery中的淡入和淡出函数

$(selector).fadeIn(speed,callback) //淡出被选元素
$(selector).fadeOut(speed,callback) //把被选元素淡出为给定的不透明度
$(selector).fadeTo(speed,opacity,callback) //减弱到给定的不透明度

实战案例：

$("button").click(function(){
    $("div").fadeTo("slow",0.25);
});
$("button").click(function(){
    $("div").fadeTo(4000);
});

jQuery中的自定义动画

animalte()函数对被选元素执行自定义动画，语法如下：

$(selector).animate({params},[duration],[easing],[callback])
//参数params定义动画的css属性，用户可以同时设置多个此类属性
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

参数duration定义动画的时间，允许的值有"slow"，“fast”、"normal"或毫秒。

参数easing定义要使用的擦除效果的名称（前提是要有插件支持），一般不用

html元素默认是静态定位，无法移动，如果需要元素移动，必须把css position设置为relative或者absolute。

三、JQuery对html元素进行操作

改变html内容

html()函数改变匹配的html元素的内容，展示一波语法

$(selector).html(content)
//例如将所有段落中的内容改为"清华大学"，程序就可以写成
$("p").html("清华大学")

一句话描述就是，html()函数就是根据标签替换内容的作用。

添加html内容

html()函数改变匹配的html元素的内容，展示一波语法

$(selector).html(content)
//例如将所有段落中的内容的后面，追加"北京大学"，程序就可以写成
$("p").append("北京大学")

css函数

jQuery拥有3种用于css操作的重要函数。

设置单一属性值

css(name,value)函数为所有匹配元素的给定css属性设置值

$(selector).css(name,value)
$("p").css("background-color","red") //给所有段落的背景颜色设置为色

设置多个属性值

css({properties})函数同时为所有匹配元素的一系列css属性设置值

$("p").css({}"background-color":"red","font-size":"200%"})

获取属性值

css(name)函数返回指定的css属性的值，其语法如下

$(selector).css(name)

例如获取当前元素的背景色

$(this).css("background-color");

jQuery Size操作

jQuery拥有两种用于尺寸操作的重要函数

高度

height(value)函数设置所有匹配元素的高度，语法如下：

$(selector).height(value)
// 将类标签id100的元素高度设为200px
$("#id100").height("200px")

宽度

width(value)函数设置所有匹配元素的宽度，语法如下：

$(selector).width(value)
// 将类标签id100的元素宽度设为200px
$("#id100").width("200px")