JQuery总结

2018-08-15
JQuery第一堂课
1、JQuery:一个轻量极的javascript类库 简写：$
2、优点：
①总是面向集合
②多行操作集于一行
3、操作
①导入js库

<script type="text/javascript" src=""></script>

②$(function(){})做为程序入口

注意：
$(fn)、$(document).ready(fn)与window.onload的区别？

答：window.onload:需要图片，嵌入的文件等等加载完毕之后才会执行
$(fn)、$(document).ready(fn)：只要整个jsp的document结构加载出来就	会执行

4、三种工厂方法
说明：$()是相当于jquery的工厂,通过这种写法可以创建各种jquery对象①Exp:选择器：（1）标签选择器：$(“a”)
（2）ID选择器：KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲a3”) （3）类选择器：(“.c2”)

（4）包含选择器：$(“pa”)（5）组合选择器：$(“a”,”div”)
②context：上下文，环境/容器，documemt
③jQuery(html)：基于html的一个字符串
④jQuery(element)：element：js对象，表示一个html元素
5、入口
说明：（1）
①appendTo是将前面的jquery对象加到后面的jquery对象中
②append是往前面的jquery对象追加后面的jquery对象

（2）js对象与jquery对象的相互转换
①js对象–>jquery对象

var h1Node = document.getElementById('h1');
			alert(h1Node.value);
			var $hqNode = $(h1Node);
		alert($h1Node.val());

②jqeury对象–>js对象

var $h2Node = $("#h2");
			alert($h2Node.val())
			/* ①var h2Node = $h2Node.get(0); */
			var h2Node = $h2Node[0];
alert(h2Node.value);

①$(document).ready(fn)②$(fn);
6、this指针的作用
①事件源

$(":input").click(function(){
			//this指的是imput标签的dom(js)对象
			alert(this.value);
	});

②当前元素

$(":input").click(function(){
			//获得所有a标签的html值
			$("a").each(function(index,dom){
				//遍历所有a标签的html值
	alert(index+","+$(this).html+","+$(index).html()+","+$(dom).html);
			})
});

7、使用jquery动态给table添加样式

$(function(){
//表格的第一行
		$("table tr:eq(0)").addClass("header");
//大于表格的第一行
		$("table tr:gt(0)").addClass("body");
		$("table tr:gt(0)").hover(function(){
//鼠标放上去的样式
			$(this).removeClass().addClass("foot");
		},function(){
//鼠标离开后还原原来的样式
			$(this).removeClass().addClass("body");
		})
})

2018-08-18
JQuery第二堂课

1、关于js的json的三种表现形式
①对象
var a = {
属性名a：’属性值a’,
属性名b：’属性值b’
}
②数组
var b = [‘属性值1’,’属性值2’,…]
③混合模式
var c = {
属性名a：’属性值a’,
属性名b：’属性值b’,
多属性值属性名c：[‘属性值C’,’属性值c2’]
}

注意：
查看jquery对象在jsp页面的值：【打开F12】console.log(jquery对象名)

2、$.extend 和 $.fn.extend①$.extend(1,2,…n):第一位jquery对象多继承了后面的jquery对象
若有重复属性，则被后面的jquery对象覆盖

②$.ajax:jquery方法的拓展，可以通过类直接调用的方法声明：$.extend({
方法名 : function(){

}
})
调用:$.方法名();③jquery的实例方法拓展声明：$.fn.extend({
方法名:function(){

		}
		})

调用：$(“选择器”).方法名();

3、样式的改变
①js文件：bgColor文件：[jquery.table.css jquery.table.js]

$(function(){
	//拓展jquery的实例方法是为了给talbe添加css样式
	var defaults= {
			head : 'head',
			out : 'out',
			over : 'over'
	}
	$.fn.extend({
		bgColor:function(option){
			option = option || {};
			$.extend(defaults,option);
			this.each(function(){
				//给默认值
				$("tr:eq(0)",this).addClass(defaults.head);
				$("tr:gt(0)",this).addClass(defaults.out);
				
				//添加动态效果
				$("tr:gt(0)",this).hover(function(){
									$(this).removeClass().addClass(defaults.over);
				},function(){
					$(this).removeClass().addClass(defaults.out);
				});
			});
		}
	});	
})