再看Jquery

最新推荐文章于 2023-07-11 14:31:34 发布

xiaoyong322

最新推荐文章于 2023-07-11 14:31:34 发布

阅读量667

点赞数

分类专栏： JQuery 文章标签： jquery javascript function html 文档 button

本文链接：https://blog.csdn.net/dfyong/article/details/7222216

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我用JQuery已经有一段时间了。之前都是参照着说明文档去找方法，一些复杂的功能就直接下载插件。对JQuery缺乏系统、深入的认识。趁项目刚结束，还未进行新项目的空档，花一下午看看文档，记录一些重点的东西，希望会对JQuery的深入认识有一定的帮助。

jQuery 库 -是什么

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

它极大简化javascript编程。从上述提到的特性我们便能看出。总之一句话，通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

如：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

一旦点击"Click me"，jQuery就会查找标签为"p"的html元素，并对这些查找到的元素执行隐藏操作。

几个关键点

一、文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档未加载完成就调用jQuery，可能会出现js脚本错误。

二、jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>