您的位置：首页 > Web前端 > JQuery

jQuery详细介绍

2020-03-17 18:42 751 查看

文章目录

jQuery
流行的js 类库
bs 架构：性能
选择器（重点：要操作dom 必须先得到dom）（jQuery 给我们提供九种类型的选择器）
dom 操作 (节点的查找)
jQuery 当中的事件
JQuery的getscript与getjson
Jquery的异步表单提交
Jquery的ajax load交互
百度地图的调用(个人喜好)
双向通讯

jQuery

流行的js 类库

市场用得比较多两个框架： jQuery 比较适合做一些互联网的应用（例如12306.com等）

JavaScript类库(javascript框架)：
* 定义：封装了很多预定义的对象和实用函数。
* 作用：能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。
Web1.0与Web2.0： Web1.0：以内容为中心(门户网站)
Web2.0：以人为中心(社交网站)
Web3.0：基于移动互联网的社交网站

富客户端与瘦客户端：

瘦客户端：做页面数据的静态展示。

jQuery：

UI研发团队：UI设计
插件制作团队：支持插件

分类：

UI版本：集成UI内容
mobile版本：针对移动开发
qunit：用于js测试

版本：

1.8.3版本：学习研究主流
1.11.0版本：目前最新版本
2.1.0版本：目前最新版本(不再支持IE6.0\7.0\8.0等浏览器)

版本提供两个：

压缩版本：代码（开发使用）GZIP

extjs 比较适合做后台管理系统（电商（订单管理），银行，电信）

核心（重点）
主要功能：javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。

jQuery 优势：(宗旨：write less ，do more 写更少的代码，做更多的事情)

不污染顶级变量
* 顶级变量(顶级对象)：在jQuery中只有一个对象，jQuery或$
* 不污染：只能做调用操作，不能做增删改操作。
链式操作方式：一次性得到最终结果
隐式迭代：只关注输入和输出内容。
行为层与结构层的分离
* 行为层：逻辑处理
* 结构层：HTML代码标签

bs 架构：性能

1：轻量级（js 库非常小）

2：强大的选择器（获取页面上面的dom 元素
document.getElementById()
操作dom 必须先得到dom
）
3：出色的DOM操作的封装

4：可靠的事件处理机制(对事件进行了一个封装)

5：完善的Ajax（底层封装xmlhttprequest）

6：不污染顶级变量（在jquery 里面只有一个对象 jQuery == $）

7:出色的浏览器兼容性

8:链式操作方式($("#ddd").addClass().removeClass())

9:隐式迭代 (显示迭代:迭代一个数组)
显示迭代（for(var i=0;i<array.length;i++){

}）
隐身迭代屏蔽掉for 操作

10：行为层与结构层的分离

11：丰富的插件支持后期扩展非常方便

12：完善的文档
jQuery 只有一个对象（jQuery == $）一定要搞清楚jQuery 与dom 对象之间的区别于联系
dom对象：dom 对象是浏览器自带对象，dom 对象只能调用dom 里面的属性和方法，
不能调用jQuery 对象里面的属性和方法

jQuery对象：jquery 对象是通过jQuery 包装页面上面的元素或者dom
而产生的一个新的对象，jquery 对象时jQuery 独有的，不能调用dom
对象里面的属性和方法，jQuery 对象是一个数组。

jQuery 对象与dom 对象时可以相互转换的，转换之后它们就可以相互调用了

DOM对象
* DOM解析HTML页面，将页面元素解释为元素节点、属性节点、文本节点。
* 通过DOM解析HTML页面元素，所得到的DOM元素就是DOM对象。
* DOM对象可以使用Javascript中的方法。
JQuery对象
* JQuery对象就是通过JQuery包装DOM对象后产生的，JQuery对象是JQuery独有的。
* 虽然JQuery对象是包装DOM对象后产生的，但是JQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用JQuery里的方法。乱使用会报错。
* 约定：如果获取的是JQuery对象，那么要在变量面前加上$。
DOM对象转成JQuery对象
* 对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个JQuery对象了。(例如： $(DOM对象))
JQuery对象转成DOM对象
* 两种转换方式将一个JQuery对象转成DOM对象：[index] 和 .get(index);
1. JQuery对象是一个数组对象，通过[index]的方法，来得到相应的DOM对象。

