jQuery学习，半小时看懂jQuery，学习jQuery好简单

jQuery—>js框架

1.jQuery介绍
jQuery是一个轻量级的js库，是js的框架
—封装了js原生里面的js、css、DOM等等，提供了一致的简洁的API
—兼容各个版本浏览器、css3、html5
—封装了对Ajax、动画的支持
—实现了html内容和表现的分离

2.jQuery的使用
使用步骤：
引入jQury文件，使用其提供的函数（查找、增加、修改、更新）
ps：jQuery本身是一个扩展了的js对象数组

3.两者转换
js原生对象转成jQuery对象:–>$(原生对象)：返回转换后的jQuery对象
jQuery对象转成js原生对象:–>jQuery对象[下标]：返回转换后的原生对象

4.jQuery选择器
1）基本选择器
$(“标签名”):根据标签名找节点
$("#id值"):根据id找节点
$(".class值"):根据类找节点
$("#id值,.class值") $("#id值.class值"):根据一组选择器找节点

  2）层次选择器
    $("选择器1 选择器2")：找后代
    $("选择器1>选择器2")：找儿子
    $("选择器1+选择器2")：找下一个弟弟
    $("选择器1~选择器2")：找所有弟弟

  3）过滤选择器（常用语表格和列表）
    :first       找第一个   刑如：$("选择器:first");
	:last        找最后一个
	
	:even        找偶数行（下标0开始）
	:odd         找奇数行（下标0开始）
	
	:not("选择器")         把符合该选择器的元素排除在外
	
	:eq(index)         下标等于index的元素
	:gt(index)         下标大于index的元素
	:lt(index)         下标小于index的元素
	
	:hidden            找到所有隐藏的元素
	:visible           找到所有可见的元素
	
	:contains(text)    找到包含指定text文本的元素
	:empty()           找到不包含任何内容的元素

jQuery—>js框架
1.jQuery介绍
jQuery是一个轻量级的js库，是js的框架
—封装了js原生里面的js、css、DOM等等，提供了一致的简洁的API
—兼容各个版本浏览器、css3、html5
—封装了对Ajax、动画的支持
—实现了html内容和表现的分离

2.jQuery的使用
使用步骤：
引入jQury文件，使用其提供的函数（查找、增加、修改、更新）
ps：jQuery本身是一个扩展了的js对象数组

3.两者转换
js原生对象转成jQuery对象:–>$(原生对象)：返回转换后的jQuery对象
jQuery对象转成js原生对象:–>jQuery对象[下标]：返回转换后的原生对象

4.jQuery选择器
1）基本选择器
$(“标签名”):根据标签名找节点
$("#id值"):根据id找节点
$(".class值"):根据类找节点
$("#id值,.class值") $("#id值.class值"):根据一组选择器找节点

  2）层次选择器
    $("选择器1 选择器2")：找后代
    $("选择器1>选择器2")：找儿子
    $("选择器1+选择器2")：找下一个弟弟
    $("选择器1~选择器2")：找所有弟弟

  3）过滤选择器（常用语表格和列表）
    :first       找第一个   刑如：$("选择器:first");
	:last        找最后一个
	
	:even        找偶数行（下标0开始）
	:odd         找奇数行（下标0开始）
	
	:not("选择器")         把符合该选择器的元素排除在外
	
	//下标index从0开始
	:eq(index)         下标等于index的元素
	:gt(index)         下标大于index的元素
	:lt(index)         下标小于index的元素
	
	:hidden            找到所有隐藏的元素
	:visible           找到所有可见的元素
	
	:contains(text)    找到包含指定text文本的元素
	:empty()           找到不包含任何内容的元素

    ps:$("选择器").css("样式","样式值");

  4）属性定位选择器
  [属性名]         找到所有具有该属性的元素
  [属性名=值]      找到属性等于属性值的元素
  [属性名!=值]     找到属性不等于属性值的元素
  [属性名^=值]     找到属性等于以属性值开头的元素

  5）状态过滤器
  :enabled        找可用元素
  :disabled       找不可用元素
  :chocked        找选中元素
  :selected       找选中的option元素
  
  6）表单选择器
  :text      普通文本
  :password  密码
  :radio     单选框
  :checkbox  双选框
  :submit    提交按钮
  :reset     重置按钮
  :button    普通按钮
  :file      文件
  :hidden    隐藏元素
  ...

---

jQuery---->DOM操作
1.增加节点
创建节点jQuery对象节点：

父节点.append(子节点)  作为父节点的最后一个子节点添加
父节点.prepend(子节点) 作为父节点的第一个子节点

兄弟.after(子节点)   作为兄弟节点后的下一个弟弟节点
兄弟.before(子节点)  作为兄弟节点前的上一个哥哥节点

2.删除节点
obj.remove([选择器])     删除节点(选择器可有可无)
obj.empty()              清除节点内容

3.修改（属性、文本、样式）
节点value值
获取   obj.val();      ele.value;
修改   obj.val("值");  ele.value="";

节点文本内容的修改
获取   obj.html();     ele.innerHTML;
修改   obj.html("值"); ele.innerHTML="";

节点的Text内容
获取   obj.text();     ele.innerText;
修改   obj.text("值"); ele.innerText="";

节点的属性
获取   obj.attr("属性名");             ele.属性名;
                                       ele.getAttrbute("属性名");
修改   obj.attr("属性名","属性值");    ele.getAttrbute("属性名","属性值");

节点的样式(不推荐)
获取   obj.css();                      ele.style;
修改   obj.css("样式","样式值");       ele.style="样式:样式值";
       obj.css({"样式1":"样式值1","样式2":"样式值2"});//多样式修改
        
	   动态修改样式：（推荐）
	   obj.addClass("类名");//给对象节点添加指定的class
	   obj.removeClass("类名");//删除对象指定的class
	   
4.遍历查找节点
obj.children();//找所有子节点
obj.children("选择器");//根据选择器找子节点

obj.next();//找下一个兄弟
obj.prev();//找上一个兄弟
obj.siblings();//找所有兄弟

obj.parent();//找父节点
obj.parents("选择器");//根据选择器找祖先元素

obj.find("选择器");//找后代元素

jQuery---->操作DOM事件
方式一：
jQuery对象.事件名(function(){});
如:$p.click(function(){});

方式二：
jQuery对象.on("事件名"，function(){});	
如:$p.on("click",function(){});

注意：原生的事件名中的on去掉，对象被点击时立即执行里面的匿名函数

jQuery的DOM树加载问题
原生：
window.οnlοad=function(){}
表示可以让窗口先加载，完成DOM数之后再执行匿名函数

jQuery：
$(function(){});
表示页面加载完成之后，再执行匿名函数


jQuery事件触发之后也会产生event事件对象（jQuery）
1.事件冒泡处理   e.stopPropagation();//取消事件冒泡
2.合成事件       obj.hover(mouseEnter,mouseLeave);

jQuery动画效果：
obj.hide(); 隐藏效果
obj.show(); 显示效果
obj.fadeIn(); 淡入效果
obj.fadeOut(); 淡出效果
obj.slideUp(); 收起（向上）
obj.slideDown(); 展开（向下）

动画效果：
obj.动画名称函数(时间,[回调函数]);
时间：整个动画完成需要时间（毫秒值）
回调函数：动画完成之后需要执行的内容

自定义动画效果：
obj.animate({效果（样式）},时间,[回调函数]);
{}描述大括号执行之后元素的样式