zoukankan      html  css  js  c++  java
  • 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>
    点击计数
  • 相关阅读:
    Java之设计模式详解 (转)
    强引用,软引用,弱引用和虚引用总结
    Java基础知识总结
    深入理解Java的接口和抽象类
    Android Studio高级配置
    JS中innerHTML 和innerText和value的区别
    Prompt isNaN 数组 function DOM window.open/close/location/history
    WebForm组合查询
    WebForm分页浏览
    WebForm上传文件FileUpload
  • 原文地址:https://www.cnblogs.com/hack-ing/p/5608779.html
Copyright © 2011-2022 走看看