jQuery基础（学习笔记）
什么是jQuery
jQuery 是一个 JavaScript 库。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性
具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素 $(“p”)。
在页面中选取所有 < p > 元素
id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法：$("#test")
class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法：$(".test")
事件处理
jQuery 事件方法语法：
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$(“p”).click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$(“p”).click(function(){ //回调函数
// 动作触发后执行的代码!!
});
jQuery - AJAX 简介
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
实例：
使用 AJAX 请求改变 < div > 元素的文本：
$("button").click(function(){
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
图片轮播Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>/*jQuery导包*/
<style>
* {
margin: 0 auto;
padding: 0;
}
#father {
width: 320px;
height: 180px;
overflow: hidden;
position: relative;
}
#ul1 {
width: 1280px;
height: 180px;
position: absolute;
top: 0;
left: 0;
}
#ul1>li {
width: 320px;
height: 180px;
float: left;
}
#ul2 {
width: 108px;
height: 36px;
position: absolute;
bottom: 5px;
right: 5px;
}
#ul2>li {
width: 26px;
height: 26px;
margin: 5px;
float: left;
line-height: 26px;
font-size: 18px;
color: white;
text-align: center;
cursor: pointer;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.6);
}
#son1 {
width: 26px;
height: 26px;
position: absolute;
top: 77px;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
line-height: 26px;
font-size: 15px;
color: white;
text-align: center;
cursor: pointer;
}
#son2 {
cursor: pointer;
width: 26px;
height: 26px;
position: absolute;
top: 77px;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
line-height: 26px;
font-size: 15px;
color: white;
text-align: center;
}
li {
list-style-type: none;
}
</style>
</head>
<body>
<div id="father">
<ul id="ul1">
<!--最后多出第一张图片-->
<li><img src="imgs/1.jpg" width="320" height="180" /></li>
<li><img src="imgs/2.jpg" width="320" height="180" /></li>
<li><img src="imgs/3.jpg" width="320" height="180" /></li>
<li><img src="imgs/1.jpg" width="320" height="180" /></li>
</ul>
<ul id="ul2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="son1"><</div>
<div id="son2">></div>
</div>
<script>
/*初始绑定*/
var isAnimate = false; //动画状态定义
var playTime = null; //跳转动画计时器
var points = [0, -320, -640, -960]; //记录火车定位
father.onmouseover = stop; //鼠标移入停止自动播放
father.onmouseout = play; //鼠标移出继续播放
$("#ul2>li").each(function(index, ele) { //每一个数字按钮绑定单击事件
$(this).click(function() {
myAnimate(points[index]);
});
});
$("#son1").click(function() { //前一张按钮绑定单击事件
if (!isAnimate) { //判断是否在动画中,防止连续点击
isAnimate = true; //上锁
var leftPoint = parseInt($("#ul1").css("left")); //获取当前位置
if (leftPoint == 0) { //如果是第一张图片
$("#ul1").css("left", "-960px"); //置为最后一张
}
$("#ul1").animate({
'left': parseInt($("#ul1").css("left")) + 320 + "px"
}, 1000, function() {
isAnimate = false; //在回调函数中"取锁" 回调函数当完成动画后执行
});
}
});
$("#son2").click(function() { //下一张按钮绑定事件
myAnimate();
});
play();
/*定义函数*/
function myAnimate(toPoint) { //图片过渡动画函数
if (!isAnimate) { //判断是否在动画中
isAnimate = true; //上锁
if ((parseInt($("#ul1").css("left"))) - 320 < -960) {
$("#ul1").css("left", 0);
}
if (toPoint == null) {
toPoint = (parseInt($("#ul1").css("left"))) - 320;
}
$("#ul1").animate({
'left': toPoint + "px"
}, 1000, function() {
isAnimate = false; //在回调函数中"取锁"
});
}
}
function play() { //开始播放动画函数
playTime = setInterval(function() {
myAnimate();
}, 2000);
}
function stop() { //停止动画函数
if (playTime != null) {
clearInterval(playTime);
}
}
</script>
</body>
</html>
上一篇： JS获取、设置CSS样式的方法（外部Style、外联CSS样式)
下一篇： 怕什么车子