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 {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>
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>
<!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 {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>
<!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>