jQuery学习笔记(一)

一、jQuery 简介 
 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 
 jQuery 理念: 写得少, 做得多. 优势如下: 
    轻量级、强大的选择器、出色的 DOM 操作的封装、可靠的事件处理机制、完善的 Ajax、出色的浏览器兼容性、 链式操作方式 
 二、HelloWord： 
   <script type="text/javascript" src="scripts/jquery.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
    alert("HelloWorld!");
   });
   </script>

三、jQuery 中的 DOM 操作
DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用
该接口可以轻松地访问页面中所有的标准组件
DOM 操作的分类:
 ①DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使
    用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
 ②HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性
 ③CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性

1).查找节点

  查找元素节点: 通过 jQuery 选择器完成.
   查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

2).创建节点: 

使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 
并把这个 DOM 对象包装成一个 jQuery 对象返回.
注意: 
①动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中; 
②当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以
  使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“<P>”)
③创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

动态创建 HTML 元素并没有实际用处, 还需要将新创建的节点插入到文档中, 即成为文档中某
个节点的子节点
append()  向每个匹配的元素的   内容的结尾   处添加内容
appendTo()  向每个匹配的元素追加到指定的元素中的内部结尾处
prepend()    向每个匹配的元素的内部的开始处插入内容
prependTo()   将每个匹配的元素插入到指定的元素 内部的开始处
after()        向每个匹配的元素的 之后插入内容
insertAfter()   向每个匹配的元素的插入到指定的元素之后
befor()          向每个匹配的元素的之前插入内容
insertBefore()    向每个匹配的元素的插入到指定的元素之前

以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.

3).删除节点

remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 
当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法
的返回值是一个指向已被删除的节点的引用.
empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).

4).复制节点
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件