jQuery初级笔记[妙味云课堂视频]

一.jquery简介：
1.定义：js库 大型开发必备
2.好处：
（1）简化Js的复杂操作。
（2）不再需要关心兼容性。
（3）提供大量实用方法。
3.学习网址：www.jquery.com
最好js和jq一起学 分阶段的学习（先学简单->复杂->高级）

二.jq设计思想
1.选择网页元素：
模拟css选择元素
独有表达式选择
多种筛选方法
2.jq写法
方法函数化
链式操作
取值赋值合体（有参数代表赋值，无参数代表取值 如html() css()等）
3.js和jq关系：
可以共存，但不能混用。

三.jq基础 $()下的常用方法
hover():鼠标移入和移出的集合
有两函数参数，第一个是移入操作，第二个是移出操作。

show() hide():可以有一时间参数 单位是毫秒 可以运动的显示或隐藏。

fadeIn() fadeOut()：透明度变化 淡入和淡出
可以有时间参数 默认是400毫秒。

fadeTo() ：淡入和淡出的集合 可以指定一个透明度0~1 两参数 第一个是时间 第二个是透明度值

slideDown() slideUp()：向下展开和向上卷起

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
has()：包含
示例：div中包含有span的标签背景色为红色

$('div').has('span').css('background','red');

not()：filter的反义词

filter():对一组元素进行筛选 即过滤

/*has filter not 区别：
filter和not针对当前这个标签，而has是针对该标签里面的元素
*/

next()：与原生的下一个兄弟结点nextChildren相似

prev()：与原生的上一个兄弟结点nextChildren相似

find()：查找

eq()：相当于数组中的下标

index()：索引 就是当前元素在所有兄弟结点中的位置 起点为0

attr()：
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，用一个attr()就可以全部搞定.

1. attr(属性名) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）

2. attr(属性名, 属性值) //设置属性的值 （为所有匹配的元素设置一个属性值。）

3. attr(属性名,函数值) //设置属性的函数值 （为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）

4.attr(properties) //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用’className’ 作为属性名。或者你可以直接使用’class’或者’id’。)

attr博友讲解

DOM操作：
$()下的常用方法
addClass() removeClass()：给元素添加和删除类
如果添加的类在该元素中已存在，那么该类只存在一个，不会重复。
示例：

$('div').addClass('box2 box4');
$('div').removeClass(box2);

width() innerWidth() outerWidth()
示例：

alert($('div').width());//弹出宽度100
alert($('div').css('width'));//弹出100px  带单位

alert($('div').width());//width
alert($('div').innerWidth());//width+padding
alert($('div').outerWidth());//width+padding+border
alert($('div').outerWidth(true));//width+padding+border+margin

insertBefore() before()
insertAfter() after()
给指定标签添加到另一标签前或后面，示例：

$('span').insertBefore($('div'));//找到span标签，然后添加到div前面。 
$('div').Before($('span'));//div前面必须是span

**insertBefore和Before区别：
后续操作变了。**
示例：

$('span').insertBefore($('div')).css('background','red'); //span背景色变红
$('div').Before($('div')).css('background','red'); //div背景色变红

appendTo() append() ：将指定结点添加到另一节点的最后位置，示例：

$('div').appendTo($('span')); //将div添加到span的最后位置。

prependTo() prepend()：将指定结点添加到另一节点的最开始位置
remove()：删除结点

$('div').remove();//将div给删除了 

on() off()：事件的另外一种写法 开启和取消事件
示例：

$('div').click(function(){
    alert(123);
});
$('div').mouseover(function(){
    alert(123);
});

等价于：

$('div').on('click mouseover',function(){
    alert(123);
    $('div').off('mouseover');
});

此外，不同动作对应不同的操作：写成json的形式

$('div').on({
    'click':function(){
    alert(123);},
    'mouseover':function(){
    alert(456);}
});

scrollTop():纵向滚动距离。
示例：

$(document).click(function(){
alert($(window).scrollTop());//获取滚动距离
});

$()下常用方法：事件
ev pageX which：
对应兼容后的event对象 clientX坐标 键盘键值
即：

$('div').click(function(ev){
    //ev: event对象
    //ev.pageX(相对于文档的):clientX(相对于可视区域)
    可视区域+滚动条=文档
    //ev.which:keyCode键盘的键值
    比如回车键的键值是13
    which比keyCode强大，它还可以记录鼠标的键值，如鼠标左键右键滚动轮对应的键值。
    ev.preventDefault();//阻止默认事件
    ev.stopPropagation();//阻止冒泡事件
});

preventDefault stopPropagation：阻止默认事件和阻止冒泡事件
在事件回调函数中return false表示阻止默认事件+冒泡事件操作

one()：这个事件只执行一次
示例：将on改为one 那事件只执行一次。

位置操作
offset() position() :注意他两区别
offset()获取到屏幕的距离 它有两个属性left top
示例：

alert($('#div2').offset().left);//获取到屏幕的左距离(不管父级是否有定位)

position()

alert($('#div2').position().left);//到有定位的父级的left值，把当前元素转化成类似定位的形式 (margin不算在内)

offsetParent():获取有定位的父级 如果父级没有定位，那后续操作针对的是body(即到屏幕的距离) 或者它其它已经已经定位的父级

parent():获取父级

val():获取元素的value值 带参数时表示赋值
size()：获取一组元素的长度

示例：$('li').size(); //像length 

each()：可看作原生for循环的加强版
它有两个参数：一个是下标，一个是对应的值(当前操作函数)。
示例：

$('li').each(function(i,value){
    $(value).html(i);
});

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
jq创建标签(元素):
$(‘

’);
jq选择标签(元素):$(‘div’);

创建并追加标签：

var oDiv = $('<div>');
$('body').append(oDiv);