JQ基础总结

JQ 基础教程

01JQ 选择器

$('p') //元素选择器 
$('#id') //id选择器 
$('.class') //类选择器 
$ ('*') //选取所有元素 
$ ('this') // 获取当前元素

02JQ 事件

$('#id').click(); // 点击事件 
$('#id').mouseenter() // 鼠标事件
$('#id').keypress() // 键盘事件
$('#id').submit() // 表单事件
$('#id').load() // 文档事件

03JQ 显示隐藏

hide()&&show()

$('#id').click(function(){
	$('.class').hide(1000);
	$('.class').show(1000);
})

toggle()

$('#id').click(function(){
	$('.class').toggle(1000);
})

淡入淡出

• fadeIn() 淡入
• fadeOut() 淡出
• fadeToggle() 淡入淡出
• fadeTo() 元素变透明

$('#id').click(function(){
	$('.class').fadeIn();
	$('.class').fadeIn("slow");
	$('.class').fadeIn(1000);
	
	$("#div1").fadeOut();
	$("#div2").fadeOut("slow");
	$("#div3").fadeOut(3000);
	
	$("#div1").fadeToggle();
	$("#div2").fadeToggle("slow");
	$("#div3").fadeToggle(3000);
})

JQ滑动

• slideDown() 下拉滑动
• slideUp() 上滑
• slideToggle()

$('#id').click(function(){
	$('.clss').slideDown(1000);
	$('.clss1').slideUp(1000);
	$('.clss2').slideToggle(1000)
})

JQ动画animate()

// 动画
$('#id').click(function(){
	$('.class').animate(
	 {
		  left:'250px',
		  opacity:'0.5',
	      height:'150px',
		  width:'150px'
	 }
	);
	var divBox = $('#div');
	divBox.animate({height:150px,opacity:'0.4'});
	divBox.animate({width:350px,opacity:'1.4'});
})
// 中止动画 
$('#button').click(function(){
	$('.divBoxLer').stop();
	// stop() 能够添加两个参数 来控制动画的执行
})

JQ动画 链

$('#id').click(function(){
	$('.clss').css('width:150px').slideDown(1000).slideUp(2000);
})

04JQ DOM操做

获取返回内容

$(document).ready(function(){
			 $('#id').click( function(){
				 var textData = $('.p').text("Hello world!");
				 var textHtml = $('.PL').html("Hello world!");
				 console.log(taxtData);
				 console.log(textHtml);
			 })
		})

获取表单的值

$(document).ready(function(){
			$('#button').click(function(){
			 var formData = $('#name').val("Hello world!");
			 console.log(formData,'数据')
			})
		})

获取属性

$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href",'Hello world!'));
  });
});

05JQ 添加元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素以后插入内容
• before() - 在被选元素以前插入内容

$(document).ready( function(){
			$('#button').click( function(){
				$('.p').append('添加在p标签尾部的新内容');
				$('.p').prepend('添加在p标签开头的新内容');
				
				var text = $('<li></li>').html('添加内容')
				$('#ul .li').after(text)
				$('#ul .li').before(text)
			})
		})

06JQ 删除元素

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

$(document).ready( function(){
		$('#button').click(){
			$('.class').remove();
			$('.class').empty();
		}
		})

07JQ 操做CSS

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操做
• css() - 设置或返回样式属性

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
	$("h1,h2,p").removeClass("blue");
	$("h1,h2,p").toggleClass("blue");
	$("h1,h2,p").css("background-color");
  });
});

08JQ 操做尺寸

• width() 返回元素的宽度
• height() 返回元素的高度
• innerWidth() 元素的宽度（包括内边距）
• innerHeight() 元素的高度（包括内边距）
• outerWidth() 元素的宽度（包括内边距和边框）
• outerHeight() 元素的高度（包括内边距和边框）

09JQ 异步交互

load()方法

$(selector).load(URL,data,callback);

$(document).ready( function(){
			$('#button').click(function(){
				$('.form').load('./api/newData.txt')
			})
		})

$.get() 方法

$.get(URL,callback);

$(document).ready( function(){
			$('#button').click(function(){
				$.get('URL',function(data,status){
					console.log(data,'数据')
				})
			})
		})

$.post() 方法

$.post(URL,data,callback);

$(document).ready( function(){
			$('#button').click(function(){
				$.post('url',{
					name:'name',
					url:'url',
					},
					function(data,status){
						console.log(data,'数据')
					}
				)
			})
		})