Jquery基础

Posted 2020-07-09 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基础的主要内容，如果未能解决你的问题，请参考以下文章