jQuery 中文 API 文档 http://jquery.cuishifeng.cn/
jQuery 取出数组字典的值
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="jquery-3.3.1.min.js"></script>
- </head>
- <body>
- <script>
- li = [1, 2, 3, 4, 5]
- $.each(li, function(i, x){
- console.log(i, x) // i 为索引, x 为 value
- })
- dic={name:"yuan", sex:"male"}
- $.each(dic, function(i, x){
- console.log(i,x) // i 为 key,x 为 value
- })
- </script>
- </body>
jQuery 实现全选, 取消, 反选功能
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="jquery-3.3.1.min.js"></script>
- </head>
- <body>
- <button onclick="selectall();"> 全选 </button>
- <button onclick="cancel();"> 取消 </button>
- <button onclick="reverse();"> 反选 </button>
- <table border="1">
- <tr>
- <td><input type="checkbox"></td>
- <td>111</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>222</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>333</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>444</td>
- </tr>
- </table>
- <script>
- function selectall(){
- $("table :checkbox").each(function(){
- $(this).prop("checked", true)
- })
- }
- function cancel(){
- $("table :checkbox").each(function(){
- $(this).prop("checked", false)
- })
- }
- function reverse(){
- $("table :checkbox").each(function(){
- if($(this).prop("checked")){
- $(this).prop("checked", false);
- }else {
- $(this).prop("checked", true);
- }
- })
- }
- </script>
- </body>
jQuery 实现静态对话框
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .back{
- background-color: rebeccapurple;
- height: 2000px;
- }
- .shade{
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: coral;
- opacity: 0.4;
- }
- .hide{
- display: none;
- }
- .models{
- position: fixed;
- top: 50%;
- left: 50%;
- margin-left: -100px;
- margin-top: -100px;
- height: 200px;
- width: 200px;
- background-color: gold;
- }
- </style>
- <script src="jquery-3.3.1.min.js"></script>
- </head>
- <body>
- <div class="back">
- <input id="ID1" type="button" value="click" onclick="action1(this)">
- </div>
- <div class="shade hide"></div>
- <div class="models hide">
- <input id="ID2" type="button" value="cancel" onclick="action2(this)">
- </div>
- <script>
- function action1(self){
- $(self).parent().siblings().removeClass("hide");
- }
- function action2(self){
- $(self).parent().parent().children(".shade, .models").addClass("hide");
- }
- </script>
- </body>
jQuery clone 方法应用
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="jquery-3.3.1.min.js"></script>
- </head>
- <body>
- <div id="outer">
- <div class="item">
- <input type="button" value="+" onclick="fun1(this)">
- <input type="text">
- </div>
- </div>
- <script>
- function fun1(self){
- var Clone=$(self).parent().clone();
- Clone.children(":button").val("-").attr("onclick", "func2(this)");
- $("#outer").append(Clone);
- }
- function func2(self){
- $(self).parent().remove()
- }
- </script>
- </body>
来源: http://www.bubuko.com/infodetail-2962480.html