VQUery
elements属性，储存选中的元素
参数
typeof的作用
字符串
class ID tagName
函数
事件绑定
对象
直接插入
$函数
绑定事件
click方法
显示隐藏，--show，hide方法
hover方法
解决函数中的this问题
call aplly
toggle方法
点击计数
arguments的使用
样式与属性
css方法
简单形式----设置，获取
获取计算后的样式
attr方法
jquery.js地址 http://pan.baidu.com/s/1pLjEBCR
获取和查找
eq方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:100px; height:100px; background:red; float:left; margin:10px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.7.1.js"></script>
<script>
$(function (){
$('div').eq(1).css('background', 'green');
});
</script>
</head> <body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
eq使用
find方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="VQuery.js"></script>
<script>
$(function (){
$('ul').find('.box').css('background', 'red');
});
</script>
</head> <body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li class="box"></li>
<li class="box"></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
find的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="VQuery.js"></script>
<script>
$(function (){
$('#btn1').click(function (){
$('#div1').show();
}); $('#btn2').click(function (){
$('#div1').hide();
});
});
</script>
</head> <body>
<input id="btn1" type="button" value="显示" />
<input id="btn2" type="button" value="隐藏" />
<div id="div1">
</div>
</body>
</html>
显示隐藏
index方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.7.1.js">
</script>
<script>
$(function(){
$('input').click(function(){
alert($(this).index());
});
})
</script>
</head> <body><input type="button" value="aaa" />
<input type="button" value="bb" />
<input type="button" value="ccc" />
<input type="button" value="ddd" />
</body>
</html>
index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var aBtn=document.getElementsByTagName('input');
var i=0;
for(i=0; i<aBtn.length; i++)
{
addClick(aBtn[i]);
}
function addClick(obj)
{
var count=0;
obj.onclick=function()
{
alert(count++);
}
}
}
</script>
</head> <body>
<input type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<input type="button" value="ddd" />
</body>
</html>
点击计数