[JavaScript知识库]jQuery--01

一、dom对象和jq对象相互转换

1.dom对象转换为jquery对象：$（dom对象）

语法：$（‘div’）;

2.jquery对象转换为dom对象（两种方式）

（1）.$('div')[index]? index是索引号 ， 比如：$('div')[0]

（2）.$('div').get(index)? ? index是索引号 ， 比如：$('div').get(index)

二、jQuery 筛选选择器

1.:first ；? 语法 $(''li:first'') // 获取第一个li的元素

2.:last?； 语法 $(''li:last'') // 获取最一个li的元素

3.:eq(index)?； 语法 $(''li:eq(2)'') // 获取到的li元素中，选择索引号为2的元素,索引号index从零开始

4.:odd?； 语法 $(''li:odd'') // 获取到的li元素中，选择索引号为奇数的元素

5.:even?； 语法 $(''li:even'') // 获取到的li元素中，选择索引号为偶数的元素

三、jQuery其他筛选方法

1.parent() ；语法: $("li").parent();? // 查找父亲

2.children(selector) ；语法: $("ul").children("li");? // 相当于$（"ul>li"），查找最近一级（亲儿子）

3.find(selector) ；语法: $("ul").find("li");? // 想当于$（"ul li"），后代选择器

4.siblings(selector) ；语法: $(".first").siblings("li");? // 查找兄弟节点，不包括自己

5.eq(index) ；语法: $("li").eq(2);? //?索引号index从零开始

6.nexAll([expr]) ；语法: $(".first").nexAll();? // 查找当前元素之后所有的同辈，不包括自己

7.prevtAll([expr]) ；语法: $(".first").prevtAll();? // 查找当前元素之之所有的同辈，不包括自己

8.hasClass(class) ；语法: $("div").hasClass("red");? // 查找是否有该类属性，如果有返回true

四、jQuery修改css样式

1.参数只写属性名，则返回属性值

语法：$(this).css("color");

2.参数是属性名、属性值、逗号分割，是设置一组样式，属性必须加引号，值如果是数字可以不用单位和引号

语法：$(this).css("color","red");

3.参数可以是对象形式，方便设置多种样式。属性名和属性值用冒号隔开，属性可以不用加引号

语法:$(this).css({"color":"white","font-size":"20px"});

五、jQuery操作样式之类操作

1.添加类? 语法：$("div").addClass("current(类名)");

2.移除类? ?语法：$("div").removeClass("current(类名)");

3.切换类??语法：$("div").toggleClass("current(类名)");

作用等同classList，可以操作类样式，注意操作类里面的参数不要加点。

六、jQuery效果滑动

1.下滑?slideDown();

2.上滑?slideUp();

3.切换 slideToggle();

4.hover([over,]out);

语法：

?$(".nav>li").hover(function()?{

????????????? ? $(this).children("ul").stop().slideDown(1000);

?????????????},?function()?{

????????????? ? $(this).children("ul").stop().slideUp(1000);

????????????})；//鼠标经过和离开触发

? ? ? ? ?$(".nav>li").hover(function()?{

????????????????$(this).children("ul").stop().slideToggle(1000);

????????????})//鼠标经过和离开触发，推荐这种写法

七、淡入淡出效果

1.淡入?fadeIn();

2.淡出?fadeOut();

3.淡入淡出切换?fadeToggle();

4.修改透明度? fadeTo(1000,0.5);//这个速度和透明度需要写 1000等于一秒，0.5等于透明度到一半

八、自定义动画

animate(params.[speed],[easing],[fn]);

语法：?$(function() {
? ? ? ? ? ? $("button").click(function() {
? ? ? ? ? ? ? ? $("div").animate({
? ? ? ? ? ? ? ? ? ? left: 500,
? ? ? ? ? ? ? ? ? ? top: 300,
? ? ? ? ? ? ? ? ? ? opacity: .4,
? ? ? ? ? ? ? ? ? ? width: 500
? ? ? ? ? ? ? ? }, 500);
? ? ? ? ? ? })
? ? ? ? })