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

时间：2023-03-09 04:29:33
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程序中,不管是页面元素的选择、内置的功能函数,都是美元符号$和一对()来起始的. $().如下：　　

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

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

2.连缀方式

　　在jQuery中，在执行完 $("#box").css('color','red') 后，返回的仍旧是jQuery对象。故可以不停的连续调用功能方法，这就是连缀方式。　　

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

3.注释

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

//$('#box');

/*

    $(function(){...})

*/

jQuery库延迟等待加载模式

1.两种等待加载模式

　　在JavaScript中，我们需要load事件来实现延迟加载：

window.load()=function(){}

　　在jQuery代码中，为了让方法在浏览器加载网页完毕后执行，一般使用 $()将方法进行首尾包裹，即：

$(document).ready(function)

/*可以简写为下面这种*/

$( function(){...})

　　说明：之所以延迟加载原因是我们jQuery库文件是在body元素之前加载的,我们必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。　　

2.两种加载方式的区别

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

　　说明：很少直接使用onload方法，因为该事件所关联的方法必须等待图片之类的大型元素全部加载完毕后才能执行，并且只能单次执行。

　　

jQuery与DOM对象间的转换

1.jQuery转换为DOM

　　　　jQuery对象是一个特殊的数组对象，即使只有一个元素，jQuery对象仍然是一个数组。

　　　　之所以称其特殊，是因为实际上jQuery对象是包含一个数组对象和各种方法的类，如下图。而jQuery对象的数组里保存的就是DOM对象，因此可以通过索引将jQuery对象转换为DOM对象。　　　　

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

　　　　这样我们可以通过索引的方式实现从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);

　　　　

相关文章