Jquery基础

Posted fyfighting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery基础相关的知识,希望对你有一定的参考价值。

1、JQuery概念

Jquery是一个优秀的javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器,jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理html documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

JavaScript的缺点:控件的操作方式不统一,不同浏览器容易出观兼容问题。为了简化操作,出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。

JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。

JQuery文件说明:

       jquery-1.4.2.js是JQuery主文件。

       jquery-1.4.2.min.js是压缩板JQuery主文件。

       jquery-1.4.2-vsdoc.js是JQuery在VS中的自动提示功能。

 

2.JS的常用方法——函数

在JS中,函数类似于java中的方法,是执行特定功能的JavaScript代码块。但是JS中的函数使用更简单,不用定义函数属于 哪个类,因此调用时不需要用“对象名.方法名()”的方式,直接使用函数名称来调用函数即可。

JavaScript中的函数有两种:一种是Javascript自带的系统函数,另一种是用户自行创建的自定义函数

JavaScript提供了两种把非数字的原始值转换成数字的函数,即parseInt()和parseFloat()。另外,它还提供了一个检查是否是非数字的函数isNaN(),通常用于逻辑判断。

一.parseInt()

parseInt()函数可解析一个字符串,并返回一个整数,语法格式如下:

parseInt("字符串")

parseInt()函数首先查看位置0处的字符,判断他是否为一个有效数字,如果不是则返回NaN,不再继续执行其他操作。但如果该字符是有效数字,则该函数将查看位置1处的字符,进行同样的测试,这一过程将持续到发现非有效数字的字符为止,此时parseInt()将该字符之前的字符串转换成数字,例如:

         var num1=parseInt("78.89")          //返回值为78

         var num2=parseInt("4567color")    //返回值为4567

         var num3=parseInt("this36")          //返回值为NaN

 

实例:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>类型转换函数的应用</title>
</head>
<body>
    <script type="text/javascript">
        var op1 = prompt("请输入第一个数:", "")
        var op2 = prompt("请输入第二个数:", "")
        var p1 = parseInt(op1);
        var p2 = parseInt(op2);
        var result = p1 + p2;
        document.write(p1 + "+" + p2 + "=" + result);
    </script>
</body>
</html>

运行结果如下:

二.parseFloat()

parseFloat()函数可解析一个字符串,并返回一个浮点数,语法格式如下。

parseFloat("字符串")

例如:

          var num1=parseFloat("4567color");         //返回值为4567

          var num1=parseFloat("45.58");               //返回值为45.58

          var num1=parseFloat("45.58.25")            //返回值为45.58

          var num1=parseFloat("color4567")           //返回值为NaN

 

三.isNaN()

isNaN()函数用于检查其参数是否是非数字,语法格式如下:

isNaN(x)

如果x是特殊的非数字值,则返回值是true,否则返回false。例如:

    var flag1=isNaN("12.5");                //返回值为false

    var flag2=isNaN("12.5s")                //返回值为true

    var flag3=isNaN(45.8)                    //返回值为false

 

2.自定义函数

语法:

         function函数名(参数1,参数2,参数3,.......){

               //JavaScript语句;

               [return 返回值]

         }

function是定义函数的关键字,必须有。

一.调用函数:

要执行一个函数,必须先调用这个函数,当调用函数时,必须指定函数名及其后名的参数(如果有参数)。函数的调用一般和元素的事件结合使用,语法格式如下:

      事件名="函数名()";

实例:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无参函数——使用函数显示Hello World多次</title>
    <script type="text/javascript">
        function showHello() {
            for (var i = 0; i < 5; i++) {
                document.write("<h2>Hello World</h2>");
            }
        }
    </script>
</head>
<body>
    <input type="button"  name="btn" value="显示5次HelloWorld" onclick="showHello()"/>
</body>
</html>

运行结果:

3.匿名函数

一.匿名函数的定义

    匿名函数是没有函数名的。如下:

         function (count){

                for(var i = 0;i<count;i++){

                      document.write("<h2>Hello World</h2>");

                }

         }

 

二.匿名函数的调用

实例:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>使用匿名函数显示</title>
    <script type="text/javascript">
        var showFun = function (count) {
            for (var i = 0; i < count; i++) {
                document.write("<h2>Hello World</h2>")
            }
        };
    </script>
</head>
<body>
    <input type="button" name="btn" value="请输入显示Hello World的次数" onclick="showFun(prompt(\'请输入显示Hello World的次数:\',\'\'))"/>
</body>
</html>

运行结果:

以上是关于Jquery基础的主要内容,如果未能解决你的问题,请参考以下文章

Jquery基础

##Jquery基础

Jquery基础

JQuery 基础:

JQuery基础

jQuery基础知识1