基础jquery

/*
!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="javascripts/jquery-3.0.0.js" type="text/javascript" charset="utf-8" ></script>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
-----------------------1.选择器------------------------------
  $("#id")  $(".class") $("element") $("*")      
---------------------层级筛选
   子选择器 $('div > p') 选择所有div元素(父元素)里面的第一个子元素P
   后代选择器 $('div p') 选择所有div元素里面的p元素
   相邻兄弟选择器   $('.prev + div') 选取prev后面的第一个的div兄弟节点  ++ 选第二个
   一般相邻选择器  $('.prev ~ span') 选取prev后面的所有的div兄弟节点 （同级）
   筛选选择器（伪类选择器）
   ------------------基本筛选
   $(".div:first")第一个div $(".div:last") $(".div:even")偶数 $(".div:odd")奇数 $(".aaron:eq(2)")索引值为2
   $(".aaron:gt(3)")索引大于3 $(".aaron:lt(2)")小于2
    $("input:not(:checked) + p")  没有checked属性的input的兄弟p元素
   ------------------内容筛选
   $('.div:contains(":contains")')  contains查找包含“指定文本”的元素
   $('.div:has("span")') has查找包含“指定元素”的元素
   $("a:parent")所有父元素  $("a:empty")所有空节点
   -------------------可见性
   如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度，是大于零。
   元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
   隐藏元素方法 1.CSS display的值是none。2.type="hidden"的表单元素。3.宽度和高度都显式设置为0。
     4.祖先元素是隐藏，元素不在页面上显示 5.CSS visibility的值是hidden 6.CSS opacity的指是0
     $('#div1:hidden')   $('#div2:visible')所有可见元素
  ------------------属性筛选
   所有div中，属性name=p1的div元素 $('div[name=p1]')
   所有div中，有属性name中的值包含一个test字符串的div $('div[name*="test"]')
   ------------------子元素筛选  
   $("ul li:first/last-child"):每个ul的第一个/最后一个li子元素
   $("ul li:only-child")：选中所有li为ul的唯一子元素的li
   $("ul li:nth-child"):;   $("ul li:nth-last-child"); !!!从1开始计数
   ------------------表单元素选择器
    $(':input') $('input:text') $('input:password')  $('input:checkbox') $('input:button')
    $('input:enabled') $('input:disabled') $('input:checked') $('option:selected')
    $(this)和this   var $this= $(this)
    this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
    $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性。
*/

/*------------------------------------2.jQ的样式和属性---------------------------------
1).attr()与.removeAttr()
  attr(传入属性名)：获取属性的值
  attr(属性名, 属性值)：设置属性的值
  attr(属性名,函数值)：设置属性的函数值
  attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
特性Attribute和属性Property
Attribute就是dom节点自带的属性例如：html中常用的id、class、title、align等：
Property是这个DOM元素作为对象，其附加的内容，例如tagName, nodeName, nodeType,, defaultChecked,defaultSelected
使用.prop()方法对Property进行取值或赋值等

2).html() .text() val()
  .html() 不传入值，获取集合中第一个匹配元素的HTML内容  原理:innerHTML()   第一个
  .html( htmlString )  设置每一个匹配元素的html内容                        每一个
  .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

  .text()结果返回一个字符串，包含所有匹配元素的合并文本                    每一个
  .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代             每一个
  .text( textString ) 用于设置匹配元素内容的文本
  .text( function(index, text) ) 用来返回设置文本内容的一个函数
 
   val()无参数，获取匹配的元素集合中第一个元素的当前值   第一个
  .val( value )，设置匹配的元素集合中每个元素的值        每一个
  .val( function ) ，一个用来返回设置值的函数
  不同点 多个元素时html() val()只取第一个,text()取全部元素
3)样式
  .addClass()  .removeClass() 参数：className或function(index,currentclass)
  切换样式.toggleClass('class') 参数:className, switch(true只能被添加/false只能被删除)
  样式操作.css()获取元素样式属性的计算值或者设置元素的CSS属性
  参数： 获取时propertyName单个  propertyNames数组[]  .css('border', '1px solid red')
  设置时 (propertyName, value) (propertyName, function) (对象｛｝)
  .css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理 自动加px
  $('p').hasClass('another')===$('p').in('another')
  .height() .width()获取/设置匹配元素宽高  
  .offset():获取相对视窗偏移 offset.top/left
  JS中对应element.offsetTop/Left  offsetParent():返回元素偏移容器
  .position():获取相对最近的position为relative或absolute的祖父节点的偏移; position.left/top
  .scrollLeft/Top(): 获取/设置元素滚动条顶端/上方的距离
  CSS优先级  外部样式 < 内部样式 < 内联样式
 通过.css方法设置的样式属性（内联）优先级要高于.addClass方法（外部或内部）
----------------------------------------------------------------------*/



