1.首先建一个目录，在目录里面加入JQuery的插件 “ jquery-1.7.2.min.js ”
2.在html页面去引用这个JQuery插件，并将须要使用JS脚本的JS页面引用也加入到页面中
<span style="font-size:12px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JqueryStudy</title>
<script src="js/jquery-1.7.2.min.js"></script> //"<span style="font-size:14px;"><strong><span style="font-size:14px;"><strong>JQuery的插件</strong></span></strong></span>"
<script src="Main.js"></script> //<span style="font-size:18px;"><strong>JS页面</strong></span>
</head>
<body id="bodyMain">
<div class="courseBlock" cblack="我是第一个">
<a href="#" class="coursePic" target="_blank"><img width="390" alt="《前端面试秘籍》课程，秒杀面试!" /></a>
<div class="courseSummary" id="div1">
<h4><a href="#" target="_blank" class="ssss">《前端面试秘籍》课程。秒杀面试!</a></h4>
<p class="pppp">课程中95%是名企面试真题剖析，直攻面试题目软肋，剩下5%主要解决非技术性问题，如：简历怎样写，学历不够怎么办等！</p>
<p class="sddddd">我是第二个p</p>
<div class="misc cl">
<input value="23" valuecopy="34" id="vvv" />
<span class="tags">大幅提升成功率</span>
<span class="tags">学历不是事儿</span>
<span class="studyNum"><b>0</b> <span>人学习</span></span>
<div><span>Hello Again</span><span>Hello ByBy</span></div>
</div>
<div>
<p>p1</p>
<p>p2</p>
<p class="p3">p3</p>
<p>p4</p>
</div>
</div>
</div>
<div class="courseBlock" cblack="我是第二个">
<a href="#" class="coursePic" target="_blank"><img width="390" alt="教你写一份成功率99%的专业简历" /></a>
<div class="courseSummary">
<h4><a href="commodity-MTg3.html" target="_blank">教你写一份成功率99%的“专业简历”</a></h4>
<p>假设没有简历这块敲门砖，再厉害的技术也白搭，想要写出饱满、有竞争力、杀伤力且能瞬间秒杀面试官的专业简历就这么简单！</p>
<div class="misc cl">
<input value="22" valuecopy="33" />
<span class="tags">成功率99%</span>
<span class="tags">饱满且有竞争力</span>
<span class="tags">学历低没关系</span>
<span class="studyNum"><b>0</b> <span>人学习</span></span>
</div>
</div>
</div>
<div class="courseBlock" csblack="我是第三个">我是第三个</div>
<div class="courseBlock" csblacks="我是第四个">我是第四个</div>
<input type="checkbox" name="youkown" class="checkbox" value="勾选我吧" id="cbTest">
<input type="checkbox" name="youkown" checked="checked" value="不勾选我">
<input type="button" name="ouskowns" value="点击我吧" id="btnClick" accter="china">
<input type="text" value="聚焦" id="TextControl">
<div propp="我是空Div">我是空Div</div>
<div style="display:none" trim="我是隐藏的"><code>10008</code></div>
<input type="hidden" value1="我的类型是hidden"/>
<div class="div123" id="divSetData" data-value="hello" data-last-value="helloLast" data-options='{"name":"noahlu"}'>123</div>
<select id="Select">
<option value="1">Red</option>
<option value="2" selected="selected" class="selectdd">Yellow</option>
<option value="3">Blue</option>
</select>
<div id="NewDiv">新Div</div>
<div id="OldDiv">
<input type="button" class="btnClass" id="btnClass" value="点击事件"/>
<input type="button"/>
</div>
<input type="button" id="NewBtn" value="克隆按钮"/>
<input type="button" id="BindBtn" value="绑定按钮" />
<input type="button" id="OneBtn" value="一次性事件按钮" />
<p id="Poor">
非常多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否
非常多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否
非常多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否
非常多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否
非常多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否
非常多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否
非常多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否
</p>
<input type="button" id="BtnShowHide" value="显示隐藏" />
<input type="button" id="BtnSlide" value="高度动态显示或隐藏效果" />
<input type="button" id="BtnFad" value="淡入淡出效果" />
<input type="button" id="BtnDelay" value="延迟效果" />
<table id="tableName">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
</span>3.html页面的内容已经有了，这个时候就能够在JS页面里面開始写js脚本了
<span style="font-size:12px;">$(function () {//初始化 等同于 $(document).ready(function () {
//$("*"):表示获取全部对象的html
var cp=$("*").html();
//自己定义一个控件元素
$("<input>", {
type: "text",
val: "Test",
focusin: function () {
$(this).addClass("NewTest");//增加样式
$(this).css("background-color","yellow");//增加背景颜色
},
focusout: function () {
$(this).removeClass();//移除样式
$(this).css("background-color", "white");//移除背景颜色
},
click: function () {
alert("test");//点击事件
}
}).appendTo("#div1");//追加到Id为"div1"的元素以下s
//val()： 获取值
//获取某一个Id的值，等同于document.getElementById("coursePicId");
cp = $("#coursePicId").val();
//获得HTML中全部的div元素的html
cp = $("div").html();
//each(callback):循环元素的子集对象
//循环查找样式为“courseBlock”的对象（index:序号。dom：对象）
$(".courseBlock").each(function (index, dom) {
//alert(index);
cp = $(dom).find("input").attr("valuecopy");
//dom和this都是对象。效果一样
cp = $(this).find("input").attr("valuecopy");
//alert(cp);
});
//find：找到样式为“courseSummary”的子元素中为“p”的元素,以及子元素为“h4”的元素
cp = $(".courseBlock").eq(0).find(".courseSummary p,.courseSummary h4").each(function (index, dom) {
//alert($(dom).html());
});
//在样式为“courseBlock”的第一个集合中。从他的子集中找出全部的“p”元素
cp = $(".courseBlock").eq(0).children().last().find("p").each(function (index, dom) {
//alert($(this).text());
});
//attr("","");设置或返回被选元素的属性值。
//在样式为“courseBlock”的第二个集合中，找到input元素的属性名为“valuecopy”的值。并给他赋值为“520”
$(".courseBlock").eq(1).find("input").attr("valuecopy", "520");
//在样式为“courseBlock”的第二个集合中，找到input元素的属性名为“valuecopy”的值
cp = $(".courseBlock").eq(1).find("input").attr("valuecopy");
//当然也能够同一时候加几个属性，值。俗称键值对
cp = $(".courseBlock").eq(1).find("input").attr({ "test": "test", "alt": "Test Image" });
//removeAttr(name) 从每个匹配的元素中删除一个属性
//1.6以下版本号在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决办法就是使用$("XX").prop("disabled",false);
//1.7版本号在IE6下已支持删除disabled。
$("#btnClick").removeAttr("accter");
//data(key) 获取key的值
//在html页面div中增加属性“data-value="hello" data-last-value="helloLast"” 就能够直接通过键来获取值了
cp = $("#divSetData").data("value");
cp = $("#divSetData").data("last-value");
cp = $("#divSetData").data("options").name;
//alert(cp);
//data(key,value)
//建一个Key为NewFile的 Value为File1的 暂时存储键/值对
$("#divSetData").data("NewFile", "File1");
cp = $("#divSetData").data("NewFile");
//alert(cp); //结果为File1
//removeData(key) 移除键名
$("#divSetData").removeData("NewFile");
cp = $("#divSetData").data("NewFile"); //结果为undefined 。是由于把NewFile键给移除了。找不到
//prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值。在性能上高于attr(name|properties|key,value|fn)，接着高于data(key,value)
$("input[type='checkbox']").prop({
disabled: true //禁用页面上的全部复选框
});
$("input[type='checkbox']").prop("disabled", false);//解禁页面上的全部复选框
//选中复选框为true。没选中为false
var b = $("input[type='checkbox']").prop("checked");
//将全部复选框选中
$("input[type='checkbox']").prop("checked", true);
$("input[type='checkbox']").prop("checked", function (i, val) {
return !val; //假设选中。则不选中；假设不选中，则选中
});
//分配键值，然后删除键
$("#cbTest").prop("cccc", "Acrinve");
$("input[type='checkbox']").removeProp("newProp");
//size()
//在样式为“courseBlock”的第一个集合中。获取他子集中的个数 size()和length效果一样
cp = $(".courseBlock").eq(0).find(".courseSummary").children().size();
//cp = $(".courseBlock").eq(0).find(".courseSummary").children().length;
//parent > child:在给定的父元素下匹配全部的子元素
cp = $("body>.checkbox").val();
//index:搜索匹配的元素。并返回相应元素的索引值，从0開始计数。
cp = $(".courseBlock").eq(0).children().last().find("p").index($(".p3"));
//:first 获取第一个元素,:last 获取最后个元素
cp = $(".courseBlock").eq(0).children().last().find("p:first").html();
cp = $(".courseBlock").eq(0).children().last().find("p:last").html();
//:even 匹配全部索引值为偶数的元素，从 0 開始计数 :odd 匹配全部索引值为奇数的元素，从 0 開始计数
$(".courseBlock:even").each(function (index, dom) {
//alert($(this).html());
});
//:eq(index) 匹配一个给定索引值的元素
cp = $(".courseBlock:eq(1)").html();
//eq(index) 匹配一个给定索引值的元素
//eq(-1)是倒数第一个，eq(-2)是倒数第二个,eq(0)是第一个
cp = $("#bodyMain").children().eq(-1).attr("cblack");
//:gt(index) 匹配全部大于给定索引值的元素 从 0 開始计数 lt(index) 匹配全部小于于给定索引值的元素 从 0 開始计数)
cp = $(".courseBlock:gt(2)").html();
//alert(cp);
//queue：扫描全部的div元素，并一个一个的进入队列
$("div").queue(function () {
//alert($(this).html());
$(this).dequeue();//出队列。当前元素运行完才干够运行下一个元素
});
$("div").clearQueue();//清除队列
//在样式为“courseBlock”的第一个集合中。从他的子集中找出全部的“p”元素,然后从第三个“P”元素開始选择，选取2个“P”元素截止
//slice(x,y) x代表開始选取子集的位置。第一个元素是0.假设是负数，则能够从集合的尾部開始选起。
//slice(x) y代表结束选取自己的位置。假设不指定，则就是本身的结尾。
cp = $(".courseBlock").eq(0).children().last().find("p").slice(2, 4).text();
//相等
cp = $(".courseBlock").eq(0).find(".courseSummary p").slice(2, 4).text();
//first()：获取第一个元素html
cp = $("#bodyMain").children().first().html();
//last()：获取最后一个元素的html
cp = $("#bodyMain").children().last().html();
//has：推断是否有“courseSummary”的样式，假设有。就给背景附上红色
$("#bodyMain").children().first().has(".courseSummary").css("background-color", "red");
//表示获得HTML中全部使用了abc这个样式的元素
//:animated 仅仅有对不在运行动画效果的元素运行一个动画特效，当然自己能够去掉试试。不要这个，一直点击的话，就会不停的累积
//stop([clearQueue],[jumpToEnd]) 停止全部在指定元素上正在运行的动画。
$("#btnClick").click(function () {
$("#divSetData:not(:animated)").animate({ left: "+=20" }, 1000);
});
//:contains(text) 匹配包括给定文本的元素
cp = $("div:contains('我是')").each(function () {
//alert($(this).html());
});
//:empty 匹配全部不包括子元素或者文本的空元素
cp = $("div:empty").attr("propp");
//:hidden 匹配全部不可见元素。或者type为hidden的元素
//相反 :visible 是匹配全部的可见元素 这里就不举例了
cp = $("div:hidden").html();
cp = $("input:hidden").attr("value1");
//[attribute=value] 匹配给定的属性是某个特定值的元素
cp = $("input[name='youkown']").each(function () {
//alert($(this).val());
});
//[attribute!=value] 匹配全部不含有指定的属性。或者属性不等于特定值的元素。
cp = $("input[name!='youkown']").each(function () {
//alert($(this).val());
});
//[attribute^=value] 匹配给定的属性是以某些值開始的元素
cp = $("input[name^='ou']").val();
//[attribute$=value] 匹配给定的属性是以某些值结尾的元素
cp = $("input[name$='s']").val();
//[attribute*=value] 匹配给定的属性是以包括某些值的元素
cp = $("input[name*='sk']").val();
//[selector1][selector2][selectorN] 复合属性选择器。须要同一时候满足多个条件时使用。
//$("input[id][name$='man']")
//:selected 匹配全部选中的option元素
cp = $("select option:selected").text();
//手动增加一个选项进去，然后再循环显示
var option = "<option value='4'>White</option>";
$("#Select").append(option);
$("#Select").children().each(function (index,dom) {
var text=$(this).text();
var value = $(this).val();
//alert(text + "-" + value);
});
//addClass(class|fn) 为每个匹配的元素增加指定的类名。
//removeClass([class|fn]) 从全部匹配的元素中删除全部或者指定的类。
$("#Select").addClass("select");
$("#Select").removeClass("select");
//toggleClass(class|fn[,sw]) 假设存在这个样式就删除这个样式，假设不存样式，就增加这个样式。
$("#Select").toggleClass("select");
//hasClass(class) //检查当前的元素是否含有某个特定的类，假设有，则返回true。这事实上就是 is("." + class)。
cp = $("#Select").hasClass("select");
//is(expr|obj|ele|fn) 依据选择器、DOM元素或 jQuery 对象来检測匹配元素集合，假设当中至少有一个元素符合这个给定的表达式就返回true。
cp = $("#Select").is(".select");
//map()和each()两者的差别
//map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。
//each()返回的是原来的数组，并不会新创建一个数组。
//map()方法会返回一个新的数组。
假设在没有必要的情况下使用map。则有可能造成内存浪费。
cp=$("input").map(function () {
return $(this).val();
}).get().join("|");
//next() : 取得一个包括匹配的元素集合中每个元素紧邻的后面同辈元素的元素集合。
还有nextAll() 查找当前元素之后全部的同辈元素
//get(index) 取集合的index元素。返回的是dom对象，所以没法用JQuery对象
//dom对象和JQuery对象的差别：var cr=document.getElementById("cr"); //dom对象,Js固有的一组对象
// var cr = $("#cr"); //转换成jquery对象
//jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)
cp = $("#TextControl").next().get(0).innerHTML;
//prev():取得一个包括匹配的元素集合中每个元素紧邻的前一个同辈元素的元素集合。 还有prevAll() 查找当前元素之前全部的同辈元素
cp = $("#TextControl").prev().get(0).value;
//siblings() 取得一个包括匹配的元素集合中每个元素的全部唯一同辈元素的元素集合。能够用可选的表达式进行筛选。
$(".courseBlock").eq(0).children().last().find("p:last").siblings().each(function (index, dom) {
//console.log($(dom).html());
});
//andSelf() 增加先前所选的增加当前元素中,包括自己
$("#Select").find("option").andSelf().addClass("border");
//appendTo(content) 把全部匹配的元素追加到还有一个指定的元素元素集合中。
//A.appendTo(B)和A.append(B)的差别在于：appendTo是将A的内容追加到B元素中去。而append是将B的内容增加到A元素中去
var content = "<code>我是代码</code>";
$(content).appendTo("#divSetData");
//after(content|fn) 在每个匹配的元素之后插入内容。
//insertAfter(content) 把全部匹配的元素插入到还有一个、指定的元素元素集合的后面。
$("#NewDiv").after(content);
$(content).insertAfter("#NewDiv");
//before(content|fn) 在每个匹配的元素之前插入内容。
//insertBefore(content) 把全部匹配的元素插入到还有一个、指定的元素元素集合的前面。
$("#NewDiv").before(content);
$(content).insertBefore("#NewDiv");
//wrap(html|ele|fn) 把全部匹配的元素用其他元素的结构化标记包裹起来。
content = "<div class='wrap'></div>";
$("#NewDiv").wrap(content);
//unwrap() 这种方法将移出元素的父元素
//$("#NewDiv").unwrap();
//wrapInner(htm|ele|fnl) 将内容包裹在元素里面
$("#NewDiv").wrapInner(content);
//clone([Even[,deepEven]]) 克隆匹配的DOM元素而且选中这些克隆的副本。
//Events 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
V1.5以上版本号默认值是：false
$("#NewBtn").click(function () {
$(this).clone(true).insertAfter(this);
});
//remove([expr]) 从DOM中删除全部匹配的元素,包括自己。
$("#OldDiv").remove();
$("input").remove(".btnClass");//从DOM中删除匹配内容的元素
//replaceWith(content|fn) 将全部匹配的元素替换成指定的HTML或DOM元素。
$("#NewDiv").replaceWith("<div class='ccc'></div>");
//empty() 清空匹配的元素集合中全部的子节点。
$("#NewDiv").empty();
//offset([coordinates]) 获取匹配元素在当前视口的相对偏移。
$("#NewBtn").offset({ top: 50, left: 60 });
console.log($("#NewBtn").offset().top);
console.log($("#NewBtn").offset().left);
//position() 获取匹配元素相对父元素的偏移。
console.log($("#NewBtn").position().top);
console.log($("#NewBtn").position().left);
console.log(cp);
//width([val|fn]) 设置或获取宽度
//height([val | fn]) 设置或获取高度
$("#NewBtn").width(100);
$("#NewBtn").height(100);
//bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。
$("#BindBtn").bind({
click: function () { $("p").slideToggle(); },
mouseover: function () { $("body").css("background-color", "Blue"); },
mouseout: function () { $("body").css("background-color", "#FFFFFF"); }
});
//unbind(type,[data|fn]]) bind()的反向操作，从每个匹配的元素中删除绑定的事件。
//$("#BindBtn").unbind("click")
//one(type, [data], fn) 为每个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
$("#OneBtn").one("click", function () {
alert($(this).val());
});
//change([[data],fn]) 触发每个匹配元素的change事件
$("input[type='text']").change(function () {
console.log($(this).val());
});
//focus([[data],fn]) 触发每个匹配元素的focus事件。
//$("input[type=text]").focus(function () {
// this.blur(); //使人无法使用文本框
//});
//toggle([speed],[easing],[fn]) 假设元素是可见的，切换为隐藏的；假设元素是隐藏的，切换为可见的。
//用于确定显示 / 隐藏的开关。如：true - 显示元素。false - 隐藏元素
$("#BtnShowHide").click(function () {
$("#Poor").toggle(1000);
});
//slideToggle([speed],[easing],[fn]) 通过高度变化来切换全部匹配元素的可见性，并在切换完毕后可选地触发一个回调函数。
//slideDown([speed],[easing],[fn]) 通过高度变化（向下增大）来动态地显示全部匹配的元素
//slideUp([speed,[easing],[fn]]) 通过高度变化（向上减小）来动态地隐藏全部匹配的元素
$("#BtnSlide").click(function () {
$("#Poor").slideToggle("slow", "linear");
});
//fadeToggle([speed,[easing],[fn]]) 通过不透明度的变化来开关全部匹配元素的淡入和淡出效果
//fadeIn([speed],[easing],[fn]) 通过不透明度的变化来实现全部匹配元素的淡入效果(显示)
//fadeOut([speed],[easing],[fn]) 通过不透明度的变化来实现全部匹配元素的淡出效果(隐藏)
$("#BtnFad").click(function () {
$("#Poor").fadeToggle("slow");
});
//delay(duration,[queueName]) 设置一个延时来推迟运行队列中之后的项目。
$("#BtnDelay").click(function () {
$("#Poor").slideUp(1000).delay(1000).fadeIn(1000);
});
//jQuery.ajax(url,[settings]) 通过 HTTP 请求载入远程数据。
$.ajax({
type: "post",//get,post
url: "xxx.asp",
data: {
id:1
},
dataType: "html",//预期server返回的数据类型
async: true,//异步请求
success: function (data) {
}
});
//jQuery.each(object, [callback])
//通用例遍方法，可用于例遍对象和数组。
//不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍不论什么对象。
//回调函数拥有两个參数：第一个为对象的成员或数组的索引，第二个为相应变量或内容。
//假设须要退出 each 循环可使回调函数返回 false，其他返回值将被忽略。
$.each([1, 2, 3], function (i, n) {
console.log("key:" + i + " " + "value:" + n);
});
$.each({ name: "流", age: 15 }, function (i, n) {
console.log("key:" + i + " " + "value:" + n);
});
//jQuery.type(obj) 检測obj的数据类型。
console.log($.type(3));
//jQuery.isNumeric(value) 确定它的參数是否是一个数字。
console.log($.isNumeric("-10"));
//jQuery.trim(str) 去掉字符串起始和结尾的空格。
var c = " hello, how are you? ";
console.log($.trim(c));
//jQuery.merge(first,second) 合并两个数组，但不会去除反复元素
console.log($.merge([0, 1, 2], [2, 3, 4]));
//jQuery.unique(array) 删除数组中反复元素。仅仅处理删除DOM元素数组，而不能处理字符串或者数字数组。
console.log($.unique([0, 1, 2, 2, 3, 3, 4]).reverse());
//jQuery.parseJSON(json) 接受一个JSON字符串。返回解析后的对象。
//假设你什么都不传入，或者一个空字符串、null或undefined。parseJSON都会返回 null 。
var jsonObj = $.parseJSON('{"name":"陈锋","age":"16"}');
console.log(jsonObj.name + "今年：" + jsonObj.age);
//jQuery.proxy(function,context)
//这个函数还有还有一种使用方法。jQuery.proxy( scope, name )
//第一个參数是要设定的作用域对象。第二个參数是将要设置作用域的函数名（必须是第一个作用域对象的一个属性）
var obj = {
name: "王一鸣",
age: 15,
sleep: function () {
console.log(obj.name + "今年：" + obj.age);
}
};
$.proxy(obj, obj.sleep());
var add=EnumList.method.add; //获取add的值1
});
//定义JS枚举类型
var EnumList = {
/*
**method枚举类型
*/
method: {
add: 1,
update: 2,
del: 3
}
};</span>
上面JS脚本中这个JQuery里面的方法基本上都涵盖了。仅仅要掌握了，以后对JQuery的运用，基本没什么问题了。建议自己所有练习一遍，或者熟悉下。以后须要用到，也能够直接在网上看JQuery的文档，直接用也能够。
可是最主要的运用一定要掌握。
比方each()等等。