JS代码

function myf(){
				alert("用来讲解isFunction函数的");
			}
			$(function(){
				// 一、$工具
				//1.1 $.each()
// 				var names = ["张三","李四","王麻子"];//定义JSON数组 []
// 				$.each(names,function(index,node){//下标,单个对象
// 					console.info(node)
// 				})
				//定义JSON对象 {}
// 				var stu = {"name":"张三","age":12};
// 				$.each(stu,function(k,v){//键,值
// 					console.info(v)
// 				})
				//定义对象数组 [{},{}]
// 				var stus = [{"name":"张三","age":12},{"name":"李四","age":23},{"name":"王五","age":34}];
// 				$.each(stus,function(i,stu){
// 					 $.each(stu,function(k,v){
// 						console.info(k,v)
// 					}) 
// 					console.info(stu.name,stu.age)
// 				})
				
				// 1.2 $.trim() 去除前后空格
// 				var str = "   javaxl   ";
// 				console.info("长度:"+str.length)
// 				console.info("去除前后空格后："+$.trim(str).length) 
				
				//1.3 $.type() 获得对象的类型
// 				console.info($.type(12.5))//number
// 				console.info($.type("aa"))//string
// 				var stu = {"name":"张三","age":34};
// 				console.info($.type(stu))//object
// 				var stus = [{"name":"张三","age":12},{"name":"李四","age":23},{"name":"王五","age":34}];
// 				console.info($.type(stus))//array
// 				console.info($.type(new Date()))//date 
				
				//1.4 $.isArray() 判断是否是数组
// 				var stu = {"name":"张三","age":34};
// 				var stus = [{"name":"张三","age":12},{"name":"李四","age":23},{"name":"王五","age":34}];
// 				console.info($.isArray(stus)) 
				
				//1.5 $.isFunction() 判断是否是函数
				// console.info($.isFunction(myf))
				
				//1.6 $.parseJSON() 将json字符串-->js的对象或者数组
				//对象字符串
// 				var stuStr = '{"name":"张三","age":34}';
// 				console.info($.type(stuStr))
// 				var stu = $.parseJSON(stuStr);
// 				$.each(stu,function(k,v){
// 					console.info(k,v)
// 				});
// 				console.info(stu.name)
				
				//数组字符串
// 				var stusStr = '[{"name":"张三","age":12},{"name":"李四","age":23},{"name":"王五","age":34}]';
// 				console.info($.type(stusStr))
// 				var stus = $.parseJSON(stusStr);
// 				console.info($.type(stus))
// 				$.each(stus,function(a,b){
// 					console.info(b.name,b.age)
// 				})


				// 二、属性
				//2.1 attr()
// 				var href = $("#baidu").attr("href");//根据属性名获取对应属性值
// 				console.info(href)
// 				$("#baidu").attr("href","http://www.baidu.com");

				//2.2 removeAttr()
				// $("#baidu").removeAttr("href");
				
				//2.3 addClass()
// 				$("#baidu").addClass("du")//叠加
// 				$("#baidu").attr("class","du");//覆盖

				//2.4 removeClass()
				// $("#baidu").removeClass();//只能移除值 class仍然在
				
				//2.5 attr与prop的区别
// 				$("#baidu").attr("name","aa")
// 				$("#baidu").prop("name","bb")
				//案例4(attr有记忆功能，取消全选会失效，prop没有)
// 				$("#all").click(function(){
// 					$(".aa").prop("checked",true)
// 				})
// 				$("#notAll").click(function(){
// 					$(".aa").prop("checked",false)
// 				})
				
				
				//案例3
// 				$("table tr:even").attr("class","a")
// 				$("table tr:odd").attr("class","b")
				
				//只会获取其内容不包括子标签
// 				var str = $("p").text();
// 				console.info(str)
				// 只会获取其内容包括子标签
// 				var str = $("p").html();
// 				console.info(str)
				
				// 三、CSS
				$("p").css("background","rgba(225,0,0,1)")//单个
				// $("p").css({"background":"yellow","color":"red"})
				var b = $("p").css("background")
				console.info(b)
			})

HTML代码

小结

课堂代码：

demo1.jsp