jQuery技术

JQuery原理介绍及学习方法(2)

字号+ 作者:H5之家 来源:H5之家 2015-11-04 08:46 我要评论( )

html head titlejquery-t2/title script src=JQ.js/script /head body div style=margin:10px 10px; span 点击看效果 /span /div divdiv文本值/div /body script alert($.html(document.getElementById('result '))

  • <html>
  • <head>
  •     <title>jquery-t2</title>
  •     <script src="JQ.js"></script>
  • </head>
  • <body>
  •     <div style="margin:10px 10px;">
  •         <span>
  •         点击看效果
  •       </span>
  •     </div>
  •     <div>div文本值</div>
  • </body>
  • <script>
  •     alert($.html(document.getElementById('result '))); //点击看效果
  •     alert($('span').html()); //点击看效果
  •     alert($('#tst').html()); //div文本值
  • </script>
  • </html>

    复制代码


      JQuery的知识点分类

      通过上面模拟的JQuery库,我们应该可以大概知道JQuery的主要功能:通过强大的选择器获得DOM元素,然后针将这些DOM元素的日常操作封装成对应的方法,如取值、赋值、修改、删除等,同时JQuery还为网页开发提供了一些工具类方法,如each、ajax、isArray、extend等。所以总的来说,JQuery知识点可分为三大类:

  • JQuery选择器
  • JQuery对象的操作,如DOM操作、表单操作等
  • JQuery的工具方法
  • JQuery插件编写(知识扩展)

      JQuery太流行了,网上的资料太多太多,以致于很多初学者根本不知道从哪学起,这里看一篇博客,那里翻一翻源码,收集了大量的资料,最后发现根本没时间学习,即使花了大量的时间学习,学习到的JQuery也成不了一个体系,到最后全部忘记了。开发的时候又只能去翻手册,一直翻手册能写出好的代码么?不可能吧。

      JQuery的一些概念

      学习永远都不是记忆,记忆的东西迟早会被遗忘。真正要学习一门技术,最基本的原则就是要理解它。学习JQuery也是,在学习JQuery的知识点时,你首先要理解一些概念来辅助你理解这些知识点。 JQuery中的概念主要有这三个: JQuery()、JQuery对象和DOM对象。

      先说DOM对象,这个很简单,它定义了访问HTML文档对象的一套属性、方法和事件,没有JQuery前,我们通常直接操作DOM,比较熟悉的API有getElementById 、GetElementByTagName等。

      JQuery,它在JQuery中有个别名 $ 。通过上面章节的模拟代码(对应模拟代码中的JQuery)可知,其实就是一个函数,说得更细致点就是JQuery对象的工厂方法,它可以根据不同的入参来构造JQuery对象,如:

  • 字符串表达式。如 $('span') 、$('span .class')、$('#id')等
  • HTML 代码片段。如 $('<span>text</span>') 等
  • DOM元素。 如$(dom) //假设 var dom = document.getElementById('id');
  • JS Function 。 如 $(function(...) { ... } ); 一般对象或数组。如 { } 、[ ... ]等

      JQuery除了能创建JQuery对象的同时,JQuery自身也有很多静态方法,也可以称为工具方法,如 each、ajax、trim等。这些工具方法不仅在网页设计时常常会被用到,而且也会被当作工具方法用来实现JQuery对象的原型方法。

      JQuery对象,非常重要的一个概念,类似于模拟代码中的JClass实例,通常是通过JQuery构造出的实例。在JQuery中,我们常常见到的JQuery对象是这样的: $('#id') 、$('div')等。关于JQuery对象我们要明白以下几点:

  • JQuery对象继承了JQuery原型(prototype)的所有属性和方法
  • JQuery对象不是数组,但是采用了类似数组的结构来存储元素,而且存储的元素是通过选择器获取得到的DOM对象。参照上面章节的模拟代码(JClass实例对象),JQuery对象有个length属性,表示当前对象里存储DOM对象的个数,而这些通过选择获得的DOM对象,是采用下标为0、1、2、3 ... 作为属性名来进行存储的。所以,根据以上特性,我们完全可以通过下面这种方式来访问元素:

  • var  objs = $('div');
  • for(var i=0,len=objs.length;i<length;i++) {
  •   var o = objs[i];  //获取dom元素
  •   ... ...
  • }

    复制代码


      综合来说,JQuery、JQuery对象、DOM对象三者之间的关系是: JQuery是个工厂方法,用来构造JQuery对象; JQuery对象是个类数组对象,里面存储了DOM对象;

      理解了三者之间的关系,我们在理解下面知识点时,相对来说也就比较容易了:

      关于过滤选择器如何理解? 如$('div:first') 。

      如果理解了JQuery对象的内部结构,理解JQuery的过滤选择器就很容易了,如 :first 其实就是取JQuery对象属性为'0'的对象(封装成JQuery对象),同理 :last取的是属性为 length-1 的元素,:eq(index)取的是属性为index的元素。

      在JQuery中,如何验证某个元素是否为空?

  • var $o = $('div  .class');
  • if($ == null) {  // 错误的做法
  •    //什么都没找到
  • ......
  • }  
  • //正确的做法
  • if($o.html() == null) {
  •    //什么都没找到
  • ... ...
  • }
  • //正确的做法
  • if($o.length) {
  • //什么都没找到
  • ... ...
  • }

    复制代码


      JQuery对象和DOM对象如何转换?

     

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 7个有用的jQuery小技巧

      7个有用的jQuery小技巧

      2016-02-26 13:02

    • 全面详细的jQuery常见开发技巧手册

      全面详细的jQuery常见开发技巧手册

      2016-02-26 10:02

    • jQuery Touchwipe Plugin 轻量级的手机触摸特效插件(javascript

      jQuery Touchwipe Plugin 轻量级的手机触摸特效插件(javascript

      2016-02-16 17:04

    • javascript与jQuery的那些事

      javascript与jQuery的那些事

      2016-01-19 12:01

    网友点评