jquery（总结，特详细）

jquery
本质上是js,封装

JQuery对象：
jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象,
那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法

约定
如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象

var variable = DOM 对象

JQuery 对象转成 DOM 对象：
jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法,
不得不使用 DOM 对象的时候, 有如下两种处理方法:

(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
等待DOM元素都加载完毕，类似window.onload

JQuery对象：
jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象,
那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象

var variable = DOM 对象

$(document).ready()和Window.onload区别

1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简写方法
window.onload没有简化写法
$(document).ready(function())可以简写成$(function(){});

4.总结
以浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript 为 DOM 元素添加事件。
在常规的 Javascript 代码中，通常使用 window.onload 方法，
而在 Jquery 中，使用的是 $(document).ready() 方法。

$ (document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。

JQuery选择器允许对HTML元素组成单个元素进行操作
JQuery选择器基于元素的Id、类型、属性、属性值等(查找或选择)HTML元素。
它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

    **jQuery 中所有选择器都以美元符号开头：$()。**

基本选择器是JQuery 中最常用的选择器，也是最简单的选择器，它通过元素id 、class 和标签名等来查找DOM 元素。
在网页中，每个id 名称只能使用一次， class 允许重复使用。
1.* 匹配所有元素 (集合元素)
$("*")
2.#id 根据给定的id匹配一个元素 (单个元素)
$("#test")选取id为test的元素
3. element 根据给定的元素匹配元素(集合元素)
$(“p”)选取所有的

元素
4. .class 根据给定的类名匹配元素(集合元素)
$(".test")选取所有class为test的元素
5. selector1,selector2,.selectorN 将每个选择器匹配到的元素合并到一起返回(集合元素)
$ (div,span,p.myclass) 选取所有
<div> <span>和拥有class为myClass的

标签的一组元素。
如果想通过DOM 元素之间的层次关系来获取特定元素，
例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。
1.$ (“ancestor descendant”) 选取ancestor元素里的所有后代元素
例：$(“div span”) 返回div里所有元素
$(".container p")返回class为container的所有p元素。

2.$ (“parent>child”) 选取parent元素下的child子元素
例:$ (“div>span”)选取

元素下的元素名是 的子元素。
$("#main> *")选择id值为main的所有子元素。

3.$ (“prev+next”)选取紧接在prev元素后的next元素
例:$(".one+div")选取class为one的下一个<div>同辈元素。
$(“label + input”)选择所有label元素的下一个input元素。

4.$ (“prev~siblings”)选取prev元素之后的所有siblings元素
例:$("#two~div")选取id为two的元素后面的所有<div>同辈元素。
$("#prev~#div1 ")选择id为prev的元素后面所有id为div1的div同辈元素。

注意:
注意$ (“div span”)和$(“div>span”)是有区别的
$ (“div span”)会选取div里所有的元素。
而$ (“div>span”)只会选取<div>直属的<span>子元素。
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM 元素，
过滤规则与css 中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。
按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、
属性过滤、子元素过滤和表单对象属性过滤选择器。

基本过滤选择器：

1. first
   示例:$(“p:first”) 选取第一个<p>元素
2. :last
   示例：$ (“p:last”) 选取最后一个

   元素
   3.:even
   示例:$ (“tr:even”) 所有偶数<tr>元素
   4.:odd
   示例:$ (“tr:odd”) 所有奇数 <tr> 元素
   5.eq(index)
   示例:$ (“ul li:eq(3)”) 列表中第四个元素(index从0开始)
   6.:gt(no)
   示例:$ (“ul li:gt(3)”) 列出 index 大于 3 的元素
   7.:hidden
   示例: $ (“p:hidden”) 所有隐藏的 <p>元素
   8.:visible
   示例:$ (“table:visible”)所有可见的表格
   9.[attribute]
   示例:$ ([href]) 所有带有href属性的元素
   10.[attribute=value]
   示例:$ ([href=’#’]) 所有 href 属性的值等于 “#” 的元素
   11.[attribute!=value]

可视化过滤选择器：
$(“div:hidden”) 选择所有的被hidden的div元素
$(“div:visible”) 选择所有的可视化的div元素

属性过滤选择器：
$(“div[id]”) 选择所有含有id属性的div元素
$(“input[name=‘newsletter’]”) 选择所有的name属性等于’newsletter’的input元素
$(“input[name!=‘newsletter’]”) 选择所有的name属性不等于’newsletter’的input元素
$(“input[name^=‘news’]”) 选择所有的name属性以’news’开头的input元素
$("input[name$=‘news’]") 选择所有的name属性以’news’结尾的input元素
$(“input[name*=‘man’]”) 选择所有的name属性包含’news’的input元素
$("input[id][name$=‘man’]") 可以使用多个属性进行联合选择，
该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器：
$ (“ul li:nth-child(2)”),$("ulli:nth-child(odd)"),$(“ul li:nth-child(3n + 1)”)

$ (“div span:first-child”) 返回所有的div元素的第一个子节点的数组
$ (“div span:last-child”) 返回所有的div元素的最后一个节点的数组
$ (“div button:only-child”)返回所有的div中只有唯一一个子节点的所有子节点的数组

为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。
利用表单选择器，能够极其方便地获取到表单的某个或某些类型的元素。

表单选择器：
:input $(":input") 所有 元素
:text $(":text") 所有 type=“text” 的 元素
:password $(":password") 所有 type=“password” 的 元素
:radio $(":radio") 所有 type=“radio” 的 元素
:checkbox $(":checkbox") 所有 type=“checkbox” 的 元素
:submit $(":submit") 所有 type=“submit” 的 元素
:reset $(":reset") 所有 type=“reset” 的 元素
:button $(":button") 所有 type=“button” 的 元素
:image $(":image") 所有 type=“image” 的 元素
:file $(":file")所有type="file"的<input>元素在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在jQuery里可以用更加简单的方法代替，所以使用的几率相对少些。可以使用next（）方法来代替$（＇prev + next＇）选择器，
nextAll（）方法来代替$（＇prev～siblings’）选择。
siblings()方法来补充nextAll()方法的不足。

选择方法:
1.next() 等价于$ (“prev + next”)。
2.nextAll() 等价于$ (“prev～siblings”)
3.siblings() 类似$ (“prev～siblings”)，但无关前后，选择所有同辈节点
4.children() 获取匹配元素的所有子元素
5.parent() 获取匹配元素的父元素
6.parents() 获取匹配元素的所有父元素

查找元素节点
通过jQuery选择器，直接可以获取到节点元素。
例1：查找元素节点p返回p内的文本内容$(“p”).text();

查找节点属性prop
获取到需要的元素节点后，可以使用attr()方法来获取它的各种属性值。
attr()方法的参数可以是一个，也可以是两个，当参数为一个时，是要查询的属性名字。
例2：查找元素节点p的属性返回属性名称对应的属性值$(“p”).attr(“title”),返回p的属性title的值。

1.创建元素节点
创建元素节点并且把节点作为

• 元素的子节点添加到DOM节点树上。
  先创建元素点，创建元素节点使用Jquery的工厂函数 $()来完成，格式如下：$(html),该方法会根据传入的html字符串返回一个DOM对象，
  并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下：
  $ li1=$ (" <li></li>")
  代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下：
  $ (“ul”).append($li1);
  添加后页面中只能看到 <li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。

2.创建文本节点
使用JQuery的$()同样能够创建文本节点，创建文本节点的JQuery代码如下：
　　　　 $ li2=$ ("<li>菠萝</li>");
代码返回$li2就是一个由DOM对象包装成JQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：
$("ul").append($li2);

3.创建属性节点
$ li3=$ ("<li title='榴莲'>榴莲</li>");　
代码返回$li3也是一个由DOM对象包装成JQuery对象，把新建的属性节点添加到DOM树中JQuery代码如下：
$ (“ul”).append($li3);

在jQuery 中还提供了其他几种插入节点的方法：

1.append() 向每个匹配的元素内部追加内容
2.appendTo()将所有匹配的元素追加到指定的元素中。
实际上，使用该方法是颠倒了常规的$(A).append(B）的操作，
即不是将B 追加到A 中，而是将A 追加到B 中。

3.prepend() 向每个匹配的元素内部前置内容

4.prependTo() 将所有匹配的元素前置到指定的元素中。
实际上，使用该方法是颠倒了常规的 $(A).prepend(B）的操作，
即不是将B 前置到 A 中，而是将A 前置到B 中

5.after() 在每个匹配的元素之后插入内容

6.insertAfter() 将所有匹配的元素插入到指定元素的后面。
实际上，使用该方法是颠倒了常规的$(A).after(B）的操作，
即不是将B 插入到A后面，而是将A 插入到B 后面

7.before() 在每个匹配元素之前插入内容

8.insertBefore()将所有匹配的元素插入到指定的元素的前面，
实际上，使用该方法是颠倒了常规的$(A).before(B）的操作，
即不是将B 插入到A前面，而是将A 插入到B 前面
如果文档中某一个元素多余，那么应将其删除。

jQuery 提供了三种删除节点的方法
即remove(), detach()和empty()。
1.remove()方法从DOM 中删除所有匹配的元素，传入的参数用于根据jQuery 表达式来筛选元素。
当某个节点用remove（）方法删除后，该节点所包含的所有后代节点将同时被删除。
这个方法的返回值是一个指向己被删除的节点的引用，因此可以在以后再使用这些元素。
$(“ul”).remove();

2.empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

修改文档中的元素节点可以使用多种方法
:复制节点、替换节点、包裹节点。
1、复制节点$ (element).clone()
复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为。
例:$(“ul li:eq(0)”).clone(true);

2、替换节点$ (element).repalcewith()、$(element).repalceAll()replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。replaceAll()方法与replaceWith（）方法的作用相同，只是颠倒了replaceWith（）操作3、包裹节点$ (element).wrap()、$ (element).wrapAll()、$ (element).wrapInner()
包裹节点方法使用其他标记包裹目标元素从而改变元素的显示形式等，并且该操作不会破坏原始文档的词义。

包裹节点有三种实现形式
wrap();wrapAll();wrapInner();
(1)wrap()方法如下：$(dstelement).wrap(tag);例：
$ (“p”).wrap("");该示例方法使用b标签包裹所有的p元素每个元素都使用b标签包裹。
(2)wrapAll()方法如下：$(dstelement).wrapAll(tag);例：
$ (“p”).wrapAll("");访示例方法使用b标签包裹所有的p元素，所有的p元素标签用一个b标签包裹。
(3)wrapInner()方法如下：$(dstelement).wrapInner(tag);例：
$(“strong”).wrapInner("");该示例使用b标签包裹每个一strong元素的子元素。

Dom元素的其他操作:属性操作、样式操作、设置和获取HTML,文本和值、遍历节点操作、Css-Dom操作。

1、属性操作attr()和removeAttr()
(1)attr()方法能够获取元素属性，也能能够设置元素属性。
方法如下，当attr(para1)方法有个参数时候用于获得当前元素的para1的属性值，
当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue;例：
$(“p”).attr(“title”);该示例用于获得p元素的title属性值
$(“p”).attr(“title”,“你最喜欢的水果”);该示例设置p元素的title属性值为"你最喜欢的水果";
如果一次设置多个属性值可以使用“名/值”对形式，例：
$(“p”).attr({“title”:“你最喜欢的水果”,“name”:“水果”})。该示例一次设置两个属性值。

(2) removeAttr()方法用于删除特定的属性，方法是在参数中指定属性名。例：
$ (“p”).removeAttr(“name”);该方法就是移除p元素的name属性。
css()方法用于获取、设置元素的一个或多个属性。方法如下：$ (selector).css();例：

$(“p”).css(“color”,“red”);该示例用于设置元素的颜色属性为红色;

$(“p”).css(“color”)该示例用于获得元素的color样式值;

$(“p”).css({“font-size”:“30px”,“backgroundColor”,"#888888"});该示例用于设置元素的多个样式。

对于高度和宽度的操作，jQuery提供了height()和width()方法直接获取和设置。
获取<p>元素的宽度 $(“p”).width();
设置<p>元素的高度 $ (“p”).height(“100px”);

1.html()方法获得或设置某个元素的html元素。方法如下:$(selector).html();
$(“p”).html();该示例获得元素p的html内容。
$(“p”).html("<strong>添加html内容</strong>");该示例设置p的html内容为”<strong>添加html内容</strong>“;

2.text()方法获得或设置某个元素的文本值。方法如下:$(selecotr).text();例：
$(“p”).text();该示例获得元素p的text文本内容。
$(“p”).text(“重新设置的文本内容”);该示例设置元素p的text文本为"重新设置的文本内容";

3.val()方法获得或设置某个元素的值，如果元素值是多选则以数组形式返回，方法如下：$(selector).val();
例:文本元素
$("#userName").val();获得input元素的值。
$("#userName").val(‘zhangsan’);设置input元素的值为’zhangsan’。
val()方法的不仅能操作input，最重要的一个用途用于select、checkbox、radio。

例：在下拉框下的多选赋值应用

$("#fruits").val([‘苹果’,‘香蕉’]);该示例使select中苹果和香蕉两项被选中。
1.设置样式和获取样式
class 也是节点元素的属性，因此获取class 和设置class 都可以使用attr()方法来完成。

2.追加样式
直接使用attr()方法设置class属性，会将原来的class属性替换掉。
如果在添加新的样式时，还需要保留原有样式，可以使用addClass()方法。
注意：当一个节点元素包含了多个class样式时，将按照以下方式进行处理：
(1) 如果给一个元素添加了多个 class 值， 那么就相当于合并了它们的样式。
(2) 如果有不同的 class 设定了同一样式属性， 则后者覆盖前者。

3.移除样式
如果要删除class某个值，可以使用removeClass()方法完成，
它的作用是从匹配的元素中删除全部或者指定的class。
不传递参数时，删除所有；给定参数时只删除指定的class。

4.判断是否含有某个样式
hasClass()方法可以用来判断元素中是否包含某个class，如果有则返回true，否则返回false。
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作。
常见的元素点击事件、鼠标事件、键盘输入事件等，
较Javascript相比JQuery增加并扩展了基本的事件处理机制，极大的增强了事件处理的能力。–>

DOM加载事件
页面加载完毕后浏览器会通过javascript为Dom元素加载事件，
使用Javascript时候使用的是window.onload方法，而Jquery使用的是$(document).ready()方法

$ （document).ready方法是事件模块中最重要的一个函数，可以极大地提高Web 应用程序的响应速度。
jQuery 就是用$ （document) .ready（）方法来代替传统JavaScript 的window.onload 方法的。
通过使用该方法，可以在DOM 载入就绪时就对其进行操纵并调用执行它所绑定的函数。
在使用过程中，需要注意$（document) .ready（）方法和window.onload 方法之间的细微区别：
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法
window.onload没有简化写法
$ (document).ready(function(){})可以简写成$(function(){});
文档装载完成后，如果打算为元素绑定事件来完成某些操作，
则可以使用bind（）方法来对匹配元素进行特定事件的绑定，
bind（）方法的调用格式为：
bind(type,[data], fn);
第1 个参数是事件类型，类型包括： blur、focus 、load 、click、mousedown 、mouseup 、mouseover 、mouseout 、change 、select、submit 等， 当然也可以是自定义名称。
第2 个参数为可选参数，作为event.data 属性值传递给事件对象的额外数据对象。
第3 个参数则是用来绑定的处理函数。

unbind()方法为元素取消事件绑定，unbind()方法的格式如下：
$ (selctor).unbind([type],[data]);
unbind()方法是元素bind()方法的反向操作，从每个匹配的元素中删除绑定的事件。
当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。
如果指定了事件类型，第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。

bind()方法可以为任何元素绑定事件。
但对于一些常用的事件，jQuery还提供了更加简便的事件方法来完成相就的操作，下表列举了几个常用事件方法：
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector). blur(function) 触发或将函数绑定到被选元素的失去焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
$ (selector).mouseout(function) $ (selector).mouseout(function)
jQuery 有两个合成事件hover()方法和toggle()方法，类似前面讲过的ready（）方法，
hover()方法和toggle（）方法都属于jQuery 自定义的方法

1.hover（）方法
hover()方法用于模拟光标悬停事件。方法格式：hover(enter,leave)。
当光标移动到元素上时，会触发指定的第1 个函数(enter);
当光标移出这个元素时，会触发指定的第2 个函数(leave) 。
2.toggle()方法
toggle()方法可以切换元素的可见状态。方法格式：toggle(fun1,fun2,…,funN);
如果元素是可见的， 切换后则为隐藏；如果元素是隐藏的，切换后则为可见的。
show（）方法和hide（）方法是jQuery 中最基本的动画方法。
在HTML 文档里，为一个元素调用hide()方法，会将该元素的display 样式改为“none’’。
当把元素隐藏后，可以使用show（）方法将元素的display 样式设置为先前的显示状态
（“block ”或“ inline ”或其他除了“none ”之外的值）。

show（）方法和hide（）方法在不带任何参数的情况下，相当于css（”display’’,"none/ block/inline），
作用是立即隐藏或显示匹配的元素，不会有任何动画。
如果希望在调用show（）方法时，元素慢慢地显示出来，可以为show（）方法指定一个速度参数，

例如，指定一个速度关键字“ slow 、normal、 fast”。应时间为0.6秒、0.4秒和0.2秒
也可设置整数指定执行时间数字计数级别是毫秒 slow 、normal、 fast实际上相当于600、400、200的值，
用来设定整个显示/隐藏过程消耗多少毫秒。

如：(“p”).show(1000);该示例使p元素中1秒内显示完毕。也能添加回调事件函数。

比如用attr(“checked”)获取checkbox的checked属性时选中的时候可以取到值,
值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，
以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
反射：实现所有实体的增删改查工作（jQuery，json）
jquery.ready()方法实现了当页面加载完成才执行的效果，
window.onload事件是在页面所有的资源都加载完毕后触发的
$(document).ready(function(){
}）；