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>
提交重置代码