jQuery 简介

什么是 jQuery ？

jQuery = JavaScript + jQuery

jQuery是一个 JavaScript 库。它通过封装原生的JavaScript 函数得到一套定义好的方法，

jQuery 极大地简化了 JavaScript 编程。看下面的例子

假设页面中有下面的两个元素

<input type="text" id="txt" />
<button type="button" onclick="get_text();">Go</button>

点击Go按钮后会弹出文本框里用户输入的内容，使用原始的JavaScript代码可以这么写

alert(document.getElementById('txt').value);

而使用jQuery，则可以简单的写为

alert($('#txt').val());

可以看到我们使用document.getElementById才能获取到指定id的元素，而使用jQuery，我们只需要使用$(‘#’)就可以完成这一切

jQuery的主旨就是：以更少的代码，实现更多的功能

jQuery库包含以下功能：

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

提示：除此之外，Jquery还提供了大量的插件。

学习 jQuery的条件

HTML （含css，网页必备的基础知识）
JavaScript （即使jQuery比JavaScript 简单，但是jQuery的各种语法来自JavaScript ）
PHP（jQuery属于前端技术，和后端极端相辅相成的，互相呼应的）

jQuery是否适用于所有浏览器?

jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题，目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

让我们先看个jQuery 实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript">
    </script>
    <script>
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

运行程序尝试一下

继续学习

新建文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果你点我，我就会消失。</p> <p>继续点我!</p> <p>接着点我!</p> </body> </html>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