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