总结-jQuery

一、ajax提交，如果某个变量的值填的是doc对象，jQuery不报错，也没有反应，如： {userName : $('#userName')}。正确的写法 {userName : $('#userName').val()}

1、选择器selector
　　1)基本选择器
　　　　#id
　　　　.class
　　　　element
　　　　selector1,selector2..selectorn
　　　　*
　　2)层次选择器
　　　　selector1 selector2 : 后代
　　　　selector1>selector2 : 只考虑子节点
　　　　selector1+selector2: 下一个兄弟
　　　　selector1~selector2: 下面所有的兄弟
　　3)过滤选择器 
　　　　(1)基本过滤选择器
　　　　　　:first
　　　　　　:last
　　　　　　:not(selector)
　　　　　　:even偶数的
　　　　　　:odd奇数的
　　　　　　:eq(index)(0，1，2，3。。。)
　　　　　　:gt(index) index右边所有的
　　　　　　:lt(index) index左边所有的(自己显然不在范围内，不解释)
　　　　　　示例：$('table tr:eq(0~n) td:eq(0~n)').css('color','red');//某一行的某一列
　　　　(2)内容过滤选择器
　　　　　　:contains(text) 匹配包含给定文本的元素
　　　　　　:empty 匹配所有不包含子元素或者文本的空元素
　　　　　　:has(selector) 匹配含有选择器所匹配的元素的元素
　　　　　　:parent 匹配含有子元素或者文本的元素
　　　　(3)可见性过滤选择器
　　　　　　:hidden 匹配所有不可见元素，或者type为hidden的元素
　　　　　　:visible 匹配所有的可见元素
　　　　(4)属性过滤选择器
　　　　　　[attribute]
　　　　　　[attribute=value]
　　　　　　[attribute!=value]
　　　　(5)子元素过滤选择器
　　　　　　:nth-child(index/even/odd) (下标从1开始，不是0，这是个例外)
　　　　(6)表单对象属性过滤选择器
　　　　　　:enabled
　　　　　　:disabled
　　　　　　:checked
　　　　　　:selected
　　　　5)表单选择器   
　　　　　　:input  input,textarea,select,button
　　　　　　:text
　　　　　　:pasword
　　　　　　:radio
　　　　　　:checkbox
　　　　　　:submit
　　　　　　:image
　　　　　　:reset
　　　　　　:button
　　　　　　:file
　　　　　　:hidden
2、dom操作(核心)
　　1)查询:找到一个节点以后，可以通过以下四个方法来访问节点的html内容、文件内容、属性值、值。
　　　　a.html(): 访问节点的html内容
　　　　b.text():访问节点的文本内容
　　　　c.attr():访问节点的属性
　　　　d.val():访问节点的值
　　　　以上方法均可以查询或者修改相应的值。
　　2)创建
　　　　$(html);
　　3)插入节点
　　　　append():作为最后一个孩子追加
　　　　prepend():作为第一个孩子追加
　　　　after():作为下一个兄弟追加
　　　　before():作为上一个兄弟追加
　　4)删除节点
　　　　remove()
　　　　remove(selector)
　　　　empty():清空节点
　　5)将javascript代码与html代码分离
　　　　$(function(){
　　　　　　//当整个页面加载完毕，会执行这儿的代码。
　　　　});
　　6)复制节点
　　　　clone()
　　　　clone(true):使复制的节点也具有行为(将事件处理代码一块复制)
　　7)属性操作
　　　　读取：attr('');
　　　　设置： attr('','') 或者一次
　　　　设置多个 attr({"":"","":""});
　　　　删除：removeAttr('')
　　8)样式操作
　　　　获取和设置: attr("class",""),attr("style","")
　　　　追加:addClass('')
　　　　移除:removeClass('')
　　　　或者removeClass('s1 s2')
　　　　或者removeClass()//会删除所有样式
　　　　切换样式：toggleClass,有该样式，就删除，没有，就添加。
　　　　是否有某个样式 hasClass('')
　　　　读取css('')
　　　　设置css('','')或者
　　　　css({'':'','':''})//设置多个样式
　　9)遍历节点
　　　　children()/children(selector)只考虑子元素，不考虑其它后代元素。
　　　　next()/next(selector)下一个兄弟
　　　　prev()/prev(selector)上一个兄弟
　　　　siblings()/siblings(selector)其它兄弟
　　　　find(selector):查找所有的后代，并且后代要满足selector的要求。
3、事件处理
　　1)回顾之前的事件处理知识
　　　　a.绑订事件处理代码
　　　　　　方式一:绑订到html标记 <input type="button" onclick="f1();"/>
　　　　　　方式二: 绑订到dom对象 obj.onclick=f1;
　　　　b.如何获得事件对象
　　　　　　给事件处理函数添加一个参数"event" 
　　　　c.事件对象有什么作用
　　　　　　作用1:依据事件对象找到事件源　
　　　　　　　　event.srcElement   //ie
　　　　　　　　event.target  //ff chrome
　　　　　　作用2:获得鼠标点击的坐标
　　　　　　　　event.clientX
　　　　　　　　event.clientY
　　　　　　作用3:取消冒泡
　　　　　　　　event.cancelBubble=true;
　　　　d.事件冒泡：子节点产生的事件会抛给相应的父节点。
    
