jQuery基础1
jQuery是轻量级的JavaScript库，jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。更少的代码做更多的事。
jQuery 可以选取某些元素并执行相应的操作，可以通过元素名、属性名、类名或者ID选择。
jQuery库特性：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities
基础语法是：$(selector).action()
一. jQuery函数
1. 隐藏/显示函数
a. hide()用法：隐藏元素。
$(selector).hide(speed,callback);参数可选。
speed 参数规定隐藏/显示的速度，可取以下值："slow"、"fast" 或毫秒。
callback 参数是隐藏或显示完成后所执行的函数名称。
<script src="D:\demo\jQuerytest\jquery-2.2.2.min.js"></script>
<script>
$(document).ready(function(){ //为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
$("p").click(function(){
$(this).hide();//隐藏当前的html元素
});
});
</script>
更多可选项：$(this).hide(); $("p").hide(); $(".t").hide; $("#t").hide()
b. show（）函数：根据对选择器的操作显示相应的元素
$("#show").click(function(){
$("#p1").show();
})
c. toggle()函数：切换hide()和show()函数.$(selector).toggle(speed,callback);
$("button").click(function(){
$("p").toggle();
});
2. 淡入淡出效果函数：
a. fadeIn()函数：$(selector).fadeIn(speed,callback);用于淡入已隐藏的元素
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
b. fadeOut()函数：$(selector).fadeOut(speed,callback);根据不同的参数元素以不同的速度淡出可见元素。
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
c. fadeToggle()函数：$(selector).fadeToggle(speed,callback);切换fadeIn()和fadeOut()函数
d. fadeTo()：$(selector).fadeTo(speed,opacity,callback);允许渐变为给定的不透明度（值介于 0 与 1 之间）
speed 参数（必选）规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
opacity 参数（必选）将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
callback 参数（可选）是该函数完成后所执行的函数名称。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
3. 滑动函数：可以在元素上创建滑动效果。
a. slideDown()函数：向下滑动元素。$(selector).slideDown(speed,callback);
$("#flip").click(function(){
$("#panel").slideDown();
});
b. slideUp()函数：向上滑动元素。$(selector).slideUp(speed,callback);
$("#flip").click(function(){
$("#panel").slideUp();
});
c. slideToggle()函数：切换slideDown()函数和slideUp()。$(selector).slideToggle(speed,callback);
$("#flip").click(function(){
$("#panel").slideToggle();
});
4. 动画效果函数：
a. animate()函数：用于创建自定义动画。$(selector).animate({params},speed,callback);params参数（必选）定义形成动画的css属性，speed参数（可选）规定动画效果的时长，取值有：slow，fast或毫秒数。
$(“button”).click(function(){
$(“div”).animate({left:’260px’});
})
Ps:默认所有html元素位置都是静态的，无法移动，若要对位置进行操作，必须先将css position属性设置为relative、fixed或absolute。
生成动画的时候可以操作多个属性；如
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
可以使用相对值；如
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
可以使用预定义的值，有show、hide或toggle；如
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
可以使用队列功能；如
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
b. stop()函数：停止滑动或动画。$(selector).stop(stopAll,goToEnd); stopAll 参数（可选）规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。goToEnd 参数（可选）规定是否立即完成当前动画。默认是 false。stop()默认会清除在被选元素上指定的当前动画。
$("#stop").click(function(){
$("#panel").stop();
});
5. callback函数：在当前动画100%完成之后执行。$(selector).hide(speed,callback)；callback 参数是一个在 hide 操作完成后被执行的函数。若想在一个涉及动画的函数之后来执行语句，则使用 callback 函数。
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
6. 链接（chaining）的技术：允许在相同的元素上运行多条jQuery命令。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
等价于
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
Ps: 把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动.
二. jQuery选择器
1. jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
2. jQuery属性选择器
$("[href]") 选取所有带有href属性的元素
$("[href='#']")选取所有href值等于#的元素
$("[href！='#']")选取所有href值不等于#的元素
$("[href$='.jpg']")选取所有href值以jpg结尾的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
3. jQuery css选择器
$("p").css("background-color","red");
三. jquery事件
$(document).ready(function);将函数绑定到文档就绪事件
$(selector).click(function)；将函数绑定到被选元素的点击事件
$(selector).dbclick(function)；将函数绑定到被选元素的双击事件
$(selector).focus(function)；将函数绑定到被选元素获得焦点事件
$(selector).mouseover(function)；将函数绑定到被选元素的鼠标悬停事件
四． jQuery HTML
1. 用于 DOM 操作的 jQuery 方法
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
jQuery attr() 方法用于获取属性值。
1. jQuery获取
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
$("button").click(function(){
alert($("#w3s").attr("href"));
});
- Jquery设置
$(“btn1”).click(function(){
$(“#test1”).text(hello);
});
$(“#btn2”).click(function(){
$(“#test2”).html(“<b>heo</b>”);
});
$(“#btn3”).click(function(){
$(“#test3”).val(“hhh”);
});
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
2. jQuery添加
append() - 在被选元素的结尾插入内容；$("p").append("Some appended text.");
prepend() - 在被选元素的开头插入内容；$("p").prepend("Some appended text.
after() - 在被选元素之后插入内容；$("img").after("Some text after");
before() - 在被选元素之前插入内容；$("img").before("Some text after");
3. jQuery删除
jQuery remove() 方法删除被选元素及其子元素。$("#div1").remove();
$("p").remove(".italic");删除 class="italic" 的所有 <p> 元素
jQuery empty() 方法删除被选元素的子元素。$("#div1").empty();
4. jQuery操作css
addClass() - 向被选元素添加一个或多个类
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
removeClass() - 从被选元素删除一个或多个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass() - 对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css() - 设置或返回被选元素的一个或多个样式属性。
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
5. jQuery尺寸
width()；设置或返回元素的宽度。
height()；设置或返回元素的高度。
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
innerWidth()；返回元素的宽度（包括内边距）
innerHeight()；返回元素的高度（包括内边距）
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
outerWidth()；返回元素的宽度（包括内边距和边框）
outerHeight()；返回元素的高度（包括内边距和边框）
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）
六．jQuery遍历
用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
ps:
$(document).ready(function(){
})
等价于
$(function(){
})
未完待续。。。。。。
