jQuery基础学习(1)

1.jQuery1基本使用和选择器

jQuery是封装好的js库，具有兼容性好，链式编程的特点。在页面引入jQuery使用的包。

<script src="jquery-1.11.1.js"></script>
//入口函数   
$(document).ready(function(){
	//获取ID为btnshow的元素
	$("#btnshow").click(function(){
		//获取所有div并显示出来
		$("div").show();
	});
});

入口函数：$(document).ready(function(){});
				  $(funtion(){});

jquery->dom : $(selector)[0]
dom->jquery: $(domObject)

重点选择器

#Id选择器 $(“#btnShow”).css(“color”, “red”); 选择id为btnShow的一个元素（返回值为jQuery对象，下同）
.类选择器 $(“.liItem”).css(“color”, “red”); 选择含有类liItem的所有元素
element 标签选择器 $(“li”).css(“color”, “red”); 选择标签名为li的所有元素

层级选择器

空格 后代选择器 $(“#j_wrap li”).css(“color”, “red”); 选择id为j_wrap的元素的所有后代元素li
“>” 子代选择器 $(“#j_wrap > ul > li”).css(“color”, “red”); 选择id为j_wrap的元素的所有子元素ul的所有子元素li

基本过滤选择器

:eq(index) 选择匹配到的元素中索引号为index的一个元素，index从0开始 $(“li:eq(2)”).css(“color”, ”red”); 选择li元素中索引号为2的一个元素
:odd 选择匹配到的元素中索引号为奇数的所有元素，index从0开始 $(“li:odd”).css(“color”, “red”); 选择li元素中索引号为奇数的所有元素
:even 选择匹配到的元素中索引号为偶数的所有元素，index从0开始 $(“li:odd”).css(“color”, “red”); 选择li元素中索引号为偶数的所有元素
筛选（方法）
find(selector) 查找指定元素的所有后代元素（子子孙孙） $(“#j_wrap”).find(“li”).css(“color”, “red”); 选择id为j_wrap的所有后代元素li
children() 查找指定元素的直接子元素（亲儿子元素） $(“#j_wrap”).children(“ul”).css(“color”, “red”); 选择id为j_wrap的所有子代元素ul
siblings() 查找所有兄弟元素（不包括自己） $(“#j_liItem”).siblings().css(“color”, “red”); 选择id为j_liItem的所有兄弟元素
parent() 查找父元素（亲的） $(“#j_liItem”).parent(“ul”).css(“color”, “red”); 选择id为j_liItem的父元素
eq(index) 查找指定元素的第index个元素，index是索引号，从0开始 $(“li”).eq(2).css(“color”, “red”); 选择所有li元素中的第二个

2.jQuery操作DOM

样式属性操作

设置单个样式
$(selector).css("clorr"."red");
设置多个样式
$(selector).css("color":"red","font-size":"30px");
获取样式属性
$(selector).css("font-size");//返回font-size对应的属性值

类操作

添加类样式
$(selector).addClass("classname");
移除类样式
$(selector).removeClass("classname");
不指定类表示移除指定样式的所有类
$(selector).removeClass("");
判断是否包含某一类
$(selector).hasClass("classname");//返回true，false
切换类样式
$(selector).toggleClass("classname");

注意点：操作类样式的所有类名都不带(.)
样式少可以用.css()方法实现，样式多用类实现。

3.jQuery动画

1显示动画

show方法：让匹配的元素显示出来
show(2000)//参数表示时长，在2000内显示完毕
show(“slow”);//参数为字符串 有三个定义slow，fast，normal 值为别为200 600 400。
show(2000,function(){});//动画执行完成后立即执行回调函数
show();//不带参数没有动画效果

2.hide隐藏动画

hide方法：让匹配的元素隐藏
hide(2000)//参数表示时长，在2000内隐藏完毕
hide(“slow”);//参数为字符串 有三个定义slow，fast，normal 值为别为200 600 400。
hide(2000,function(){});//动画执行完成后立即执行回调函数
hide();//不带参数没有动画效果

3滑入滑出动画（卷帘门）

slideDown(speed,callback);让元素下拉动画展现出来；参数省略或不合法，则默认使用400ms。
slideUp(speed,callback);让元素以上拉效果隐藏
slideToggle(speed,callback);滑入滑出动画切换效果

4淡入淡出效果

fadeIn(speed,callback);元素淡淡的进入视线
fadeOut(1000);元素淡淡的隐藏起来
fadeToggle(‘fast’,function(){});通过改变透明度切换显示隐藏状态
fadeTo(1000,.5)//0全透，1全不透
fadeTo(0,.5)//相当于.css(“opacity”,.5);

5自定义动画

$(selector).animate({params},speed,callback);
第一个参数表示执行动画的css属性(必选)
第二个参数表示执行动画时长（可选）
第三个参数表示执行完动画后立即执行的回调函数（可选）
stop()；停止正在执行的动画

4.jQuery节点操作

动态创建元素

$()函数的另一个作用：动态创建元素
var $sapnNode = $(“我是动态创建的”);
append();在最后一个子元素下追加元素
不常用操作：
appendTo();作用 $(selector).appendTo(node);把selector追加到node prepend();作用：在元素的第一个子元素前面追加内容或节点$(selector).appendTo(node);把selector追加到nodeprepend();作用：在元素的第一个子元素前面追加内容或节点(selector).prepend(node);
after();作用：在元素被选之后，作为兄弟元素插入节点。$(selector).after(node); before();作用：在元素被选之前，作为兄弟元素插入节点。$(selector).after(node);before();作用：在元素被选之前，作为兄弟元素插入节点。(selector).before(node);

html创建元素

//动态创建元素
$(selector).html(‘与js的innerHtml效果一样’);
//获取html内容
$(selector).html();
//清空指定元素的所有子元素
$(selector).empty();无参数
$(selector).html(" ");
把自己也删除掉
$(selector).remove();
//复制元素
复制 $(selector)所匹配到的所有元素，返回复制的新元素
$(selector).clone();

5.操作form表单

$(selector).attr(“title”,“abc”);第一个参数表示属性名称，第二个属性值
$(selector).attr(“title”);获取属性名称对应的属性值
$(selector).remove(“title”);移除的属性名称
注意：checked，selected，disabled要使用.prop()方法
prop方法：用来影响DOM元素的动态状态，不是改变html属性

6值和内容

val()方法；作用：设置或返回表单元素的值
$(selector).val()获取匹配元素的值，只匹配第一个元素
$(selector).val(“具体值”)；设置所有匹配到的元素的值

text()方法：设置获取匹配的文本内容
$(selector).text();获取操作不带参数，把匹配的内容拼接为字符串
$(selector).text(“设置内容”);//参数表示要设置的文本内容

高度和宽度操作

height();获取设置元素的高度
$(selector).height()；不带参数表示获取
$(selector).height(“200”)；带参数表示设置
width()；设置获取元素宽度
$(selector).width()；不带参数表示获取
$(selector).width(“200”)；带参数表示设置
css获取的宽度是string类型带px，height()获取的是number不带px。

坐标值操作

offset();作用：获取设置元素相对文档的位置
$(selector).offset();无参数表示获取；返回值为{left:num,top:num}
$(selector).offset({left:200,top:200});有参数表示设置

position()；作用：获取相对最近的具有定位的父元素的位置，返回值为{left:num,top:num}
$(selector).position();只能获取不能设置。

scrollTop();作用：表示设置或获取元素垂直方向滚动的位置
无参数表示获取偏移，有参数表示设置偏移，参数为值类型
$(selector).scrollTop(100);

scrollLeft();作用：表示设置或获取元素水平方向滚动的位置
无参数表示获取偏移，有参数表示设置偏移，参数为值类型
$(selector).scrollLeft (100);