2. JQuery本身提供，通过.get(index)方法，得到相应的DOM对象。

选择器（重点：要操作dom 必须先得到dom）（jQuery 给我们提供九种类型的选择器）

1：基本选择器

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//== window.onload = function(){}
$(document).ready(function(){
//<input type="button" value="选择 id为 one 的元素." id="btn1"/>
$("#btn1").click(function(){
$("#one").css("background","red");
});

//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
$("#btn2").click(function(){
$(".mini").css("background","yellow");
});

//<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background","green");
});

//<input type="button" value="选择 所有的元素." id="btn4"/>
$("#btn4").click(function(){
$("*").css("background","blue");

});

//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
$("#btn5").click(function(){
//组合选择器..
$("span,#two").css("background","blue");
});

});
</script>

2：层级选择器 (只有当前的这个方法返回的是jQuery 对象才能进行链式操作…)

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选择 body内的所有div元素." id="btn1"/>
$("#btn1").click(function(){
$("body div").css("background","blue");
});

//<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
$("#btn2").click(function(){
$("body>div").css("background","blue");
});

//<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
$("#btn3").click(function(){
$("#one+div").css("background","blue");
});

//<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
$("#btn4").click(function(){
$("#two~div").css("background","blue");
});

//<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
$("#btn5").click(function(){
//只有当前的这个方法返回的是jQuery 对象才能进行链式操作...
$("#two").siblings("div").css("background","blue");
});
});
</script>

(找到一堆页面元素，我们可以对这些元素加过滤条件，找到我们想要的这些元素，然后进行操作)

3：基本过滤选择器
过滤条件前面添加 : 符号

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选择第一个div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:first").css("background","red");
});

//<input type="button" value="选择最后一个div元素." id="btn2"/>
$("#btn2").click(function(){
$("div:last").css("background","green");
});

//<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:not('.one')").css("background","green");
});

//<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:even").css("background","green");
});

//<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div:odd").css("background","green");
});

//<input type="button" value="选择索引值等于3的元素." id="btn6"/>
$("#btn6").click(function(){
$("div:eq(3)").css("background","green");
});

//<input type="button" value="选择索引值大于3的元素." id="btn7"/>
$("#btn7").click(function(){
$("div:gt(3)").css("background","green");
});

//<input type="button" value="选择索引值小于3的元素." id="btn8"/>
$("#btn8").click(function(){
$("div:lt(3)").css("background","red");
});

//<input type="button" value="选择所有的标题元素." id="btn9"/>
$("#btn9").click(function(){
$(":header").css("background","red");
});

//<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
function move(){
$("#mover").slideToggle("slow",move);
}
move();

$("#btn10").click(function(){
$(":animated").css("background","red");
});
});
</script>

4:内容过滤选择器

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:contains('di')").css("background","red");
});

//<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
$("#btn2").click(function(){
$("div:empty").css("background","red");
});

//<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:has('.mini')").css("background","red");
});

//<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:parent").css("background","red");
});
});
</script>

5:可见度过滤选择器

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value=" 选取所有可见的div元素"  id="b1"/>
$("#b1").click(function(){
$("div:visible").css("background","red");
});

//<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
$("#b2").click(function(){
$("div:hidden").css("background","red").show(2000);
});

//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
$("#b3").click(function(){
//  <!--文本隐藏域-->
//				 <input type="hidden" value="hidden_1">
//				 <input type="hidden" value="hidden_2">
//				 <input type="hidden" value="hidden_3">
//				 <input type="hidden" value="hidden_4">

//var $input=$("input:hidden");

//首先我们通过dom 来遍历...
//显示迭代来便利..
//				for(var i=0;i<$input.length;i++){
//					alert($input[i].value);
//				}
//隐式迭代
$("input:hidden").each(function(index,dom){
//alert(index);
//alert(dom.value);
})
});

