牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作

只有jQuery对象才能调用jQuery类库的各种函数，同样有些dom对象的属性和方法在jQuery上也是无法调用的，不过基本上jQuery类库提供的函数包含了所有的dom操作。这就需要我们知道如何将jQuery对象和DOM的相互转换的方法。
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象。

2.jQuery对象和DOM对象的相互转换。

良好的书写风格：
复制代码代码如下:
var $input=$（"input"）

jQuery获取的对象在变量前面加上$。

<1>jQUery对象转成DOM对象,两种方法：[index]和get（index）
a:var $cr=$（"#cr"）    //jQuery对象
    var cr=$cr[0]    //DOM对象
b:var $cr=$（"#cr"）    //jQuery对象
    var cr=$cr.get（0）;    //DOM对象

<2>DOM对象转成jQuery对象
var cr=document.getElementById（"cr"）;    //DOM对象
var $cr=$（cr）;

3.解决与其他库的冲突
jQuery.noConflict（）。
jQuery用$作为自身的快捷方式。

4.使用jQuery的优点
<1>简洁的写法
<2>支持CC1到CCS3
<3>完善的处理机制

运行上面的代码浏览器就会报错！
但是如果这么写的话：

复制代码代码如下:
$（"#tt"）.css（"color","red"）;

浏览器不会因为没有这个元素而报错！

5.jQuery选择器
jQuery选择器是jQuery的重中之重！

jQuery过滤选择器与CSS中的伪类选择器相似。

<1>偶数与奇数选择器
偶数：$（"tr:even"）
奇数：$（"tr:odd"）

<2>CSS3 伪类选择器奇偶数
复制代码代码如下:
p:nth-child（odd）
{
background:#ff0000;
}
p:nth-child（even）
{
background:#0000ff;
}

<2>表单类型选择器

<3>转义选择器防止出错

6.DOM操作分类（1：DOM Core 2.HTML-DOM 3.CSS-DOM）
1.DOM Core
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并不仅限于处理网页。也可以用来处理任何一种使用标记语言编写出来的文档，例如：XML。

2.HTML_DOM
在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML——DOM的属性。
HTML_DOM提供了一些更加简明的记号来描述各种HTML元素的属性。
如：
复制代码代码如下:
document.forms
element.src

只能用于WEB

3.CSS_DOM
CSS_DOM是针对CSS的操作。主要是获取和设置style对象的各种属性。
通过改变style对象的各种属性。改变不同效果。

复制代码代码如下:
element.style.color=“red”;

7.遍历节点
1.children（）
2.next（）
3.prev（）
4.siblings（）
5.closest（）

8.jquey的css
<1>可以使用opacity设置透明度，jQuery已经处理好了兼容性问题。

$（"p"）.css（"opacity","0.5"）;

<2>$（"p"）.height（100）    //100默认单位是px,如果要用别的单位，必须要用字符串

<3>offset（）方法
返回相对视窗的偏移

复制代码代码如下:
var offset=$（"p"）.offset（）;
var left=offset.left;
var top=offset.top;

<4>position（）
复制代码代码如下:
//返回相对最近一个position样式的偏移。
var position=$（"p"）.position（）;
var left=position.left;
var top=position.top;

<5>scrollTop（）和scrollLeft（）
复制代码代码如下:
//返回滚动条距离顶端的距离与距离左侧的距离。
var $p=$（"p"）;
var top=$p.scrollTop（）;
var left=$p.scrollLeft（）;
//同样可以设置滚动到指定位置：
$（"ab"）.scrollTop（300）;

<6>pageX与pageY，获取鼠标在页面上的位置
复制代码代码如下:
$（document）.mousemove（function（e）{
$（"span"）.text（"X: " + e.pageX + ", Y: " + e.pageY）;
}）;