第五天jQuery的初了解

jquery:是js 的一个功能库是很多JS功能集成在一起，用js写出来。
（move.js jsonp.js --自己封装的一些库）
官网下载地址：http://jquery.com/
下载：download
v3.1.1 - 最新版本
3.x版本
2.x版本
1.x版本

Past Releases -- 是指过去发布的版本
See all versions of jQuery Core. -- 是指查看所有版本
jQuery下载地址：https://code.jquery.com/jquery/
我们用的：jQuery Core 1.7.2 因为是国内使用的，最稳定的版本
版本号的意思：
1.x : 表示亚非拉地区主要因为兼容：ie 6 7 8 9 ff chrome
2.x : 表示欧美地区因为不兼容ie 6 7 8
3.x ：是最新的
jQuery和我们学过的js有什么区别
1：jquery : 的用户群主要是不太懂JS的人(只会切图的前端或后台程序员)
2：原生js：JS:用户群：专业的前端工程师
特点：jquery能做的原生JS都能做到，反之则不然。
1：原生JS开头写法：window.onload domReay
2：jQuery开头写法：$(function(){ //.... });
$(document).ready
$: 是jquery核心，写任何jquery相关的东西，都是要用到
$获取元素： document.getElementById // ByTagName--$('input')就是css中的写法
jquery里获取元素：css中怎么写 jquery就怎么写
原生JS里：onclickjq里:click事件不带on
*选择器类型：
（1）根据标签名：$('input')
（2）根据ID：$('#btn1')
（3）根据class: $('.classname')
根据属性来获取：[属性名='属性值'] // ' " 交叉用：外单引里双引，外双引里单引
.eq(2) 按索引找元素

jQuery里的伪类：
:first
:last
:even
:odd
:eq(索引值)
:lt(4) 小于索引值
:gt(4) 大于索引值
:contains(文本) 包含指定文本的(如：包含a字母)
:has(标签名)包含指定标签的
设置样式：.css('background','yellow'); //设置一个
.css({'background':'yellow','width':200});设置多个样式
（1）显示：.show()
（2）隐藏：.hide();
切换click事件，可以2个或多个：
（1）.toggle 表示事件的切换
（2）Mouseover 移入
（3）Mouseout 移出
原生JS的（移入和移出）事件和jquery里的（移入和移出）有同样的问题移入，移出 切换的时候使用jQuery里的 ：hover

（1）淡入淡出： fadeIn fadeOut
（2）下拉显示：slideUp
slideDown--不推荐使用

可以使用jQuery动画功能的：animate--推荐使用

样式：.css('width'); //获取一个样式，带单位200px
.css('background','yellow'); //设置一个
.css({'background':'yellow','width':200});设置多个样式
属性：.attr('属性名') //获取一个属性
.attr('name','value'); //设置一个属性
.attr({name1:'v1',name2:20}) //批量设置属性
class操作：addClass
removeClass
内容操作：

（1）非表单元素的内容：
.html() 获取
innerHTML.html(设置的内容) 设置
（2）表单标签：
.val() 获取内容
.val(设置的内容) 设置
this:一般情况下，this 还是原生js 中的this
原生对象 jquery对象
*原生对象的属性和方法，不能直接用于jquery对象

• jquery对象的属性和方法， 不能 直接用于 原生对象
  原生 --> jquery $(原生)
  jquery -->原生 [0]索引：.index();
  兄弟节点：siblings
  位置：
  原生：offsetLeft offsetTopleft top
  jquery:var l = $('#div1').position().left;
  var t = $('#div1').position().top;
  普通位置：
  .positon().left
  .position().top
  绝对位置：
  .offset().left;
  .offset().top;
  物体大小：width heigth

宽度：.width() 普通宽度
.innerWidth() 普通宽度+ padding
.outerWidth() 普通宽度+ padding + border
高度：height
DOM操作：$('#div1').append($('

内容区

'));
$('

内容区2

').appendTo($('#div1'));
在元素里面追加(append)
$('#div1').prepend($('

内容区

'));
$('

内容区

').prependTo($('#div1'));
在元素里面-前面加(insertBefore)
$('#div1').after($('连接'));
.after 目标后面
$('#div1').before($('连接'));
目标前面
.remove() 删除
.remove(表达式) 把匹配的元素删除
事件：
jquery 都是绑定
.bind();
.unbind();
事件委托：
$('ul').delegate('li','click',function(){
alert($(this).html());
});
$('ul').undelegate();
阻止默认行为：
return false; --阻止默认行为 和 事件冒泡
ev.preventDefault(); -- 阻止默认行为
ev.stopPropagation() --阻止事件冒泡
可视区：
alert($(window).width());
alert($(window).height());