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

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

认识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也是可以的。

  二.连缀方式

  在jQuery中,在Ajax,执行完
$(“#box”).css(‘color’,’red’)
后,重回的依然是jQuery对象
。故能够不停的连年调用功效方法,那正是过渡格局。   

  Ajax 2

  3.注释

  依然是与JavaScript1样的注释风格。

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

  jQuery库延迟等待加载格局

  1.三种等待加载方式

  在JavaScript中,大家须要load事件来贯彻延迟加载:

window.load()=function(){}

  在jQuery代码中,为了让艺术在浏览器加载网页实现后实施,一般选用$()将艺术开始展览全进程包裹,即:

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

  说明:之所以延迟加载原因是大家jQuery库文件是在body成分以前加载的,大家不可能不等待全部的DOM成分加载后,延迟援助DOM操作,不然就不只怕取获得。  

  贰.三种加载情势的区分:

  Ajax 3

  说明:很少直接动用onload方法,因为该事件所涉嫌的点子必须等待图片之类的巨型元素全部加载完成后才能执行,并且只可以单次执行。

  

jQuery与DOM对象间的变换

    1.jQuery转换为DOM

    jQuery对象是2个独特的数组对象,尽管唯有3个因素,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);

    

 

相关文章