//<input type="button" value=" 选取onediv所有的div的, 并打印它们的值"  id="b4"/>
$("#b4").click(function(){
$("#onediv>div").each(function(index,dom){
alert($(dom).text());
})
});
});
</script>

6:属性过滤选择器

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div[title]").css("background","red");
});

//<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
$("#btn2").click(function(){
$("div[title=test]").css("background","red");
});

//<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
$("#btn3").click(function(){
$("div[title!=test]").css("background","red");
});

//<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div[title^=te]").css("background","red");
});

//<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div[title$=est]").css("background","red");
});

//<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
$("#btn6").click(function(){
$("div[title*=es]").css("background","red");
});

//<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
$("#btn7").click(function(){
$("div[id][title*=es]").css("background","red");
});
});
</script>

7:子元素过滤选择器

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选取每个class为one的div,父元素下的第2个子元素." id="btn1"/>
$("#btn1").click(function(){
//子元素过滤选择器特殊写法，: 前面加空格...  从1开始计算...
$("div[class=one] :nth-child(2)").css("background","red");
});

//<input type="button" value="选取每个class为one的div, 父元素下的第一个子元素." id="btn2"/>
$("#btn2").click(function(){
//第一种写法
//$("div[class=one] :nth-child(1)").css("background","red");
//第二种写法..
$("div[class=one] :first-child").css("background","red");
});

//<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
$("#btn3").click(function(){
$("div[class=one] :last-child").css("background","red");
});

//<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
$("#btn4").click(function(){
$("div[class=one] :only-child").css("background","red");
});
});
</script>

8:表单对象属性过滤选择器

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//<button id="btn1">对表单内 可用input 赋值操作.</button>
$("#btn1").click(function(){
$("input:enabled").val("玺哥");
});

//<button id="btn2">对表单内 不可用input 赋值操作.</button>
$("#btn2").click(function(){
$("input:disabled").val("玺哥");
});

//<button id="btn3">获取多选框选中的个数.</button>
$("#btn3").click(function(){
alert($("input:checked").size());
});

//<button id="btn4">获取下拉框选中的内容.</button>
$("#btn4").click(function(){
//alert($("select>option:selected").length);
$("select>option:selected").each(function(index,dom){
//alert($(dom).text());
var title=$(dom).attr("title");
alert(title);
})
});
});
</script>

9:表单选择器

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");

var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
.append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
.append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")

$("form").submit(function () { return false; }); // return false;不能提交.
});
//]]>
</script>

dom 操作 (节点的查找)

页面上面的元素分为三种类型的节点

1：元素节点（9 大选择器都是用来找元素节点）

2：属性节点（先找到元素节点，然后调用attr()）

3：文本节点 (先找到元素节点然后调用text())

1.查找结点

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<ul>
<li id="bj"></li>
<li id="tj" name="tianjin">天津</li>
</ul>
</body>
<script type="text/javascript">
//元素节点的查找
//怎么查找元素节点的属性节点
//alert($("#tj").attr("name"));

//文本节点查找  text();
//alert($("#tj").text());

//删除属性节点
$("#tj").removeAttr("name");
alert($("#tj").attr("name"));

//设置属性节点
$("#tj").attr("name","tianjin")
alert($("#tj").attr("name"));
</script>

2.创建节点

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
</ul>
</body>
<script type="text/javascript">
//通过jquery dom 创建<li id="tj" name="tianjin">天津</li>
//创建元素节点
var $li=$("<li></li>");

//设置属性节点
$li.attr("id","tj");
$li.attr("id","tj");
//设置文本节点
$li.text("天津");
alert('a');

//获取节点
var $city=$("#city");

//往节点里面追加创建好的节点..
$city.append($li);
</script>

3.内部插入节点

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>

<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>

<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>

<div id="foo1">Hello1</div>

</body>
<script type="text/javascript">
//	向每个匹配的元素的内部的结尾处追加内容
//	$("#bj").append($("#fk"));
//	:将每个匹配的元素追加到指定的元素中的内部结尾处
//	$("#bj").appendTo($("#fk"));
//	prepend(content):向每个匹配的元素的内部的开始处插入内容

