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"));

});

1. 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 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

未完待续。。。。。。