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 {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>
点击计数

 

posted @ 2016-06-26 13:31  distant-遥远  阅读(358)  评论(0)  编辑  收藏  举报