//	$("#bj").prepend($("#fk"));

//	prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
//	$("#bj").prependTo($("#fk"));

</script>

4.外部插入节点

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>

<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>

<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>

<p  id="p3">I would like to say: p3</p>

<p  id="p2">I would like to say: p2</p>

<p  id="p1">I would like to say: p1</p>

</body>
<script type="text/javascript">
//	在每个匹配的元素之后插入内容
//	$("#bj").after($("#p3"));
//  在每个匹配元素 的前面插入内容
//	$("#bj").before($("#p3"));
//	$("#bj").insertAfter($("#p3"));

$("#bj").insertBefore($("#p3"));
</script>

5.删除节点

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京<p>海淀区</p></li>
<li id="tj" name="tianjin">天津<p>河西区</p></li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script type="text/javascript">
//$("#bj").remove();
$("#city").remove();
</script>

6.复制节点

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<button>保存</button><br>
<p>段落</p>
</body>
<script type="text/javascript">
//button增加事件
$("button").click(function(){
$("p").append($("button").clone(true));
});
//clone 克隆某个元素的副本，但是这个副本不具备任何的行为，不具备任何的时间
///如果需要把时间也克隆过去，需要在clone(true));
</script>

7.替换节点

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<html>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<button>保存</button>
</html>
<script type="text/javascript">
//	将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
//	$("button").replaceWith($("p"));
$("button").replaceAll($("p"));
</script>

8.属性操作

9.样式操作

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
.one{
width: 200px;
height: 140px;
margin: 40px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}

div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}

div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
</head>
<body>
<input type="button" value="采用属性增加样式"  id="b1"/>
<input type="button" value=" addClass"  id="b2"/>
<input type="button" value="removeClass"  id="b3"/>
<input type="button" value=" 切换样式"  id="b4"/>
<input type="button" value=" hasClass"  id="b5"/>
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<br>
<div id="mover">
动画
</div>
<br>
<span class="spanone">    span
</span>
</body>
<script type="text/javascript">
//<input type="button" value="采用属性增加样式"  id="b1"/>
$("#b1").click(function(){
$("#mover").css("background","red");
});

//<input type="button" value=" addClass"  id="b2"/>
$("#b2").click(function(){
$("#mover").addClass("mini");

});

//<input type="button" value="removeClass"  id="b3"/>
$("#b3").click(function(){
/*
* removeClass():
* 	* 不传参数:删除所有样式
* 	* 传递参数:删除指定样式
*/
$("#mover").removeClass();
//$("#mover").removeClass();
});

//<input type="button" value=" 切换样式"  id="b4"/>
$("#b4").click(function(){
$("#mover").toggleClass("one");
});

//<input type="button" value=" hasClass"  id="b5"/>
$("#b5").click(function(){
//hasClass():判断某个元素是否含有某个指定样式
$("#mover").addClass("mini");
alert($("#mover").hasClass("mini"));
});
</script>

10.遍历节点

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="nj" name="nanjing">南京
</li>
</ul>
</body>
<script type="text/javascript">
//该方法只考虑子元素而不考虑任何后代元素.
//alert($("#city").children().length);
//取得相邻元素的下一个同级元素
//alert($("#bj").next().text());

//alert($("#tj").prev().text());

//alert($("#bj").siblings().length);

//find
//选获取元素通过find 找到对应的标签的子元素的集合...
alert($("#city").find("li").length);
</script>

11.包裹节点

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200129140945896.png#pic=100x100

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200129141053875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0OTE1NA==,size_16,color_FFFFFF,t_70

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
</body>
<script type="text/javascript">
//jQuery代码如下：
// $("strong").wrap("<b></b>");
$("strong").wrapAll("<b></b>");
<br><<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong></br>
</script>

jQuery 当中的事件

//页面加载完毕执行 window.οnlοad=function(){
}
//页面加载完毕执行 $(function(){
})
$().ready(function(){
})
区别：window.onload 与 $(function(){}) 都是用来作于界面渲染完毕之后的初始化操作…
window.onload 需要等待页面上面所有的元素都绘制完毕之后才执行，包含图片。
$(function(){}) 页面上面所有的dom 元素绘制完毕之后就执行，不包含图片。

