JQuery学习
1，Jquery动态添加和删除
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#subbutton").click(function () { var $li1 = $("<li id='li1'>香蕉</li>"); var $li2 = $("<li>苹果</li>"); $("#ulid").append($li1); $("#ulid").append($li2); }) $("#shanchu").click(function () { $("#li1").remove(""); }) }) </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="subbutton" name="name" value="提交" /><br/> <ul id="ulid"></ul><br/> <input type="button" id="shanchu" name="name" value="删除" /> </div> </form> </body> </html>
2，替换节点
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#subbutton").click(function () { $("#p1").replaceWith("<string>你最不喜欢的水果是？</string>"); }) }) </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="subbutton" name="name" value="替换" /><br/> <p id="p1">你最喜欢的水果是？</p> </div> </form> </body> </html>
3, $("#p1").removeAttr("title"); //删除属性。
4， $("#p1").attr("class", "high"); //设置p1元素的class为"high"。
5， $("#p1").addClass("another"); //给<p1>追加一个类样式
6，$("#p1").removeClass("another"); //删除<p1>的一个类样式
7， $("p").css("color", "red"); //设置<p>元素的样式为红色
$("p").css({ "fontSize": "30px", "backgroundColor": "red" }); //同时设置字体大小和背景
7，鼠标焦点事件
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // 得到焦点 $("#address").focus(function () { var txtvale = $(this).val(); if (txtvale == "请输入邮箱地址") { $(this).val(""); } }) //离开焦点 $("#address").blur(function () { var txtvalue = $(this).val(); if (txtvalue == "") { $(this).val("请输入邮箱地址"); } }) }) </script> </head> <body> <form id="form1" runat="server"> <div> <input type="text" id="address" name="name" value="请输入邮箱地址" /><br/> <input type="text" id="password" name="name" value="请输入邮箱密码" /><br/> <input type="button" name="name" value="登录" /> </div> </form> </body> </html>
8,鼠标滑动事件
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //鼠标光标滑动得到事件 $("#tijiao").mouseover(function () { $("#xaohaiz").css("display", "block"); }) //鼠标光标离开事件 $("#tijiao").mouseout(function () { $("#xaohaiz").css("display", "none"); }) }) </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="tijiao" name="name" value="提交" /> <input type="button" style="display:none" id="xaohaiz" name="name" value="小孩子" /> </div> </form> </body> </html>
9，动画
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panes").click(function () { //使用animate让div向右移动500px，定时3秒中完成 $("#pane").animate({ left: "500px" }, 3000); }) }) </script> <style type="text/css"> #pane { position:relative; width:100px; height:100px; border:1px; background:red; cursor:pointer; } </style> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="panes" name="name" value="动起来" /> <div id="pane"> </div> </div> </form> </body> </html>
10，动画二，移动加上变高
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panes").click(function () { //使用animate方法向div同时向右移动500px,同时高度加到200px,用时3秒 $("#pane").animate({ left:"500px",height:"200px"},3000); }) }) </script> <style type="text/css"> #pane { position:relative; width:100px; height:100px; border:1px; background:red; cursor:pointer; } </style> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="panes" name="name" value="动起来" /> <div id="pane" > </div> </div> </form> </body> </html>
三种动画
$("#toggles").click(function () {
//slideToggle方式却换内容可见和隐藏两种状态，加上时间可以让div从下到上慢慢变化
$("#pane").slideToggle(2000);
$("#pane").slideUp(2000); //改变高度
$("#pane").fadeTo(2000, 0.2); //改变透明度
})
Jquery放大缩小
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(".bigger").click(function () { if ($("#comment").height() < 500) { $("#comment").animate({ height: "+=50" }, 600); } }) $(".smaller").click(function () { if ($("#comment").height() > 50) { $("#comment").animate({ height: "-=50" }, 600); } }) }) </script> <style type="text/css"> </style> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="panes" name="name" value="动起来" /> <input type="button" id="toggles" name="name" value="toggle" /> <div id="pane" > </div> <div class="msgcaption"> <span class="bigger">放大</span> <span class="smaller">缩小</span> </div> <div> <textarea id="comment" rows="8" cols="20">fafafafafdasfasffasfafasfafasfafafffffffffffffffffffffffffffffffffffffffffdadfad</textarea> </div> </div> </form> </body> </html>
Jquery 全选，全不选和反选
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //全选 $("#checkedALL").click(function () { $('[name=name]:checkbox').attr('checked', true); }) //全不选 $("#checkedNo").click(function () { $('[name=name]:checkbox').attr('checked', false); }) //反选 $("#checkedrev").click(function () { $('[name=name]:checkbox').each(function () { $(this).attr("checked", !$(this).attr("checked")); }) }) //输出选中的值 $("#send").click(function () { var str = "你选中的是："; $('[name=name]:checkbox:checked').each(function () { str += $(this).val() + "\r\n"; }) alert(str); }) }) </script> </head> <body> <form id="form1" runat="server"> <div> 你最爱的运动是？<br/> <input type="checkbox" name="name" value="足球" />足球 <input type="checkbox" name="name" value="篮球" />篮球 <input type="checkbox" name="name" value="乒乓球" />乒乓球<br/> <input type="button" id="checkedALL" name="name" value="全选" /> <input type="button" id="checkedNo" name="name" value="全不选" /> <input type="button" id="checkedrev" name="name" value="反选" /> <input type="button" id="send" name="name" value="提交" /> </div> </form> </body> </html>
Jquery 下拉框操作，右移和左移
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //单选添加 $("#add").click(function () { var $options = $('#select1 option:selected'); //得到选中的项 var $remove = $options.remove(); //删除下拉列表中选中的选项 // $remove.appendTo('#select2'); //加到对方 $("#select2").append($remove); }) //全部门添加 $("#addall").click(function () { var $options = $('#select1 option'); //得到全部内容 $options.appendTo('#select2'); //加到对方 }) //双击添加 $('#select1').dblclick(function () { var $options = $("option:selected", this); //得到当前选中项 $options.appendTo("#select2"); //加到对方 }) //单选删除 $("#remove").click(function () { var $options = $('#select2 option:selected'); $options.remove(); $options.appendTo("#select1"); }) //双击删除 $('#select2').dblclick(function () { var $options = $("option:selected", this); //得到当前选中项 $options.appendTo("#select1"); //加到对方 }) //全部门添加 $("#removeall").click(function () { var $options = $('#select2 option'); //得到全部内容 $options.appendTo('#select1'); //加到对方 }) }) </script> </head> <body> <form id="form1" runat="server"> <div class="centent" style=" float:left;"> <select multiple id="select1" style="width:100px;height:160px;"> <option value="">选项1</option> <option value="1">选项2</option> <option value="2">选项3</option> <option value="3">选项4</option> <option value="4">选项5</option> <option value="5">选项6</option> </select> </div> <div class="centent" > <select multiple id="select2" style="width:91px; height:160px;" > </select> </div> <div> <input type="button" id="add" name="name" value="选中添加到右边" /> <input type="button" id="remove" name="name" value="选中删除到左边" /><br/> <input type="button" id="addall" name="name" value="全部门添加到右边" /> <input type="button" id="removeall" name="name" value="全部门删除到左边" /> </div> <div style=" float:left;"> </div> </form> </body> </html>
Jquery表格展开关闭
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('tr.parent').click(function(){ $(this).siblings('.child_'+this.id).toggle(); }) }) </script> </head> <body> <form id="form1" runat="server"> <div> <table border="1px" id="table1"> <thead> <tr><th>姓名</th><th>性别</th><th>地址</th></tr> </thead> <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> <tr class="child_row_01"><td>张山</td><td>男</td><td>宁波</td></tr> <tr class="child_row_01"><td>李白</td ><td>男</td><td>长沙</td></tr> <tr class="child_row_01"><td>王五</td><td>男</td><td>武汉</td></tr> <tr class="child_row_01"><td>找6</td ><td>男</td><td>杭州</td></tr> <tr class="child_row_01"><td>大爷</td><td>男</td><td>宁波</td></tr> <tr class="parent" id="row_03"><td colspan="3">后台设计组</td></tr> <tr class="child_row_03"><td >张山</td><td>男</td><td>宁波</td></tr> <tr class="child_row_03"><td >李白</td><td>男</td><td>长沙</td></tr> <tr class="child_row_03"><td >王五</td><td>男</td><td>武汉</td></tr> <tr class="child_row_03"><td >找6</td><td>男</td><td>杭州</td></tr> <tr class="child_row_03"><td >大爷</td><td>男</td><td>宁波</td></tr> </table> </div> </form> </body> </html>