整理一下当年的学习笔记之：Jquery

一、JavaScript回顾
EcmaScript -- 标准化组织提供脚本核心代码,其中定义了JavaScript的基本的语法
Dom -- W3C 提供的一套用来解读文档结构树的一套标准,目前驻留的浏览器都支持dom 
Bom -- 各个浏览器各自定义的一些Script方法 


Apatana
第一种配置方式：
1.解压Eclipse
2.在任意目录下，推荐就在Eclipse安装目录下（注意安装目录不包含中文空格）新建一个myplugins(随便起名)文件夹，再新建一个文件夹aptana(随便起)，在apatana文件夹中创建一个文件夹eclipse(固定名字)，将aptana相关的两个文件夹features plugins 拷贝到这个目录。
3.在eclipse安装目录下创建links文件夹，其中创建xxx.link 文件，其中书写 path=E:\\eclipse\\myplugins\\apatana 指向插件所在的eclipse目录
重启eclipse就可以了


第二种配置方式：
在eclipse安装目录下的dropins文件夹中创建aptana(随意起名字)文件夹，其中创建eclipse(固定名字)文件夹，将aptana相关的两个文件夹features plugins 拷贝进来就可以了
重启eclipse就可以了


二、Jquery
1. dom对象 -- Jquery对象
(1)dom对象转为jquery对象
jquery对象是$()这样的基本形式
想要将dom对象转换为jquery对象,只需用$(dom对象)包一下就可以了
(2)jquery对象转为dom对象
~1.可以向访问数组一样用[index]的方式将jquery对象转为dom对象
~2.可以调用jquery对象的get(index)获取封装的dom对象

2.选择器:利用选择器jquery可以快速的在页面中选取节点
(1)基本选择器
1、#id     用法: $(”#myDiv”);    返回值  单个元素的组成的集合
说明: 这个就是直接选择html中的id=”myDiv”
2、Element       用法: $(”div”)     返回值  集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a等等.


3、class          用法: $(”.myClass”)      返回值  集合元素
说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
4、*          用法: $(”*”)      返回值  集合元素
说明: 匹配所有元素,多用于结合上下文来搜索
5、selector1, selector2, selectorN      
用法: $(”div,span,p.myClass”)    返回值  集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素
p class=”myClass”
(2)层次选择器
1 、ancestor descendant
用法: $(”form input”) ;   返回值  集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

2、parent > child 用法: $(”form > input”) ;    返回值  集合元素
 说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素

3、prev + next
     用法: $(”label + input”) ;   返回值  集合元素
     说明: 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings
     用法: $(”form ~ input”) ;    返回值  集合元素
     说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.

5、选择所有兄弟使用siblings方法来获取
$("#two").siblings("div").css();
3.过滤器
(1)基础过滤选择器
1、:first 用法: $(”tr:first”) ;   返回值  单个元素的组成的集合
说明: 匹配找到的第一个元素
2、:last 用法: $(”tr:last”)   返回值  集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.
3、:not(selector) 用法: $(”input:not(:checked)”)返回值  集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
4、:even 用法: $(”tr:even”)   返回值  集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
5、: odd 用法: $(”tr:odd”) 返回值  集合元素
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
6、:eq(index) 用法: $(”tr:eq(0)”)    返回值  集合元素
说明: 匹配一个
7、:gt(index) 用法: $(”tr:gt(0)”)    返回值  集合元素
说明: 匹配所有大于给定索引值的元素.
8、:lt(index) 用法: $(”tr:lt(2)”)    返回值  集合元素  
     说明: 匹配所有小于给定索引值的元素.
9、:header(固定写法) 用法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
10、:animated(固定写法)   返回值  集合元素
说明: 匹配所有正在执行动画效果的元素 
(2)内容过滤选择器
1、:contains(text) 用法: $(”div:contains(’John’)”)    返回值  集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
2、:empty 用法: $(”td:empty”)   返回值  集合元素
说明: 匹配所有不包含子元素或者文本的空元素
3、:has(selector)
     用法: $(”div:has(p)”).addClass(”test”)    返回值  集合元素
     说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.
