专业编程基础技术教程

网站首页 > 基础教程 正文

一文讲解关于jQuery语法 jquery的语法

ccvgpt 2024-10-12 15:09:52 基础教程 35 ℃

JQuery是一个优秀的轻量级Javascript库，兼容CSS3，还兼容各种浏览器，在Web前端开发中广泛使用。在现在就业的过程中，会运用 JQuery会成为你的加分项。

JQuery语法

JQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

一文讲解关于jQuery语法 jquery的语法

基础语法是：

$(selector).action()1复制代码类型：[html]

美元符号\$定义 JQuery。

选择符（selector）“查询”和“查找”HTML元素。

JQuery的action()执行对元素的操作。

另外需要注意的是：在 JQuery库中\$符号就是 JQuery的一个简写形式，例如$("#syl")和 JQuery("#syl")是等价的，$.ajax和 JQuery.ajax是等价的，如果没有特别说明，程序中的$符号都是 JQuery的一个简写形式。

文档就绪函数

所有 JQuery函数位于一个documentready函数中：

$(document).ready(function(){
});
// 可以简写成
$(funciton(){
});12345复制代码类型：[html]

这是为了防止文档在完全加载（就绪）之前运行 JQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素。

获得未完全加载的图像的大小。

上面的这段代码其实有点类似于传统JavaScript中的window.onload方法，不过它们还是有一些区别的，简单对比如下所示：




执行时机

必须等待网页中所有的内容加载完毕后才能执行（包括图片）

网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完

编写个数

不能同时编写多个。

能同时编写多个。

编写个数的意思就是：

window.onload = function(){
    alert("test1");
};
window.onload = function(){
    alert("test2");
};
//结果只会输出 test2。1234567复制代码类型：[javascript]
$(document).ready(function(){
    alert("test1");
})
$(document).ready(function(){
    alert("test2");
})
//结果两次都输出1234567复制代码类型：[html]

编写我们的第一个 JQuery程序

例子：

<!DOCTYPE html>
<html> 
<head>     
<meta
 charset="utf-8">     
<title></title>       
<!-- Google 的 CDN 的方式加载jQuery，请大家自行修改为本地 -->  
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head> 
<body>      
<script
type
=
"text/javascript">      
//等待dom元素加载完毕
            $(document).ready(function(){              
//弹出一个框:显示hello syl
                alert("hello syl");
                });
</script> 
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表