jQuery学习(二)

知识点一：text()、html() 以及 val() 的介绍

$("#test").text()；//返回所选元素的文本内容
$("#test").html();//返回所选元素的内容（包括 HTML 标记）
$("#test").val();//返回表单字段的值

$("#test1").text("Hello world!");
$('#test1').html('<p>nb6666<p>');
$("#test1").val("gg");

$('#test1').text(function(i,origText) {
	return i + ':' + origText;
});
//分别表示对获取到的元素分别读取他们的内容
//注意：传入参数时表示设置
//除此以外还可以传入回调函数哦！！

回调函数是什么？

		简单理解就是：这个被传入之后又被调用的函数就是回调函数。

知识点二：对于添加元素append()、 prepend()、

after()、 before()的介绍

$('div').append('asd1');
$('div').append('<p>wdnmd</p>');
//append()是在div元素 中 的结尾部分插入p元素或内容

$('div').prepend('asd1');
$('div').prepend('<p>wdnmd</p>');
//append()是在div元素 中 的开始部分插入p元素或内容

$('div').after('asd1');
$('div').after('<p>sss</p>');
//after()是在div元素 外 的后面插入p元素或内容

$('div').before('asd1');
$('div').before('<p>sss</p>');
//before()是在div元素 外 的前面插入p元素或内容

知识点三：jQuery操作css

 $('div').addClass('comment add');
 //传入一个或者多个参数，为div添加class类
 
 $('div').removeClass('add');
 //传入一个或者多个参数用来移除一个或者多个类

$('div').toggleClass('add',true);
//包含两个参数，默认为false，true表示添加
//默认当没有此类时会添加，有的话会删除

$('div').css({
	'width':'100px',
	'height':'200px'
});
//这是书写多个的时候

$('div').css('width','100px');
//这时单个书写的时候

知识点四：jQuery遍历和对元素的选用

//1.jQuery祖先

$("span").parent();
//选取span元素的直接父元素

$("span").parents();
//返回span的所有祖先元素

$("span").parentsUntil("div");
//返回介于div和span之间的span的祖先元素

//2.jQuery后代
 $("div").children();
 //获取div的所有直接子元素
 $("div").children("p.add");
 //获取div的所有直接子元素中类名为add的元素

 $("div").find("span");
//返回div的所有span的后代元素

//3.jQuery的过滤方法
 $("div p").first();
 $("div p").last();
 //分别表示获取div中第一个p和最后一个p元素
 $('li').first()
 //获取li元素中的第一个

知识点五：jQuery动画

1.显示、隐藏和切换

	$('div').show();
	$('div').hidden();
	//分别来显示 和 隐藏 div元素

2.淡入和淡出

	$('div').fadeIn(1000,function(){
	
	});
	$('div').fadeOut(2000,function(){
	
	});
	//表示对于div元素的淡入和淡出
	//这里的function表示执行完当前动画后要做的事情
	//根据动画队列，其实可以把他们连在一起写
	$('div').fadeOut(100).fadeIn(200);

3.滑动

1. slideDown()
   作用：向下滑动

//语法如下：
$(selector).slideDown(speed,callback);

2. slideUp()
   作用：向上滑动

//语法如下
$(selector).slideUp(speed,callback);
//其中参数callback表示，完成滑动后要执行的函数。

4. slideToggle()
   作用：jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

$(selector).slideToggle(speed,callback);

4.jQuery的自定义animate动画

//语法如下：
$(selector).animate({params},speed,callback);
//其中params表示：需要修改选择元素的css属性和属性值。
$('div').animate({
	height:'150px',
    width:'150px'
},'slow');

5.动画的停止stop()

//语法如下：
$(selector).stop(stopAll,goToEnd);
// 参数介绍：
// stopAll	：可选。规定是否停止被选元素的所有加入队列的动画。
// goToEnd	：可选。规定是否允许完成当前的动画，
// 该参数只能在设置了 stopAll 参数时使用。 
$('div').stop();
//默认为停止所有的动画队列