老雷php全栈开发课程之认识jQuery
查看视频教程或者获取有关《老雷php全栈开发课程》更多信息

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 我们常用jQuery来处理Dom\事件\动画\AJAX

<h3>认识jQuery</h3>
<div>参考手册 http://www.runoob.com/jquery/jquery-tutorial.html</div>
<div>jQuery 是一个 JavaScript 库。
	jQuery 极大地简化了 JavaScript 编程。
	我们常用jQuery来处理Dom\事件\动画\AJAX
</div>
<h3>
	jQuery Dom处理
</h3>
<div>
	<h4>选择器</h4>
	<pre>
	$("div")
	$(".class")
	$("#id")
	$("div.class") 同级选择器
	$("[href]") 选取所有带有 href 属性的元素。

	$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

	$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

	$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
</pre>
</div>
<h3>jQuery 事件</h3>
<div>
	click dbclick mouseenter mouseleave
</div>
<pre>
	//针对已创建元素
	$(".class").on("click",function(){
		console.log($(this).html());
	})
	//可针对动态创建数据
	$(document).on("click",".class",function(){
		console.log($(this).html());
	})
</pre>
<h3>Dom操作</div>
	<pre>
	var el=$(".class");
	处理内容 
		el.val(); el.html(); el.text();
	增加处理元素 
		append() - 在被选元素的结尾插入内容
		prepend() - 在被选元素的开头插入内容
		after() - 在被选元素之后插入内容
		before() - 在被选元素之前插入内容
	删除元素
		remove() - 删除被选元素(及其子元素)
		empty() - 从被选元素中删除子元素
	处理class
		addClass() - 向被选元素添加一个或多个类
		removeClass() - 从被选元素删除一个或多个类
		toggleClass() - 对被选元素进行添加/删除类的切换操作
	处理css
		el.css("background-color","yellow");
		el.css({"background-color":"yellow","font-size":"200%"});
</pre>
	<h3>动画效果</h3>

	<div>
		el.show();
		el.hide();
		$(selector).animate({params},speed,callback);
		$("div").animate({
		left:'250px',
		opacity:'0.5',
		height:'150px',
		width:'150px'
		});
	</div>
	<h3>
		jQuery AJAX
	</h3>
	<div>什么是AJAX?ajax是在不刷新页面的情况下,与服务器发生数据交换的技术</div>
	<pre>
	$.get(url,function(res){
		
	},"json")
	$.post(url,data,function(res){
		
	},"json");
	$.ajax({
		url:url,
		type:"GET",
		data:{
			"action":"add"
		}
		dataType:"json",
		success:function(res){
			
		}
	})
</pre>