zoukankan      html  css  js  c++  java
  • jQuery开发入门

    jQuery是JavaScript库中的优秀一员。

    下载完jQuery框架文件jquery-1.9.0.js 后,不需要任何安装,仅需使用<script>文件导入标记,将该框架文件导入页面中即可。假设该文件保存在项目文件夹WebContent的子文件js中,那么,在页面的<head></head>中加入如下代码:

    <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>

    即可。

    下面给出一个简单的jQuery程序。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Insert title here</title>
            
            <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
            
            <script type="text/javascript"> //以下三者基本等价,第二个最常用
                $(document).ready(function(){ //jQuery的写法
                    //程序段   alert("hello ");
                })
                
                $(function(){ //jQuery的写法
                    //程序段
                })
                
                window.onload=function(){ //JavaScript的写法
                    //程序段
                }            
            </script>
        </head>
    
        <body>
        
        </body>
    </html>

    前两个在页面框架下载完毕后就执行,而第三个必须在页面全部加载完毕后才能执行。

    jQuery访问DOM对象(Document Object Model)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Insert title here</title>
            
            <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
            
            <script type="text/javascript">
                $(function(){
                    var divTmp=document.getElementById("divTmp").innerHTML;//获取DOM对象中的内容        
                    var divTmp2=$("#divTmp").html();//获取jQuery对象中的内容      二者结果等价
                })            
            </script>
            
        </head>
        <body>
            <div class="divFrame">
                <div id="divTmp">测试文本</div>
            </div>
        </body>
    </html>

    即,jQuery通过 $(“#id”) 获得相应对象。

    对于获取对象中的内容或文本框的值等,JavaScript和jQuery采用的方法分别如下:

    JavaScript:   var divTmp=document.getElementById("divTmp").innerHTML;              
                   document.getElementById("divTip").innerHTML="hello";              
                   var oTxtValue=document.getElementById("Text1").value;
           
    jQuery:       var divTmp2=$("#divTmp").html();  //获取页面内容  
                   $("#divTip").html("hello");      //给页面赋予内容   
                   var oTxtValue2=$("#Text1").val();
                   $("#id").val("world");

    对于click函数,JavaScript和jQuery采用的方法分别如下:

    JavaScript的方法:
    <head>
        <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
        
        <script type="text/javascript">
            function btnClick(){
                //程序段
            }            
        </script>        
    </head>
    <body>
        <input type="button" value="提交" onclick="btnClick();"/>
    </body>
    jQuery的方法:
    <head>
        <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
        
        <script type="text/javascript">
            $(function(){
                $("#btnSubmit").click(function(){
                    //程序段
                })
            })            
        </script>        
    </head>
    <body>
        <input type="button" value="提交" id="btnSubmit"/>
    </body>
  • 相关阅读:
    时间转换成时间戳
    元字符为名称的时候,使用两个反斜杠转义:\
    批量修改文件夹及文件用户权限和用户组权限 centos
    HDU6797 多校第三场 Tokitsukaze and Rescue
    AtCoder Regular Contest 103 E
    2020牛客第六场 B题 Binary Vector
    Codeforces Round #659 (Div. 2) B1. Koa and the Beach (Easy Version)
    Codeforces Round #659 (Div. 2) C. String Transformation 1
    Codeforces Round #659 (Div. 2) D GameGame
    P3194 [HNOI2008]水平可见直线 计算几何栈维护下凸壳
  • 原文地址:https://www.cnblogs.com/weilunhui/p/4234500.html
Copyright © 2011-2022 走看看