4、:parent 用法: $(”td:parent”)   返回值  集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.


(3)可见度过滤选择器
1、:hidden 用法: $(”tr:hidden”)  返回值  集合元素
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.

2、:visible 用法: $(”tr:visible”)  返回值  集合元素
说明: 匹配所有的可见元素.
(4)属性过滤器
1、[attribute] 用法: $(”div[id]“) ;  返回值  集合元素
说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
2、[attribute=value] 用法: $(”input[name='newsletter']“).attr(”checked”, true);    返回值  集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
3、[attribute!=value] 用法: $(”input[name!='newsletter']“).attr(”checked”, true);    返回值  集合元素
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
4、[attribute^=value] 用法: $(”input[name^=‘news’]“)  返回值  集合元素 
 说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!
5、[attribute$=value] 用法: $(”input[name$=‘letter’]“)  返回值  集合元素 
说明: 匹配给定的属性是以某些值结尾的元素.
6、[attribute*=value] 用法: $(”input[name*=‘man’]“)   返回值  集合元素
说明: 匹配给定的属性是以包含某些值的元素.
7、[attributeFilter1][attributeFilter2][attributeFilterN] 用法: $(”input[id][name$=‘man’]“)  返回值  集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.
(5)子元素过滤选择器
1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”)   返回值  集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.




2、:first-child
用法: $(”ul li:first-child”)    返回值  集合元素 
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.

3、:last-child
用法: $(”ul li:last-child”)      返回值  集合元素
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

4、: only-child
用法: $(”ul li:only-child”)   返回值  集合元素 
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
(6)表单对象属性过滤选择器
1、:enabled
用法: $(”input:enabled”)    返回值  集合元素
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
2、:disabled
用法: $(”input:disabled”)    返回值  集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的.
3、:checked 用法: 
$(”input:checked”)   返回值  集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.
4、:selected 用法: 
$(”select option:selected”)   返回值  集合元素
说明: 匹配所有选中的option元素.


(7)表单选择器
1、:input
用法: $(”:input”) ;   返回值  集合元素
说明:匹配所有 input, textarea, select 和 button 元素 
2、:text
用法: $(”:text”) ;  返回值  集合元素
说明: 匹配所有的单行文本框.
3、:password
用法: $(”:password”) ; 返回值  集合元素
说明: 匹配所有密码框.
4、:radio
用法: $(”:radio”) ; 返回值  集合元素
说明: 匹配所有单选按钮.
5、:checkbox
用法: $(”:checkbox”) ; 返回值  集合元素
说明: 匹配所有复选框
6、:submit 用法:
$(”:submit”) ;   返回值  集合元素
说明: 匹配所有提交按钮.
4.Dom操作
(1)内部插入
*   append(content) :向每个匹配的元素的内部的结尾处追加内容
*   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
*   prepend(content):向每个匹配的元素的内部的开始处插入内容
*   prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
(2)外部插入
*  after(content) :在每个匹配的元素之后插入内容 
*  insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面 
*  before(content):在每个匹配的元素之前插入内容 
*  insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 
(3)查找节点:利用选择器就可以查找节点
如果要获取属性,attr()
(4)创建节点:
创建节点: 使用 jQuery 的工厂函数 $(): $(html)
(5)删除节点:
remove()
empty()
(6)克隆节点
clone()
(7)替换节点
replaceWith
replaceAll
(8)操作属性

attr()

-------------------------------------------------------------

