java学习【web基础-jQuery入门】
来源：互联网 发布：限制p2p网络连接数 编辑：程序博客网 时间：2024/06/16 03:03
一：
jQuery的引入：就是一个是js类库,对常用的方法和对象进行封装,方便我们使用.
1.我们之前DOM编程:var obj = Document.getElementById(id); 此处获取的obj是什么对象---dom对象2.我们如果想使用Jquery中里面已经封装好的一些方法和属性的的话,首先获取变迁的jQuery对象,然后通过里面封装的一些方法和属性对jQuery对象进行操作例如：
以前通过js获取对象的时候var obj=document.getElementById("id"); -- 获取的obj是一个dom对象funtion getId(id){ return document.getElementById("id");}$("选择器")===>获取元素 -- 获取的是标签元素对应的jQuery对象二：
2.0 jquery和html的整合
jquery是单独的js文件
通过script标签的src属性导入即可
2.1 获取一个jquery对象
$(“选择器”) 或者 jQuery(“选择器”)
<!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></head><script src="../js/jquery-1.11.0.min.js"></script><body> <input type="text" id="username" value="jack"/></body><script> //1.使用原生js代码获取我们上面的input标签 var username = document.getElementById("username"); //alert(username.value); //2.使用jQuery的方式获取我们上面的input标签对象,注意,此时我们获取的是jQuery对象 //var $jQuery = $("选择器"); var $username = $("#username"); //alert($username.val());//调用jQuery对象的val()方法获取value属性值 //3.使用另一种方式获取jQuery对象 var $username2 = jQuery("#username"); alert($username2.val());</script></html>2.2 dom对象和jquery对象之间的转换
dom对象===>jquery对象 $(dom对象)jquery对象===>dom对象 方式1: jquery对象[index] 方式2: jquery对象.get(index)<!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></head> <script src="../js/jquery-1.11.0.min.js"></script><body> <input type="text" id="username" value="jack"/></body><script> //dom-->>jQuery对象,转换方式$(dom对象) var username = document.getElementById("username"); var $username = $(username); //alert($username.val()); //jQury对象--->>dom对象 //方式1: jQuery对象.get(index); var username2 = $username.get(0); //alert(username2.value); //jQury对象--->>dom对象 //方式2: jQuery对象[index] var username3 = $username[0]; alert(username3.value);</script></html>2.3 页面加载:
js:
window.onload=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次 方式1: $(function(){...}) 方式2: $(document).ready(function(){});<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> //使用原生的js,当页面加载完毕之后,我执行一些操作 //在整个html页面加载成功之后,我弹出一句话,"页面加载成功啦"/* window.onload=function(){ //这里面的代码所有都是在html页面加载成功之后才执行的 //alert("页面加载成功了"); //给一个标签施加事件的另一种方式(派发事件) //格式:dom对象.事件名称=fucntion(){....} /*var bt1 = document.getElementById("bt1"); bt1.onclick=function(){ alert("我被点击了"); }*/ /*alert("今天天气真热"); } */ //页面加载成功的事件, //原生的js代码,当页面加载成功之后,整个页面只能写一个window.onload,因为即便写的多了,也不执行/* window.onload=function(){ alert("中午真的很困,能不能给个躺椅"); }*/ //使用jQuery中的代码,实现页面加载成功的事件 //方式1: $(function(){ //这里面的所有的代码都是当整个html页面家在成功之后才执行的 //alert("天气凉快"); }) //第二个页面家在成功之后要执行的事件 //注意:当我们使用jQuery中的方式执行页面加载成功之后的事件的时候,可以执行多个 $(function(){ //alert("恭喜你获得一个空调扇"); }) //使用jQuery方式执行页面加载成功之后的事件 //方式2: $(document).ready(function(){ //页面加载成功之后要执行的代码 alert("方式2执行成功"); }) </script> </head> <body> <input type="button" id="bt1" value="按钮"/> </body></html>2.4 派发事件:
$("选择器").click(function(){...});等价于 原生js中 dom对象.onclick=function(){....}掌握事件: focus blur change click<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> //需求:给下面的button派发一个事件,单击事件 $(function(){ //页面加载成功 //jQury对象.事件(function(){...}) $("#bId").click(function(){ alert("我被点击了") }) }) </script> </head> <body> <input type="button" id="bId" value="点击查看" /> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>常见事件</title> <style type="text/css"> #e02{ border: 1px solid #000000; height: 200px; width: 200px; } </style> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ //需求：给e01加上失去焦点和获取焦点事件，键盘按下和键盘弹起的事件 $("#e01").blur(function(){ $("#textMsg").html("失去焦点"); }).focus(function(){ $("#textMsg").html("获取焦点"); }).keydown(function(){ $("#textMsg").html("键盘被按下"); }).keyup(function(){ $("#textMsg").html("键盘弹起"); }) //需求：给e02加上鼠标移入和移除的事件， $("#e02").mouseover(function(){ $("#divMsg").html("鼠标移入了"); }).mouseout(function(){ $("#divMsg").html("鼠标移出了"); }) //需求：给e03加上单击和双双击的事件 $("#e03").click(function(){ $("#buttonMsg").html("我被单击了"); }).dblclick(function(){ $("#buttonMsg").html("我被双击了"); }) }) </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <br/> <hr/> <div id="e02" ></div><span id="divMsg"></span> <br/> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/> </body></html>2.5 jquery中效果:
隐藏或展示 show(毫秒数) hide(毫秒数)滑入或滑出 slideDown(毫秒数):向下滑入 slideUp(毫秒数):向上滑出淡入或淡出 fadeIn(int):淡入 fadeOut(int):淡出<!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{ border:1px solid #000; width:100px; height:100px; } </style> <!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容--> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //给b1加上一个单击事件 //<input type="button" id="b1" value="显示/隐藏 b1Div" /> $("#b1").click(function(){ //获取id="b1Div",jQuery对象 //show(毫秒数):通过多少时间显示 //hide(毫秒数):通过多少时间隐藏 //toggle(毫秒数):如果隐藏则显示,如果显示则隐藏 //$("#b1Div").hide(2000); $("#b1Div").toggle(2000); }) //<input type="button" id="b2" value="滑出/滑入b2Div"/> $("#b2").click(function(){ //slideDown(毫秒数):通过多少时间从上到下划入 //slideUp(毫秒数):通过多少时间,从下往上划出 //slideToggle(毫秒数):如果划入则划出,如果划出则划入 $("#b2Div").slideToggle(3000); }) //<input type="button" id="b3" value="淡出/淡入b3Div" /> $("#b3").click(function(){ //fadeIn(毫秒数):通过多少时间单入 //fadeOut(毫秒数):通过多少时间淡出 //fadeToggle(毫秒数):如果淡入则淡出如果淡出则淡入 //$("#b3Div").fadeOut(2000); $("#b3Div").fadeToggle(2000); }) }); </script></head><body> <input type="button" id="b1" value="显示/隐藏 b1Div" /> <div id="b1Div"></div> <br/> <input type="button" id="b2" value="滑出/滑入b2Div"/> <div id="b2Div"></div> <br/> <input type="button" id="b3" value="淡出/淡入b3Div" /> <div id="b3Div"></div></body></html>三：
jQuery:
案例-弹出广告
技术:
定时器
jQuery
案例-步骤分析
1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();2.编写展示广告方法 获取div,然后调用效果方法 设置另一个定时器 隐藏3.编写隐藏广告的方法 获取div,然后调用效果方法四：
选择器总结:
4.1 基本选择器★ $("#id值") $(".class值") $("标签名") 了解:$("*") 理解:获取多个选择器 用逗号隔开 $("#id值,.class值")<!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>01-基本选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript">/* <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"/>*/ //当页面加载成功之后派发时间 //<input type="button" value="选择 id为 one 的元素." id="btn1"/> $(function(){ //当页面加载成功之后派发时间 //<input type="button" value="选择 id为 one 的元素." id="btn1"/> $("#btn1").click(function(){ $("#one").css("background-color","red") }) //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> $("#btn2").click(function(){ $(".mini").css("background-color","green"); }) //input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> $("#btn3").click(function(){ $("div").css("background-color","green"); }) //<input type="button" value="选择 所有的元素." id="btn4"/> $("#btn4").click(function(){ $("*").css("background-color","green"); }) //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> $("#btn5").click(function(){ $("span,#two"). css("background-color","green"); }) }) </script></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的di <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></html>4.2 层次选择器 ★ a b:a的所有b后代 a>b:a的所有b孩子(不包括孙子) a+b:a的下一个兄弟(大兄弟) a~b:a的所有弟弟们<!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>02-层次选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> //当页面加载成功之后,我们需要给每一个按钮派发事件 $(function(){ //<input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ //a b:a的所有b后代 $("body div").css("background-color","red"); }) //<input type="button" value="在body内,选择子元素是div的。" id="btn2"/> //a>b:a的所有b孩子(不包括孙子) $("#btn2").click(function(){ $("body>div").css("background-color","red"); }) //<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> //a+b:a的下一个兄弟(大兄弟) $("#btn3").click(function(){ $("#one+div").css("background-color","red"); }) //<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> //a~b:a的所有弟弟们 $("#btn4").click(function(){ $("#two~div").css("background-color","red"); }) }) </script></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="选择 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="mover">正在执行动画的span元素.</span></body></html>4.3 基本过滤选择器:★ :frist 第一个 :last 最后一个 :odd 索引奇数 :even 索引偶数 :eq(index) 指定索引 :gt(index) >索引大于哪一个值 :lt(index) <索引小于哪一个值<!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>03-基本过滤选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function(){ //<input type="button" value="选择第一个div元素." id="btn1"/> $("#btn1").click(function(){ $("div:first").css("background-color","red"); }) //<input type="button" value="选择最后一个div元素." id="btn2"/> $("#btn2").click(function(){ $("div:last").css("background-color","red"); }) //<input type="button" value="选择索引值为偶数 的div元素." id="btn3"/> $("#btn3").click(function(){ $("div:even").css("background-color","red"); }) //<input type="button" value="选择索引值为奇数 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div:odd").css("background-color","red"); }) //<input type="button" value="选择索引值等于3的div元素." id="btn5"/> $("#btn5").click(function(){ $("div:eq(3)").css("background-color","red"); }) //<input type="button" value="选择索引值大于3的div元素." id="btn6"/> $("#btn6").click(function(){ $("div:gt(3)").css("background-color","red"); }) }); </script></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="选择索引值为偶数 的div元素." id="btn3"/> <input type="button" value="选择索引值为奇数 的div元素." id="btn4"/> <input type="button" value="选择索引值等于3的div元素." id="btn5"/> <input type="button" value="选择索引值大于3的div元素." id="btn6"/><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></html>4.4 内容过滤: :has("选择器"):包含指定选择器的元素<!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>04-内容过滤选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function(){ //<input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/> $("#btn1").click(function(){ //:has("选择器"):包含指定选择器的元素 $("div:has('.mini')").css("background-color","red"); }) }); </script></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="选取含有class为mini元素 的div元素." id="btn1"/><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></html>4.5 可见过滤: :hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none :visible <!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>05-可见性过滤选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function(){ //<input type="button" value=" 选取所有可见的div元素" id="b1"/> $("#b1").click(function(){ //:visible $("div:visible").css("background-color","red"); }) //<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> $("#b2").click(function(){ //:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none $("div:hidden").css("background-color","red").show(1000); }) }); </script></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="b1"/> <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> <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" 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></body></html>4.6 属性过滤器:★ [属性名] [属性名="值"]<!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>06-属性选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function(){ //<input type="button" value="选取含有 属性title 的div元素." id="btn1"/> $("#btn1").click(function(){ $("[title]").css("background-color","red"); }) //<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> $("#btn2").click(function(){ $("[title='test']").css("background-color","red"); }) }); </script><body> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> <h3> 属性选择器.</h3> <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> <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></body></html>4.7 表单过滤: :input 所有的表单子标签 input select textarea button input 仅仅获取input标签<!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>09-表单选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(function(){ //1.获取form标签中的所有的子标签 //alert($("#form1 :input").size()); //这种获取方式,不仅可以获取到form标签中的input标签,还可以获取到其中的button,textarea //2.仅仅获取input标签 alert($("#form1 input").size()); }); </script></head><body> <input type="button" value="选取所有的表单子元素" id="btn1"/><br /> <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" /><br/> <input type="image" src="1.jpg"/><br/> <input type="password" /><br/> <input type="radio" name="a"/>1<input type="radio" name="a"/>2<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></html>阅读全文
0 0
- java学习【web基础-jQuery入门】
- java学习【web基础-jQuery】
- java学习【web基础-html入门】
- java学习【web基础-css入门】
- java学习【web基础-Javascript入门】
- java学习【web基础-JSP入门】
- jQuery基础入门学习
- Java Web基础入门
- java 从零开始，学习笔记之基础入门<Jquery>（四十三)
- Jquery基础学习之-入门
- Java web学习入门
- JAVA Script 之Jquery初步学习，入门学习，jquery基础，浅谈其基本用法。
- Java学习基础入门
- java基础入门学习
- jQuery-基础入门 学习笔记一
- [JQuery]学习——基础入门
- Java Web入门学习总结
- JAVA Web学习之Web 开发入门
- nodejs--的整个运行体制--这个是错的：/捂脸
- AngularJs的forEach循环
- jquery 无法获取表单数据的问题
- PHP源码分析-数组
- 7.14 vector 南阳理工测评的数据结构题
- java学习【web基础-jQuery入门】
- Linux获取/dev/input目录下的event对应的设备
- va_start和va_end使用详解
- C/C++语言字符串操作总结
- 查找算法
- apk检查更新下载安装
- c# my sql 字段出现0000-00-00 00:00:00时实体转换失败
- Android6.0如何在运行期间申请权限Requesting Permissions at Run Time
- 关于HTTP协议，一篇就够了
