关于前端jquery的总结

• 简介

　　jQuery是一个JavaScript库，特性丰富，包含若干对象和很多函数，可以代替传统DOM编程的操作方式和操作风格，通过对DOM  API、DOM事件的封装，提供了一套全新的API，这套全新的API更简单更灵活，而且，jQuery考虑并解决了不同浏览器之间的兼容性问题，所以在使用jQuery进行编程的时候，不用顾虑兼容性问题，可以链式编程提高开发速度，有隐式迭代的效果，还有类似css选择器的强大功能。jQuery宗旨是：write less, do more.

• $对象和Jquery对象

　　就像DOM的编程入口是document对象一样，jQuery的编程入口是$对象，它是jQuery的核心对象。$对象也是一个函数对象，我们可以使用$()的形式调用它，传递给$()不同的参数可以做不同的事情，$函数异常强大！ $函数可以把若干个DOM对象包装进一个对象，这个对象称为jQuery对象，jQuery对象可以看成数组对象，此外还拥有一整套全新的方法

• Jquery选择器

　　jQuery的编程思路和DOM一样，先获取到要操作的元素，然后操作该元素。为了能准确的获取元素，jQuery站到了CSS的肩膀上——直接复制了CSS选择器语法。jQuery选择器中除了伪类选择器外绝大部分和CSS选择器相同

　　选择器类型：标签选择器、id选择器、类选择器、属性选择器、伪类选择器、复合选择器

　　语法：$( selector ) 或者 $( selector , parent )

• 属性选择器

　　[attr]选择有attr属性的元素

　　[attr=val] 选择以attr属性值为val的元素

　　[attr^=val]  选择以attr属性值以val开头的元素

　　[attr$=val]  选择以attr属性值以val结尾的元素

　　[attr*=val]  选择以attr属性值中包含val的元

• 伪类选择器

　　:first     第一个元素

　　:last      最后一个元素

　　:even    第偶数个

　　:odd     第奇数个

　　:eq(index)   第index个

　　:gt(index)    第index之后的

　　:lt(index)     第index之前的

　　:not( selector )     对括号里面的选择器取反

　　:first-child    第一个子元素

　　:last-child    最后一个子元素

　　:n-child       第n个子元素

• 复合选择器

　　selector1空格selector2   在1选中的元素中，使用2筛选其后代元素(2不要使用伪类选择器)

　　selector1>selector2       在1选中的元素中，使用2筛选其子元素

　　selector1~selector2    在1选中的元素中，使用2筛选其后续兄弟元素

　　selector1+selector2    在1选中的元素中，使用2筛选其后续紧邻的兄弟元素

　　selector1,selector2     各个选择器的并集

　　selector1(没有空格)selector2    各个选择器的交集（复合后可识别才可以这样使用）

• jQuery特性：隐式迭代

　　jQuery选择器可能会选中多个DOM元素，jQuery会把选中的多个DOM元素封装成一个jQuery对象，实际上是个JavaScript数组对象。对jQuery对象进行的操作实际上会对数组里面的每个元素都进行（个别操作只对第一个数组元素进行）

　　如：

　　$("div").css("backgroundColor", "lightgray"); //这句代码会把每一个div元素的背景色设置为浅灰色

　　隐式迭代特性配合jQuery选择器，使得使用jQuery进行编程十分简洁和高效。

　　当我们希望对jQuery对象包含的DOM对象进行不同的操作时，可以使用jQuery对象的each()方法主动遍历内部的每个DOM对象，并进行针对性处理

　　each用法：

　　$(selector).each(function(index,element)

　　{

　　　　//index选择器当前的索引位置，element是当前选择的元素

　　})

• Jquery操作元素属性

　　attr(attrName)                获取第一个元素的该属性的值

　　attr(attrName,value)      设置所有元素的该属性的值

　　attr(attrName,  function(index,  value){  })   设置所有元素的该属性的值，值由函数的返回值决定，index表示元素索引，value表示该属性的原值

　　atrr()函数无论对HTML元素固有的属性还是我们自定义的属性都有效，但对于类似复选框的checked属性，以及元素的那5个只读属性（offsetXxx），大家要使用jQuery对象的prop()函数来操作，但prop()函数对自定义属性无效。

• jQuery操作元素的CSS样式

　　操作元素的style属性

　　css(propName)

　　css(propName, value)

　　css(propName, function(index, value){  })

　　操作元素的class属性

　　addClass(class)

　　removeClass(class)

　　toggleClass(class)      切换class（如果存在就删除，如果不存在就添加）

　　注意：也可以使用attr()函数来操作style属性以及class属性，但是有风险，千万不要使用 。因为style属性的值可能有多个，但是使用attr的话，你重新赋的值会把之前已有的值全给删掉

• 操作元素的文本内容、子节点、元素值

　　html()                获取第一个元素的HTML内容（包括子元素和文本内容）

　　html(string)       设置所有元素的HTML内容（效果等同于DOM对象的innerHTML属性）

　　val()                   获取第一个元素的value属性的值（如果有value属性的话）

　　val(string)          设置所有元素的value属性的值

• 操作元素节点

　　$(html)                    创建元素节点

　　append(content)     插入子节点

　　before(content)       插入兄弟节点

　　remove()    删除元素自己

　　children()    获得元素的子元素

　　parent()      获得元素的父元素

　　prevall()      获得元素之前的兄弟元素

　　nextall()      获得元素之后的兄弟元素

　　siblings()     获得兄弟元素

• Jquery事件处理

　　文档加载完成事件

　　$(document).ready(function(){  });或者$(function(){  });

　　其他常见事件

　　jQuery提供了一系列如click()、focus()、mouseover()等方法，给元素注册对应的事件处理函数。如$("div").click( function(){  alter('xx') });  这句代码给所有div元素的点击事件注册了处理函数。特别的，jQuery提供了ready()函数来代替window的load加载事件，ready()可以在文档的DOM结构加载完成后就触发，而不必等到页面的图片等资源也加载完成，并且这些函数都可以多次使用

　　$(this)的使用

　　因为jQuery的隐式迭代特性，使用jQuery注册的事件处理函数中的this实际上是DOM对象，因此this可以调用DOM  API，也可以使用$(this)调用jQuery  API

　　例子代码：

$(document).ready(function(){
        $("div").click(function(){
                alert(this);
         });
});

• 链式编程

　　如果打算对一个jQuery对象做一组动作，使用jQuery的链式编程更优雅，为了支持链式编程，大部分jQuery方法的返回值还是此jQuery对象本身。

　　如：$("div").mouseout().click();

　　但有些jQuery方法返回的jQuery对象并不是原来的jQuery对象了（称为断链），这时可以使用end()返回断链之前的状态

　　如：$("#div01").siblings().html("other").end().html("div01");

　　但对于那些返回值不是jQuery对象的方法，就没办法把链接上了

　　$("div").html();