分享

一文讲解关于jQuery语法

 码农9527 2021-06-22

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

web

    JQuery语法

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

    基础语法是:

$(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./ajax/libs/jquery/1.4.0/jquery.min.js"></script></head> <body>   <scripttype="text/javascript">   //等待dom元素加载完毕
   $(document).ready(function(){  
//弹出一个框:显示hello syl
 alert("hello syl");
 });</script> </body></html>

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多