HTML 学习笔记 JQuery（锋利的JQuery 代码）
一 制作简单的导航栏
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <style type="text/css"> #menu {width: 300px;} /*cursor 规定光标的显示类型*/ .has_children{background: #555555; color: #ffffff;cursor: pointer;} .highlight{color: #ffffff; background: green;} div { /*内间距*/ padding: 1px; clear: left; } div a { background: #888888; /*标签a先不显示*/ display: none; float: left; margin: 2px; widows: 300px; } </style> <script> $(function() { //为class = "has_children"的div添加点击事件 $(".has_children").click(function() { $(this).addClass("highlight") //将子节点的元素显示出来 并重新定位到上次操作的元素 $(this).children("a").show().end() //将点击div临近的兄弟元素 移除点击类 $(this).siblings().removeClass("highlight").children("a").hide() }) }) </script> </head> <body> <div id="menu"> <div class="has_children"> <span>第一章－认识JQuery</span> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jQuery</a> <a>1.3-编写简单jQuery代码</a> <a>1.4-jQuery对象和DOM对象</a> <a>1.5-解决jQuery和其它库的冲突</a> <a>1.6-jQuery开发工具和插件</a> <a>1.7-小结</a> </div> <div class="has_children"> <span>第2章-jQuery选择器</span> <a>2.1-jQuery选择器是什么</a> <a>2.2-jQuery选择器的优势</a> <a>2.3-jQuery选择器</a> <a>2.4-应用jQuery改写示例</a> <a>2.5-选择器中的一些注意事项</a> <a>2.6-案例研究——类似淘宝网品牌列表的效果</a> <a>2.7-还有其它选择器么？</a> <a>2.8-小结</a> </div> <div class="has_children"> <span>第3章-jQuery中的DOM操作</span> <a>3.1-DOM操作的分类</a> <a>3.2-jQuery中的DOM操作</a> <a>3.3-案例研究——某网站超链接和图片提示效果</a> <a>3.4-小结</a> </div> </div> </body> </html>
二 选中提示
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> </head> <body> <input type="checkbox" id="cr" /> <label for="cr">我已经阅读了上面的制度</label> <!--<div id="div100">哈哈哈哈</div>--> </body> <script> //JavaScript 操作 // var dom = document.getElementById("cr") // dom.addEventListener("click",function() { // if (dom.checked) { // alert("感谢您的支持，请继续操作") // } // }) //JQuery操作 $(function() { $("#cr").click(function() { if ($(this).is(":checked")) { alert("感谢您的支持，请继续操作") } }) }) </script> </html>
三 基本选择器
JS文件
$(document).ready(function(){
$("#reset").click(function(){
$("*").removeAttr("style");
$("div[class=none]").css({"display":"none"});
});
$("input[type=button]").click(function(){
if($("#isreset").is(":checked")){
$("#reset").click();
}
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
})
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;
}
HTML文件
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/Selecter.css"/> </head> <body> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <h3>基本选择器.</h3> <!-- 控制按钮 --> <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 /><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="mover">正在执行动画的span元素.</span> </body> <script> $(document).ready(function(){ //选择 id为 one 的元素 $('#btn1').click(function(){ $('#one').css("background","#bfa"); }); //选择 class 为 mini 的所有元素 $('#btn2').click(function(){ $('.mini').css("background","#bfa"); }); //选择 元素名是 div 的所有元素 $('#btn3').click(function(){ $('div').css("background","#bfa"); }); //选择 所有的元素 $('#btn4').click(function(){ $('*').css("background","#bfa"); }); //选择 所有的span元素和id为two的div元素 $('#btn5').click(function(){ $('span,#two').css("background","#bfa"); }); }); </script> </html>
四 层次选择器
<html> <head> <meta charset="UTF-8"> <title>层次选择器</title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/Selecter.css" /> </head> <body> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <h3>基本选择器.</h3> <!-- 控制按钮 --> <input type="button" value="选择 body中所有的div元素." id="btn1"/> <input type="button" value="选择 body中子元素是div的." id="btn2"/> <input type="button" value="选择 class为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="mover">正在执行动画的span元素.</span> </body> <script> $(function() { $("#btn1").click(function() { //选择body中所有的div元素 $("body div").css("background","#00FFFF") }) $("#btn2").click(function() { //选择body中的所有子元素div $("body > div").css("background","#00FFFF") }) $("#btn3").click(function() { //选择class为one的下一个div元素 $(".one + div").css("background","#00FFFF") }) $("#btn4").click(function() { //选择ID为two的元素后面所有的div兄弟元素 $("#two ~ div").css("background","#00FFFF") }) }) </script> </html>
五 基本过滤选择器
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/Selecter.css" /> </head> <body> <h3>基本过滤选择器.</h3> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <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的元素." id="btn6"/> <input type="button" value="选择索引值大于3的元素." id="btn7"/> <input type="button" value="选择索引值小于3的元素." id="btn8"/> <input type="button" value="选择所有的标题元素." id="btn9"/> <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> <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="mover">正在执行动画的span元素.</span> </body> <script> $(function() { //选择第一个div元素 $("#btn1").click(function() { $("div:first").css("background","#00FFFF") }) //选择最后一个div元素 $("#btn2").click(function() { $("div:last").css("background","#00FFFF") }) //选择class不为one的所有div元素 $("#btn3").click(function() { $("div:not(.one)").css("background","#00FFFF") }) //选择索引值为偶数的div元素 $("#btn4").click(function() { $("div:even").css("background","#00FFFF") }) //选择索引值为奇数的div元素 $("#btn5").click(function() { $("div:odd").css("background","#00FFFF") }) //选择索引值等于3的元素 $("#btn6").click(function() { $("div:eq(3)").css("background","#00FFFF") }) //选择索引值大于3的元素 $("#btn7").click(function() { $("div:gt(3)").css("background","#00FFFF") }) //选择索引值小于3的元素 $("#btn8").click(function() { $("div:lt(3)").css("background","#00FFFF") }) //选择所有的标题元素 $("#btn9").click(function() { $(":header").css("background","#00FFFF") }) //选择 当前正在执行动画的元素 $("#btn10").click(function() { $(":animated").css("background","#00FFFF") }) }) </script> </html>
六 内容过滤选择器
<html> <head> <meta charset="UTF-8"> <title>内容过滤选择器</title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/Selecter.css" /> </head> <body> <h3>内容过滤选择器.</h3> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <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"/> <!-- 测试的元素 --> <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="mover">正在执行动画的span元素.</span> </body> <script> $(document).ready(function() { //选取含有文本"di"的div元素 $("#btn1").click(function() { $("div:contains(di)").css("background","#00FFFF") }) //选取不包含子元素(或者文本元素)的div $("#btn2").click(function() { $("div:empty").css("background","#00FFFF") }) //选取含有class为mini的div元素 $("#btn3").click(function() { $("div:has(.mini)").css("background","#00FFFF") }) //选取含有子元素(或者文本元素)的div元素 $("#btn4").click(function() { $("div:parent").css("background","#00FFFF") }) }) </script> </html>
七 可见性过滤选择器
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="../js/assist.js"></script> <link type="text/css" rel="stylesheet" href="../css/Selecter.css" /> </head> <body> <h3>可见性过滤选择器.</h3> <button id="reset">手动重置页面元素</button><br/><br/> <input type="button" value="选取所有可见的div元素." id="btn_visible"/> <br/> <input type="button" value="选取所有不可见的元素.包括< input type='hidden'/>和< div style='display:none;'>." id="btn_hidden"/> <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="mover">正在执行动画的span元素.</span> </body> <script> $(function() { //选取所有不可见的元素 $("#btn_hidden").click(function() { alert( "不可见的元素有："+$('body :hidden').length +"个!\n"+ "其中不可见的div元素有:"+$('div:hidden').length+"个!\n"+ "其中文本隐藏域有:"+$('input:hidden').length+"个!"); $("div:hidden").show(3000).css("background","#00FFFF") }) //选取所有可见的元素 $("#btn_visible").click(function() { $("div:visible").css("background","#00FFFF") }) }) </script> </html>
八 子元素过滤选择器
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="../js/assist.js"></script> <link rel="stylesheet" href="../css/demo.css" /> </head> <body> <button id="reset">手动设置页面元素</button> <input type="checkbox" id="isreset" checked="checked" /> <label for="isreset">点击下列按钮先自动重置页面</label> <h3>子元素过滤选择器</h3> <input type="button" value="选取每个class为one的div父元素下的第2个子元素" id="btn1" /> <input type="button" value="选取每个class为one的div父元素下的第一个子元素" id="btn2" /> <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="btn4" /> <div class="one" id="one"> id为one class为one的div <div class="mini"> class为mini的div </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> <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="mover">正在执行动画的span元素.</span> </body> <script type="text/javascript"> $(function() { //选取每个父元素下的第二个子元素 $("#btn1").click(function() { $("div:nth-child(2)").css("background","#008000") }) //选取父元素下的第一个子元素 $("#btn2").click(function() { $("div:first-child").css("background","#008000") }) //选取父元素下的最后一个子元素 $("#btn3").click(function() { $("div:last-child").css("background","#008000") }) //如果父元素仅仅只有一个子元素，那么选中这个子元素 $("#btn4").click(function() { $("div:only-child").css("background","#008000") }) }) </script> </html>
九 表单对象属性过滤选择器
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> </head> <body> <h3>表单对象属性过滤选择器</h3> <form id="form1" action="#"> <button type="reset">重置所有的表单元素</button> <br /><br /> <button id="btn1">对表单内 可用input赋值操作</button> <button id="btn2">对表单内不可用input操作</button> 可用元素<input name="add" value="可用文本框" /> <br /> 不可用元素<input name="email" disabled="disabled" value="不可用文本框" /><br /> 可用元素<input name="che" value="可用文本框" /> <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 <div></div> <br /> 下拉列表1:<br /> <!--mulitiple 是控制是否展开--> <select name="test" multiple="multiple" style="height: 100px;"> <option>浙江</option> <option selected="selected">湖南</option> <option>北京</option> <option selected="selected">天津</option> <option>广州</option> <option>湖北</option> </select> <br /> 下拉列表:<br /> <select name="test2"> <option>浙江</option> <option>湖南</option> <option selected="selected">北京</option> <option>天津</option> <option>广州</option> <option>湖北</option> </select> <div></div> </form> </body> <script type="text/javascript"> $(function() { //重置表单元素 $(":reset").click(function(){ setTimeout(function() { countChecked(); $("select").change(); },0); }); //对表单内 可用的input进行赋值操作 $("#btn1").click(function() { $("#form1 input:enabled").val("这里变化了") return false }) //对表单内不可用的input进行赋值操作 $("#btn2").click(function() { $("#form1 input:disabled").val("我是不可用哦") }) //使用:checkbox选取所有的复选框 $(":checkbox").click(countChecked) function countChecked() { var n = $("input:checked").length $("div").eq(0).html("<strong>有 "+ n +" 个被选中！</strong>") } //进入页面就调用 countChecked(); //使用:selected选择器，来操作下拉列表. $("#form1 select").change(function () { var str = "" $("#form1 select :selected").each(function() { str += $(this).text() + ","; }) $("div").eq(1).html("<strong>你选中的是："+str+"</strong>"); }).trigger("change") // trigger('change') 在这里的意思是： // select加载后，马上执行onchange. // 也可以用.change()代替. }) </script> </html>
十 表单对象选择器
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> </head> <body> <form id="form1" action="#"> <input type="button" value="Button" /><br /> <input type="checkbox" name="c" />1 <input type="checkbox" name="c" />2 <input type="checkbox" name="c" />3 <br /> <input type="file" /><br /> <input type="hidden" /> <div style="display: none;">test</div> <br /> <input type="image" /><br /> <input type="password" /><br /> <input type="radio" name="a" />1 <input type="radio" name="a" />2 <input type="radio" name="a" />3 <br /> <input type="reset" /><br /> <input type="submit" value="提交"/><br /> <input type="text" /><br /> <select><option>Option</option></select><br/> <textarea rows="5" cols="20"></textarea><br /> <button>Button</button><br /> </form> <div></div> </body> <script> $(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") }) </script> </html>
十二 插入节点
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> </head> <body <h3>街头访问</h3> <p title="你最喜欢的水果是">你最喜欢的水果是</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> <p id="pone">我想说</p> <p id="ptwo">在我之前插入</p> </body> <script> $(function () { //创建元素节点 var $li_1 = $("<li title='香蕉'>香蕉</li>") $("ul").append($li_1) //或者这样 $("<li title='雪梨'>雪梨</li>").appendTo($("ul")) //弹出雪梨 代表 alert($("ul li[title = 雪梨]").attr("title")) //插入节点 //向每个匹配的元素内部前置内容 $("p:eq(0)").prepend($("<b>请问</b>")) //或者这样 <p><b>嘿嘿</b>你最喜欢的水果是</p> 以上都是元素内部插入 $("<b>嘿嘿</b>").prependTo($("p:first")) //元素外部插入 在元素前或者元素后 $("#pone").after($("<span>你是不是傻</span>")) //或者这样 $("<span>你是不是傻</span>").insertAfter($("#pone")) //上面的两句代码都是在元素后插入一个元素 //在元素前插入一个元素 $("#ptwo").before($("<p>哈哈哈哈</p>")) //或者这样 $("<p>heiheihei</p>").insertBefore($("#ptwo")) }) </script> </html>
十三 移动节点 删除节点
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> <li title="雪梨">雪梨</li> </ul> </body> <script> $(function() { //把苹果移动到菠萝的后面 橘子没动 菠萝也灭懂 $("ul li:eq(0)").insertAfter($("ul li:eq(2)")) //删除节点 $("ul li:eq(0)").remove() //remove()方法也可以这样用 $("ul li").remove("li[title = 菠萝]") //empty()方法 只是清空元素中的内容 并没有清空元素 $("ul li:eq(0)").empty() }) </script> </html>
十四 复制节点 移除节点
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> </head> <body> <h3>街头访问</h3> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> <script> $(function() { //复制节点 //如果你想复制的节点也有绑定的事件 那么加上参数clone(true) $("ul li").click(function () { $(this).clone(true).appendTo("ul") }) //替换节点 // $("p").replaceWith($("<strong>你最喜欢的水果是什么</strong>")) //或者是这样 $("<strong>你最喜欢的水果是什么呢</strong>").replaceAll($("p")) }) </script> </html>
十五 包裹节点 替换样式
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <style type="text/css"> .high { background: red; } </style> </head> <body> <h3>街头访问</h3> <strong title="选择你最喜欢的水果." class="myClass">你最喜欢的水果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> <script> $(function() { $("strong").click(function() { $("strong").toggleClass("high"); if ($("strong").hasClass("high")) { alert("添加了样式") } }) // //用small元素把strong元素包裹起来 将所有匹配的元素进行单独包裹 // $("strong").wrap($("<small></small>")) // //wrapall() 将所有匹配的元素用一个元素包裹起来 // $("ul li").wrapAll($("<small></small>")) // //wrapinner()方法 不是包裹元素 而是包裹元素中的内容 // $("strong").wrapInner($("<h3></h3>")) }) </script> </html>
十六 优化输入框
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> </head> <body> <input type="text" id="address" value="请输入邮箱地址" /><br /> <input type="text" id="password" value="请输入邮箱密码" /><br /> <input type="button" value="登陆" /> </body> <script> $(function () { //获取焦点 $("#address").focus(function () { var txt_value = $(this).val(); if (txt_value == "请输入邮箱地址") { $(this).val(""); } }) //失去鼠标焦点 $("#address").blur(function () { var txt_value = $(this).val(); if (txt_value == "") { $(this).val("请输入邮箱地址"); } }) $("#password").focus(function(){ var txt_value = $(this).val(); if(txt_value==this.defaultValue){ $(this).val(""); } }); $("#password").blur(function(){ var txt_value = $(this).val(); if(txt_value==""){ $(this).val(this.defaultValue); } }) }) </script> </html>
十七 使用val()方法操作select checkbox radio
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <style type="text/css"> .test { font-weight: bold; color: red; } .add { font-style: italic; } </style> </head> <body> <input type="button" value="设置单选下拉框选中" /> <input type="button" value="设置多选下拉框选中" /> <input type="button" value="设置单选框和多选框选中" /> <br /> <select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option> </select> <select id="multiple" multiple="multiple" style="height: 120px;"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option> </select> <br /> <input type="checkbox" value="check1"/> 多选1 <input type="checkbox" value="check2"/> 多选2 <input type="checkbox" value="check3"/> 多选3 <input type="checkbox" value="check4"/> 多选4 <br /> <input type="radio" value="radio1" name="a" />单选1 <input type="radio" value="radio2" name="a"/> 单选2 <input type="radio" value="radio3" name="a"/> 单选3 </body> <script> $(function () { //设置单选下拉框的选中 $("input:eq(0)").click(function () { $("#single option").removeAttr("selected"); //设置选中 // $("#single option:eq(1)").attr("selected",true); //或者这样 $("#single").val(["选择2号"]) }) //设置多选下拉框选中 $("input:eq(1)").click(function(){ $("#multiple option").removeAttr("selected"); //移除属性selected // $("#multiple option:eq(2)").attr("selected",true) //或者这样 $("#multiple").val(["选择2号","选择3号"]) }); //设置单选框和多选框选中 $("input:eq(2)").click(function(){ $(":checkbox").removeAttr("checked"); //移除属性checked $(":radio").removeAttr("checked"); //移除属性checked // $("[value=check2]:checkbox").attr("checked",true);//设置属性checked // $("[value=check3]:checkbox").attr("checked",true);//设置属性checked //或者这样 $(":checkbox").val(["check2","check3"]) // $("[value=radio2]:radio").attr("checked",true);//设置属性checked //或者这样 $(":radio").val(["radio2"]); }); }) </script> </html>
十八 基本节点操作
<html> <head> <meta charset="UTF-8"> <title>遍历节点</title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> <script> //children()方法只考虑子元素而不考虑任何后代元素 var $body = $("body").children(); var $p = $("p").children(); var $ul = $("ul").children(); // alert($body.length); // alert($p.length); // alert($ul.length); // var str = ""; for (var i = 0; i< $ul.length;i++) { // alert($ul[i].innerHTML); } //next()方法用于寻找匹配元素后面紧邻的同辈元素 //得到的是<ul></ul> var $p1 = $("p").next().children() alert($p1.length) //prev()方法获取匹配元素同辈的相邻的前面的元素 //得到p元素 $("ul").prev().css("background","#008000"); //siblings()获取匹配元素相邻的周围的同辈元素 $("ul li:eq(1)").siblings().css("color","blue"); //closest() 获取离匹配元素最近的匹配元素 $(document).bind("click", function (e) { $(e.target).closest("li").css("color","red"); }) </script> </html>
十九 文字提示
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <style type="text/css"> body { margin: 0; padding: 0; background: #FFFFFF; font: 80%,"arial black"; color: #555555; line-height: 24px; } p { clear: both; margin: 0; padding: 5px 0; } #tooltip { position: absolute; border: 1px solid#333333; background: #f755d1; color: #333333; display: none; } </style> </head> <body> <p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p> <p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p> </body> <script type="text/javascript"> $(function() { $("a.tooltip").mouseover(function (e) { var tooltip = "<div id='tooltip'>"+ this.title +"<\/div>"; $("body").append(tooltip); $("#tooltip").css({"top":e.pageY +"px", "left":e.pageX + "px" }).show("fast"); }).mouseout(function() { $("#tooltip").remove(); }) }) </script> </html>
二十 图片提示
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <style type="text/css"> body{margin: 0; padding: 40px; background: #ffffff; color: #555555; font: 80% arial; line-height: 180%; } ul,li {margin: 0; padding: 0;} img{border: none;} li {list-style: none; float: left; display: inline; margin-right: 10px; border: 1px solid orange; } #tooltip{ position:absolute; border:1px solid #ccc; background:#333; padding:2px; display:none; color:#fff; } </style> <script type="text/javascript"> $(function () { var x = 10; var y = 20; $("a.tooltip").mouseover(function (e) { this.Mytitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/><\/div>"; // var tooltip = "<div id='tooltip'><img src= '"+ this.href + "' alt='产品预览' /><\/div>"; $("body").append(tooltip); $("#tooltip").css({ "top":(e.pageY + y) + "px", "left":(e.pageX + x) + "px" }).show("fast"); }).mouseout(function () { this.title = this.Mytitle; $("#tooltip").remove(); }).mousemove(function (e) { $("#tooltip").css({ "top":(e.pageY + y) + "px", "left":(e.pageX + x) + "px" }) }) }) </script> </head> <body> <ul> <li> <a href="../img/apple_1_bigger.jpg" class="tooltip" title="苹果"> <img src="../img/apple_1.jpg" alt="苹果1" /> </a> </li> <li> <a href="../img/apple_2_bigger.jpg" class="tooltip" title="苹果"> <img src="../img/apple_2.jpg" alt="苹果2" /> </a> </li> <li> <a href="../img/apple_3_bigger.jpg" class = "tooltip" title="苹果"> <img src="../img/apple_3.jpg" alt="苹果3"> </a> </li> <li> <a href="../img/apple_4_bigger.jpg" class="tooltip" title="苹果"> <img src="../img/apple_4.jpg" alt="苹果4" /> </a> </li> </ul> </body> </html>
二十一 事件绑定
<html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定</title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <link type="text/css" rel="stylesheet" href="../css/Style.css"> <script type="text/javascript"> $(function () { $("#panel h5.head").bind("click",function () { var $content = $(this).next("div.content"); if ($content.is(":visible")) { $content.hide(); }else { $content.show(); } }) //绑定其他的事件 $("#panel h5.head").bind("mouseover",function () { var $content = $(this).next("div.content"); $content.show(); }) $("#panel h5.head").bind("mouseout",function () { $(this).next("div.content").hide() }) }) </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> </div> </body> </html>
二十二 阻止事件冒泡 阻止事件默认事件
<html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $(function () { $("body").click(function () { alert("body 元素事件") }) $("#content").click(function (e) { alert("div 元素事件") e.stopPropagation(); }) $("span").click(function (e) { alert("span 元素事件"); //阻止冒泡 否则会依次相应 span div body 事件 e.stopPropagation(); }) //阻止默认事件 $("a").click(function (event) { //写了这句代码 点击超链接将失去作用 event.preventDefault(); event.stopPropagation();
//或者写成这样
return false;
}) }) </script> </head> <body> <div id="content"> 外层元素 <span>内层span元素</span> 外层元素 </div> <a href="http://www.baidu.com">百度一下</a> </body> </html>
