Jquery入门

Jquery入门

在众多JavaScript框架中,jQuery一枝独秀早已是不争的事实。

JQuery理念:写的更少,做得更多(Write less, Do more)

jQuery主要特点:

  • l  jQuery 极大地简化了 JavaScript 编程
  • l  支持各种主流浏览器,包括IE6以上,FireFox2以上,Safari2以上和Opera9以上的版本
  • l  以强大的CSS选择器为基础,几乎所有的操作都先使用选择器查找DOM对象,然后对其进行各种操作
  • l  屏蔽浏览器差异,对DOM的操作提供了方便的扩展,易用的事件处理API和动画API。
  • l  强大的插件机制

既然jquery这么好,举一个简单的列子,说明如何在js中引入jquery:

<!DOCTYPE html>

<html>

  <head>

    <title>MyHtml.html</title>

    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

           //添加一个段落节点

           $("<p>第一个段落</p>").appendTo($("body"));

        });

    </script>

  </head>

  <body>

    This is my HTML page. <br>

  </body>

</html>

显示结果:

 

 

项目布局:

 

 

其中添加节点部分,如果用js的DOM API方式实现:

window.onload = function(){

var e_p = document.createElement("p");

var t_text = document.createTextNode("第一个段落!");

e_p.appendChild(t_text);

document.documentElement.lastChild.appendChild(e_p);

}

而jquery只用了一句话,简化程度可见一斑。

小试一下其他功能:

改变div背景色:

<!DOCTYPE html>

<html>

  <head>

    <title>MyHtml.html</title>

    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

           //添加一个段落节点

           $("<p>第一个段落</p>").appendTo($("body"));

           //改变div背景色

           $("div").addClass("divCss").css("background","yellow");

        });

    </script>

  </head>

  <body>

    <div>

        this is my first div.

    </div>

  </body>

</html>

结果显示:

 

 

点击div时,将该div隐藏:

<!DOCTYPE html>

<html>

  <head>

    <title>MyHtml.html</title>

    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

           //添加一个段落节点

           $("<p>第一个段落</p>").appendTo($("body"));

           //改变div背景色

           $("div").addClass("divCss").css("background","yellow");

           //添加div点击事件,点击时隐藏该div

           $("div").click(function(){

               $(this).hide("slow");

            });

        });

    </script>

  </head>

  <body>

    <div>this is my first div.</div>

    <div>this is my second div.</div>

  </body>

</html>

效果显示:

 

posted @ 2018-05-02 09:27  silvan_happy  阅读(137)  评论(0编辑  收藏  举报