jQuery基本整理1

jQuery基本整理<1>

@[基本实例|基于bootstrap框架]

jQuery基本整理1
jQuery简介

jQuery语法

jQuery选择器
jQuery元素选择器

jQuery 属性选择器

jQuery CSS 选择器

jQuery事件

jQuery效果1
jQuery隐藏和显示

jQuery淡入淡出
fadeIn

fadeOut

fadeToggle

fadeTo

jQuery滑动
slideDown

slideUp

slideToggle

jQuery简介

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

- HTML 元素选取

- HTML 元素操作

- CSS 操作

- HTML 事件函数

- JavaScript 特效和动画

- HTML DOM 遍历和修改

- AJAX

- Utilities

jQuery语法

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

- 美元符号定义 jQuery

- 选择符（selector）“查询”和“查找” HTML 元素

- jQuery 的 action() 执行对元素的操作

//所有 jQuery 函数位于一个 document ready 函数中
$(document).ready(function(){
--- jQuery functions go here ----
});

jQuery选择器

jQuery元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

- $(“p”) 选取

<p>

元素。

- $(“p.intro”) 选取所有 class=”intro” 的

<p>

元素。

- $(“p#demo”) 选取所有 id=”demo” 的

<p>

元素

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

- (“[href]”)选取所有带有href属性的元素。−(“[href=’#’]”) 选取所有带有 href 值等于 “#” 的元素。

- (“[href!=’#’]”) 选取所有带有 href 值不等于 “#” 的元素。
-("[href$=’.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素

jQuery CSS 选择器

$("p").css("background-color","red");

表格

语法	描述
$(this)	当前 HTML 元素
$(“p”)	所有 <p> 元素
$(“p.intro”)	所有 class=”intro” 的 <p> 元素
$(“.intro”)	所有 class=”intro” 的元素
$(“#intro”)	id=”intro” 的元素
$(“ul li:first”)	每个 <ul> 的第一个 <li> 元素
("[href=’.jpg’]”)	所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)	id=”intro” 的 <div> 元素中的所有 class=”head” 的元素

jQuery事件

常用jQuery事件

-(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）−(selector).click(function) 触发或将函数绑定到被选元素的点击事件

- (selector).dblclick(function)触发或将函数绑定到被选元素的双击事件−(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

- $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

更多jQuery事件

jQuery效果(1)

jQuery隐藏和显示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

//示例
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

$(selector).toggle(speed,callback);
//示例
$("button").click(function(){
$("p").toggle();
});

jQuery淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

- fadeIn()

- fadeOut()

- fadeToggle()

- fadeTo()

fadeIn

jQuery fadeIn() 用于淡入已隐藏的元素

语法$(selector).fadeIn(speed,callback);

$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

fadeOut

jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});

fadeToggle

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

$(selector).fadeToggle(speed,callback);

$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});

fadeTo

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

$(selector).fadeTo(speed,opacity,callback);

$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});

jQuery滑动

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

- slideDown()

- slideUp()

- slideToggle()

slideDown

jQuery slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);

$("#flip").click(function(){
$("#panel").slideDown();
});

slideUp

jQuery slideUp() 方法用于向上滑动元素

$(selector).slideUp(speed,callback);

$("#flip").click(function(){
$("#panel").slideUp();
});

slideToggle

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。用于向上滑动元素

$(selector).slideToggle(speed,callback);

$("#flip").click(function(){
$("#panel").slideToggle();
});