1：事件绑定

<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$("#bindbutton").click(function(){
$("div").bind("mouseover",function(){
// $(this).css("background","blue");
alert("a");
})
})
$("#unbindbutton").click(function(){
//解绑所有的时间..
//$("div").unbind();
$("div").unbind("mouseover");
})
})
</script>
<style type="text/css">
.redclass{
height:300px;
width:300px;
background:red;
}
</style>
</head>

<body>
<div  class="redclass">
asdfasdfasd
</div>

<input type="button" value="绑定事件" id="bindbutton">

<input type="button" value="解绑事件" id="unbindbutton">
</body>

2：移除事件

3：移除指定事件指定函数

4：事件切换：hover()

<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
//鼠标悬停事件
$("ul>li").mouseover(function(){
$(this).css("background","red");
});
$("ul>li").mouseout(function(){
$(this).css("background","white");
})
$("ul>li").hover(function(){
$(this).css("background","red");
},function(){
$(this).css("background","white");
})
})
</script>
</head>
<style type="text/css">
ul{
height:200px;
width:200px;
border:1px solid red;
}
ul li{
list-style:none;
}
</style>
<body>
<ul>
<li>郑州</li>
<li>许昌</li>
<li>洛阳</li>
<li>周口</li>
<li>新乡</li>
<li>南阳</li>
<li>日本</li>
<li>大阪</li>
</ul>
</body>

5：事件切换：toggle()

JQuery的getscript与getjson

1：getscript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>getScript  异步去加载服务端的一段脚本文件...</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){

$("#getScript").click(function(){
$.getScript("../../js/test.js")
})
})
</script>

<style type="text/css">
div{
background:red;
height:300px;
width:300px;
border:3px solid #abcdef;
display:none;
}
</style>
</head>

<body>
<div></div>
<input type="button"  id="getScript"  value="getScript 方法的调用">
</body>
</html>

2：getjson

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>getJSON 访问服务端，服务端返回的数据格式必须是json 的数据格式...</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){

$("#getJSON").click(function(){

$.getJSON("data.json",function(data){
//alert(data);
//alert(data);
//jQuery 在解析json 的时候要求key 上面需要有双引号...
var length=data.length;
alert(length);
});

})

})

</script>
</head>

<body>
<input type="button"  id="getJSON"  value="getJSON 方法的调用">
</body>
</html>

Jquery的异步表单提交

form.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>jQuery 异步提交表单</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$("#formbutton").click(function(){
//发送异步的ajax 请求...

//将表单里面的选项序列化成一个字符串...

//第一种方式...
//var data=$("#form1").serialize();

//序列化成一个数组...
var data=$("#form1").serializeArray();

//在做调试代码的时候我们一般使用alert
//但是alert 它只能打印字符串，或int 类型的数据，不能打印对象里面比较详细的信息...
//alert(data);

//浏览器给我们提供了一个对象叫console.info 可以打印对象里面更加详细的信息..

console.info(data);
for(var i=0;i<data.length;i++){
alert(data[i].name);
alert(data[i].value);
}
$.ajax({
url:"../../formServlet",
//						 data:{
//						 	username:$("#username").val(),
//							password:$("#password").val(),
//							email:$("#email").val(),
//						 },

//通过ajax 方法提交的时候有两种数据格式，一种字符串
// data:data,

//一个是json
data:data,
type:"POST",
success:function(data){
}
})
})
})
</script>
</head>
<body>
<form id="form1">
用户名：<input type="text" name="username" id="username"><br><br>
密&nbsp;&nbsp;码：<input type="password" name="password" id="password"><br><br>
邮&nbsp;&nbsp;箱：<input type="text" name="email" id="email"><br><br>
<input  type="button" value="异步提交表单" id="formbutton"/>
</form>
</body>
</html>

formServlet.java

