jQuery节点操作练习
来源：互联网 发布：护眼台灯 知乎 编辑：程序博客网 时间：2024/05/27 20:11
练习1
<!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="scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //1. 点击所有的 p 节点, 能够弹出其对应的文本内容 /* 1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...}); 为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 DOM 对象的数组 2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法 需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来. 3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为 属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val()) */ $("p").click(function(){ alert($(this).text()); $(this).text("^^" + $(this).text()); //alert(this.firstChild.nodeValue); }); //2. 使第一个 table 隔行变色 $("table:first tr:even").css("background", "#ffaacc"); //3. 点击 button, 弹出 checkbox 被选中的个数 $("button").click(function(){ alert($(":checkbox:checked").length); }); }); </script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <table> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> </table> <br> <hr> <br> <table> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第一行</td><td>第一行</td> </tr> </table> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <button>您选中的个数</button> </body></html>练习2
<!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="scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数 $(":text").focus(function(){ //2. 当获取焦点时, 若 #address 中是默认值 //(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 "" var val = $(this).val(); if(val == this.defaultValue){ $(this).val(""); } }).blur(function(){ //3. 失去焦点是, 若 #address 的值在去除前后空格后等于 "" //则为其恢复默认值. var val = this.value; if($.trim(val) == ""){ this.value = this.defaultValue; } }); //2. $(":button:eq(1)").click(function(){ $("#single").val("选择3号"); }); $(":button:eq(2)").click(function(){ $("#multiple").val(["选择2号", "选择4号"]); }); $(":button:eq(3)").click(function(){ $(":checkbox[name='c']").val(["check2", "check4"]); }); $(":button:eq(4)").click(function(){ //即便是为一组 radio 赋值, val 参数中也应该使用数组. //使用一个值不起作用。 $(":radio[name='r']").val(["radio2"]); }); $(":button:eq(5)").click(function(){ //val() 可以直接获取 select 的被选择的值. alert($("#single").val()); alert($("#multiple").val()); //val 不能直接获取 checkbox 被选择的值 //若直接获取, 只能得到第一个被选择的值. //因为 $(":checkbox[name='c']:checked") 得到的是一个 //数组. 而使用 val() 方法只能获取数组元素的第一个值 //若希望打印被选择的所有制, 需要使用 each 遍历. //alert($(":checkbox[name='c']:checked").val()); $(":checkbox[name='c']:checked").each(function(){ alert(this.value); }); //而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. alert($(":radio[name='r']:checked").val()); }); }) </script> </head> <body> <input type="text" id="address" value="请输入邮箱地址"><br> <input type="text" id="password" value="请输入邮箱密码"><br> <input type="button" value="登录"> <br><br><br> <input type="button" value="使单选下拉框的'选择3号'被选中"/> <input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br> <input type="button" value="使多选框的'多选2'和'多选4'被选中"/> <input type="button" value="使单选框的'单选2'被选中"/><br> <input type="button" value="打印已经被选中的值"><br> <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/><br/> <input type="checkbox" name="c" value="check1"/> 多选1 <input type="checkbox" name="c" value="check2"/> 多选2 <input type="checkbox" name="c" value="check3"/> 多选3 <input type="checkbox" name="c" value="check4"/> 多选4 <br/> <input type="radio" name="r" value="radio1"/> 单选1 <input type="radio" name="r" value="radio2"/> 单选2 <input type="radio" name="r" value="radio3"/> 单选3 </body></html>练习3
<!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="scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. $(function(){ function showContent(li){ alert($(li).text()); } $("li").click(function(){ showContent(this); }); //1. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false, //可以取消指定元素的默认行为. 比如 submit, a 等 //2. val() 方法, 相当于 attr("value"), 获取表单元素的 value 属性值. //3. $.trim(str): 可以去除 str 的前后空格. //4. jQuery 对象的方法的连缀: 调用一个方法的返回值还是调用的对象, 于是可以 //在调用方法的后面依然调用先前的那个对象的其他方法. $(":submit").click(function(){ var $type = $(":radio[name='type']:checked"); if($type.length == 0){ alert("请选择类型."); return false; } var type = $type.val(); var $name = $(":text[name='name']"); var name = $name.val(); //$.trim(str): 可以去除 str 的前后空格. name = $.trim(name); $name.val(name); if(name == ""){ alert("请输入内容"); return false; } $("<li>" + name + "</li>").appendTo($("#" + type)) .click(function(){ showContent(this); }); //取消 submit 的默认行为 return false; }); }) </script></head><body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> <form action="dom-7.html" name="myform"> <input type="radio" name="type" value="city">城市 <input type="radio" name="type" value="game">游戏 name: <input type="text" name="name"/> <input type="submit" value="Submit" id="submit"/> </form></body></html>练习4
<!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="scripts/jquery-1.7.2.js"></script><script type="text/javascript"> $(function(){ //1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话 //那么这个对象一定是一个 jQuery 对象 //2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象 function removeTr(aNoe){ //获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象 var $trNode = $(aNoe).parent().parent(); var textContent = $trNode.find("td:first").text(); textContent = $.trim(textContent); var flag = confirm("确定要删除" + textContent + "的信息吗?"); if(flag){ $trNode.remove(); } return false; } $("#employeetable a").click(function(){ return removeTr(this); }); $("#addEmpButton").click(function(){ $("<tr></tr>").append("<td>" + $("#name").val() + "</td>") .append("<td>" + $("#email").val() + "</td>") .append("<td>" + $("#salary").val() + "</td>") .append("<td><a href='deleteEmp?id=xxx'>Delete</a></td>") .appendTo("#employeetable tbody") .find("a") .click(function(){ return removeTr(this) }); }); })</script></head><body> <center> <br> <br> 添加新员工 <br> <br> name: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> salary: <input type="text" name="salary" id="salary" /> <br> <br> <button id="addEmpButton" value="abc">Submit</button> <br> <br> <hr> <br> <br> <table id="employeetable" border="1" cellpadding="5" cellspacing=0> <tbody> <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> </tbody> </table> </center></body></html>练习五 引入css
<script> //1.页面加载 $(function(){ /*//2.获取tbody下面的偶数行并设置背景颜色 $("tbody tr:even").css("background-color","yellow"); //3.获取tbody下面的奇数行并设置背景颜色 $("tbody tr:odd").css("background-color","green");*/ //2.获取tbody下面的偶数行并设置背景颜色 $("tbody tr:even").addClass("even"); //$("tbody tr:even").removeClass("even"); //3.获取tbody下面的奇数行并设置背景颜色 $("tbody tr:odd").addClass("odd"); }); </script>.even { background:#FFF38F;} /* 偶数行样式*/.odd { background:#FFFFEE;} /* 奇数行样式*/练习六 全选不选
<script> $(function(){ $("#select").click(function(){ //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。 //attr方法与JQ的版本有关，在1.8.3及以下有效。 //$("tbody input").attr("checked",this.checked); $("tbody input").prop("checked",this.checked); }); }); </script>练习七 图片定时弹出消失
<script> $(function(){ //1.书写显示广告图片的定时操作 time = setInterval("showAd()",3000); }); //2.书写显示广告图片的函数 function showAd(){ //3.获取广告图片，并让其显示 //$("#img2").show(1000); //$("#img2").slideDown(5000); $("#img2").fadeIn(4000); //4.清除显示图片定时操作 clearInterval(time); //5.设置隐藏图片的定时操作 time = setInterval("hiddenAd()",3000); } function hiddenAd(){ //6.获取广告图片，并让其隐藏 //$("#img2").hide(); //$("#img2").slideUp(5000); $("#img2").fadeOut(6000); //7.清除隐藏图片的定时操作 clearInterval(time); } </script>练习八 省级联动
<td> <!--2.确定事件，通过函数传参的方式拿到改变后的城市--> <select id="province"> <option>--请选择--</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select> </td><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ //2.创建二维数组用于存储省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); cities[3] = new Array("郑州市","洛阳市","开封市","安阳市"); $("#province").change(function(){ //10.清除第二个下拉列表的内容 $("#city").empty(); //1.获取用户选择的省份 var val = this.value; //alert(val); //3.遍历二维数组中的省份 $.each(cities,function(i,n){ alert(i+":"+n); //4.判断用户选择的省份和遍历的省份 if(val==i){ //5.遍历该省份下的所有城市 $.each(cities[i], function(j,m) { //alert(m); //输出:武汉市，黄冈市，襄阳市，荆州市 //6.创建城市文本节点 var textNode = document.createTextNode(m); //7.创建option元素节点 var opEle = document.createElement("option"); //8.将城市文本节点添加到option元素节点中去 $(opEle).append(textNode); //9.将option元素节点追加到第二个下拉列表中去 $(opEle).appendTo($("#city")); }); } }); }); }); </script> 0 0
- jQuery节点操作练习
- Javascript 节点操作,练习.
- 节点操作小练习
- Jquery操作DOM节点
- jQuery 节点操作
- jquery节点操作
- jquery dom 节点操作
- jQuery DOM节点操作
- jQuery节点操作
- jQuery节点操作
- Jquery节点操作
- jQuery节点操作
- jquery节点操作
- jQuery DOM节点操作
- 应用jquery节点操作
- 【jQuery】DOM 节点操作
- jQuery的节点操作
- jQuery节点操作
- 自定义控件学习：Toggle
- java自带线程池和队列详细讲解
- 虚拟方法调用
- java 规则学习
- POJ
- jQuery节点操作练习
- MFC Windows程序设计学习笔记--鼠标和键盘
- 一天一个知识点-委托
- Linux高级程序_进程管理
- bzoj 3528: [Zjoi2014]星系调查
- 阿里一面
- Bzoj 1010: [HNOI2008]玩具装箱toy(斜率优化)
- 算法（第4版本）1.1.22
- python tcp/Ip示例
