JQuery基础--对节点的增删改查

1.JQuery
    是一个js框架
    js文件->包->工具->库->框架，轻量级的js库
    封装了js原生里JS CSS DOM,提供了一致的简洁的API
    兼容css3 h5 各个版本的浏览器
    *使用户更方便地处理html Events 实现动画
    方便的为用户提供ajax交互
    *解耦 使内容和表现分离
    ps:JQuery2.x 不再支持IE678
2.使用JQuery
    1)引入JQ文件
    2)使用JQ方法
    ps:JQuery操作dom找到的是数组
    *JQuery的方法会返回一个JQuery对象(数组)
    $().().()......
    *原生对象->JQuery对象
    $(原生对象)-返回转换后的JQuery对象
    *JQuery对象->原生对象
    JQuery对象[下标]-返回转换后的原生对象
3.JQuery常用方法
    $("选择器")->查找节点
    -基本选择器
    $(标签名)：根据标签名找元素
    $(".类名")：根据类名找元素
    $("#id"):根据id找元素
    $("#id,.类名")：根据一组选择器查找元素
    -层次选择器
    $(选择器1 选择器2)
    $(选择器1>选择器2):找儿子
    $(选择器1+选择器2):找第一个弟弟
    -过滤选择器
    ：first -第一个
    ：last -最后一个
    ：eq(index)-下标等于index的元素
    ：nth-child(index)-index从1开始
    ：not(选择器)-把符合该选择器的元素排外
    ：gt(index)-下标大于index的元素
    ：lt(index)-下标小于index的元素
    ：even偶数行
    ：odd奇数行
    ：contain(text)-找到包含指定text文本的元素
    :empty     -找到不包含任何内容的元素
    :hidden    -找到所有隐藏的元素(display:none 有hidden属性)
    :visible   -找到所有可见的元素
    属性定位选择器
[属性名]  -找到所有具有该属性的元素
        [属性名=值] -如:找出所有class="red"的元素
[属性名!=值] -如:找出所有class=!"red"的元素
    状态过滤选择器
    :enabled   -找到可用元素
    :disabled   -找到不可用元素
    :checked    -找到选中的按钮
    :selected   -找到的选中option
    表单选择器
:text
:password
:radio
:checkbox
:submit
:reset
:button
:file
:hidden  -找隐藏框
    2)读写节点
读写节点的html内容
-obj.html() :读取html内容      ele.innerHTML
        -obj.html("值"):修改html内容   ele.innerHTML=值
        读写节点的text内容  
-obj.text()  obj.text("值") 
        读写节点的value值
-obj.val():获取value值
        -obj.val("值"):修改value值  
读写节点的属性值
        -obj.attr(属性名)
        -obj.attr(属性名,值)
    
    3)增加和删除
        -创建 $("<input>") ;
-父节点.append() - 作为父节点的最后一个子节点
-父节点.prepend() -作为父节点的第一个子节点
 
-兄弟.after()  -作为兄弟的下一个弟弟节点
-兄弟.before() -作为兄弟的上一个哥哥节点
 
//删除
-obj.remove()  -删除节点
如:$("li").remove(".red") 删除class为id的li节点
-obj.empty()   -清空节点  
        如:$("li").empty() 清空li中间的内容
    JQuery的常用方法：
1）选择器
2）操作节点
1.操作样式
obj.css();-获取节点的css样式
obj.css({"属性"："值"});-修改样式
obj.css("属性":"值");
--这种方式样式会作为行内式添加
obj.addClass("className")-追加样式
obj.removeClass("className")-删除指定样式
建议：若css内容较多，预先定义css样式，然后通过js修改css属性
2.遍历节点***
obj.children() -找直接子节点
obj.children(selector)-根据选择器找子节点
obj.next()-下一个兄弟（弟弟）
obj.prev()-找上一个兄弟（哥哥）
obj.siblings()-找所有的兄弟

obj.find(选择器)-找后代元素
obj.parent()-找爸爸
obj.parents(选择器)-根据选择器找祖先元素
3.JQ事件
obj.bind("click",function(){});
obj.click(函数);将原生的事件去除on就编程jq事件
obj.click(function(e){
//此处的e代表事件对象event
})
ps:原生中windpw.οnlοad=function(){}
可以让窗口执行完成dom之后再运行该函数等同于$(function(){})
*节点可以添加事件
*事件有事件对象

*事件可以取消事件冒泡

动画
fadeIn() 淡入
fadeOut() 淡出
通过改变opacity(透明度)实现节点的显示和隐藏
show() 显示
hide() 隐藏
通过同时改变节点的宽高实现显示和隐藏
slideUp()
slideDown()
通过改变节点的高度实现显示和隐藏
动画名称（时间，回调函数）
时间：整个动画完成需要的时间 毫秒值或者 slow normal fast
回调函数：动画完成之后需要执行的内容
自定义动画
animate(偏移位置，执行时间，回调函数)
偏移位置：{}描述动画执行之后的元素的样式