1、jQuery 是一个 JavaScript 库。
2、jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
<head> <script src="/jquery/jquery-1.11.1.min.js"> </head>
4、JQuery语法基础
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
5、文档就绪函数
jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
6、JQuery选择器
语法 | 描述 |
---|---|
$(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" 的元素 |
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery
fadeOut() 方法用于淡出可见元素。
jQuery
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
jQuery
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
9、jQuery 拥有以下滑动方法:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法用于向上滑动元素。
jQuery
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
10、jQuery
animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
11、Chaining 将动作和方法链接起来<script>
$(document).ready(function() //文档就绪
{
$("button").click(function(){ //按钮点击
$("#p1").css("color","red") //id为p1的元素颜色变为红色
.slideUp(2000) //元素上滑2秒
.slideDown(2000); //元素下滑2秒
});
});
</script>
$(document).ready(function() //文档就绪
{
$("button").click(function(){ //按钮点击
$("#p1").css("color","red") //id为p1的元素颜色变为红色
.slideUp(2000) //元素上滑2秒
.slideDown(2000); //元素下滑2秒
});
});
</script>