jQuery 整理

发表于 更新于 分类于
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。

jQuery 导入

CDN 地址

1
2
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
1
2
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

jQuery 语法

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

1
$(selector).action()

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

文档就绪事件

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

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

也可以

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

jQuery 选择器

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

元素选择器

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

id 选择器

1
$("#test")

class 选择器

1
$(".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 事件方法语法

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

jQuery 效果

隐藏和显示

1
2
3
4
5
6
7
$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
1
2
3
$("button").click(function(){
  $("p").toggle();
});

淡入淡出

fadeIn () 方法

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

fadeOut () 方法

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

fadeToggle () 方法

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

fadeTo () 方法

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

滑动

slideDown () 方法

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

slideUp () 方法

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

slideToggle () 方法

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

动画

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

停止动画

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

获取内容和属性

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

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