/*-----------------------------------------------------3.DOM相关
1）创建节点  $("<div id='test' class='aaron'>我是文本节点</div>")
   插入节点
     内部插入 对象.append(内容)与 内容.appendTo(对象) 内部的后面
     外部插入 对象.after(内容)头插法与 对象.before(内容)尾插法
     内部插入  prepend()与prependTo() 内部的前面
     外部插入  insertAfter()与insertBefore() insert相当于to
   清空节点
     empty()  只是清空内部的html代码，包括后代节点，不移除元素自身
     remove() 将元素自身及后代移除，移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
     detach() 移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。绑定的事件不变
2）复制替换
    clone() 深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
    clone(ture) 将事件与数据一并克隆
    replaceWith( newContent ) 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
    replaceAll( target ) ：用集合的匹配元素替换每个目标元素。替换后绑定事件消失
    $("strong").wrap('<b></b>')  用B标签把strong标签包裹 wrapAll()
    wrapAll( wrappingElement )：给集合中匹配的元素增加单独一个外面包裹HTML结构
    $('p').unwarp();  删除选中元素的父元素
    $("strong").wrapInner('<b></b>') 用B标签把strong标签子文本内容包裹
3）jquery遍历  参数皆可选,进行二次筛选
    children()仅子元素  find()遍历当前元素集合中每个元素的后代
    parent()  仅父元素  parents()所有祖先元素  
    closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
    next()  prev()  siblings()查找指定元素集合中每一个元素紧邻的后一个（前一个）（所有）同辈元素
    add()添加新的元素  each()方法是一个for循环的迭代器
4) DOM加载 $(document).ready() window.onload()不同之处
    1.执行时机 JS：元素、文件完全加载，等同于$('window').load()； jquery：DOM就绪
    2.jquery可多次使用，依次执行；JS只能执行一次
    3.jquery可简写
      $(function(){       $().ready(function(){
        //代码                    //代码
       })                   })
    6+
----------------------------------------------------------------------*/


/*-------------------------------------4.事件篇-----------------------------------------
1）鼠标事件 click() dbclick() mousedown()按下触发与mouseup()松手触发 mousemove()
    鼠标移入移出mouseover()与mouseout()   阻止冒泡mouseenter()与mouseleave()
    $(selector).hover(handlerIn, handlerOut)  获得/失去焦点
       $('#pane h5.head').hover(function(){
          $(this).next().show();
       }, function(){
          $(this).next().hide();  });  
    $ele.focusin([eventData ]，handler )  focusout()
    focus() blur()在元素本身产生，会冒泡，focusin()focusout()在元素包含的元素中产生
    select()事件只能用于<input>元素与<textarea>元素
    change(function(e){ e.target目标对象  e.event目标事件 })
    form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
    keydown()与keyup() 只是发送到具有焦点的元素上，适合于表单元素，当前输入的获取不到
    KeyPress()主要用来接收字母、数字等ANSI字符
    on( events [, selector ] [, data ] )  $("#elem").on("mouseover mouseout",function(){ });
    $("#elem").on({ mouseover:function(){},  mouseout:function(){}, });
    应用 委托机制.on( events [, selector ] [, data ], handler(eventObject) )
    $("div").on("click","p",fn) 等同于对div下的p绑定  解除绑定 $("elem").off("mousedown mouseup")
    bind()  unbind('click', fn1)   one()绑定，触发一次后解除
    模拟操作： trigger()  $('p').trigger('click/fn1')
 2）jQuery事件对象的属性和方法，为函数添加参数event
    event.type：获取事件的类型(click) event.pageX 和 event.pageY：获取鼠标当前相对于页面（左上角）的坐标
    event.preventDefault() 方法：阻止默认行为   event.stopPropagation() 方法：阻止事件冒泡
    retuen false；同时停止冒泡和默认行为  event.target:返回哪个DOM元素触发事件
    event.which：单击的是鼠标的哪个键  event.currentTarget : 在事件冒泡过程中的当前DOM元素（this）
    js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
    .this和event.target都是dom对象 要将其转换为jquery对象
*/

/*---------------------------------5.jQuery动画篇  
    所有用于动画的属性必须是数字的,backgroundColor不行
   .show([]) .hide([]) .toggle([])   .fadeOut() .fadeIn() 改变透明度,可见性不变，dispaly:none
   .slideDown() .slideUp() .slideToggle() 改变高度,高度为0时，dispaly变成none使之不占据空间
   参数： 持续时间（200，默认400，600）[duration ]；回调函数[, complete ]
   .fadeToggle()  .fadeTo([]+ opacity +[])
 自定义动画
   .animate( properties [, duration ] [, easing ] [, complete ] )
   .animate( properties, options )  每个属性能使用'show', 'hide', 和 'toggle
   $('.div').animate({left:'500px', height:'200px'}, 1000).animate({top:'100px', width:'100px'}, 100);
 动画回掉 非动画函数会直接执行使用回掉对非动画进行排队
 $('.div').click(function(){
   $(this),animate({top:'30px', left:'20px'}, 100).animate({width:'100px'}, 1000, function(){
    $(this).css('border', '2px solid red')
   })
 })  
停止动画.stop()  .stop( [queue ] [, clearQueue ] [, jumpToEnd ] )
  如果动画未完成停止了，那么动画完成时执行的回调函数是不会被调用的
其它相关
  遍历 jQuery.each(array/object, callback )   回调函数 return false; //停止迭代
  jQuery.trim()函数用于去除字符串 两端 的空白字符
  DOM元素的获取 .get( [index ] ) 负值的索引起始值是-1 -2:第二个元素
  添加动画一 定要考虑动画的堆叠问题  .is(:animated)判断是否处于动画
----------------------------------------------------------------------*/