　　2)在jQuery当中，如何处理事件
　　　　a.绑订事件处理代码
　　　　　　方式一：$obj.bind(事件类型,处理函数);如：$obj.bind('click',fn1);
　　　　　　方式二：$obj.click(fn1);
　　　　b. 如何获得事件对象：只需要给事件处理函数传递一个参数
　　　　　　$obj.click(function(e){}); // e就是事件对象(是jQuery对底层的事件对象的封装)。
　　　　c.事件对象有什么作用
　　　　　　作用1:依据事件对象找到事件源
　　　　　　　　//obj是一个dom对象。
　　　　　　　　var obj = e.target;
　　　　　　作用2:获得鼠标点击的坐标 
　　　　　　　　e.pageX
　　　　　　　　e.pageY
　　　　　　作用3:取消冒泡
　　　　　　　　e.stopPropagation();
　　　　d.合成事件
　　　　　　hover(mouseenter,mouseleave): 第一个函数处理光标进入，第二个函数处理光标移出。
　　　　e.模拟操作
　　　　　　方式一：简写形式，比如：$obj.focus();
　　　　　　方式二：正式写法 $obj.trigger('focus'); $obj.trigger('click');(触发点击事件)
4、动画
　　1)show() hide()
　　　　a.作用：通过同时改变元素的宽度与高度来实现显示或者隐藏
　　　　b.用法:
　　　　　　show(时间,[callback]);
　　　　　　时间:单位可以是"slow","normal","fast"或者毫秒数。
　　　　　　callback:回调函数，当整个动画执行完毕，接下来会调用回调函数。
　　2)slideUp() slideDown()
　　　　a.作用：通过改变元素的高度来实现显示或者隐藏
　　　　b.用法同上。
　　3)fadeIn() fadeOut()
　　　　a.作用：通过改变元素的不透明度来实现显示或者隐藏。
　　　　b.用法同上。
　　4)自定义动画 animate(params,speed,[callback])
　　　　用法:
　　　　　　params: 是一个javascript对象，描述动画结束之后元素的样式。
　　　　　　speed:速度，单位是毫秒。
　　　　　　callback:回调函数，当整个动画执行完毕，接下来会调用回调函数。
5、操作类数组的方法：
　　1)each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象，$(this)代表被迭代的jQuery对象。i表示正在被迭代的对象的下标(从0开始)。
　　2)eq(index)：返回index+1位置处的jQuery对象
　　3)index(obj)：返回下标，其中obj可以是dom对象或者jQuery对象。
　　4)length属性：jQuery对象包含的dom对象的个数
　　5)get()：返回dom对象组成的数组
　　6)get(index)：返回index+1个dom对象。