VQuery选择器

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>

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

点击计数