JavaWeb - jQuery
2024-06-05 12:49:43
jQuery
<!--jQuery 介绍什么是 jQuery？顾名思义，也就是 JavaScript 和查询(Query)，它就是辅助 JavaScript 开发的 js 类库。jQuery 核心思想!!!它的核心思想是 write less,do more(写的更少，做得更多)，所以它实现了很多浏览器的兼容问题。jQuery 流行程度jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 万个访问最多的网站中，有超过55% 在使用 jQuery。jQuery 好处!!!jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM(文档对象模型) 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能
-->
<!--常见问题?1.使用 jQuery 一定要引入 jQuery 库吗？答案: 是，必须2.jQuery 中的 $ 到底是什么?答案: 它是一个函数3.怎么为按钮添加点击响应函数的?答案:1.使用 jQuery 查询到标签对象2.使用标签对象.dick(function(){});
-->
01.HelloWorld.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><!--引入 jquery-1.7.2.js 类库--><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">// window.onload = function (){// var btnObj = document.getElementById("btnId");// alert(btnObj);//[object HTMLButtonElement] -->> dom对象(描述记录标签信息的对象)// btnObj.onclick = function (){// alert("js 原生的单击事件");// }// }// alert($);// 显示有值表示引入成功，没有表示引入失败//使用$()代替window.onload$(function(){ // 表示页面加载完成之后，相当 window.onload = function(){} : ( load事件 )//显示有值表示确实是在页面加载完成之后再执行的// var btnObj = document.getElementById("btnId");// alert(btnObj);//[object HTMLButtonElement]// var $btnObj = $("#btnId");// 表示按 id 查询标签对象// $btnObj.click(function (){ //绑定单击事件// alert("jQuery 的单击事件");// });//使用选择器获取按钮对象，随后绑定单击响应函数$("#btnId").click(function(){//弹出Helloalert('Hello');});});</script></head>
<body><button id="btnId">SayHello</button></body>
</html>
03.核心函数.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">/*$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$() 就是调用 $ 这个函数1.传入参数为 [函数] 时:表示页面加载完成之后。相当于 window.onload = function(){}2.传入参数为 [HTML 字符串] 时:会对我们创建这个 html 标签对象3.传入参数为 [选择器字符串] 时:$("#id属性值"); id选择器，根据 id 查询标签对象$("标签名"); 标签名选择器，根据指定的标签名查询标签对象$(".class属性值"); 类型选择器，可以根据 class 属性查询标签对象4.传入参数 [DOM对象] 时:会把这个 dom 对象转换为 jQuery 对象
*///核心函数的4个作用// 1.传入参数为 [函数] 时:$(function (){// alert("页面加载完成之后，自动调用");//页面加载完成之后，自动调用/* 复制:<div><span>div-span1</span><span>div-span2</span></div>粘贴进:$("");中则显示:$("<div>\n" +" <span>div-span1</span>\n" +" <span>div-span2</span>\n" +" </div>").appendTo("body");*/// 2.传入参数为 [HTML 字符串] 时:$("<div>" +" <span>div-span1</span>" +" <span>div-span2</span>" +" </div>").appendTo("body");//显示结果// div-span1 div-span2// div-span1 div-span2// 3.传入参数为 [选择器字符串] 时:// $("#id属性值"); id选择器，根据 id 查询标签对象// $("标签名"); 标签名选择器，根据指定的标签名查询标签对象// $(".class属性值"); 类型选择器，可以根据 class 属性查询标签对象// alert($("button").length);//3// 4.传入参数 [DOM对象] 时:// 会把这个 dom 对象转换为 jQuery 对象var btnObj = document.getElementById("btn01");// alert(btnObj);//[object HTMLButtonElement]alert( $(btnObj) );//[object Object] 转换为 jQuery 对象});//传入参数为[函数]时：在文档加载完成后执行这个函数//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回</script>
</head>
<body><div>
<!-- <span>div-span1</span>-->
<!-- <span>div-span2</span>--><button id="btn01">按钮1</button><button>按钮2</button><button>按钮3</button></div>
</body>
</html>
04.DOM对象和jQuery对象.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">/*jQuery 对象和 dom 对象区分什么是 jQuery 对象，什么是 dom 对象Dom 对象1.通过 getElementById() 查询出来的标签对象是 Dom 对象2.通过 getElementsByName() 查询出来的标签对象是 Dom 对象3.通过 getElementsByTagName() 查询出来的标签对象是 Dom 对象4.通过 createElement() 方法创建的对象，是 Dom 对象DOM 对象 Alert 出来的效果是:[object HTMLButtonElement]jQuery 对象5.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象6.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象7.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象jQuery 对象 Alert 出来的效果是: [object Object]jQuery 对象的本质是什么？jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数jQuery 对象和 Dom 对象使用区别jQuery 对象不能使用 DOM 对象的属性和方法DOM 对象也不能使用 jQuery 对象的属性和方法Dom 对象和 jQuery 对象互转1.dom 对象转化为 jQuery 对象() (*重点)1.先有 DOM 对象2.$(DOM 对象) 就可以转换成为 jQuery 对象2.jQuery 对象转为 dom 对象 (*重点)1.先有 jQuery 对象2.jQuery 对象[下标]取出相应的 DOM 对象JQuery 对象和 Dom 对象相互转换dom对象转换成为 JQuery 对象，var$obj=$(dom对象);------------------------------------------>dom 对象 JQuery 对象<------------------------------------------JQuery 对象转换成为 dom 对象，var dom=$obj[下标]
*/$(function(){//testDiv.css("color","red")//testDiv.style.color = "blue";// var arr = [12,"abc",true];// var $btns = $("button");// for(var i = 0; i < $btns.length; i++){// alert($btns[i]);// }// [object HTMLButtonElement] 显示四次// dom 对象的属性和方法 jQuery 方法是用不了的// document.getElementById("#testDiv").innerHTML = "这是 dom 对象的属性 InnerHTML";// $("#testDiv").innerHTML = "这是 dom 对象的属性 InnerHTML";//// document.getElementById("#testDiv").click(function (){// alert("click()是 dom 对象的方法");// });// dom 对象alert(document.getElementById("testDiv"));//[object HTMLDivElement]// 转换为 JQuery 对象alert( $(document.getElementById("testDiv")));//[object Object]// 再转换为 dom 对象alert( $(document.getElementById("testDiv"))[0]);//[object HTMLDivElement]$("#testDiv").click(function (){alert("click()是 jQuery 对象的方法");//click()是 jQuery 对象的方法});});</script>
</head>
<body><div id="testDiv">Atguigu is Very Good!</div><button id="dom2dom">使用DOM对象调用DOM方法</button><button id="dom2jQuery">使用DOM对象调用jQuery方法</button><button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button><button id="jQuery2dom">使用jQuery对象调用DOM方法</button></body>
</html>
01.基本选择器__.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;/* 设置 外边距 为5像素 */margin: 5px;background: #aaa;/* 黑色边框，粗1像素，实现 */border: #000 1px solid;/* 把列表项向左浮动 */float: left;/* 设置字体大小为 17像素 */font-size: 17px;/* 设置字体类型为: Verdana */font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide { /* hide是class值 *//* 不显示在页面上 */display: none;}</style><!-- 引入:jquery-1.7.2.js --><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function (){//1.选择 id 为 one 的元素 "background-color","#bbffaa"// $("#btn1").click(function (){// alert("单击事件");//单击事件// });$("#btn1").click(function (){// css()方法，可以设置和获取样式$("#one").css("background-color","#bbffaa");});//2.选择 class 为 mini 的所有元素$("#btn2").click(function (){/* 按类型查 类型选择器 .类名 */$(".mini").css("background-color","#bbffaa");});//3.选择 元素名是 div 的所有元素$("#btn3").click(function (){$("div").css("background-color","#bbffaa");});//4.选择所有的元素$("#btn4").click(function (){/* "*"表示所有 */$("*").css("background-color","#bbffaa");});//5.选择所有的 span 元素和 id 为 two 的元素$("#btn5").click(function (){$("span,#two").css("background-color","#bbffaa");});});</script></head><body>
<!-- <div><h1>基本选择器</h1></div> --> <input type="button" value="选择 id 为 one 的元素" id="btn1" /><input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /><input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /><input type="button" value="选择 所有的元素" id="btn4" /><input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为test</div></div><!-- style="display:none;": 不显示在页面上 --><div style="display:none;" class="none">style的display为"none"的div</div><!-- class="hide"：为隐藏设置的 class 属性 --><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span class="one" id="span">^^span元素^^</span></body>
</html>02.层次选择器__.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){//1.选择 body 内的所有 div 元素//全写$("#btn1").click(function(){$("body div").css("background", "#bbffaa");});//简写// $(function (){// });//2.在 body 内, 选择div子元素$("#btn2").click(function(){$("body > div").css("background", "#bbffaa");});//3.选择 id 为 one 的下一个 div 元素$("#btn3").click(function(){$("#one+div").css("background", "#bbffaa");});//4.选择 id 为 two 的元素后面的所有 div 兄弟元素$("#btn4").click(function(){$("#two~div").css("background", "#bbffaa");});});</script></head><body> <!-- <div><h1>层级选择器:根据元素的层级关系选择元素</h1>ancestor descendant ：parent > child ：prev + next ：prev ~ siblings ：</div> --><input type="button" value="选择 body 内的所有 div 元素" id="btn1" /><input type="button" value="在 body 内, 选择div子元素" id="btn2" /><input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /><input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span></body>
</html>03.基本的过滤选择器__.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">/*:first()获取第一个元素: 获取匹配的第一个元素注意：查询的结果哪怕只查到一个，它也会分装到几个对象中:last()获取最后个元素: 获取匹配的最后个元素:not(selector)去除所有与给定选择器匹配的元素在 jQuery 1.3 中，已经支持复杂选择器了(例如:not(div a) 和 :not(div,a)selector: 用于筛选的选择器:even匹配所有索引值为偶数的元素，从 0 开始计数查找表格的1、3、5...行(即索引值0、2、4...):odd匹配所有索引值为奇数的元素，从 0 开始计数查找表格的 2、4、6行(即索引值1、3、5...):eq(index)匹配一个给定索引值的元素index: 从 0 开始计数:gt(index)匹配所有大于给定索引值的元素index: 从 0 开始计数查找第二第三行，即索引值是 1 和 2，也就是比 0 大:it(index)匹配所有小于给定索引值的元素index: 从 0 开始计数查找第一第二行，即索引值是 0 和 1，也就是比 2 小:header匹配如 h1，h2，h3 之类的标题元素:animated匹配所有正在执行动画效果的元素*/$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();});$(document).ready(function(){//1.选择第一个 div 元素$("#btn1").click(function(){$("div:first").css("background", "#bbffaa");});//2.选择最后一个 div 元素$("#btn2").click(function(){$("div:last").css("background", "#bbffaa");});//3.选择class不为 one 的所有 div 元素$("#btn3").click(function(){$("div:not(.one)").css("background", "#bbffaa");});//4.选择索引值为偶数的 div 元素$("#btn4").click(function(){$("div:even").css("background", "#bbffaa");});//5.选择索引值为奇数的 div 元素$("#btn5").click(function(){$("div:odd").css("background", "#bbffaa");});//6.选择索引值为大于 3 的 div 元素$("#btn6").click(function(){$("div:gt(3)").css("background", "#bbffaa");});//7.选择索引值为等于 3 的 div 元素$("#btn7").click(function(){$("div:eq(3)").css("background", "#bbffaa");});//8.选择索引值为小于 3 的 div 元素$("#btn8").click(function(){$("div:lt(3)").css("background", "#bbffaa");});//9.选择所有的标题元素$("#btn9").click(function(){$(":header").css("background", "#bbffaa");});//10.选择当前正在执行动画的所有元素$("#btn10").click(function(){$(":animated").css("background", "#bbffaa");});//11.选择没有执行动画的最后一个 div$("#btn11").click(function(){$("div:not(:animated):last").css("background", "#bbffaa");});});</script></head><body>
<!-- <div>:first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated </div> --><input type="button" value="选择第一个 div 元素" id="btn1" /><input type="button" value="选择最后一个 div 元素" id="btn2" /><input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" /><input type="button" value="选择索引值为偶数的 div 元素" id="btn4" /><input type="button" value="选择索引值为奇数的 div 元素" id="btn5" /><input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" /><input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" /><input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" /><input type="button" value="选择所有的标题元素" id="btn9" /><input type="button" value="选择当前正在执行动画的所有元素" id="btn10" /> <input type="button" value="选择没有执行动画的最后一个div" id="btn11" /><h3>基本选择器.</h3><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在执行动画的div元素.</div></body>
</html>04.内容过滤选择器__.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">/*:contains(text)匹配包含给定文本的元素text: 一个用以查找的字符串:empty匹配所有不包含子元素或者文本的空元素(起始标签和结束标签中间无内容):parent匹配含有子元素或者文本的元素:has(select)匹配含有选择器所匹配的元素的 元素select: 一个用于筛选的选择器例如<div><p></p></div>,$("div:has(p)")显示的是包含p的div:*/div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt(); });/** :contains(text) :empty :has(selector) :parent */$(document).ready(function(){//1.选择 含有文本 'di' 的 div 元素$("#btn1").click(function(){$("div:contains('di')").css("background", "#bbffaa");});//2.选择不包含子元素(或者文本元素) 的 div 空元素$("#btn2").click(function(){$("div:empty").css("background", "#bbffaa");});//3.选择含有 class 为 mini 元素的 div 元素$("#btn3").click(function(){$("div:has(.mini)").css("background", "#bbffaa");});//4.选择含有子元素(或者文本元素)的div元素$("#btn4").click(function(){$("div:parent").css("background", "#bbffaa");});});</script></head><body> <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /><input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /><input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /><input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在执行动画的div元素.</div></body>
</html>06.属性过滤选择器__.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">div,span,p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;
}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;
}div.hide {display: none;
}</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">/**[attribute][attribute=value][attribute!=value][attribute^=value][attribute$=value][attribute*=value][attrSel1][attrSel2][attrSelN]*//*[attribute]匹配包含给定属性的元素。注意，在 jQuery 1.3 中，前导的 @ 符号已经被废除!如果想要兼容最新版本，只需要简单去掉 @ 符号即可attribute: 属性名[attribute=value]匹配给定的属性是某个特定值的元素attribute: 属性名value: 引号在大多数情况下是可选的，但在遇到诸如属性值包含"]"时，用以避免冲突。[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于: not([attr=value])<br>要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])attribute: 属性名value: 引号在大多数情况下是可选的，但在遇到诸如属性值包含"]"时，用以避免冲突。[attribute^=value]匹配给定的属性是以某些值开始的元素attribute: 属性名value: 引号在大多数情况下是可选的，但在遇到诸如属性值包含"]"时，用以避免冲突。[attribute$=value]匹配给定的属性是以某些值结尾的元素attribute: 属性名value: 引号在大多数情况下是可选的，但在遇到诸如属性值包含"]"时，用以避免冲突。[attribute*=value]匹配给定的属性是以包含某些值的元素attribute: 属性名value: 引号在大多数情况下是可选的，但在遇到诸如属性值包含"]"时，用以避免冲突。[selector1][selector2][selectorN]复合属性选择器，需要同时满足多个条件时使用。selector1: 属性选择器selector2: 另一个属性选择器，用以进一步缩小范围selectorN: 任意多个属性选择器*/$(function() {//1.选取含有 属性title 的div元素$("#btn1").click(function() {$("div[title]").css("background", "#bbffaa");});//2.选取 属性title值等于'test'的div元素$("#btn2").click(function() {$("div[title='test']").css("background", "#bbffaa");});//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)$("#btn3").click(function() {$("div[title!='test']").css("background", "#bbffaa");});//4.选取 属性title值 以'te'开始 的div元素$("#btn4").click(function() {$("div[title^='te']").css("background", "#bbffaa");});//5.选取 属性title值 以'est'结束 的div元素$("#btn5").click(function() {$("div[title$='est']").css("background", "#bbffaa");});//6.选取 属性title值 含有'es'的div元素$("#btn6").click(function() {$("div[title*='es']").css("background", "#bbffaa");});//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素$("#btn7").click(function() {$("div[id][title*='es']").css("background", "#bbffaa");});//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素$("#btn8").click(function() {$("div[title][title!='test']").css("background", "#bbffaa");});});</script>
</head>
<body><input type="button" value="选取含有 属性title 的div元素." id="btn1" /><input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" /><input type="button"value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" /><input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" /><input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" /><input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" /><input type="button"value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."id="btn7" /><input type="button"value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display: none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" value="123456789"size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function (){// 匹配所有不含有指定的属性，或者属性不等于特定值的元素。alert( $("input[name!='newsletter']").length );//1});</script>
</head>
<body><input type="checkbox" name="newsletter" value="Hot Fuzz"/><input type="checkbox" name="newsletter" value="Cold Fusion"/><input type="checkbox" value="Evil Plans"/>
</body>
</html>
08.表单对象属性过滤选择器__.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){/**:input匹配所有 input, textarea, select 和 button 元素:text匹配所有的单行文本框:password匹配所有密码框:radio匹配所有单选按钮:checkbox匹配所有复选框:submit匹配所有提交按钮:image匹配所有图像域:reset匹配所有重置按钮:button匹配所有按钮:file匹配所有文件域:hidden匹配所有不可见元素，或者type为hidden的元素表单对象的属性:enabled匹配所有可用元素:disabled匹配所有不可用元素:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option):selected匹配所有选中的option元素*//*设置 disabled="disabled" 后，显示灰色不可用*///1.对表单内 可用input 赋值操作$("#btn1").click(function(){// alert( $(":text:enabled").length );//2// val() 可以操作表单项(单选框、复选框、下拉列表、密码输入框、文本输入框等等)的 value 属性值// 它可以设置和获取$(":text:enabled").val("我是万能的程序员");});//2.对表单内 不可用input 赋值操作$("#btn2").click(function(){$(":text:disabled").val("管你可用不可用，反正我是万能的程序员");});//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数$("#btn3").click(function(){alert( $(":checkbox:checked").length );});//4.获取多选框，每个选中的 value 值$("#btn4").click(function(){// 获取全部选中的复选框标签对象var $checkboies = $(":checkbox:checked");// 老式遍历// for(var i = 0; i < $checkboies.length; i++){// alert( $checkboies[i].value );// }// each 方法时 jQuery 对象提供用来遍历元素的方法// 在遍历的 function 函数中，有一个 this 对象，这个 this 对象，就是当前遍历到的 dom 对象$checkboies.each(function (){alert( this.value );});});//5.获取下拉框选中的内容$("#btn5").click(function(){// 获取选中的 option 标签对象var $options = $("select option:selected");// 遍历，获取 option 标签中的文本内容$options.each(function (){// 在 each 遍历的 function 函数中，有一个 this 对象。这个 this 对象是当前正在遍历到的 dom 对象alert(this.innerHTML);});});})</script></head><body><h3>表单对象属性过滤选择器</h3><button id="btn1">对表单内 可用input 赋值操作.</button><button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /><button id="btn3">获取多选框选中的个数.</button><button id="btn4">获取多选框选中的内容.</button><br /><br /><button id="btn5">获取下拉框选中的内容.</button><br /><br /><form id="form1" action="#"> 可用元素: <input name="add" value="可用文本框1"/><br>不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>可用元素: <input name="che" value="可用文本框2"/><br>不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br><br>多选框: <br><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" />test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<br><br>下拉列表1: <br><!-- multiple="multiple" 支持多选 --><select name="test" multiple="multiple" style="height: 100px" id="sele1"><option>浙江</option><option selected="selected">辽宁</option><option>北京</option><option selected="selected">天津</option><option>广州</option><option>湖北</option></select><br><br>下拉列表2: <br><select name="test2"><option>浙江</option><option>辽宁</option><option selected="selected">北京</option><option>天津</option><option>广州</option><option>湖北</option></select></form> </body>
</html>html()、text()、val()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">/*html() 它可以设置和获取起始标签和结束标签中的内容 跟 dom 属性 innerHTML 一样text() 它可以设置和获取起始标签和结束标签中的文本 跟 dom 属性 innerTest 一样val() 它可以设置和获取表单项的 value 属性值 跟 dom 属性 value 一样*/$(function (){// 不传参数，是获取，传递参数是设置// alert( $("div").html() );//我是div标签 <span>我是div中的span</span>// $("div").html("<h1>我是div中的标题 1</h1>");// 设置 页面上显示: 我是div中的标题 1// 不传参数，是获取，传递参数是设置// alert( $("div").text() );// 获取 我是div标签 <span>我是div中的span</span>// $("div").text("<h1>我是div中的标题</h1>");// 设置 页面上显示: <h1>我是div中的标题</h1>// 不传参数，是获取，传递参数是设置$("button").click(function (){alert($("#username").val());// 获取 显示输入框中输入的内容$("#username").val("超级程序员");// 设置 点击按钮，输入框中便会显示设置的内容});});</script>
</head>
<body><div>我是div标签 <span>我是div中的span</span></div><input type="text" name="username" id="username"><button>操作输入框</button>
</body>
</html>
批量操作
<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {/*// 批量操作单选$(":radio").val(["radio2"]);// 批量操作筛选框的选中状态$(":checkbox").val(["checkbox3","checkbox2"]);// 批量操作多选的下拉框选中状态$("#multiple").val(["mul1","mul3","mul4"]);*/// 操作单选的下拉框选中状态// $("#single").val(["sin2"]);// $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]// );});</script>
</head>
<body>单选：<input name="radio" type="radio" value="radio1" />radio1<input name="radio" type="radio" value="radio2" />radio2<br/>多选：<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3<br/>下拉多选 ：<select id="multiple" multiple="multiple" size="4"><option value="mul1">mul1</option><option value="mul2">mul2</option><option value="mul3">mul3</option><option value="mul4">mul4</option></select><br/>下拉单选 ：<select id="single"><option value="sin1">sin1</option><option value="sin2">sin2</option><option value="sin3">sin3</option></select>
</body>
attr()、prop()
<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">/*attr(): 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等attr 方法还可以操作非标准的属性。比如自定义属性: abc、bbjprop(): 可以设置和获取属性的值，只推荐操作 checked、readOnly、selected、disabled 等等*/$(function () {//attr// alert( $(":checkbox:first").attr("name") );//获取 checkbox1// $(":checkbox:first").attr("name","abc");//设置 checkbox1 为 abc// alert( $(":checkbox").attr("checked") );//checked 官方觉得返回undefined(未定义)是一个错误// alert( $(":checkbox").prop("checked") );//true$(":checkbox:first").attr("abc","abcValue");//设置 abc="abcValue"alert($(":checkbox:first").attr("abc"));//abcValue});</script>
</head>
<body><br/>多选：<input name="checkbox1" type="checkbox" checked="checked" value="checkbox1" />checkbox1<input name="checkbox2" type="checkbox" value="checkbox2" />checkbox2
</body>
全选、全不选、反选
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function (){// 给全选绑定单击事件$("#checkedAllBtn").click(function (){$(":checkbox").prop("checked",true);});// 给全不选绑定单击事件$("#checkedNoBtn").click(function (){$(":checkbox").prop("checked",false);});// 反选单击事件$("#checkedRevBtn").click(function (){// 查询全部的球类的复选框$(":checkbox[name='items']").each(function (){// alert(this);// [object HTMLInputElement]this.checked = !this.checked;});// 要检查，是否满选// 获取全部的球类个数var allCount = $(":checkbox[name='items']").length;//再获取选中的球类个数var checkedCount = $(":checkbox[name='items']:checked").length;// if(allCount == checkedCount){// $("#checkedAllBox").prop("checked",true);// } else{// $("#checkedAllBox").prop("checked".false);// }$("#checkedAllBox").prop("checked",allCount == checkedCount);});// [提交]按钮单击事件$("#sendBtn").click(function (){// 获取选中的球类的复选框$(":checkbox[name='items']:checked").each(function (){alert(this.value);});});// 给[全选/全不选]绑定单击事件$("#checkedAllBox").click(function (){// 在事件的 function 函数中，有一个 this 对象，这个 this 对象是当前正在相应事件的 dom 对象// alert(this.checked);$(":checkbox[name='items']").prop("checked",this.checked);});// 给全部球类绑定单击事件$(":checkbox[name='items']").click(function (){// 要检查 是否全选// 获取全部的球类个数var allCount = $(":checkbox[name='items']").length;//再获取选中的球类个数var checkedCount = $(":checkbox[name='items']:checked").length;// if(allCount == checkedCount){// $("#checkedAllBox").prop("checked",true);// } else{// $("#checkedAllBox").prop("checked".false);// }$("#checkedAllBox").prop("checked",allCount == checkedCount);});});</script>
</head>
<body><form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /><input type="checkbox" name="items" value="足球" />足球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="羽毛球" />羽毛球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="checkedAllBtn" value="全 选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反 选" /><input type="button" id="sendBtn" value="提 交" /></form></body>
</html>
dom 增删改
<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">/*内部插入：appendTo(): a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素prependTo(): a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素外部插入：insertAfter(): a.insertAfter(b) 得到 bainsertBefore(): a.insertBefore(b) 得到 ab替换:replaceWith(): a.replaceWith(b) 用 b 替换掉 areplaceAll(): a.replaceAll(b) 用 a 替换掉所有 b删除：remove(): a.remove(); 删除 a 标签empty(): a.empty(); 清空 a 标签里的内容*/$(function (){// $("<h2>标题</h2>").appendTo("div");// $("<h2>标题</h2>").prependTo("div");//// $("<h3>标题</h3>").insertAfter("div");// $("<h1>标题</h1>").insertBefore("div");//// $("div").replaceWith( $("<h2>标题</h2>") );//用"<h2>标题</h2>"替换"<div>123</div>及其子元素"// $("<h2>标签2</h2>").replaceAll("h2");//用"<h2>标题2</h2>"替换"h2"// $("div").remove();//删除标签// $("div").empty();//删除内容});</script>
</head>
<body><br/><div>123</div>
</body>
从左到右，从右到左__.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><style type="text/css">select {width: 100px;height: 140px;}div {width: 130px;float: left;text-align: center;}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">// 页面加载完成$(function (){// 第一个按钮【选中添加到右边】$("button:eq(0)").click(function (){// 左边选中的option.appendTo(左边的Select);$("select:eq(0) option:selected").appendTo($("select:eq(1)"));});// 第二个按钮【选中添加到右边】$("button:eq(1)").click(function (){// 左边的option.appendTo(左边的Select);$("select:eq(0) option").appendTo("select:eq(1)");});// 第三个按钮【选中添加到右边】$("button:eq(2)").click(function (){// 右边选中的option.appendTo(左边的Select);$("select:eq(1) option:selected").appendTo($("select:eq(0)"));});// 第四个按钮【选中添加到右边】$("button:eq(3)").click(function (){// 右边的option.appendTo(左边的Select);$("select:eq(1) option").appendTo("select:eq(0)");});});</script>
</head>
<body><div id="left"><!--multiple="multiple"多选--><select multiple="multiple" name="sel01"><option value="opt01">选项1</option><option value="opt02">选项2</option><option value="opt03">选项3</option><option value="opt04">选项4</option><option value="opt05">选项5</option><option value="opt06">选项6</option><option value="opt07">选项7</option><option value="opt08">选项8</option></select><button>选中添加到右边</button><button>全部添加到右边</button></div><div id="rigth"><!--multiple="multiple"多选--><select multiple="multiple" name="sel02"></select><button>选中删除到左边</button><button>全部删除到左边</button></div></body>
</html>
动态添加和删除行记录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function (){// 创建一个用于复用的删除的 function 函数var deleteFun = function (){// 在事件相应的 function 函数中，有一个 this 对象，这个 this 对象是当前正在相应事件的 dom 对象var $trObj = $(this).parent().parent();var name = $trObj.find("td:first").text();/*** confirm 是 JavaScript 语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>* 当用于点击了确定，就返回 true。当用户点击了取消，就返回 false*/// alert( confirm("你确定要删除么?") );// 用于显示 true falseif( confirm("你确定要删除[" + name + "]么?") ){$trObj.remove();}// return false; 可以阻止，元素的默认行为。return false;};// 给【Submit】按钮绑定单击事件$("#addEmpButton").click(function (){// 获取输入框，姓名，邮箱，工资的内容var name = $("#empName").val();var email = $("#email").val();var salary = $("#salary").val();// 创建一个行标签对象，添加到显示数据的表格中var $trObj = $("<tr>" +"<td>" + name + "</td>" +"<td>" + email + "</td>" +"<td>" + salary + "</td>" +"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +"</tr>");// 添加到显示数据的表格中$trObj.appendTo( $("#employeeTable") );// 给天际的行的 a 标签绑上事件$trObj.find("a").click( deleteFun );// 注意 deleteFun 而不是 deleteFun()});// 给删除的 a 标签绑定单击事件$("a").click( deleteFun );// 注意 deleteFun 而不是 deleteFun()})</script>
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div></body>
</html>jqueryCss___.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">/*标签名.类型选择器标签名: 限定当前样式只能给*使用*/div{width:100px;height:260px;}div.whiteborder{border: 2px white solid;}div.redDiv{background-color: red;}div.blueBorder{border: 5px blue solid;}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">/*addClass() 添加样式removeClass() 删除样式toggleClass() 有就删除，没有就添加样式。offset() 获取和设置元素的坐标。*/$(function(){var $divEle = $('div:first');$('#btn01').click(function(){//addClass() - 向被选元素添加一个或多个类(多个中间用空格)$divEle.addClass('redDiv blueBorder');});$('#btn02').click(function(){//removeClass() - 从被选元素删除一个或多个类$divEle.removeClass("redDiv blueBorder")});$('#btn03').click(function(){//toggleClass() - 对被选元素进行添加/删除类的切换操作$divEle.toggleClass('redDiv')});$('#btn04').click(function(){//offset() - 返回第一个匹配元素相对于文档的位置。var pos = $divEle.offset();console.log(pos);$divEle.offset({top:100,left:50});});})</script>
</head>
<body><!-- <div class="blueBorder">1</div>--><table align="center"><tr><td><div class="border"></div></td><td><div class="btn"><input type="button" value="addClass()" id="btn01"/><input type="button" value="removeClass()" id="btn02"/><input type="button" value="toggleClass()" id="btn03"/><input type="button" value="offset()" id="btn04"/></div></td></tr></table><br /> <br /><br /> <br /></body>
</html>
动画__.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link href="css/style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">/* 基本show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed],[easing],[fn]) 滑动slideDown([spe],[eas],[fn]) slideUp([speed,[easing],[fn]]) slideToggle([speed],[easing],[fn]) 淡入淡出fadeIn([speed],[eas],[fn]) fadeOut([speed],[eas],[fn]) fadeTo([[spe],opa,[eas],[fn]]) fadeToggle([speed,[eas],[fn]])*//*基本动画show() 将隐藏的元素显示hide() 将可见的元素隐藏。toggle() 可见就隐藏，不可见就显示。以上动画方法都可以添加参数。1、第一个参数是动画 执行的时长，以毫秒为单位2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)淡入淡出动画fadeIn() 淡入（慢慢可见）fadeOut() 淡出（慢慢消失）fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明fadeToggle() 淡入/淡出 切换*/$(function(){//显示 show()$("#btn1").click(function(){$("#div1").show(2000,function (){alert("show动画完成")});}); //隐藏 hide()$("#btn2").click(function(){$("#div1").hide(1000,function (){alert("hide动画完成")});}); //切换 toggle()$("#btn3").click(function(){$("#div1").toggle(1000,function (){alert("toggle动画 完成")});});// 伸缩动画// var abc = function (){// $("#div1").toggle(1000,abc);// }// abc();//淡入 fadeIn()$("#btn4").click(function(){$("#div1").fadeIn(2000,function (){alert(" fadeIn 完成 ")});}); //淡出 fadeOut()$("#btn5").click(function(){$("#div1").fadeOut(2000,function (){alert(" fadeOut 完成 ")});}); //淡化到 fadeTo()$("#btn6").click(function(){$("#div1").fadeTo(2000,0.5,function (){alert(' fadeTo 完成 ');})}); //淡化切换 fadeToggle()$("#btn7").click(function(){$("#div1").fadeToggle(1000,function (){alert(" fadeToggle 完成 ");});}); })</script></head><body><table style="float: left;"><tr><td><button id="btn1">显示show()</button></td></tr><tr><td><button id="btn2">隐藏hide()</button></td></tr><tr><td><button id="btn3">显示/隐藏切换 toggle()</button></td></tr><tr><td><button id="btn4">淡入fadeIn()</button></td></tr><tr><td><button id="btn5">淡出fadeOut()</button></td></tr><tr><td><button id="btn6">淡化到fadeTo()</button></td></tr><tr><td><button id="btn7">淡化切换fadeToggle()</button></td></tr></table><div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果</div></body></html>displaydcs__.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">* {margin: 0;padding: 0;
}body {font-size: 12px;text-align: center;
}a {color: #04D;text-decoration: none;
}a:hover {color: #F50;text-decoration: underline;
}.SubCategoryBox {width: 600px;margin: 0 auto;text-align: center;margin-top: 40px;
}.SubCategoryBox ul {list-style: none;
}.SubCategoryBox ul li {display: block;float: left;width: 200px;line-height: 20px;
}.showmore , .showless{clear: both;text-align: center;padding-top: 10px;
}.showmore a , .showless a{display: block;width: 120px;margin: 0 auto;line-height: 24px;border: 1px solid #AAA;
}.showmore a span {padding-left: 15px;background: url(img/down.gif) no-repeat 0 0;
}.showless a span {padding-left: 15px;background: url(img/up.gif) no-repeat 0 0;
}.promoted a {color: #F50;
}</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function() {// 基本初始状态$("li:gt(5):not(:last)").hide();//索引大于 5 的都隐藏// 给功能的按钮绑定单击事件$("div div a").click(function (){//div 下的 div 下的 a 标签// 让某些品牌，显示，或隐藏$("li:gt(5):not(:last)").toggle();//索引大于 5 的// 判断 品牌，当前是否可见if( $("li:gt(5):not(:last)").is(":hidden") ){// 品牌隐藏的状态：1.显示全部品牌 == 角标向下$("div div a span").text("显示全部品牌");$("div div").removeClass();// 删掉原来的样式$("div div").addClass("showmore");// 去掉高亮$("li:contains('索尼')").removeClass("promoted");} else {// 品牌可见的状态：2.显示精简品牌 == 角标向上$("div div a span").text("显示精简品牌");$("div div").removeClass();// 删掉原来的样式$("div div").addClass("showless");// 加高亮$("li:contains('索尼')").addClass("promoted");}return false;});});</script>
</head>
<body><div class="SubCategoryBox"><ul><li><a href="#">佳能</a><i>(30440) </i></li><li><a href="#">索尼</a><i>(27220) </i></li><li><a href="#">三星</a><i>(20808) </i></li><li><a href="#">尼康</a><i>(17821) </i></li><li><a href="#">松下</a><i>(12289) </i></li><li><a href="#">卡西欧</a><i>(8242) </i></li><li><a href="#">富士</a><i>(14894) </i></li><li><a href="#">柯达</a><i>(9520) </i></li><li><a href="#">宾得</a><i>(2195) </i></li><li><a href="#">理光</a><i>(4114) </i></li><li><a href="#">奥林巴斯</a><i>(12205) </i></li><li><a href="#">明基</a><i>(1466) </i></li><li><a href="#">爱国者</a><i>(3091) </i></li><li><a href="#">其它品牌相机</a><i>(7275) </i></li></ul><div class="showless"><a href="more.html"><span>显示全部品牌</span></a></div></div>
</body>
</html>load___.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">//$(function(){}) 和 window.onload = function(){}的区别// 他们分别是在什么时候触发？// 1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。// 2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载// 完成。// 他们触发的顺序？// 1、jQuery 页面加载完成之后先执行// 2、原生 js 的页面加载完成之后// 他们执行的次数？// 1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。// 2、jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。//1、导入jquery的.js文件//2、可以在导入文件后的任意位置// 1）、可以写在head里面，如果写在head里面可能导致元素查找不到等问题// 1-1、只需要把代码写在$(function(){ jquery代码 })// 2）、可以写在head之后的任意位置，我们一般不采用这种写法。// 3）、综合以上考虑，1-1//3、window.onload & $(function(){})//window.onload只可以使用一次//$(function(){})可以使用多次window.onload = function (){alert("原生 js 的页面加载完成之后 --1")}window.onload = function (){alert("原生 js 的页面加载完成之后 --2")}window.onload = function (){alert("原生 js 的页面加载完成之后 --3")}// $(document).ready(function (){// });// jquery的页面加载完成之后$(function (){alert("jquery 的页面加载完成 之后 --1")});$(function (){alert("jquery 的页面加载完成 之后 --2")});$(function (){alert("jquery 的页面加载完成 之后 --3")});</script>
</head>
<body><button>我是按钮</button><iframe src="http://localhost:8080"></iframe><img src="http://localhost:8080/1.jpg" alt=""/><!-- <iframe src="http://www.baidu.com"></iframe> --></body>
</html>
bind____.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link href="css/style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">/*click() 它可以绑定单击事件，以及触发单击事件mouseover() 鼠标移入事件mouseout() 鼠标移出事件bind() 可以给元素一次性绑定一个或多个事件。one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。unbind() 跟 bind 方法相反的操作，解除事件的绑定live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效*/$(function(){//1.通常绑定事件的方式//2.jQuery提供的绑定方式：bind()函数//3.合并“鼠标移入”和“鼠标移出”事件//4.合并单击事件//5.切换元素可见状态//6.只绑定一次// $("h5").click(function (){ // 传 function 是绑定事件// alert('h5单击事件 == click方法绑定')// });// 使用 live 绑定的单击事件$("h5").live("click",function (){alert("h5 单击事件 == live 方法绑定")})$('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel") );// $("button").click(function (){// $("h5").click(); // 不传 function 是触发事件// });// 鼠标移入// $("h5").mouseover(function (){// console.log("你进来了")// });// 鼠标移出// $("h5").mouseout(function (){// console.log("你出去了")// });// $("h5").bind("click",function (){// console.log("这是 bind 绑定的 click 事件");// });// 使用 bind 绑定事件// $("h5").bind("click mouseover mouseout",function (){// console.log("这是 bind 绑定的 click 事件");// });// $("h5").one("click mouseover mouseout",function (){// console.log("这是 one 绑定的事件");// });// $("h5").unbind("click mouseover");// 删除 点击 和 鼠标移出// $("h5").unbind();// 全都删除});</script></head><body><div id="panel"><h5 class="head">什么是jQuery?</h5><div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。</div><button>按钮</button></div></body></html>事件的冒泡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 13px;line-height: 130%;padding: 60px;}#content{width: 220px;border: 1px solid #0050D0;background: #96E555;}span{width: 200px;margin: 10px;background: #666666;cursor: pointer;color: white;display: block;}p{width: 200px;background: #888;color: white;height: 16px;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">/*事件的冒泡什么是事件的冒泡？事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。那么如何阻止事件冒泡呢？ 在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。*/$(function(){$("#content").click(function (){alert("我是div")});$("span").click(function (){alert("我是 span")// return false;});})</script></head><body><div id="content">外层div元素<span>内层span元素</span>外层div元素</div><div id="msg"></div> <br><br><a href="http://www.hao123.com">WWW.HAO123.COM</a> </body>
</html>eventObj__emp.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">#areaDiv {border: 1px solid black;width: 300px;height: 50px;margin-bottom: 10px;}#showMsg {border: 1px solid black;width: 300px;height: 20px;}</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//1.原生javascript获取 事件对象// window.onload = function (){// document.getElementById("areaDiv").onclick = function (event) {// console.log(event);// }// }//2.JQuery代码获取 事件对象// $(function (){// $("#areaDiv").click(function (event){// console.log(event);// });// });//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。$(function (){$("#areaDiv").bind("mouseover mouseout",function (event){if(event.type == "mouseover"){console.log("鼠标移入");} else if (event.type == "mouseout"){console.log("鼠标移出");}});});</script>
</head>
<body><div id="areaDiv"></div><div id="showMsg"></div></body>
</html>
imgFollow__.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">body {text-align: center;}#small {margin-top: 150px;}#showBig {position: absolute;display: none;}</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){$("#small").bind("mouseover mouseout mousemove",function (event){if(event.type == "mouseover"){$("#showBig").show();} else if (event.type == "mouseout"){$("#showBig").hide();} else if (event.type == "mousemove"){console.log(event);$("#showBig").offset({left: event.pageX + 10,top: event.pageY});}});});</script>
</head>
<body><img id="small" src="img/small.jpg" /><div id="showBig"><img src="img/big.jpg"></div></body>
</html>
regist.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>尚硅谷会员注册页面</title><link type="text/css" rel="stylesheet" href="../../static/css/style.css" ><srcipt type="text/javascript" src="../../static/script/jquery-1.7.2.js"></srcipt><script type="text/javascript">// 页面加载完成之后$(function (){// 给注册绑定单击事件$("#sub_btn").click(function (){// 验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位// 1.获取用户输入框里的内容var usernameText = $("#username").val();// 2.创建正则表达式对象var usernamePatt = /^\w{5,12}$/;// 3.使用 test 方法验证if(!usernamePatt.test(usernameText)){// 4.提示用户结果$("span.errorMsg").text("用户不合法!");return false;}// 验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位// 1.获取密码输入框里的内容var passwordText = $("#password").val();// 2.创建正则表达式对象var passwordPatt = /^\w{5,12}$/;// 3.使用 test 方法验证if(!passwordPatt.test(passwordText)){// 4.提示用户结果$("span.errorMsg").text("密码不合法!");return false;}// 验证确认密码：和密码相同// 1.获取确认密码内容var repwdText = $("#repwd").val();// 2.和密码相比较if(repwdText != passwordText){// 3.提示用户$("span.errorMsg").text("确认密码和密码不一致!");return false;}// 邮箱验证：xxxxx@xxx.com// 1.获取邮箱里的内容var emailText = $("#email").val();// 2.创建正则表达式对象var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z]?)+(\.{1,2}[a-z]+)+$/;// 3.使用 test 方法验证是否合法if (!emailPatt.test(emailText)){// 4.提示用户$("span.errorMsg").text("邮箱格式不合法!");return false;}// 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。var codeText = $("#code").val();// 去掉验证码前后空格alert("去空格前:[" + codeText + "]")codeText = $.trim(codeText);alert("去空格后:[" + codeText + "]")if(codeText == null || codeText == ""){// 4.提示用户$("span.errorMsg").text("验证码不能为空!");return false;}$("span.errorMsg").text("");});});</script><style type="text/css">.login_form{height:420px;margin-top: 25px;}</style>
</head>
<body>
<div id="login_header"><img class="logo_img" alt="" src="../../static/img/logo.gif" >
</div><div class="login_banner"><div id="l_content"><span class="login_word">欢迎注册</span></div><div id="content"><div class="login_form"><div class="login_box"><div class="tit"><h1>注册尚硅谷会员</h1><span class="errorMsg"></span></div><div class="form"><form action="regist_success.html"><label>用户名称：</label><input class="itxt" type="text" placeholder="请输入用户名"autocomplete="off" tabindex="1" name="username" id="username" /><br /><br /><label>用户密码：</label><input class="itxt" type="password" placeholder="请输入密码"autocomplete="off" tabindex="1" name="password" id="password" /><br /><br /><label>确认密码：</label><input class="itxt" type="password" placeholder="确认密码"autocomplete="off" tabindex="1" name="repwd" id="repwd" /><br /><br /><label>电子邮件：</label><input class="itxt" type="text" placeholder="请输入邮箱地址"autocomplete="off" tabindex="1" name="email" id="email" /><br /><br /><label>验证码：</label><input class="itxt" type="text" style="width: 150px;" id="code"/><img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px"><br /><br /><input type="submit" value="注册" id="sub_btn" /></form></div></div></div></div>
</div>
<div id="bottom"><span>尚硅谷书城.Copyright ©2015</span>
</div>
</body>
</html>
JavaWeb - jQuery相关推荐
- JavaWeb = jQuery使用详解
jQuery 是一个优秀的 javascript 的轻量级框架之一,封装了 dom 操作.事件.页面动画.异步操作等功能. 特别值得一提的是基于 jquery 的插件非常丰富,大多数前端业务场景都有其 ...
- JavaWeb jQuery
1. jQuery 介绍 什么是 jQuery ? jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 js 类库. ...
- javaweb+jQuery ajax实例
什么是ajax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJA ...
- javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍 什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
- JavaWeb笔记：第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx
JavaWeb笔记:第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx 1. MVC ...
- 基于javaweb的水果店商城超市系统(java+ssm+jsp+ajax+jquery+mysql)
基于javaweb的水果店商城超市系统(java+ssm+jsp+ajax+jquery+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea ...
- 基于javaweb的景区旅游管理系统(java+springboot+html+layui+bootstrap+jquery+mysql)
基于javaweb的景区旅游管理系统(java+springboot+html+layui+bootstrap+jquery+mysql) 运行环境 Java≥8.MySQL≥5.7 开发工具 ecl ...
- 基于javaweb的高校运动会管理系统(java+ssm+jsp+js+jquery+mysql)
基于javaweb的高校运动会管理系统(java+ssm+jsp+js+jquery+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/m ...
- java接口支持ajax,【JavaWeb】jQuery对Ajax的支持
jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|pos ...
最新文章
- Ubuntu 16.04 安装anaconda3详细教程（从下载源到测试成功）
- 说说设计模式~大话目录(Design Pattern)
- 返回结果集的存储过程实例及调用
- 文件上传获取file的全路径名_Java中的File类与I/O流
- 剑指Offer 斐波那契数列
- 全自动安装redhat enterprise linux,自动安装OS_RedHat Enterprise Linux Server 5.4
- struts2 使用Validation框架进行数据验证
- AFM测试探针简介-科学指南针
- 系统论的应用——心理学
- 多开夜神模拟器adb连接
- PageHelper.startPage的使用
- ＜第2.5个月＞新店日记，shopee要投入多少钱？利润怎么样能赚钱吗好做吗？shopee孵化期考核
- PPT图标标签显示带误差的百分比格式
- 离散数学知识总结 第十一章 几种特殊的图
- MATLAB裁剪视频（裁剪固定区域）
- 北风修仙笔记—2020年5月
- 英语期刊写作-通往国际学术舞台的阶梯第三章答案
- 关于符合车规的高精度定位产品
- 计算机体系结构基础知识
- Java的起源、发展与基本概念