zoukankan      html  css  js  c++  java
  • jquery学习第一天

    1.helloworld
    
    <html>
        <head>
            <title>jquery one</title>
            <script type="text/javascript" src="../js/jquery.js"></script>
            <script type="text/javascript">
                //第一个jquery练习,弹出对话框hello world!;
                $(document).ready(function(){
                        alert("hello world!");
                    });
            </script>
        </head>    
        <body>
            
        </body>
    </html>
    
    2.a.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 type="text/javascript" src="../js/jquery.js" ></script>
    <script>
    $(document).ready(function(){
        $(".has_children").click(function(){
            $(this).addClass("highlight")
            .children("a").show().end()
            .siblings().removeClass("highlight")
            .children("a").hide();    
        })
        
    })
        
    </script>
    <style>
        #menu{300px;}
        .has_children{background:#555;color:#fff;cursor:pointer;}
        .highlight{color:#fff;backgounrd:green;}
        div{padding:0;magin:10px 0;}
        div a{background:#888;display:none;float:left;300px;}
    </style>
    </head>
        <div id="menu">
            <div class="has_children">
                <span>第一章-知识</span>
                <a>1.1-javascript和javascript库</a>
                <a>1.2-加入jquery</a>
                <a>1.3-编写简单jquery代码</a>
                <a>1.4-jquery对象和DOM对象</a>
                <a>1.5-解决jquery和其他库的冲突</a>
                <a>1.6-jquery开发工具和插件</a>
                <a>1.7-小结</a>
            </div>
            <div class="has_children">
                <span>第二章-知识</span>
                <a>2.1-javascript和javascript库</a>
                <a>2.2-加入jquery</a>
                <a>2.3-编写简单jquery代码</a>
                <a>2.4-jquery对象和DOM对象</a>
                <a>2.6-jquery开发工具和插件</a>
                <a>2.7-小结</a>
            </div>
            <div class="has_children">
                <span>第三章-知识</span>
                <a>3.1-javascript和javascript库</a>
                <a>3.2-加入jquery</a>
                <a>3.3-编写简单jquery代码</a>
                <a>3.6-jquery开发工具和插件</a>
                <a>3.7-小结</a>
            </div>
        </div>
    
    
    <body>
    </body>

    b.html </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>juqery转化为DOM</title>
    <script type="text/javascript" src="../js/jquery.js" ></script>
    <script>
        /*
        $(document).ready(function(){
            var $cr=$("#cr");
            var cr=$cr[0]; //或者cr=$cr.get(0);
            $cr.click(function(){
                if(cr.checked){
                    alert("感谢你的支持,你可以继续操作了!");
                }    
            })    
        })
        */
        
        $(document).ready(function(){
            var $cr=$("#cr");
            $cr.click(function(){
                if($cr.is("checked")){
                    alert("感谢你的支持,你可以继续操作了!");
                }    
            })    
        })
        
    </script>
    </head>
        <input type="checkbox" id="cr" /><label for="cr" >我已经阅读了上面的制度</label>
    <body>
    </body>
    </html>


  • 相关阅读:
    树莓派4 (1)一键配置
    Android编码学习之Fragment
    android编码学习
    自动化中app支持schema跳转
    jenkins持续集成
    测试环境运维文章集锦
    HTML5 data-* 自定义属性
    了解一下JavaScript的未来——ECMAScript5
    ECMAScript5的其它新特性
    ECMAScript5 Array新增方法
  • 原文地址:https://www.cnblogs.com/yuwensong/p/2972315.html
Copyright © 2011-2022 走看看