jquery
jquery的认识
jquery是什么？当然它是基于JavaScript来完成的。
jQuery是由John Resig创建于2006年1月的开源项目，强调的理念就是写得少，做得多(write less, do more).
下载：www.jquery.com
在页面中引入jQuery库
：
<script type="text/javascript" src="script/jquery.js"></script>
jQuery能做什么？
1：获取页面中的元素
2：
修改页面的外观
3：
修改页面的内容
4：响应用户的页面操作
5：
为页面添加动态效果
6：
无刷新返回服务器端的信息
7：简化常见JS操作
一个简单的jQuery实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title>第一个JQuery程序</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello, JQuery");
}
);
$(function(){
alert("Hello, JQuery2");
});
</script>
</body>
</html>
jQuery中的应用：
入口：
1：
jQuery()全局函数，别名：$
2：全局命名空间中唯一的两个变量
3：jQuery()是工厂函数，返回一个新创建的对象。
jQuery对象：
1：由jQuery函数返回的对象
2：
也称：jQuery结果、jQuery集、包装集
jQuery函数：
在jQuery命名空间中定义的函数
jQuery方法：
jQuery函数返回的jQuery对象的方法
方法链
jQuery的用法：
1：jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"
2：使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
jQuery的调用方式：
$(function() {}) = $(document).ready(function() {})
jQuery对象与DOM对象的区别：
DOM对象：即HTML文档对象模型树中的元素，如document对象，table对象。
jQuery对象：即jQuery封装DOM对象后产生的对象，是jQuery所独有的，是一个数组对象，可以调用jQuery库的方法。
规则：jQuery对象只能调用jQuery库的方法，不能调用DOM对象中的任何方法，同样，DOM对象也无法使用jQuery库中的方法。
$(“#id”).innerHTML的写法是错误的
document.getElementById("id").html()也会报错
访问元素：元素属性操作：
获取属性
$("img").attr("title")
设置属性
$("img").attr("title" , "朗沃LOGO");
设置多个属性
$("img").attr({“title”,"朗沃LOGO", “id”,"imgLogo"});
$("img").attr("title", function(){ ... return ...; });
removeAttr() 删除元素属性
$("img").removeAttr("title");
下面简单做个小练习：轮播的练习
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,div,ul,li{
margin: 0;
padding: 0;
}
/*
轮播
*/
.lunbo{
width: 450px;
height: 269px;
overflow: hidden;
border: 1px solid #000;
margin: auto;
}
.ulnode{
width: 900px;
}
.ulnode li{
width: 450px;
height: 269px;
list-style: none;
float:left;
}
.linode1{
background-image: url("images/banner1.jpg");
}
.linode2{
background-image: url("images/banner2.jpg");
}
/*
标签
*/
.biaoqian{
width: 400px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
}
.bqcontent{
width: 100%;
height: 150px;
border-bottom: 1px solid #ccc;
}
.bqcontent div{
display: inline-block;
border: 1px solid #ddd;
margin: 8px;
padding: 2px;
}
.bqcontent div label{
font: 100 15px '华文楷体';
}
.rmove{
width: 20px;
height: 20px;
padding: 1px;
margin-left: 5px;
border: 1px solid #ccc;
outline: none;
background-image: linear-gradient(#fff,#ddd);
cursor: pointer;
}
.rmove:hover{
background-image: linear-gradient(#eee,#fff);
}
.biaoqian input{
width: 195px;
margin: 10px 0 0 45px;
padding-left: 5px;
height: 20px;
}
.add{
width: 80px;
margin-left: 10px;
border: 1px solid #9cf;
border-radius: 5px;
outline:none;
background-image: linear-gradient(#9cf, #7499c5);
font: 700 15px "华文楷体";
color: #333;
letter-spacing: 3px;
text-align: center;
padding: 2px 5px;
cursor: pointer; //手型
}
.add:hover{
background-image: linear-gradient(#7fa6d3,#9cf);
}
/*
翻转
*/
.fanz{
width: 450px;
height: 269px;
border: 1px solid #000;
margin: 10px auto;
position: relative;
}
.img1{
width: 450px;
height: 269px;
background-image: url("images/banner3.jpg");
position: absolute;
}
.img2{
width: 450px;
height: 0;
background-image: url("images/banner4.jpg");
position: absolute;
}
</style>
</head>
<body>
<!-- 轮播 -->
<div class="lunbo">
<ul class="ulnode">
<li class="linode1"></li>
<li class="linode2"></li>
</ul>
</div>
<!-- 标签 -->
<div class="biaoqian">
<div class="bqcontent"></div>
<input type="text"/><button class="add">添加</button>
</div>
<!-- 图片翻转 -->
<div class="fanz">
<div class="img1"></div>
<div class="img2"></div>
</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
// 轮播
var sum = 3;
function lun(){
$('li:eq(0)').animate({
marginLeft:"-450px"
},800,function(){
$('.ulnode').append($('li:eq(0)'));
$('li:eq(1)').css({marginLeft:0,backgroundImage:"url(images/banner"+sum+".jpg)"});
sum++;
if(sum>4){
sum=1;
}
setTimeout(function(){
lun();
},800);
})
}
lun();
// 标签
$('.add').on('click',function(){
var temp = $('input').val();
if(temp!=""){
var bqcontent = $('.bqcontent')[0];
bqcontent.innerHTML += "<div><label>"+temp+"</label><button class='rmove'>X</button></div>";
$('input').val("");
$('.rmove').live('click',function(){
$(this).parent().remove();
})
}
});
// 图片翻转
$('.fanz').hover(function(){
$('.img1').animate({
height: "0"
},400);
$('.img2').animate({
height: '100%'
},400)
},function(){
$('.img1').animate({
height: '100%'
},400);
$('.img2').animate({
height: "0"
},400)
});
</script>
</body>
</html>
