与普通js一样,html、jsp都可以用,head中引用jquery-1.8.3.min.js,body中调用js的方法: head中<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
body中<script>$(document.body).css( "background", "black" );</script>
jquery手册上大约有250个方法
00、匹配…元素,表示找到该元素,结果为该元素
01、jQuery(…)简写成$(…)
02、方法的调用格式为$(…).方法名(…)
03、属性的调用格式为$(…).属性名
04、css选择器表示html标记单词
05、html标记表示整个html标记
06、DOM表示document,即文档
07、$(document).ready(方法)简写成$(方法)
08、请确保在 <body>的onload事件中没有注册函数,否则不会触发$(document).ready(方法) 09、
10、$(…)中不能使用”<input>”,只能使用"<input type='…'>"
11、$(“…”)双引号中的html标记中的属性值必须使用单引号
12、$(“div p”)表示找到所有div元素中的所有元素p
$(“div>p”)表示找到所有div元素中的一级子元素p
13、$.getScript(url,callback)表示url成功载入后调用callback方法
14、选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向,
即$("img").get().reverse();
15、冠:index([selector|element])的常用格式$('li').index($('#bar')),例如<li id="bar">bar</li>
搜索<li/>,返回第一个属性值=”bar”的是第几个<li/>,从0开始
例如<li id="foo">foo</li><li id="bar">bar</li>,返回值是1
16、冠:data(key,value)表示将key设置成value或value数组
然后使用$(“div”).data(key)时就可以将<div/>替换成value
或$(“div”).data(key).first将<div/>替换成value数组中的第一个元素
$(“div”).data(key).last将<div/>替换成value数组中的最后一个元素
情况1、$("div").data("blah", "hello"); //将blah设置成hello
然后使用$(“div”).data(“blah”)//将<div/>替换成hello
情况2、$("div").data("test", { first: 16, last: "pizza!" });//将test设置成数组
$("div").data("test").first //将第一个<div/>替换成16
$("div").data("test").last //将第二个<div/>替换成pizza!
相应的removeData(“…”)删除data(key,value)
17、:not(selector)表示不包含,我觉得更合适一些
18、这样记忆下面的:A..+单词翻译+B..,而不是一块翻译(否则意思就相反了)
$(“A”).append(“B”),即A内部追加B, $(“A”).after(“B”),即A后插入B
$(“A”).appendTo(“B”),即A追加到B内部, $(“A”).insertAfter(“B”),即A插入到B后 $(“A”).prepend(“B”),即A内部前置B, $(“A”).before(“B”),即A前插入B
$(“A”).prependTo(“B”),即A前置到B内部, $(“A”).insertBefore“B”),即A插入到B前
19、mouseenter、mouseleave位于匹配元素上方、离开匹配元素时才触发
而mouseover、mouseout位于匹配元素或其子元素上方、离开匹配元素或其子元素时都会触发(即在匹配元素的子元素间进入与离开都会触发)
================================================================================================================================================================//评分控件,心得体会:1.text() 和val()的区别 2.addClass() 和 .css() 两个用法的比较 3.学会使用标识 ================================================================================================================================================================<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="JQuery/1.7.1/jquery-1.7.1.js"></script><style>#dv span{font-size: 50px;width: 260px;background-color: #cccccc;color: Yellow;cursor: pointer;}</style><script type="text/javascript">$(function () {var isChecked;$("#dv>span").mousemove(function () {if (!isChecked) {$(this).text("★").prevAll().text("★").end().nextAll().text("☆");}}).mouseout(function () {if (!isChecked) {$("#dv>span").text("☆");}}).click(function () {isChecked = this;})})//心得体会</script></head><body><div id="dv"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div></body></html>================================================================================================================================================================//在布局的时候遇到了问题,float:left;要让两个都在同一排,必须同时float:XXX;================================================================================================================================================================<html xmlns="/1999/xhtml"><head><title></title><style type="text/css">.power {width:150px;height:100px;}.f {float:left;}#ctrl input {width:50px;}#ctrl {margin-left:20px;margin-right:20px;}</style><script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script><script type="text/javascript">// 子.appendTo(父)$(function () {$("#btn1").click(function () {$("#from :selected[jk!=has]").attr("jk", "has").clone().appendTo("#to");});})</script></head><body><form method="post"><select id="from" size="8" multiple="multiple" class="power f"><option value="admin">管理员</option><option value="teacher">教师</option><option value="student">学员</option><option value="other"
>游客</option><option value="others">其他...</option></select><div id="ctrl" class="f"><input type="button" name="name" value=">" id="btn1" /><br /><input type="button" name="name" value="<" id="btn2" /><br /><input type="button" name="name" value=">>" id="btn3" /><br /><input type="button" name="name" value="<<" id="btn4" /></div><select id="to" size="8" multiple="multiple" class="power f"></select></form></body></html>================================================================================================================================================================//1.美女图片切换,使用了animate(),注意他的用法,//2.产生动画的图片,position:relative 必须设置成相对定位才出现效果 //3.选择器和过滤器的用法,注意区分================================================================================================================================================================<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="Jquery/jquery-1.7.1.js"></script><style>#show{width: 448px;height: 280px;overflow: hidden;}img{position: relative;}#sel li{list-style-type: none;border: 1px solid green;width: 180px;margin-bottom:5px;padding-left: 100px;}</style><script type="text/javascript">$(function () {$("ul li").mouseover(function () {//停止上一次的操作$("#show :animated").stop();//$("#div :animated").stop();var $i = $(this).attr("title");$("#show img").animate({ left: -(parseInt($i) - 1) * 448 + "px" }, 200);// $("#show img").animate({ left: -($(this).text() - 1) * 448 + "px"}, 200);})})</script></head><body><div id="sel"><ul><li title="1">图片1</li><li title="2">图片2</li><li title="3">图片3</li><li title="4">图片4</li><li title="5">图片5</li><!-- <li title="1">1</li><li title="2">2</li><li title="3">3</li><li title="4">4</li><li title="5">5</li>--></ul></div><div id="show"><img src="images/animation.gif" /></div></body></html>================================================================================================================================================================//播放器第一个版本 布局问题 选择器标签的用法================
================================================================================================================================================<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="Jquery/jquery-1.7.1.js"></script><style type="text/css">#btns input{float: left;margin-left: 8px;margin-top: 15px;}#options{background-color: pink;}#options li{list-style-type: none;cursor: pointer;border: 1px solid green;}#list ul{display: none;}</style><script type="text/javascript">$(function () {//显示和隐藏功能模块$("#list>*:even").toggle(function () {$(this).next().slideDown("normal");$(this).attr("tagopen", "open");}, function () {$(this).next().slideUp("normal");$(this).removeAttr("tagopen");})//全选$("#selectAll").click(function () {$("#list>li[tagopen='open']+ul input").removeAttr("tag").attr("checked", "checked")});//全不选$("#selectNon").click(function () {if (true) {$("#list>li[tagopen='open']+ul input").removeAttr("checked").removeAttr("tag");}});//反选$("#selectRe").toggle(function () {//先标记区分一下,在全选和反选里面去掉标记$("#list input:[checked='checked']").attr("tag", "remove").removeAttr("checked");//没有被选择$("#list input:not[:checked]:[tag!=remove]").attr("checked", "checked");},function () {$("#list input:[checked='checked']:[tag!=remove]").removeAttr("checked");//没有被选择$("#list input:not[:checked]:[tag=remove]").attr("checked", "checked");});})</script></head><body><div id="main" style="margin-left: 100px; border: 1px solid green; width: 200px"><div id="btns"><input type="button" value="全选" id="selectAll" /> <input type="button" value="反选" id="selectRe" /> <input type="button" value="全不选" id="selectNon" /> </div><hr style="border: 4px groove green; clear: both" /><div id="options"><ul id="list"><li id="group1">经典歌曲</li><ul><li>
<input type="checkbox" value="天使的翅膀" />天使的翅膀<br /></li><li><input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br /></li><li><input type="checkbox" value="花香" />花香<br /></li><li><input type="checkbox" value="男人海洋" />男人海洋<br /></li><li><input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br /></li><li><input type="checkbox" value="大约在冬季" />大约在冬季<br /></li><li><input type="checkbox" value="王妃" />王妃<br /></li><li><input type="checkbox" value="突然的自我" />突然的自我<br /></li></ul><li id="group2">最经播放</li><ul><li><input type="checkbox" value="天使的翅膀" />天使的翅膀<br /></li><li><input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br /></li><li><input type="checkbox" value="花香" />花香<br /></li><li><input type="checkbox" value="男人海洋" />男人海洋<br /></li><li><input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br /></li><li><input type="checkbox" value="大约在冬季" />大约在冬季<br /></li><li><input type="checkbox" value="王妃" />王妃<br /></li><li><input type="checkbox" value="突然的自我" />突然的自我<br /></li></ul><li id="group3">所有好歌</li><ul><li><input type="checkbox" value="天使的翅膀" />天使的翅膀<br /></li><li><input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br /></li><li><input type="checkbox" value="花香" />花香<br /></li><li><input type="checkbox" value="男人海洋" />男人海洋<br />
</li><li><input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br /></li><li><input type="checkbox" value="大约在冬季" />大约在冬季<br /></li><li><input type="checkbox" value="王妃" />王妃<br /></li><li><input type="checkbox" value="突然的自我" />突然的自我<br /></li></ul><li id="group4">港台金曲</li><ul><li><input type="checkbox" value="天使的翅膀" />天使的翅膀<br /></li><li><input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br /></li><li><input type="checkbox" value="花香" />花香<br /></li><li><input type="checkbox" value="男人海洋" />男人海洋<br /></li><li><input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br /></li><li><input type="checkbox" value="大约在冬季" />大约在冬季<br /></li><li><input type="checkbox" value="王妃" />王妃<br /></li><li><input type="checkbox" value="突然的自我" />突然的自我<br /></li></ul></ul></div></div></body></html>=============================================================================================================================================================//计算器Jquery错误的做法,为什么num1和num2监视的结果是Nan<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="Jquery/jquery-1.7.1.js"></script><script type="text/javascript">$(function () {var num1 = parseInt($("#num1").val());var num2 = parseInt($("#num2").val())var result;$("#btn").click(function () {var $oper = $("#operation>option:selected").text();switch ($oper) {case "请选择": alert("请选择运算方式"); break;case "+": result = num1 + num2; break;case "-": result = num1 - num2; break;case "*": result = num1 * num2; break;
case "/": result = num1 / num2; break;}$("#result").val(result);})})</script></head><body><input type="text" value="" id="num1" /><select id="operation"><option value="0" selected="selected">请选择</option><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" value="" id="num2" /><input type="button" value="=" id="btn" /><input type="text" id="result" /></body></html>======================================================================================================================================================//计算器正确的做法=====================================================================================================================================================<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="Jquery/jquery-1.7.1.js"></script><script type="text/javascript">$(function () {//var num1 =parseInt($("#num1").val());//var num2 = parseInt($("#num2").val())var result;$("#btn").click(function () {var $oper = $("#operation>option:selected").text();switch ($oper) {case "请选择": alert("请选择运算方式"); break;case "+": result = parseInt($("#num1").val()) + parseInt($("#num2").val()); break;case "-": result = parseInt($("#num2").val()) - parseInt($("#num2").val()); break;case "*": result = parseInt($("#num2").val()) * parseInt($("#num2").val()); break;case "/": result = parseInt($("#num2").val()) / parseInt($("#num2").val()); break;}$("#result").val(result);})})</script></head><body><input type="text" value="" id="num1" /><select id="operation"><option value="0" selected="selected">请选择</option><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" value="" id="num2" /><input type="button" value="=" id="btn" /><input type="text" id="result" /></body></html>================================================================================================================================================================//无刷新品论Jquery版本,里面用到了appendTo()方法================================================================================================================================================================<!DOCTYPE html><html
xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="Jquery/jquery-1.7.1.js"></script><style type="text/css">#main{background-color: coral;margin: 0px auto;width: 500px;}#dv{/*position:relative;*/margin-left: 48px;}#btndv{margin-left: 422px;}.pContent{width: 422px;margin-left: 78px;}</style><script type="text/javascript">$(function () {$("#btn").click(function () {//得到用户输入的昵称和内容var $nickname = $("#nickname").val();var $content = $("#content").val();if ($nickname.length == 0) {$nickname = "路人甲";}if ($nickname.length != 0 && $content != 0) {$("<p id='pName'></p>").text($nickname +" "+ new Date().toLocaleTimeString()).appendTo($("#main"));$("<p class='pContent'></p>").text($content).appendTo($("#main"));//发表完毕之后,清空文本框中的内容$("#nickname").val("");$("#content").val("");}else {alert("昵称和内容不能为空");}})})</script></head><body><div id="main"><label for="nickname">昵称:</label><input type="text" name="nickname" id="nickname" /><div id="dv"><textarea id="content" cols="50" rows="10" maxlength="500"></textarea></div><div id="btndv"><input type="checkbox" value="匿名" id="ni" />匿名<input id="btn" type="button" value="发表" /></div><hr style="border: 2px solid green" /></div></body></html>===================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================
====================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================
=========================================
且确实可以很轻松地做出许多复杂的效果虽然jQuery上手简单比其他库容易学会但是要全面掌握却不轻松因为它涉及到网页开发的方方面面提…
jQuery学习总结因为项目需要同时也因为兴趣在近一段时间研究和使用了jQuery它真的是太强大了代码非常的优雅和简洁好后悔现在才…
Jquery开始documentreadyfunction可缩写成function选择器引号中可以有多个一起选择id要求id唯一c…
一选择网页元素jQuery的基本设计和主要用法就是quot选择某个网页元素然后对其进行某种操作quot这是它区别于其他函数库的根本…
jQuery总结与注意事项刚开始学了JQuqery众多的get等等符号早已把我搞晕了暂时就放弃了后来学习ASPNETAJAX在微软…
1、$(p).html(Hello$(p).text(Hellobworld/b!);bworld/b!);Html和text的区…
一、简介1.1、概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prot…
一简介11概述随着WEB20及ajax思想在互联网上的快速发展传播陆续出现了一些优秀的Js框架其中比较著名的有PrototypeY…
1jquery监听radion被选中的事件页面lttdclassquotinfradioquotwidthquot230quotg…
网站开发常用jQuery插件总结二弹出层插件Lightboxme网站开发过程中为了增加网站交互效果我们有时需要在当前页面弹出诸如登…