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()- 用于获取属性值。