jQuery基础

jQuery

概念

jQuery是js一种框架。jQuery具有跨浏览器的特性。
jQuery比较大的特点，也就是它的链式结构。
jQuery 任何选择器，都是的基于工厂函数。$()

jQuery 引入：

<script type="text/javascript" src=""></script>

jQuery 选择器：

1、ID选择器 $("#abc")
2、类选择器 $(".abc")
3、标签选择器 $( "input" )
4、标签选择器 $( "input[name=abc]" )

jQuery 常用选择函数：

1、.val() 获取/设置具有val属性的控件。
2、.text() 获取/设置控件的文本信息。
3、.html() 获取/设置控件的HTML信息。
4、.attr() 获取/设置控件的属性。

jQuery 动画：

1、hide( 毫秒 ) show( 毫秒 ) toggle( 毫秒 )
2、fadeIn( 毫秒 ) fadeOut( 毫秒 ) fadeToggle( 毫秒 )
3、slideUp( 毫秒 ) slideDown( 毫秒 ) slideToggle( 毫秒 )
4、animate( { 动画行为 }，时间， 完成动画以后回调 )
注意：animate：如果设置top，right，left，bottom那需要设置poistion。
以左上角为原点，因为可以设置top，left 的正负数。
5、callback 所谓的callback就是指，回调函数。
6、stop( true, true ) 停止动画。
    第一个立刻停止。第二个立即完成。
注意： 第二个优先考虑。

jQuery Bom ： Bom是基于浏览器操作的对象
window是Bom的操作核心。

1、document 对象。
2、frames 对象
3、location 对象。
4、history 对象。
5、screen 对象。
6、navigator 对象。 浏览器本身

1、window.open( URL ) 新窗口打开
2、window.close( URL ) 当前窗口关闭
3、window.location.href = "URL" 跳转
4、window.history.go( -1 ); 返回上一页  
5、window.history.go( 1 ); 进入下一页 前提是下一页。
6、window.location.reload(); 刷新页面。
7、window.screen.height; 获取屏幕高度。
8、window.screen.width: 获取屏幕宽度。
9、window.scrollX 横轴位移坐标。
10、window.scrollY 纵轴位移坐标。
11、window.navigator.appVersion 浏览器版本
12、window.navigator.appCodeName 浏览器名称
13、window.frames.moveTo();　移动浏览器
14、window.frames.resizeTo(); 重定义浏览器尺寸
15、window.scrollTo(); 自动让浏览器滚动
16、鼠标事件 pageX/pageY 通常是获取鼠标在页面上位置。
17、鼠标事件 clientX/ClientY 通常是获取鼠标在页面上可视化范围内的位置。
18、鼠标事件 screenX/screenY 通过时获取鼠标在屏幕上位置。

总结：
在BOM对象中，需要经常用到的：
1、window.location.href = "http://www.baidu.com"
2、window.history.go(-1);
3、window.screen.width; 
4、window.screen.height;
5、window.scrollX;
6、window.scrollY;
7、window.navigator.appCodeName;
8、鼠标事件 clientX / clientY；

window.onload和document.ready的区别：

两者都是页面加载后响应的处理的动作。
但是：
1、document.ready 控件加载完成之后就会调用。
2、window.onload 一般的是页面所有包括图片完毕以后才会调用。

Dom树：所谓的Dom树，也就是HTML树，也就是遵守XHTML的情况下。
所有的HTML生成出来的树结构。
<div class="A">
   <img class="B"></img>
   <img class="C"></img>
   <img class="D"></img>
</div>
以上HTML代码，如果B需要找到D，要么先找到C再找到D。
要么找父节点A再找到D。

$(this) 可以获取当前触发事件的控件对象。

父节点：该节点父节点。
find( "p" ) 由父节点找子节点。
eq( 0 ) 找到第几个节点，从0开始。

子节点：该节点子节点。
.parent() 找到父亲节点

兄弟节点：同等级的节点。
next() 下一个兄弟节点。
prev() 上一个兄弟节点。

.first()
.last()

jQuery Dom 叫做文档操作结构对象。

1、append() 往相关元素最后位置追加HTML 

2、appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中。

3、remove(); 移除HTML元素