jQuery整理

jQuery导入

CDN地址

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

jQuery语法

jQuery是通过选取HTML元素然后进行某些操作。

$(selector).action()

如： $("p.test").hide()

文档就绪事件

所有 jQuery 函数位于一个 document ready 函数中

$(document).ready(function(){
   // jQuery 代码...
});

也可以

$(function(){
   // jQuery 代码...
});

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

元素选择器

$("p")//选取所有<p> 元素

id选择器

$("#test")

class选择器

$(".test")

其他选择器

语法	描述
$(“*”)	选取所有元素
$(this)	$(this)
$(“p.intro”)	选取 class 为 intro 的 元素
$(“p:first”)	选取第一个 元素
$(“ul li:first”)	选取第一个 元素的第一个 元素
$(“ul li:first-child”)	选取每个 元素的第一个 元素
$(“[href]”)	$(“[href]”)
$(“a[target=‘_blank’]”)	$(“a[target=‘_blank’]”)
$(“a[target=‘_blank’]”)	选取所有 target 属性值不等于 “_blank” 的 元素
$(“:button”)	选取所有 type=“button” 的 元素 和 元素
$(“tr:even”)	选取偶数位置的
$(“tr:odd”)	选取奇数位置的

元素 元素

jQuery事件

常见DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	submit
dblclick	keydown	change	resize
mouseenter	keydown	focus	scroll
mouseleave		blur	unload
hover

jQuery 事件方法语法

$("p").click();

$("p").click(function(){
    // 动作触发后执行的代码!!
});

jQuery 效果

隐藏和显示

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

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

淡入淡出

fadeIn() 方法

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

fadeOut() 方法

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

fadeToggle() 方法

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

fadeTo() 方法

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

滑动

slideDown() 方法

$(selector).slideDown(speed,callback)

slideUp() 方法

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

slideToggle() 方法

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

动画

$(selector).animate({params},speed,callback);

停止动画

$(selector).stop(stopAll,goToEnd);

获取内容和属性

获得内容 - text()、html() 以及 val()

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标签）
• val() - 设置或返回表单字段的值
• attr()- 用于获取属性值。