JQuery基础简介

jQuery官方API: http://docs.jquery.com/
中文在线API: http://jquery.org.cn/visual/cn/index.xml
中文jQuery手册下载: http://files.cnblogs.com/zhangziqiu/jquery_api.rar


获取Dom对象:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

获取包含一个元素的jQuery包装集:
var jQueryObject = $("#testDiv");

直接构造jQuery包装集:
$("#testDiv");


将Dom元素转换成jQuery包装集:
var div = document.getElementById("testDiv");
var domToJQueryObject = $(div);

jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:
通过索引器返回的不再是 jQuery包装集, 而是一个 Dom对象!
var domObject = $("#testDiv")[0];

//根据 ID获取 jQuery包装集
    var jQueryObject = $("#testDiv");

"$"符号在jQuery中代表对 jQuery对象的引用, "jQuery"是核心对象, 其中包含下列方法:
jQuery( expression, context )  
jQuery( html, ownerDocument )  
jQuery( elements )
jQuery( callback )  $(document).ready()的简写
jQuery( selector, context )  


//根据 ID获取 jQuery包装集:
    var jQueryObject = $("#testDiv");
//$是 jQuery对象的引用:
    var jQueryObject = jQuery("#testDiv");

1.基础选择器 Basics：
#id 根据元素Id选择  $("divId") 选择ID为 divI

element 根据元素的名称选择,  $("a") 选择所有<a>元素

.class 根据元素的css类选择  $(".bgRed") 选择所用CS
素

* 选择所有元素  $("*")选择页面所有元素

selector1,   
selector2,   
selectorN
可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同
时选中这几个选择器匹配的内容.
$("#divId, a, .bgRed")

2.层次选择器 Hierarchy：


3.基本过滤器 Basic Filters


4. 内容过滤器 Content Filters

5.可见性过滤器  Visibility Filters

6.属性过滤器 Attribute Filters

7.子元素过滤器 Child Filters

8.表单选择器 Forms  

9.表单过滤器 Form Filters


2.创建新的元素

什么是 DOM？
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同
对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
DOM 被分为不同的部分（核心、XML及 HTML）和级别（DOM Level 1/2/3）：
Core DOM  
定义了一套标准的针对任何结构化文档的对象  
XML DOM  
定义了一套标准的针对 XML 文档的对象  
HTML DOM  
定义了一套标准的针对 HTML 文档的对象。

(1)使用 HTML DOM创建元素
    //使用 Dom 标准创建元素
    var select = document.createElement("select");
    select.options[0] = new Option("加载项 1", "value1");
    select.options[1] = new Option("加载项 2", "value2");
    select.size = "2";
    var object = testDiv.appendChild(select);
(2) 使用 jQuery函数创建元素
创建一个Div元素:
$("<div style=\"border:solid 1px #FF0000\">动态创建的 div</div>")

3.将元素添加到对象上

//DOM加载完毕后添加元素?
//传统方法?
window.onload=function(){testDiv.innerHTML="<div style=\"b
order:solid 1px #FF0000\">动态创建的 div</div>"; }


//jQuery使用动态创建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML = "<div style=\"border:solid
 1px #FF0000\">使用动态创建的$(document).ready(function)方法</div>"; }
);


//jQuery 使用$(function)方法
$(
function(){testDiv.innerHTML += "<div style=\"border:s
olid 1px #FF0000\">使用$(function)方法</div>"; }
);


四.管理 jQuery包装集元素

1.过滤 Filtering

2.查找 Finding

3.串联 Chaining