jQuery使用（一）---简单使用

jQuery基础：

function changeValue(a){
			//一些常用的 HTML DOM 方法：
			// getElementById(id) - 获取带有指定 id 的节点（元素）
			// appendChild(node) - 插入新的子节点（元素）
			// removeChild(node) - 删除子节点（元素）
			//一些常用的 HTML DOM 属性：
			// innerHTML - 节点（元素）的文本值
			// parentNode - 节点（元素）的父节点
			// childNodes - 节点（元素）的子节点
			// attributes - 节点（元素）的属性节点
			//例子
			// var txt3=document.createElement("p");  // 以 DOM 创建新元素
			// txt3.innerHTML="Text.";
			// a.appendChild(txt3);

			//jQuery
			//访问值
			// alert("val:"+$("#span0").val());//没有值
			// alert("html:"+$("#span0").html());//有值，HTML内容
			// alert("text:"+$("#span0").text());//有值，只有文本内容
			// alert("text val:"+$("#abc").val());//有值，输入的内容
			// alert("text html:"+$("#abc").html());//没有值
			// alert("text text:"+$("#abc").text());//没有值

			//创建元素
			// var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
			// var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
			// var txt3=document.createElement("p");  // 以 DOM 创建新元素
			// txt3.innerHTML="Text.";
			// $("#span0").append(txt1,txt2,txt3);//jQuery的append可以接受以上三种类型的参数
			//追加元素
			//append,prepend,after,before都可以传入多个参数
			// $("#span0").append("<a href='www.baidu.com'>abc</a>");//在所选元素内末尾添加元素
			// $("#span0").prepend("<a href='www.baidu.com'>abc</a>");//在所选元素内开始添加元素
			// $("#span0").after("<a href='www.baidu.com'>abc</a>");//在所选元素后面添加元素
			// $("#span0").before("<a href='www.baidu.com'>abc</a>");//在所选元素前面添加元素
			//删除元素
			// $("#span0").remove();//删除被选元素（及其子元素）
			// $("span").remove("#span0");//不要认为参数是span内部元素的选择器
			// $("#span0").empty();//从被选元素中删除子元素

			//操作样式
			//span0已经有了s2样式的情况下
			// $("#span0").addClass("s1");//若之前已有的样式，没办法通过这个来覆盖掉，需要移除之前的
			// $("#span0").removeClass("s2");
			// $("#span0").toggleClass("s1");//s1有或无不断切换
			// $("#span0").toggleClass("s2 s1");//s1与s2不断切换
			// $("#span0").toggleClass("s1 s2 s3");//s1和s3与s2不断切换
			// console.log($("#span0").css("color"));//获取css属性
			// $("#span0").css("color","red");//设置css属性
			// $("#span0").css({"color":"red","font-size":"200%"});//一次设置多个css属性
			
			//jQuery尺寸的操作
			// console.log("width: "+$("#div0").width());//获取尺寸
			// console.log("height: "+$("#div0").height());
			// console.log("innerWidth: "+$("#div0").innerWidth());
			// console.log("innerHeight: "+$("#div0").innerHeight());
			// console.log("outerWidth: "+$("#div0").outerWidth());
			// console.log("outerHeight: "+$("#div0").outerHeight());
			// var txt="";
			// txt+="Document width/height: " + $(document).width();
			// txt+="x" + $(document).height() + "\n";
			// txt+="Window width/height: " + $(window).width();
			// txt+="x" + $(window).height();
			// console.log(txt);
			// $("#div0").width(500).height(500);//设置尺寸

		}

参考网址：jQuery 教程