通过ID获取属性：$("#ID")
通过标签吗获取属性：$("标签名")
通过CLASS获取属性：$(".样式名")   //class==样式名
通过type获取  $(":type名")
获取所有的checkbox的元素  $(":checkbox")     被选中的 $(":checkbox:checked")    未选中的 $(":checkbox:not(:checked)") 
查找所有文本框   $(":text")      密码框 $(":password")    单选按钮 $(":radio")    图片域 $(":images")   重置按钮 $(":reset") ...
获取标签里的所有后代标签  $("form input")空格隔开      $("form input:first").text()  获取后代第一个标签的内容    last最后一个  odd奇数行 even偶数行
                                                       $("form input:first-child").text()    获取所有form标签的input标签的第一个元素 
                                                       $("form input:nth-child(?)").text()    获取所有form标签的input标签的第?个元素   ?可是odd、even、3n+1等
      $("ul li:only-child") 在ul中查找是唯一子元素的li元素内容
获取标签里的所有子代标签  $("form>input")空格隔开
获取标签同一级后面的第一个标签     $("form+input")
获取标签同一级后面的所有标签     $("form~input")
获取索引号的内容  $("table te:eq(1)").text()
查找索引大于的内容   eq 改成 gt       小于：  gt 改成lt
查找页面内所有标签为<h1><h2><h3>的标签  $(":header")
查找包含文本"john"的div元素个数     $("div:contains('john')")
查找所有P元素为空的元素     $("p:empty")
查找所有含有子元素或者文本的P元素个数      $("p:parent")     //空格或者不加元素不算在内
查找所有含有ID属性的div元素    $("div[id]")      查找ID有值的元素$("div[id='**']")      属性值以什么开头$("div[id^='**']")    以什么结尾 ^改成$    包含：*=
设置元素隐藏  $("tr:hidden")    可见:$(tr:visible)








     方法：
     创建一个标签  var $div=$("<div id='2015'>哈哈哈</div>")
     把一个jquery加到一个元素里面（后置）   jquery.append(jquery)
                                 （前置）   jquery.prepend(jquery)
     同级 -后置        after()
           前置        before()
     获取属性值         attr()   //括号里string 
     size()  元素个数      
     addClass() 加已经定义好的一个CSS样式
     css()  加key-value形成的CSS样式
     text（）  获取标签之间的内容，能用于XML，强调的是文本内容，有子标签只会打印子标签的内容
     attr()   为元素设置MAP值，比如check中   .attr（"checked","true"）代表将这个值选中
     each()   遍历 ，里面可以价function     function中this代表遍历的东西
     html()  获取标签之间的内容 ，不能用于XML，强调的是标签的内容，标签内有子标签也会显示出来
     val()   获取标签的值
     remove()  删除自己以及其后代节点
     val()：获取value属性的值
     val("")：设置value属性值为""空串，相当于清空
     text()：获取HTML或XML标签之间的值
     text("")：设置HTML或XML标签之间的值为""空串 
     clone()：只复制样式，不复制行为
     clone(true)：既复制样式，又复制行为
     replaceWith()：替代原来的节点
     removeAttr()：删除已存在的属性
     addClass()：增加已存在的样式
     removeClass()：删除已存在的样式
     hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
     toggleClass()：如果标签有样式就删除，否则增加样式
     offset()：获取对象的left和top坐标
     offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
     width()：获取对象的宽
        width(300)：设置对象的宽
        height()：获取对象的高
        height(500)：设置对象的高
     children()：只查询子节点，不含后代节点
        next()：下一下兄弟节点
        prev()：上一下兄弟节点
        siblings()：上下兄弟节点
     show()：显示对象
        hide()：隐藏对象
     fadeIn()：淡入显示对象
        fadeOut()：淡出隐藏对象
     slideUp()：向上滑动
         slideDown()：向下滑动
        slideToggle()：上下切换滑动，速度快点


     serialize()   序列化表单内容为字符串,用于Ajax请求。格式：var data = $(form).serialize();
     serializeArray()  序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据。注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
     








     window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
    ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化
      ready和onload同时存在时，二者都会触发执行，ready快于onload
    change：当内容改变时触发
    focus：焦点获取
    select：选中所有的文本值
    keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同
    mousemove：在指定区域中不断移动触发
    mouseover：鼠标移入时触发
    mouseout：鼠标移出时触发
    submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
    click：单击触发
    dblclick：双击触发
    blur：焦点失去