文章目录
jQuery
流行的js 类库
市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(例如12306.com等)
-
JavaScript类库(javascript框架):
* 定义:封装了很多预定义的对象和实用函数。
* 作用:能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。- Web1.0与Web2.0:
- Web1.0:以内容为中心(门户网站)
- Web2.0:以人为中心(社交网站)
- Web3.0:基于移动互联网的社交网站
- 富客户端与瘦客户端:
- 富客户端:在瘦客户端基础上,加上增删改查功能。
- 瘦客户端:做页面数据的静态展示。
- jQuery:
- 官方团队:
- 核心研发团队:核心内容
- UI研发团队:UI设计
- 插件制作团队:支持插件
- 分类:
- Web版本:我们主要学习
- UI版本:集成UI内容
- mobile版本:针对移动开发
- qunit:用于js测试
- 版本:
- 1.4.2版本:企业开发主流
- 1.8.3版本:学习研究主流
- 1.11.0版本:目前最新版本
- 2.1.0版本:目前最新版本(不再支持IE6.0\7.0\8.0等浏览器)
- 版本提供两个:
- 正常版本:代码及注释(学习研究)
- 压缩版本:代码(开发使用)GZIP
- 官方团队:
- Web1.0与Web2.0:
-
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>
密 码:<input type="password" name="password" id="password"><br><br>
邮 箱:<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>