【WEB编程】一步一步了解 jQuery

最新推荐文章于 2024-09-26 16:05:19 发布

絮絮不休

最新推荐文章于 2024-09-26 16:05:19 发布

阅读量666

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.csdn.net/duanml61/article/details/8255095

web前端专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了jQuery的基本概念、功能以及如何使用jQuery来简化JavaScript编程。通过多个实例展示了如何选择元素、触发事件、应用效果、动画以及AJAX操作等。此外，还提供了学习jQuery的建议和总结，帮助开发者提高效率并掌握这一强大工具。

相信很多java程序员用过jQuery，知道jQuery使用起来很便利，但，熟悉使用 jQuery是个什么概念呢？

今天，总结一下 jQuery的相关知识，目的，很简单，看看熟练运用 jQuery这个要求具体怎么才能达标。

学习 jQuery，W3school是个好去处。

一、 jQuery是什么

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

二、jQuery能做什么

jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

三、如何使用jQuery

通过一行简单的标记被添加到网页中

例如：

3.1 jQuery 选择器

$("p").css("background-color","red");//把所有 p 元素的背景颜色更改为红色

3.2 jQuery 事件

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

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

</html>

3.3 jQuery 效果

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

3.4 jQuery 动画

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({height:300},"slow");
  $("#box").animate({width:300},"slow");
  $("#box").animate({height:100},"slow");
  $("#box").animate({width:100},"slow");
  });
});
</script> 
</head>
 
<body>

<p><a href="#" id="start">自定义动画</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
 
</body>
</html>

3.5 jQuery Callback 函数

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

3.6 jQuery HTML 操作

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

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">更改标签内容（innerHtml）</button>
</body>

</html>

3.7 jQuery AJAX 函数

jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。

目的，写的更少，做的更多

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  $('#myDiv').load('/jquery/test1.txt');
  });
});
</script>
</head>
<body>

<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>

</body>
</html>

四、如何学习jQuery

看了上面的例子之后，应该清楚了吧，jQuery就是让开发人员写的更少，而做的更多。

如何学习，很简单，首先是想到要实现什么效果，然后查询jQuery 参考手册，然后就去实现。

有空的时候，可以自己实现实现更多的效果。

慢慢的，就熟悉了，也就能熟练运用jQuery。

五、后记

任何一种语言、框架、开发模式、开发组件，对于一个程序员来说，都可以视之为图书馆里陈列的书籍。选择喜欢的，然后阅读，然后整理，然后运用，最后，就是自己的知识了，懂的越多，能够创造的也就越多了。

dml@2012.12.4