package cn.itcast.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FormServlet extends HttpServlet {

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println("  <BODY>");
out.print("    This is ");
out.print(this.getClass());
out.println(", using the GET method");
out.println("  </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");

String username=request.getParameter("username");
String password=request.getParameter("password");

String email=request.getParameter("email");

System.out.println(username);

System.out.println(password);
System.out.println(email);
PrintWriter out = response.getWriter();

}

}

Jquery的ajax load交互

ajaxload.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>ajax 异步加载...</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--当用户第一次访问界面的时候我们不需要加载页面上面所有的资源,当用户想看的时候去加载...-->
<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>

<script type="text/javascript">
//js   window.onscroll
//			window.οnscrοll=function(){
//
//
//			}
//jQuery
$(window).scroll(function(){

var t=document.documentElement.scrollTop;

//alert(t);

if(t>0  && t<800){

loadImage("1");
}

if(t>800  && t<1600){

loadImage("2");
}

if(t>1600  && t<2400){

loadImage("3");
}

if(t>2400  && t<3200){
loadImage("4");

}

if(t>3200  && t<4000){

loadImage("5");
}
if(t>4000  && t<4800){
loadImage("6");

}
function loadImage(imageType){
$.ajax({
url:"../../imageServlet",
type:"POST",
data:{
imageType:imageType
},
success:function(data){
var area="#area_"+imageType;
var image="<img src='../../"+data+"'>";
$(area).html(image);
}
})

}
})
</script>
<style type="text/css">
#message{
height:4800px;
}
#message div{
height:800px;
border:30px solid red;
}
</style>
</head>
<body>
<div id="message">
<div id="area_1"></div>
<div id="area_2"></div>
<div id="area_3"></div>
<div id="area_4"></div>
<div id="area_5"></div>
<div id="area_6"></div>
</div>
</body>
</html>

imageServlet.java

package cn.itcast.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ImageServlet extends HttpServlet {

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println("  <BODY>");
out.print("    This is ");
out.print(this.getClass());
out.println(", using the GET method");
out.println("  </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();
System.out.println("itcast");
String imageType=request.getParameter("imageType");
if("1".equals(imageType)){

out.println("image/1.jpg");
}
if("2".equals(imageType)){

out.println("image/2.jpg");
}
if("3".equals(imageType)){

out.println("image/3.jpg");
}

if("4".equals(imageType)){

out.println("image/4.jpg");
}
if("5".equals(imageType)){
out.println("image/5.jpg");

}
if("6".equals(imageType)){

out.println("image/6.jpg");
}

}

}

百度地图的调用(个人喜好)

baiduMap.html

<!--
现在的互联网企业都是开放平台，百度的搜索接口，微信的朋友圈我们调用，sina 微博我们可以调
地图应用是一个比较常用  lbs
网页里面也可以实现地图调用，百度地图..主要是用移动端， 房地长网站，旅游网站...

使用js 去调用一下百度地图...
-->
<!DOCTYPE html>
<html>
<head>
<title>普通地图&全景图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4qXTGvclMqTZXkLsU3twnMA7"></script>
<style type="text/css">
body, html{width: 80%;height: 80%;overflow: hidden;margin:0;}
#panorama {height: 50%;overflow: hidden;}
#normal_map {height:50%;overflow: hidden;}
</style>
</head>
<body>
<div id="panorama"></div>
<div id="normal_map"></div>
<script type="text/javascript">
//全景图展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(116.343964,40.064279)); //根据经纬度坐标展示全景图
panorama.setPov({heading: -40, pitch: 6});

panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
//普通地图展示
var mapOption = {
mapType: BMAP_NORMAL_MAP,
maxZoom: 18,
drawMargin:0,
enableFulltimeSpotClick: true,
enableHighResolution:true
}
var map = new BMap.Map("normal_map", mapOption);
var testpoint = new BMap.Point(116.343964,40.064279);
map.centerAndZoom(testpoint, 18);
var marker=new BMap.Marker(testpoint);
marker.enableDragging();
map.addOverlay(marker);
marker.addEventListener('dragend',function(e){
panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
panorama.setPov({heading: -40, pitch: 6});}
);
</script>
</body>
</html>