Web基础之jQuery（一）

概述：
1）jQuery是一种框架，对于浏览器的兼容问题，95％不用再去考虑了。
2）jQuery利用选择器（借鉴了CSS选择器的语法）查找要操作的节点（DOM对象），然后将这些节点封装成一个jQuery对象（封装的目的有两个：①是为了兼容不同的浏览器。②也为了简化代码）。通过调用jQuery对象的方法或者属性来实现对底层的DOM对象的操作。
3）jQuery特点简单概括就是：选择器 + 调方法。
【注意： jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别在于 2.x 不再兼容 IE6、7、8浏览器，这样做的目的是为了兼容移动端开发。由于减少了一些代码，使得该版本比 jQuery 1.x 更小、更快。
jQuery 每一个系列版本分为：压缩版(compressed) 与 开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）】
+ 使用：
1）引入jQuery框架（http://www.jquery.org下载），min为去掉所有格式的压缩版；

<script language="javascript" src="js/jquery-1.4.1.min.js"></script>

2）用选择器查找要操作的节点（该节点会被封装成一个jQuery对象，并返回）

var $obj=$(‘#d1’);//ID选择器，查找的节点ID为d1

3）调用jQuery对象的方法或者属性

$obj.css('font-size','60px');//调用jQuery的css()方法

【注意：jQuery是一个大的匿名函数，且内部有很多函数（类似Java中的内部类），它的大部分函数返回对象都是jQuery对象（它自己），所以可以继续“．”；】

• jQuery对象与DOM对象相互转换：
  1）dom —> jQuery：$(dom)即可；如：var obj=document.getElementById(“id”); var $obj=$(obj);
  2）jQuery —> dom：① $obj.get(0); ② $obj.get()[0];
  【注意：Dom对象与jQuery对象是不同的。】
• 同时使用prototype与jQuery:
  1）先导入prototype.js，再导入jQuery.js；//必须注意顺序；
  2）将jQuery的$函数换一个名字：var $a=jQuery.noConflict();//注意大小写
• EL表达式与jQuery表达式的区别：
  1）${}：EL表达式，在服务器端运行（JSTL标签库也在服务器端运行，EL和JSTL标签库本质是Java代码）。
  2）$()：jQuery函数，在浏览器中运行（JavaScript也在浏览器中运行）。

选择器
jQuery模仿CSS选择器的语法提供了一种用来方便查找要操作的节点的语法规则。
基本选择器：
1）#id：ID选择器，如：$(‘#d1’).css(‘color’,’red’);
2）.class：类选择器，如：$(‘.s1’).css(‘font-size’,’60px’);
3）element：元素选择器，如：$(‘div’).css(‘font-size’,’60px’);
4）selector1,selector2…selectorn：选择器合并，如：$(‘#d1,p’).css(‘font-size’,’60px’);
5）：所有选择器，如：$(‘‘).css(‘font-size’,’60px’);
【注意：当jQuery选择器查找到了多个DOM节点，则仍然是封装成“一个”jQuery对象，在调用jQuery对象的属性或者方法时，默认情况下，会作用于底层所有的DOM节点之上。】
层次选择器
1）select1 select2：所有后代（要符合select2的要求）。
如：$(‘#d1 div’).css(‘font-size’,’60px’);
2）select1>select2：只考虑子节点（要符合select2的要求），孙子不管～
如：$(‘#d1>div’).css(‘font-size’,’60px’);
3）select1+select2：下一个兄弟（要符合select2的要求），儿子不管～
如：$(‘#d3+div’).css(‘font-size’,’60px’);
4）select1~select2：下面所有的兄弟（要符合select2的要求），上面的兄弟不管～兄弟中的儿子也不管～
如：$(‘#d2~div’).css(‘background-color’,’yellow’);

基本过滤选择器
1）:first：第一行。
2）:last：最后一行。
3）:not(selector)：把满足要求的选择器排除在外。
4）:even：偶数索引，下标从0开始。
5）:odd：奇数索引，下标从0开始。
6）:eq(index)：等于下标的元素，下标从0开始。
7）:gt(index)：大于下标的元素，下标从0开始。
8）:lt(index)：小于下标的元素，下标从0开始。
9) :header：选择所有标题元素；
10）:lang(language)：选择指定语言的所有元素
11）:root：选择该文档的根元素
12) :animated：选择所有正在执行动画的元素
使用：如：$(‘#t1 tr:first’).css(‘background-color’,’#cccccc’);
【注意：过滤器前是没有空格的。是xx:first而不是xx :first。】
内容过滤选择器
1）:contains(text)：匹配包含给定文本的元素。
2）:empty：匹配所有不包含子元素或者文本的空元素。
3）:has(selector)：匹配含有选择器所匹配的元素的元素。
4）:parent：匹配含有子元素或者文本的元素（与empty正好相反）。
使用如：$(‘div:empty’).css({‘width’:’400px’, ‘height’:’80px’,’border’:’2px solid red’});
可见性过滤器
1）:hidden 匹配所有不可见元素，或者type为hidden的元素。
2）:visible 匹配所有的可见元素。
属性过滤器
1）[attribute]：有某个属性的元素。如：$(‘div[id]’).css(‘font-size’,’60px’);
2）[attribute=value]：某个属性的值与指定的值相同的元素。
如：$(‘div[id=d1]’).css(‘font-size’,’60px’);
3）[attribute!=value]：某个属性的值与指定的值不相同的元素。
如：$(‘div[id!=d1]’).css(‘font-size’,’60px’);
4) [attr^=value]：用value开关的元素
5) [attr$=value]：用value结尾的元素
6) [attr|=value]：只包含value的元素
7) [attr~=value]：查找有包含连字符和value的元素
8) [attr*=value]：包含value的元素；
子元素过滤选择器
1）:nth-child(index/even/odd)：对符合条件的每个节点的子节点作相同操作。
如：$(‘ul li:nth-child(2)’).css(‘font-size’,’60px’);
【注意：子元素过滤器中index从1开始。基本过滤器中eq的index从0开始。】
2）:first-child：选择所有父元素下的第一个子元素，如：$(‘.first-div a:first-clild’)
3）:last-child：选择所有父元素下的最后一个子元素，如：$(‘.first-div a:last-child’)
4）:nth-last-child(n)：选择所有符合条件的第n个子元素，从最后一个开始
表单对象属性过滤选择器
1）:enabled：没有被禁用。
如：$(‘#form1 input:enabled’).attr(‘disabled’,true);//设置属性，可见元素为不可见
2）:disabled：被禁用。
如： $(‘#form1 input:disabled’).attr(‘disabled’,false);//设置属性，不可见元素为可见
3）:checked：单选框、多选框中被选中的选项。
如：alert($(‘#form2 input:checked’).val());//把值输出，类似于value属性
4）:selected：下拉列表中被选中的选项。
如：alert($(‘#form3 option:selected’).val());
表单选择器
1）:input：input元素。
2）:text：文本框。
3）:pasword：密码框。
4）:radio：单选。
5）:checkbox：多选。
6）:submit：提交按钮。
7）:image：图片。
8）:reset：重置按钮。
9）:button：普通按钮。
10）:file：文件。
11）:hidden：隐藏域。
【注意：可组合使用，如 $(‘:input:text’)//所有input元素中类型为text的元素】
this选择器
1）this：表示当前的一个上下文对象是一个html对象，可以调用html对象所拥有的属性和方法
2) $(this)：代表的上下文对象是一个jQuery的上下文对象，可以调用jQuery的方法和属性值。

DOM操作
查询：利用选择器找到要操作的节点之后，获得节点的值、属性值、文本以及html内容。
1）html()：html内容。如：alert($(‘#d1’).html())，相当于innerHTML属性，下例中也会把span输出（输出标记中的所有内容），即<span>hello jQuery</span>。
【$(document).ready(function() {$(“div”).html(“hello”);});//read的作用是等页面加载完成】
2）text()：文本，如：alert($(‘#d1’).text())，相当于innerText属性，返回一个字符串，包含所有匹配元素的合并文本。只输出文本内容hello jQuery（标记中的文本内容）。
3）val()：节点的值，如：alert($(‘#username’).val())，结果为文本框中输入的值。从用于设置表单的值，对select元素，若没有选择则返回null,若是多选则返回一个数组。
4）attr()：属性值，如：alert($(‘#d1’).attr(‘id’))，结果为d1。
【注意：此外，这几个方法也可以用来修改节点的内容、值、文本内容、属性值。】
创建：$(html);//直接写html语句即可，如：var $obj=$(‘<div>常</div>’);

插入节点：
1）append()：向每个匹配的元素内部最后追加内容（添加的元素作为最后一个孩子。如：var $obj=$(‘<div>抗金英雄</div>’); $(‘body’).append($obj);
appendTo()：把所有的匹配的元素追加到另一个，指定的元素集合中。如$(A).appendTo(B);//与append(B)的操作相反，这里是把A添加到B中。

2）prepend()：向每个匹配的元素内部最前添加内容（添加的元素作为第一个孩子。如：var $obj=$(‘<div>抗金英雄</div>’); $(‘body’).prepend($obj);
prependTo()：同appendTo()，插入方向不同。

3）after()：向每个匹配的元素之后插入内容（在该元素之后添加兄弟节点）。如：$(‘ul’).after(‘<p>hello</p>’);

4）before()：向每个匹配的元素之前插入内容（在该元素之前添加兄弟节点）。如：$(‘ul’).before(‘<p>hello</p>’);
insertBefore()/insertAfter()：功能相同，方向不一样。
【注意：都可以简化为：$(‘body’).append/prepend/after/before(‘<div>抗金英雄</div>’);】

删除节点：
1）remove()：删除节点(包括该节点所有子节点)，如：$(‘ul li:eq(1)’).remove();
2）remove(selector)：删除满足selector的节点，如：$(‘ul li’).remove(‘#l2’);
3）empty()：清空节点(并不删除节点，只是清空所有节点内容)，相当于innerHTML=“”，如：$(‘ul li:eq(1)’).empty();
4）detach()：从当前页面中移除该元素，但保留这个元素的内存模型对象。当使用append后，又会重新回到文档流中，且所有绑定的事件及附加的数据都会保留下来。【注意：是jQuery特有的方法】

复制节点：
1）clone()：复制节点（不复制行为）。
2）clone(true)：使复制的节点也具有行为（将事件处理代码一块复制）。

替换节点：
1）replaceWith(newContent)：用提供的内容来集合中所有匹配的元素，并返回被删除后的元素的集合。
2）replaceAll(target)：用集合的元素替换每个目标元素。功能同replaceWith()，但方向相反。

DOM包裹
1）wrap(wrappingElement/function)：将元素用其他元素包裹起来，即给它增加一个父元素。如：$(‘p’).wrap(‘<div></div>’)

2）unwrap()：删除选中元素的父元素，保留自身（和兄弟元素）在原来的位置。如：$(‘p’).upwrap()

3）wrapAll(wrappingElement/function)：将集合中的元素都其他元素包裹起来，即增加一个父元素。如：对所有<p>添加一个<div>：$(‘p’).wrapAll(‘<div></div>’)

4）wrapInner(wrappingElement/function)：将合集是的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素。如：给<div>p元素</div>所有元素增加一个<p>包裹为<div><p>p元素<p></div>，$(‘div’).wrapInner(‘<p></p>’)

节点属性：
1）attr(‘attrName’)：读取属性。
2）attr(‘attrName’,’value’)：设置一个属性。
3）attr({“attrName1”:”value1”,”attrName2”:”value2”})：设置多个属性。
【注意：此处属性名可不用引号（单引或双引），但属性值必须用引号！不要把样式当属性了。】
4）removeAttr(‘attrName’)：删除属性。

样式操作：
1）attr(‘class’,”)或者attr(‘style’,”)：读取和设置。
如：$(‘#d1’).attr(‘style’,’color:red;font-style:italic;’);
2）addClass(‘’)：追加。不会替换现代战争样式类名，只是简单的添加一个样式类名到元素上，如：$(‘#d1’).addClass(‘s1 s2’);//追加s1和s2两种样式
3）removeClass(”) ：移除。如：$(‘#d1’).removeClass(‘s1’);//移除样式s1
4）removeClass(‘s1 s2 …sn’) ：移除多个样式。
如：$(‘#d1’).removeClass(‘s1 s2’);//移除样式s1和s2
5）removeClass()：删除所有样式。
6）toggleClass(”)：样式来回切换，有该样式就删除，没有就添加。
如：$(‘#d1’).toggleClass(‘s3’);//样式s3一会有一会没（来回切换）
7）hasClass(‘’)：是否有某个样式。
如：alert($(‘#d1’).hasClass(‘s3’));//返回值true或false
8）css(‘’)：只能读取style样式里某个属性的值。
【注意：注意事项：无法读取某个样式类。】

例如：<div id="d1" style="font-size:60px;" class="s3">hello jQuery</div>，则
    alert(\$('#d1').css('font-size'));
   只能读出60px，若写alert(\$('#d1').css('s3'));则内容为空，读不出来。

9）css(‘’,”)：设置一个CSS样式。如：$(‘#d1’).css(‘border’,’1px solid red’);
10）css({‘’:”,”:”})：设置多个样式。
如：$(‘#d1’).css({‘border’:’1px solid red’,’font-size’:’50px’});
【注意：.addClass()是通过增加class名的方式，为外部样式；.css是内联样式直接附加到元素上，故其优先级要高于.class；一般静态结构，都确定好了布局的规则可用addClass方法；若是动态HTML，不确定规则或常变化的情况下，一般使用.css】

遍历节点
1）children()：只考虑子元素（孩子），不考虑其它后代元素（孙子）
2）children(selector)：只考虑子元素（孩子），不考虑其它后代元素（孙子），然后还要满足selector的要求（再次过滤）
3）next()：下一个兄弟
4）next(selector)：下一个兄弟，然后还要满足selector的要求（再次过滤）
5）prev()：上一个兄弟
6）prev(selector)：上一个兄弟，然后还要满足selector的要求（再次过滤）
7）siblings()：兄弟们（上下都算）
8）siblings(selector)：兄弟们（上下都算），然后还要满足selector的要求（再次过滤）
9）find(selector)：从某一种节点开始查找所有符合selector要求的后代
【注意：$(‘.item-ii’).find(‘li’) 等价于 $(‘li’, ‘.item-ii’)(找到类名为item-ii的标签下的li标签)】
10）parent()：父节点
11）parents()：所有祖先节点；parents(selector)：按条件找到祖先节点
12）closest(selector)：同parents()，向上找到第一个匹配的元素。，区别在于：parents()始于父元素，closest()始于当前元素；parents()一直向上找到根元素，返回一个集合，closest()遍历到第一个匹配的元素，返回一个元素或空。
13）add()：添加新元素，并几乎可接受斜体的$(),包括现代战争jQuery选择器表达式，DOM元素或HTML片段
14）each()：类似一个for循环迭代器，迭代jQuery元素集合中的每个元素。

博客地址：Web基础之jQuery（一）