jQuery:自学笔记(1)——基础入门

jQuery:自学笔记(1)——基础入门

认识JQuery   

  1.jQuery概述

  jQuery是一个高速、小巧
、功能丰富
的JavaScript函数库.它可以实现“写的少,做的多”的目标。

jQuery库包含以下职能:

    • HTML 元素选取
    • HTML 元素操作
    • CSS 操作
    • HTML 事件函数
    • JavaScript 特效及动画片
    • HTML DOM 遍历和改动
    • AJAX
    • Utilities

  它让像HTML文档的遍历和操作 、事件处理
、动画、Ajax异步加载等等这些技巧可经过采取API非常简单和易于地贯彻.

  2.jQuery的安装

  点击进入jquery.com挑不同版本进行下载:

  • Production version – 用于实际的网站遭遇,已让简单和削减。
  • Development version – 用于测试与支付(未减,是不过读之代码)

  就我们如果引入jQuery文件到html中。

  <head>
   <script src="jquery-1.10.2.min.js"></script>
   </head> 

   如果疲于下载,我们好透过CDN使用网络上集体的jQuery文件,也是死方便快捷的:

  百度CDN

 <head>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 </head> 

  谷歌CDN

 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 </script>
 </head> 

 

代码风格

  1.核心方法$()

  在JQuery程序中,不管是页面元素的选取放置的功能函数,都是美元符号$和同针对()来开始之.
$().如下:  

  Ajax 1

  说明:$() 是
jQuery()的简写。所以将持有美元符换成jQuery也是可的。

  2.并缀方式

  在jQuery中,在执行完
$(“#box”).css(‘color’,’red’)
后,返回的照样是jQuery对象
。故可无停歇的连续调用功能方法,这就是连方式。   

  Ajax 2

  3.注释

  依旧是与JavaScript一样的诠释风格。

//$('#box');
/*
    $(function(){...}) 
*/

  jQuery库延迟等加载模式

  1.片种等待加载模式

  以JavaScript中,我们要load事件来贯彻延迟加载:

window.load()=function(){}

  以jQuery代码中,为了让方在浏览器加载网页完毕后执行,一般用
$()将艺术进行全过程包裹,即:

$(document).ready(function)
/*可以简写为下面这种*/
$( function(){...})

  说明:之所以延迟加载原因是咱们jQuery库文件是当body元素之前加载的,我们不能不待所有的DOM元素加载后,延迟支持DOM操作,否则就无法赢得到。  

  2.少种加载方式的界别:

  Ajax 3

  说明:挺少直接以onload方法,因为该事件所涉嫌的方式要等图片之类的特大型元素全部加载了后才能够行,并且不得不单次执行。

  

jQuery与DOM对象中的换

    1.jQuery转换为DOM

    jQuery对象是一个与众不同之数组对象,即使单独生一个元素,jQuery对象仍是一个数组。

    之所以称该异常,是盖实质上jQuery对象是含一个数组对象同各种办法的类似,如下图。而jQuery对象的数组里保存之即使是DOM对象,因此好经过索引将jQuery对象转换为DOM对象。    

    Ajax 4

    这样咱们好透过索引的主意实现自jQuery对象转换为DOM对象:

      var $cr =$(‘#div’);

      var cr=$cr[0];

  说明:另外我们得应用jQuery提供的特方式:
$cr.get(0)来迅速取得DOM对象。

  2.DOM转换为jQuery

    对于DOM对象转换为jQuery对象的转换规则比较简单。只待用$()把DOM对象包装起来就是吓。

    var cr=document.getElementById(‘#div’);
    var $cr = $(cr);

    

 

相关文章