JQuery基础知识----节点操作，juery事件，动画，实例

• jQuery 中的 DOM 操作

    • DOM(Document ObjectModel— 文档对象模型 ) ：一种与浏览器 , 平台 , 语言无关的接口 , 使用该接口可以轻松地访问页面中所有的标准组件

    • DOM 操作的分类 :

      – DOMCore: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它 . 它的用途并非仅限于处理网页 , 也可以用来处理任何一种是用标记语言编写出来的文档 , 例如 : XML

      – HTMLDOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时 , 　有许多专属于 HTML-DOM 的属性

      – CSS-DOM: 针对于 CSS 操作 , 在 JavaScript 中 ,CSS-DOM 主要用于获取和设置 style 对象的各种属性

1.查找节点:

    – 查找属性节点 : 通过 jQuery 选择器完成 .

    – 操作 属性 节点 : 查找到所需要的元素之后 , 可以调用 jQuery 对象 的 attr () 方法来获取它的各种属性 值

    – 操作文本节点：通过 text() 方法
测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2.创建和插入节点

    • 创建 节点 : 使用 jQuery 的工厂函数 $(): $(html) ; 会根据传入的 html 标记字符串创建一个 DOM 对象 , 并把这个 DOM 对象包装成一个 jQuery 对象 返回 .

    • 注意 :

      – 动态创建的新元素节点不会被自动添加到文档 中 , 而是需要使用其他方法将其插入到文档中 ;

      – 当创建单个元素时 , 需 注意闭合标签和使用标准的 XHTML 格式 . 例如创建一个 <p> 元素 , 可以使用 $(“<p/>”) 或 $(“ <p ></p> ”), 但不能使用 $(“<p>”) 或 $(“< P >”)

    • 创建文本节点就是在创建元素节点时直接把文本内容写出来 ; 创建属性节点也是在创建元素节点时一起创建

• 动态创建 HTML 元素并没有实际用处 , 还需要将新创建的节点插入到文档中 , 即成为文档中某个节点的子节点

• 以上方法不但能将新创建的 DOM 元素插入到文档中 , 也 能对原有的 DOM 元素进行移动 .
测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

3.删除节点

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

    • empty(): 清空节点 – 清空元素中的所有后代节点 ( 不包含属性节点 ).

测试代码： http://blog.csdn.net/ochangwen/article/details/5274298

4.复制节点和替换节点

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

    • clone(true): 复制元素的同时也复制元素中的的事件

    • replaceWith (): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素

    • replaceAll (): 颠倒了的 replaceWith () 方法 .

    • 注意 : 若在替换之前 , 已经在元素上绑定了事件 , 替换后原先绑定的事件会与原先的元素一起消失

测试代码（有用到attr()方法）： http://blog.csdn.net/ochangwen/article/details/5274298

5.包裹节点

    • wrap (): 将指定节点用其他标记包裹起来 . 该方法对于需要在文档中插入额外的结构化标记非常有用 , 而且不会破坏原始文档的语义 .

    • wrapAll (): 将所有匹配的元素用一个元素来包裹 . 而 wrap() 方法是将所有的元素进行单独包裹 .

    • wrapInner (): 将每一个匹配的元素的 子内容 ( 包括文本节点 ) 用其他结构化标记包裹起来 .

测试代码(测试时需要用开发者工具看看)： http://blog.csdn.net/ochangwen/article/details/5274298

6.属性操作

    • attr (): 获取属性和设置属性

      – 当为该方法传递一个参数时 , 即为某元素的获取指定属性

      – 当为该方法传递两个参数时 , 即为某元素设置指定属性的值

    • jQuery 中有很多方法都是一个函数实现获取和设置 . 如 : attr (),html(), text(), val (),height(), width(), css () 等 .

    • removeAttr (): 删除指定元素的指定属性

•设置和获取HTML,文本和值

    • 读取和设置某个元素中的 HTML 内容 :html() . 该方法可以用于 XHTML, 但不能用于 XML 文档

    • 读取和设置某个元素中的 文本内容 :text(). 该方法既可以用于 XHTML 也可以用于 XML 文档 .

    • 读取和设置某个元素中的值 : val ()--- 该方法类似 JavaScript 中的 value 属性 . 对于 文本框 , 下拉列表框 , 单选框 该方法可返回元素的值 ( 多选框只能返回第一个值 ). 如果为多选下拉列表框 , 则返回一个包含所有选择值的数组

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

7.常用的遍历节点方法

    • 取得匹配元素的 所有子元素 组成的集合 :children(). 该方法只考虑子元素而不考虑任何后代元素 .

    • 取得匹配元素 后面紧邻的同辈元素的 集合 ( 但集合中只有一个元素 ) :next()

    • 取得匹配元素 前面紧邻的同辈元素的 集合 ( 但集合中只有一个元素 ) : prev ()

    • 取得匹配元素前后所有的同辈元素 : siblings()