/*-------------------jquery表单----------------------------
   表单组成：表单标签，表单域，表单按钮

*/

/*------------------------------ajax-------------------------------
 实现ajax ：异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
 load() 方法从服务器加载数据，并把返回的数据放入被选元素中
 从服务器加载意味着本地数据需要先部署到服务器上  (node.js ,php)
 $(selector).load(URL,[data],[callback]);  data:发送至服务器的数据
 $('#id').load('test.html .class') 可筛选载入的html文档
 传递方式(get/post)由data是否存在自动决定
 回调函数可以设置不同的参数,意味着加载完成后继续的操作
 无论请求是否成功，请求完成，回调函数触发
 responseText - 调用成功时的结果内容  textStatus - 调用的状态 xhr - 包含XMLHttpRequest对象
 $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});

$.get(URL, [data], [callback], [type]);  data:服务器返回内容格式，xml,html,script,json,text
比较：html片段简单，重用性差；xml复杂笨重重用性强；json简洁可重用
---------------html
$(function(){
  $('#send').click(function() {
    $.get('get1.php', {
      username : $('username').val(),
      content : $('content').val()
    }, function(data, textStatus){
       $('#resText').html(data);
    });
  });
});---------------xml
$(function(){
  $('#send').click(function() {
    $.get('get1.php', {
      username : $('username').val(),
      content : $('content').val()
    }, function(data, textStatus){
       var username = $(data).find('comment').attr('username');
       var content = $(data).find('comment content').text();
       var txtHtml = "<div class='comment'><h6>"
           +username+":</h6><p class='para'>"
           +content+"</p></div>";
      $('#resText').html(txtHtml);
    });
  });
});------------------json
$(function(){
  $('#send').click(function() {
    $.get('get1.php', {
      username : $('username').val(),
      content : $('content').val()
    }, function(data, textStatus){
       var username = data.username;
       var content = data.content;
       var txtHtml = "<div class='comment'><h6>"
           +username+":</h6><p class='para'>"
           +content+"</p></div>";
      $('#resText').html(txtHtml);
    }, "json");
  });
});
$.post(URL,[data],[callback]);
getScript():使用ajax的http GET请求从服务器加载执行JS，动态而不是在页面加载时加载
$(function(){
  $.getScript('jquery.color.js', function(){
      $('#go').click(function(){
           $('.block').animate( { backgroundColor : 'pink'}, 1000)
                      .animate( { backgroundColor : 'blue'}, 1000) ;           
      });
  });
});---------getJSON()加载JSON文件


ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。高层实现见 $.get, $.post.$.ajax() 返回其创建的 XMLHttpRequest 对象
jQuery.ajax([settings])
常用参数
type      类型：String 默认值: "GET"。请求方式 ("POST" 或 "GET")
url       类型：String  默认值: 当前页地址。发送请求的地址。
xhr       类型：Function 需要返回一个 XMLHttpRequest 对象。用于重写或者提供一个增强的 XMLHttpRequest 对象
data      类型：String 一个对象。连同请求发送到服务器的数据。
dataType  类型：String 有xml html script json jsonp text
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
error     类型：Function  默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
success   类型：Function   请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
$(function(){
  $('#send').click(function() {
    $.ajax({
        type: 'GET',
        url : "test.js",
        dataType: 'script'
    });
  });
})------------------表单序列化
1.$('#form1').serialize()序列化为字符串
$(function(){
  $('#send').click(function() {
    $.get('get1.php', $('#form1').serialize(), function(data, textStatus){
       $('#resText').html(data);
    });
  });
});
2.serializeArray()返回JSON格式数据
3.$.param(obj) 对数组或对象按照key/value序列化
var obj = {a:1, b:2, c:3};
var k = $.param(obj);
alert(k);//输出a=1&b=2&c=3
---------------------------------原生ajax
1.创建 XMLHttpRequest对象 variable=new XMLHttpRequest();
2.使用 XMLHttpRequest 对象的 open() 和 send() 方法向服务器发送请求
   open(method,url,[async])  method：请求的类型；GET 或 POST url：文件在服务器上的位置
                        async：true（异步）或 false（同步）默认为异步
   send([string])          string只用于post方法
   以下情况使用post
   1.无法使用缓存文件（更新服务器上的文件或数据库）
   2.向服务器发送大量数据（POST 没有数据量限制）
   3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
   如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
   xmlhttp.open("POST","ajax_test.asp",true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("fname=Bill&lname=Gates");
3.服务器响应
   使用 XMLHttpRequest 对象的 responseText（字符串形式） 或 responseXML（xml形式） 属性。
4.onreadystatechange事件
   onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
   readyState 存有 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立
   2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
   status  200: "OK"  404: 未找到页面
*/