第一部分jQuery基础
最后导入的库对$有控制权，释放$控制权可以用Conflict()；此后jQuery中的$符号要用jQuery代替。例如：jQuery(‘h3’).click(function(){......});
fadeOut(‘fast’/’slow’)；淡出
fadeIn();//淡入
slideUp(‘fast’/’slow’)；减小高度直至隐藏
slideDown();
父元素、子元素、兄弟元素、祖先元素、后代元素。
父元素是直接位于一个元素之上的元素，子元素相反。子元素一定是后代元素，但后代元素不一定是子元素。一个元素之上的所有元素都是该元素的祖先元素。父元素一定是祖先元素，祖先元素不一定是父元素。
JS变量可以存放任何类型的数据，为了标记处存放jQuery对象的变量，人为地在该变量前面加上$。例如var$test=$(‘h3’);var testHTML=$test.html();
jQuery对象和DOM对象的相互转换：
1.jQuery对象转成DOM对象
用get()方法，语法get([index]);index可以为负数，返回倒数第|index|个元素的DOM对象。例如：$(‘li’).get();//不带参数会返回所有匹配元素的DOM对象，放在一个数组里。
例如：var test=$(‘li’).get();alert(test[0].interHTML);var test=$(‘li’).get(-1);
2.DOM对象转换成jQuery对象
用$()包起来即可。
例：var$test=$(ElementsByTagName(‘li’));$test.eq(0).html();
jQuery选择器
分类：基本选择器、过滤选择器、层次选择器、表单选择器
可以同时制定任意多个选择器并用，相连接，会将匹配到的元素合并到一个结果中，例如：$(‘h3,.hot,#id’)选择h3、class属性为hot、id为id的元素。
与element、#id选择器相比，.class选择器的执行效率低，可以把.class选择器和element选择器配合在一起使用，显著提升搜索性能。例如：$(‘div.bottom’);
基本过滤选择器（index从0开始）
:first、:last、:even偶数、:odd奇数、:eq()、:gt()、:lt()、:not(selector)、:header所有标题元素、:animated所有正在执行动画的元素
子元素过滤选择器（index从1开始）
:first-child、:last-child、:only-child、:nth-child(odd)、:nth-child(even)、:nth-child(index)、:nth-child(e quation)选取符合equation的子元素，例如$(“p:nth-child(3n+)”);
内容过滤选择器
:contains(text)选取含有文本内容为text的元素（包括后代元素含有text也算，大小写敏感）:has(selector)选取含有后代元素为selector的元素
:parent选取含有后代元素或文本的非空元素
:empty选取不包含后代元素和文本的空元素
注：input、img、br、hr等标签天然地就属于不包含后代元素和文本的空元素
可见性过滤选择器
:hidden选取不可见元素
:visible选取可见元素
Display取值为none的元素、属性type为hidden的<input>元素、宽和高设置为0的元素都属于不可见元素。属性visibility取值为hidden的元素虽然不可见，但是如果占据空间，则依旧符合:visible选择器，并不会被:hidden选择器选中。
属性过滤选择器
[attr]选取使用attr属性的元素，例如：$(‘div[class]’);
[attr=value]attr恰好单独包含value的元素、[attr!=value]、[attr~=value]选取attr属性用空格分隔的值中有一个为value的元素，例如$(‘div[class~=top]’、[attr^=value]、[attr$=value]结束、[attr*=value]包含value的元素。
注：可以同时指定任意多个属性过滤选择器，例如$(‘div[class=top’][id]’);
层次选择器
Selector1selector2从1的后代元素里选取2
Selector1>selector2从1的子元素里选取2
Selector1+selector2从1后面的第一个兄弟元素里选取2
Selector1~selector2从1后面所有兄弟元素里选取2
表单选择器
:input选取<input><textarea><select><button>元素
:text选取符合[type=text]的<input>元素
:password选取符合[type=password]的<input>元素
:raido:checkbox:image:file:hidden:button选取所有button元素和符合[type=button]的<input>元素:submit选取符合[type=submit]的<input><button>元素:reset（同上）
:enabled选取可用的表单元素
:disable选取不可用的表单元素
:checked选取被选中的<input>元素
:selected选取被选中的<option>元素
注：某些浏览器中，选择器：checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素。
更改为后代元素集合
1.children(selector)方法
如果不设置参数等同于children(“*”)，会选取原先元素的所有子元素
可以认为$(selector1).children(selector2)等同于$(selector1>selector2)
2.find(selector)方法
如果不设置参数等同于find(“:not(*)”)，不会选取原先元素的任何后代元素
无需设置参数，它会选取原先元素的子元素和文本块
更改为祖先元素集合
1.parent(selector)方法
如果不设置参数，则等同于parent(“*”)，会选取原先元素的所有父元素。
2.parents(selector)方法
在原先元素的祖先元素中，选取匹配selector的元素，如果不设置参数，等同于parents(“*”)，会选取原先元素的所有祖先元素。
3.parentsUntil(selector)方法
选取原先元素的祖先元素，直到遇到匹配selector的元素为止，且不包括这个匹配selector 的元素，若不设置参数，等同于parents()。
4.offsetParent()方法
选取原先元素的最近祖先定位元素，且该元素display的值不能为none，如果无，则选取body。
5.closest()方法
在原先元素及它的祖先元素中，选取匹配selector的最近元素。也就是说，该方法会首先检查原先元素是否匹配，如果匹配则返回原先元素，否则会一层一层向上寻最先匹配的祖先元素。
更改为兄弟元素集合
<()和prev()方法
next(selector)在原先元素后面的第一个兄弟元素中，选取匹配selector的元素。如果不设置参数，则等同于next(“*”)，会选取原先元素后面的第一个兄弟元素。
prev(selector)在原先元素前面的第一个兄弟元素中，选取匹配selector的元素。如果不设置参数，则等同于prev(“*”)，会选取原先元素前面的第一个兄弟元素。
可以认为$(selector1).next(selector2)选取的元素等同于$(selector1+selector2)
类似next()/prev()，选取后面/前面的所有兄弟元素。
siblings(selector)不加参数则选取原先元素的所有兄弟元素。
选取后/前面兄弟元素直到遇到匹配selector的元素为止，且不包括这个匹配selector的元素。若不加参数，则等同于nextAll()和prevAll()。
更改为更多元素集合
1.add(selector)方法
在原先元素基础上添加选取匹配selector的元素
可认为$(selector1).add(selector2)等同于$(selector1,selector2)
2.andSelf()
选取本身
更改为部分元素集合
1.eq(index)、first()和last()方法
eq(index)，索引从0开始，可以为负数，例如：eq(-1)表示倒数第一个元素。
可以认为$(selector).first()等同于$(selector:first)
2.slice(start,[end])方法
在原先元素中筛选索引值从start到（end-1)的元素。如果不传入参数则表示筛取索引值大于且等于start的元素。索引从0开始，可为负数。
3.filter()和not()方法
这两个方法有两种参数形式。
第一种是使用选择器筛选元素。filter(selector)在原先元素中筛选匹配selector的元素。not(selector)在原先元素中筛选不匹配selector的元素。
可认为$(selector1).not(selector2)选取的元素等同于$(selector1:not(selector2))
第二种是使用一个函数筛选元素。filter(fn(index))，函数返回true则元素被包含在筛选集合中，not(fn(index))，函数返回true则元素被排除在筛选集合之外。
4.has(selector)方法
在原先元素中筛选出拥有匹配selector后代元素的元素。
可以认为$(selectro1).has(selector2)选取的元素等同于$(selector1:has(selector2))
还原jQuery对象的方法
end()，如果希望选取的元素还原到更改之前，可以用end方法，可以连续使用，直到最后返回一个空集。
移动元素
1.append()和appendTo()方法
两个方法可以完成同样的任务，但是返回的jQuery对象不同。
都是移动到内部尾部，例如：$(“p”).appendTo($(“div”))；把P移动到div里面尾部。
2.prepend()和prependTo()方法
类似1中的方法，移动到元素内部首端。
3.after()和insertAfter()
移动到元素外部后端，例如：$(“div”).after($(“p”))；把P移动到div元素外部后端。
4.before()和insertBefore()方法
向当前元素之前插入内容，例如：$(“div”).before($(“p”)；把P移动到div元素外部前端。
添加元素
1.创建生产jQuery对象
$(html)方法，html可以是任意字符串，还可以是一个返回html字符串的函数。
例如：创建空元素方法，$(“<p></p>”)或$(“<p>”)或$(“</p>”)
再用移动元素的方法插入到想要添加元素的地方
2.复制生产jQuery对象
clone()方法，结果会使jQuery对象指向所有副本。
例如：$(“p:first”).clone()；复制第一个p元素生成该元素的副本元素。使用两次end()方法会彻底还原clone()方法对jQuery对象的改变。
添加参数true会一起复制绑定在原来元素上的事件。
替换元素
此方法不会改变jQuery对象，也就是说当前选定元素仍是那些被删除的元素，但是绑定在
此元素上的事件已经不复存在。
$(selector1).replaceWith($(selector2))会将匹配selector1的元素全部删除，同时把匹配selector2的元素移动到最后一个匹配selector1的元素的位置。
如果把参数改为html字符串，规则将发生变化。$(selector1).replaceWith(html)将匹配selector1的元素全部删除，同时把html字符串创建生成的新元素移动到每个匹配selector1的元素的位置。同时html还可以是一个返回html字符串的函数，其参数可以接收元素在当前元素集合的索引和元素内原先的html代码。
与replaceWith()方法相反，但是会将元素匹配到每个原来的元素。
$(selector1).replaceAll($(selector2))会将匹配selector2的元素全部删除，同时把匹配selector1的元素移动到每个匹配selector2的元素位置。$(html).replaceAll($(selector))相同。
包裹元素
1.wrap()和unwrap()方法
wrap()方法可以复制页面上原有的元素来包裹当前选定的元素，也可以添加新元素来包裹当前选定的元素。
例如：$(selector1).wrap($(selector2))会将匹配selector2的第一个元素进行复制，用来包裹每个匹配selector1的元素。$(selector).wrap(html)会把根据html生成的第一个新原来用来包裹每个匹配selector的元素。
unwrap()用来去除当前元素的父元素，但是父元素的文本内容会保留下来。
例：$(selector).unwrap();
2.wrapAll()方法
不同于wrap()方法，会把所有元素包裹在一起，而不是分别包裹每个元素。
3.wrapInner()方法
不同于wrap()方法，会分别包裹每个元素内部的文本和后代元素，而不是分别包裹每个元素本身。
以上三个方法都可以使用一个返回html字符串的函数，其中wrapInner()方法还可以接收元素在当前元素集合的索引为参数。
删除和清空元素
remove()方法可以删除当前元素该元素包含的文本内容和后代元素同时被删除。
例如：$(selector).remove()；该方法返回原来的jQuery对象，但是绑定在其上的事件不复存在，可以用同样有删除功能的detach()改变这种设定。
可以清空当前元素内的文本内容和所有后代内容，但是会保留元素本身。
元素的属性处理
1.attr()方法
该方法可以获取、设置某元素的属性值，还可以使用函数作为参数，返回值作为元素属性值。$(selector).attr(name);$(selector).attr(name,value);$(selector).attr(name,fn(index,value));
该方法还可以一次性为元素设置多个属性：
jquery在一个元素后追加标签$(selector).attr({name1:value1,name2:value2,......});
删除某元素的某属性取值。$(selector).removeAttr(name);
元素的class属性处理
1.class属性的一般处理
Class也是元素的一个属性，同样可以用attr()和removeAttr()方法。
2.addClass()方法
$(selector).addClass(value)；追加一个或多个属性值
$(selector).removeClass(value)；移除一个或多个属性值
例如：$(“img:eq(1)”).removeClass(“outer inner”);//多个值用空格隔开
控制元素的一个或多个class属性值的切换。
$(selector).toggleClass(value)；如果value存在即删除它，若不存在则添加它。
5.hasClass()方法
判断某元素的class属性中是否含有某个属性值，含有则返回true否则返回false。
元素内部的HTML、文本处理
1.html()方法
获取或设置某元素内部的html代码，可以使用一个函数作为参数，函数本身可以接收元素在当前元素集合的索引和元素内部旧的HTML代码为参数。
例如：$(selector).html();//获取匹配selector的第一个元素内部HTML；$(selector).html(value);//设置所有匹配selector元素内部HTML代码。
<()方法
获取或设置元素内部文本内容，获取会获取到包括后代元素内的文本内容，而设置则会替换掉包括后代元素在内的所有内容。也可以使用函数作为参数，同html();
表单元素的属性处理
1.表单元素的value属性
获取或设置表单元素的value属性值，可以用更为简洁的val()方法。会获取第一个匹配selector的表单元素的value属性的值。设置：$(selector).val(value)；参数可以为函数。
2.表单选项的checked、selected属性
val()方法还可以用来设置表单选项的checked或selected属性，能够十分方便地选定具有特定value属性值的表单选项。
例：$(selector).val([value1,value2,......valueN])会在匹配selector的表单选项中value属性值为value1、的项。
注：对于type属性为radio的<input>元素和没有设置multiple属性的<select>元素，它们被限定最多只能选择一项，此时用val()方法参数只有最后一个value值是有效的。
CSS基本属性处理
1.获取css属性值
$(selector).css(name)；会获取到第一个匹配selector元素的name属性值。
2.设置css属性值
$(selector).css(name,value)；或$(selector).css({name1:value1,name2:value2,......}); $(selector).css(name,fn(index,value));//把函数返回值作为css属性值
CSS尺寸属性处理
1.height()和width()方法
获取元素属性height和width值。
例：$(selector).width()；获取第一个匹配selector元素的width值，以px为单位。
注：height()和width()获取的都是元素在页面中的实际值，与设置值不一定相同。
使用css(“width/height”)方法也能获取到元素的width和height值，但是这个值的形式是一个

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。