8.样式操作和CSS-DOM操作

    • 获取 class 和设置 class: class 是元素的一个属性 , 所以获取 class 和设置 class 都可以使用 attr () 方法来完成 .

    • 追加样式 : addClass ()

    • 移除样式 : removeClass ()--- 从匹配的元素中删除全部或指定的 class

    • 切换样式 : toggleClass ()  --- 控制样式上的重复切换 . 如果类名存在则删除它 , 如果类名不存在则添加它 .

    • 判断是否含有某个样式 : hasClass ()--- 判断元素中是否含有某个 class, 如果有 , 则返回 true; 否则返回 false

• CSS-DOM 操作

    • 获取 和设置元素的样式属性 : css ()

    • 获取和设置元素透明度 :opacity 属性

    • 获取和设置元素高度 , 宽度 :height(), width(). 在设置值时 , 若只传递数字 , 则默认单位是 px . 如需要使用其他单位则需传递一个字符串 , 例如 $(“p:first”).height(“2em”);

    • 获取元素在当前视窗中的相对位移 :offset(). 其返回对象包含了两个属性 :top, left. 该方法只对可见元素有效

测试代码： http://blog.csdn.net/ochangwen/article/details/5274298

9.jQuery中的事件--加载DOM

    • 在 页面加载完毕后 , 浏览器会通过 JavaScript 为 DOM 元素添加事件 . 在常规的 JavaScript 代码中 , 通常使用 window.onload 方法 , 在 jQuery 中使用 $(document).ready() 方法 .

$(document).ready(function(){}); -- $(function(){});

10.事件

1-1.事件绑定

• 对 匹配的元素进行特定的事件绑定 :bind()

1-2.•合成事件

    • hover (): 模拟光标悬停事件 . 当光标移动到元素上时 , 会触发指定的第一个函数 , 当光标移出这个元素时 , 会触发指定的第二个函数 .

    • toggle(): 用于模拟鼠标连续单击事件 . 第一次单击元素 , 触发指定的第一个函数 , 当再一次单击同一个元素时 , 则触发指定的第二个函数 , 如果有更多个函数 , 则依次触发 , 直到最后一个 .

    • toggle() 的另一个作用 : 切换元素的可见状态 .

测试代码： http://blog.csdn.net/ochangwen/article/details/5274298

1-3•事件冒泡

    • 事件 会按照 DOM 层次结构像水泡一样不断向上只止顶端

    • 解决 : 在事件处理函数中返回 false, 会对事件停止冒泡 . 还可以停止元素的默认行为 .

测试代码： http://blog.csdn.net/ochangwen/article/details/5274298

1-4•事件对象的属性

    • 事件 对象 : 当触发事件时 , 事件对象就被创建了 . 在程序中使用事件只需要为函数添加一个参数 . 该事件对象只有事件处理函数才能访问到 . 事件处理函数执行完毕后 , 事件对象就被销毁了 .

    • event.pageX , event.pageY : 获取到光标相对于页面的 x, y 坐标 .

		<script type="text/javascript">
			/*
			1. 事件: 当鼠标移动时, 就会触发 mousemove 事件. 
			2. 如何得到事件对象: 在响应函数中添加一个参数就可以. 
			3. 事件对象的两个属性: pageX,pageY
			*/
			$(function(){
				//事件的 pageX, pageY 属性
				$("body").mousemove(function(obj){
					$("#msg").text("x: " + obj.pageX 
							+ ", y: " + obj.pageY);
				});
			})
		</script>

1-5•移除事件

    • 移 除某按钮上的所有  click 事件 : $(“ btn ”).unbind(“click”)

    • 移除某按钮上的所有事件 : $(“ btn ”).unbind();

    • one(): 该方法可以为元素绑定处理函数 . 当处理函数触发一次后 , 立即被删除 . 即在每个对象上 , 事件处理函数只会被执行一次 .

   

1-6、jquery动画

• jQuery 中的动画 : 隐藏和显示

    •hide (): 在 HTML 文档中 , 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css (“display”,“none”);

    • show(): 将元素的 display 样式改为先前的显示状态 .

    • 以上两个方法在不带任何参数的情况下 , 作用是 立即 隐藏或显示匹配的元素 , 不会有任何动画 . 可以通过制定速度参数使元素动起来 .

    • 以上两个方法会同时减少 ( 增大 ) 内容的高度 , 宽度和不透明度 .

    • fadeIn (), fadeOut (): 只改变元素的透明度 . fadeOut () 会在指定的一段时间内降低元素的不透明度 , 直到元素完全消失 . fadeIn () 则相反 .

    • slideDown (), slideUp (): 只会改变元素的高度 . 如果一个元素的 display 属性为 none, 当调用 slideDown () 方法时 , 这个元素将由上至下延伸显示 . slideUp () 方法正好相反 , 元素由下至上缩短隐藏 .

    • toggle(): 切换元素的可见状态 : 如果元素时可见的 , 则切换为隐藏 ; 如果元素时隐藏的 , 则切换为可见的 .

    • slideToggle (): 通过高度变化来切换匹配元素的可见性 .

    • fadeTo (): 把不透明度以渐近的方式调整到指定的 值 ( 0 – 1 之间 ).
测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

1-7.练习

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298