jQuery 学习—宏观总结（2）

     

      上图是自己对jQuery的有一个简单的总结，因为用的比较少，所以联系不是特别的强，待以后用的时候再去体会其中的联系。

        jQuery大致可以分为三部分：基础、面向对象、插件。

基础：就是jQuery应用的基本语法；

面向对象是对jQuery的一种封装、我认为jQuery也是一种面向对象的语言，这里的对象就是HTML。 属性：就是如果选取html的属性、事件处理就是对象可以触发的一些事件、方法就是对象拥有的一些方法；

插件：是对方法的一种封装和分离，方便以后的复用。

        上篇《jQuery学习-宏观》中介绍了：jQuery的语法、选择器、事件。

这次讲说一下剩余的知识。

        属性：获得或设置元素的DOM属性。

常用的有：addclass（）、html（）、val（）

实例：

设置输入域的值：

$("button").click(function(){
  $(":text").val("Hello World");
});

 

    DOM元素操作：与DOM元素有关的方法

常用的有：.get（）、.size（）

实例：

获得第一个 p 元素的名称和值：

$("button").click(function(){
  x=$("p").get(0);
  $("div").text(x.nodeName +": " + x.innerHTML);
});

 

     遍历：jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。

常用的有：.first（）、.list（）、.has（）

实例：

高亮显示段落中的第一个 span ：

$("p span").first().addClass('highlight');

     

数据操作函数：允许我们将指定的DOM元素与任意数据相关联。

常用的有：.data（）、.removeDate（）

实例：

向元素附加数据，然后取回该数据：

$("#btn1").click(function(){
 $("div").data("greeting", "HelloWorld");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});

 

文档操作：和DOM操作相同。

效果：通过jQuery的方法实现一些简单动画的效果。

常用的有：.hede（）、.show（）、slideDown（）、slideUp（）

实例：

点击<p>标签 这个标签隐藏。

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

    $(this).hide();

  });

    

        插件：这里的插件指的是一些封装好的代码片段，用户可以直接拿过来使用提高用户的体验度。

创建插件的方法：jQuery.extend（）、jquery.fn.extend（）

实例：

创建jQuery对象方法

举一个最简单的jQuery对象方法例子：

jQuery.fn.test =function(){

      alert("jQuery对象方法");

}

$(function(){

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

                $(this).test();

         });

})

    总结：现在只是对jQuery有了一点点了解，很用很多只是在“知道”的层面上，像“自定义属性、创建对象、回调函数”等，都还不太清楚。所以在日后还用多总结、多应用。