jquery基础知识第一讲之认识jquery

2024-05-06 15:00:05

字体：大中小

来源：转载

供稿：网友

jQuery是一个优秀的JavaScript库，它凭借简洁地语法和跨平台的兼容性，极大地简化了开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax操作。

jQuery优势：

1.轻量级

2.强大的选择器

3.出色的DOM操作的封装

4.可靠的事件处理机制

5.完善的Ajax

6.不污染顶级变量

7.出色的浏览器兼容性

8.链式操作方式

9.隐式迭代

10.行为层与结构层分离

11.丰富的插件支持

12.完善的文档

13.开源

（1）编写简单的jQuery代码:

注：$ 就是jQuery的简写形式。

 <!-- 引入 jQuery -->  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>  <script type="text/javascript">    $(document).ready(function () {   //等待DOM元素加载完毕.（可能DOM元素关联的文件没有加载完）      alert("Hello World!");     //弹出一个框    });　　　　 $(document).ready(function () {   //可以同时编写多个      alert("Hello again!");    });    $(function () {           //简写形式      alert("Hello jQuery!");    });  </script>

（2）jQuery的代码风格

注：链式操作。

1、对同一个对象不超过3次操作的，可以写成一行。　　　　

2、对于同一个对象操作较多的，建议每行写一个操作。

3、对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。

4、对于多个对象的较多操作，可以结合2,3条。

添加必要的注释。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>1-4-3</title><style type="text/css">#menu {   width:300px; }.has_children{  background : #555;  color :#fff;  cursor:pointer;}.highlight{  color : #fff;  background : green;}div{  padding:0;}div a{  background : #888;  display : none;  float:left;  width:300px;}</style><!-- 引入 jQuery --><script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript">//等待dom元素加载完毕.$(document).ready(function(){  $(".has_children").click(function(){    $(this).addClass("highlight")      //为当前元素增加highlight类      .children("a").show().end()      //将子节点的a元素显示出来并重新定位到上次操作的元素    .siblings().removeClass("highlight")    //获取元素的兄弟元素，并去掉他们的highlight类      .children("a").hide();        //将兄弟元素下的a元素隐藏  });});</script></head><body><div id="menu">  <div class="has_children">    <span>第1章-认识jQuery</span>    <a>1.1-JavaScript和JavaScript库</a>    <a>1.2-加入jQuery</a>    <a>1.3-编写简单jQuery代码</a>    <a>1.4-jQuery对象和DOM对象</a>    <a>1.5-解决jQuery和其它库的冲突</a>    <a>1.6-jQuery开发工具和插件</a>    <a>1.7-小结</a>  </div>  <div class="has_children">    <span>第2章-jQuery选择器</span>    <a>2.1-jQuery选择器是什么</a>    <a>2.2-jQuery选择器的优势</a>    <a>2.3-jQuery选择器</a>    <a>2.4-应用jQuery改写示例</a>    <a>2.5-选择器中的一些注意事项</a>    <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>    <a>2.7-还有其它选择器么？</a>    <a>2.8-小结</a>  </div>  <div class="has_children">    <span>第3章-jQuery中的DOM操作</span>    <a>3.1-DOM操作的分类</a>    <a>3.2-jQuery中的DOM操作</a>    <a>3.3-案例研究——某网站超链接和图片提示效果</a>    <a>3.4-小结</a>  </div></div></body></html>

上一篇：Javascript的表单验证-揭开正则表达式的面纱

下一篇：Javascript的表单验证-初识正则表达式