Python_day11：DOM、jQuery

其他 2019-02-11 10:14:38 阅读次数: 0

一、DOM

　　定义：文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

　1、查找元素

1 document.getElementById             根据ID获取一个标签
2 document.getElementsByName          根据name属性获取标签集合
3 document.getElementsByClassName     根据class属性获取标签集合
4 document.getElementsByTagName       根据标签名获取标签集合
直接查找 
 1 parentElement           // 父节点标签元素
 2 children                // 所有子标签
 3 firstElementChild       // 第一个子标签元素
 4 lastElementChild        // 最后一个子标签元素
 5 nextElementSibling     // 下一个兄弟标签元素
 6 previousElementSibling  // 上一个兄弟标签元素
 7 
 8 
 9 parentNode          // 父节点
10 childNodes          // 所有子节点
11 firstChild          // 第一个子节点
12 lastChild           // 最后一个子节点
13 nextSibling         // 下一个兄弟节点
14 previousSibling     // 上一个兄弟节点
间接查找

　2、操作

 1 innerText
 2 innerHTML
 3  
 4 var obj = document.getElementById('nid')
 5 obj.innerText                       # 获取文本内容
 6 obj.innerText = "hello"             # 设置文本内容
 7 obj.innerHTML                       # 获取HTML内容
 8 obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容
 9  
10  
11 特殊的：
12     input系列
13     textarea标签
14     select标签
15  
16     value属性操作用户输入和选择的值
2.1内容 
 1 attributes                // 获取所有标签属性
 2 setAttribute(key,value)   // 设置标签属性
 3 getAttribute(key)         // 获取指定标签属性
 4  
 5 /*
 6 var atr = document.createAttribute("class");
 7 atr.nodeValue="democlass";
 8 document.getElementById('n1').setAttributeNode(atr);
 9 */
10 
11 
12 var obj = document.getElementById('i1');
13 固定属性
14     obj.id
15     obj.id = "nid"
16     obj.className
17     obj.style.fontSize = "88px";
18  
19 自定义属性
20     obj.setAttribute(name,value)
21     obj.getAttribute(name)
22     obj.removeAttribute(name)
2.2属性 
1 className                // 获取所有类名
2 classList.remove(cls)    // 删除指定类
3 classList.add(cls)       // 添加类
2.3class操作 
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .hide{
  8             display: none;
  9         }
 10         .c1{
 11             position: fixed;
 12             left: 0;
 13             top:0;
 14             right: 0;
 15             bottom: 0;
 16             background-color: black;
 17             opacity: 0.6;
 18             z-index: 9;
 19         }
 20         .c2{
 21             width: 500px;
 22             height: 400px;
 23             background-color: white;
 24             position: fixed;
 25             left: 50%;
 26             top: 50%;
 27             margin-left: -250px;
 28             margin-top: -200px;
 29             z-index: 10;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <div></div>
 35     <!--遮罩层开始-->
 36     <div id="i1" class="c1 hide"></div>
 37     <!--遮罩层结束-->
 38 
 39     <!--弹出框开始-->
 40     <div id="i2" class="c2 hide">
 41         <p><input type="text"/></p>
 42         <p><input type="text"/></p>
 43         <p>
 44             <input type="button" value="取消" onclick="hideModel()"/>
 45             <input type="button" value="确定"/>
 46         </p>
 47     </div>
 48     <!--弹出框结束-->
 49 
 50     <input type="button" value="添加" onclick="showModel();"/>
 51     <input type="button" value="全选" onclick="checkAll();"/>
 52     <input type="button" value="取消" onclick="cancelAll();"/>
 53     <input type="button" value="反选" onclick="reverseAll();"/>
 54 
 55     <table border="1">
 56         <thead></thead>
 57         <tbody id="tb">
 58             <tr>
 59                 <td><input type="checkbox"/></td>
 60                 <td>1</td>
 61                 <td>2</td>
 62             </tr>
 63             <tr>
 64                 <td><input type="checkbox"/></td>
 65                 <td>3</td>
 66                 <td>4</td>
 67             </tr>
 68             <tr>
 69                 <td><input type="checkbox"/></td>
 70                 <td>5</td>
 71                 <td>6</td>
 72             </tr>
 73             <tr>
 74                 <td><input type="checkbox"/></td>
 75                 <td>7</td>
 76                 <td>8</td>
 77             </tr>
 78         </tbody>
 79     </table>
 80     <script>
 81         function showModel() {
 82             document.getElementById("i1").classList.remove("hide")
 83             document.getElementById("i2").classList.remove("hide")
 84         }
 85         function hideModel() {
 86             document.getElementById("i1").classList.add("hide")
 87             document.getElementById("i2").classList.add("hide")
 88         }
 89         function checkAll() {
 90             var tbody = document.getElementById("tb");
 91             //获取所有tr
 92             var tr_list = tbody.children;
 93             for(var i=0;i<tr_list.length;i++){
 94                 //循环所有的tr，current_tr
 95                 var current_tr = tr_list[i];
 96                 var checkbox = current_tr.children[0].children[0];
 97                 checkbox.checked = true;
 98             }
 99         }
100         function cancelAll() {
101             var tbody = document.getElementById("tb");
102             //获取所有tr
103             var tr_list = tbody.children;
104             for(var i=0;i<tr_list.length;i++){
105                 //循环所有的tr，current_tr
106                 var current_tr = tr_list[i];
107                 var checkbox = current_tr.children[0].children[0];
108                 checkbox.checked = false;
109             }
110         }
111         function reverseAll() {
112             var tbody = document.getElementById("tb");
113             //获取所有tr
114             var tr_list = tbody.children;
115             for(var i=0;i<tr_list.length;i++){
116                 //循环所有的tr，current_tr
117                 var current_tr = tr_list[i];
118                 var checkbox = current_tr.children[0].children[0];
119                 if(checkbox.checked){
120                     checkbox.checked = false;
121                 }else{
122                     checkbox.checked = true;
123                 }
124             }
125         }
126     </script>
127 </body>
128 </html>
2.4模态对话框、多选、反选 
 1 //创建标签
 2 var tag = document.createElement('a')
 3 tag.innerText = "hello"
 4 tag.className = "c1"
 5 tag.href = "http://www.baidu.com"
 6 
 7 var tag = "<a class='c1' href='http://www.baidu.com>hello</a>"
 8 
 9 
10 //操作标签
11 // 方式一
12 var obj = "<input type='text' />";
13 xxx.insertAdjacentHTML("beforeEnd",obj);
14 xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
15  
16 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
17  
18 // 方式二
19 var tag = document.createElement('a')
20 xxx.appendChild(tag)
21 xxx.insertBefore(tag,xxx[1])
2.5标签操作 
1 var obj = document.getElementById('i1')
2  
3 obj.style.fontSize = "10px";
4 obj.style.backgroundColor = "red";
2.6样式操作 
 1 <body>
 2     <form id="i1" action="http://www.baidu.com">  <!--第一种-->
 3         <input type="text"/>
 4         <input type="submit" value="提交"/>
 5         <a onclick="submitForm();">提交</a>
 6     </form>
 7     <script>
 8         function submitForm() {
 9             document.getElementById("i1").submit() //第二种
10         }
11     </script>
12 </body>
2.7提交表单 
 1 console.log                 输出框
 2 alert                       弹出框
 3 confirm                     确认框
 4   
 5 // URL和刷新
 6 location.href               获取URL
 7 location.href = "url"       重定向，跳转
 8 location.reload()           重新加载
 9   
10 // 定时器
11 setInterval                 多次定时器
12 clearInterval               清除多次定时器
13 setTimeout                  单次定时器
14 clearTimeout                清除单次定时器
15 
16 var o1 =setInterval{function(){},5000};
17 clearInterval(o1);
2.8其他操作 
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         #test{
 6             background-color: red;
 7         }
 8     </style>
 9 </head>
10 <body>
11     <div id="test">asdf</div>
12     <script>
13         var mydiv = document.getElementById("test");
14         mydiv.onclick = function () {
15             console.log("ghjk")
16         }
17     </script>
18 </body>
2.9行为，样式，结构相分离 
 1 <body>
 2     <div style="width: 600px;margin: 0 auto">
 3         <input id="i1" onfocus="Focus();"onblur="Blur()";type="text"/>
 4 
 5         <input type="text" placeholder="请输入关键字"/>//新的浏览器
 6     </div>
 7     <script>
 8         function Focus() {
 9             var tag = document.getElementById("i1")
10             var val = tag.value;
11             if(val=="请输入关键字"){
12                 tag.value = "";
13             }
14         }
15         function Blur() {
16             var tag = document.getElementById("i1")
17             var val = tag.value;
18             if(val.length ==0){
19                 tag.value = "请输入关键字";
20             }
21         }
22     </script>
23 </body>
2.10文本操作，请输入关键字 
 1 <body>
 2     <table border="1" width="300px">
 3         <tr><td>1</td><td>2</td><td>3</td></tr>
 4         <tr><td>1</td><td>2</td><td>3</td></tr>
 5         <tr><td>1</td><td>2</td><td>3</td></tr>
 6     </table>
 7         <script>
 8             var myTrs = document.getElementsByTagName("tr");
 9             var len = myTrs.length;
10             for(var i=0;i<len;i++){
11                 myTrs[i].onmouseover = function () {
12                     //myTrs[i].style.backgoundColor = "red";报错，作用域问题，i全为2
13                     this.style.backgroundColor = "red";//谁调用这个函数，this就指向谁
14                 }
15                 myTrs[i].onmouseout = function () {
16                     this.style.backgroundColor = "";
17                 }
18             }
19         </script>
20 </body>
2.11DOM1高亮 
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>title</title>
 4     <style>
 5         .pg-header{
 6             position: fixed;
 7             top: 0;
 8             left: 0;
 9             right: 0;
10             height: 48px;
11             background-color:#dddddd;
12             line-height: 48px;
13         }
14         .pg-body{
15             margin-top: 150px;
16         }
17         .w{
18             width: 980px;
19             margin: 0 auto;
20         }
21         .pg-header .menu{
22             display: inline-block;
23             color: white;
24             padding: 0 10px;
25         }
26         .pg-header .menu:hover{
27             background-color: aliceblue;
28             color: antiquewhite;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="pg-header">
34         <div class="w">
35             <a class="menu">photo</a>
36             <a class="menu">films</a>
37             <a class="menu">books</a>
38         </div>
39     </div>
40 </body>
2.12简单标题 
 1 <body>
 2     <div id="i1">
 3 
 4         <div id="i2">欢迎张总莅临指导&nbsp;</div>
 5     </div>
 6 
 7     <script>
 8         function func() {
 9             var tag= document.getElementById("i1");
10             var content = tag.innerText;
11             var f = content.charAt(0);
12             var l = content.substring(1,content.length);
13             var new_content = l + f;
14             tag.innerText = new_content
15         }
16         setInterval("func()",500);
17     </script>
18 </body>
2.13欢迎指导

　3、事件

 1 a、第一种
 2     <input id="i1" type="button" onclick="clickOn(this)" />
 3     
 4     function clickOn(self){
 5       //self 当前点击的标签  
 6     }
 7 
 8 
 9 b、第二种
10     <input id="i1" type="button" />
11 
12     document.getelementById("i1").onclick = function(){
13       //this 代指当前点击的标签  
14     }
绑定事件的两种方式 
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         #main{
 6             background-color: red;
 7             width: 200px;
 8             height: 200px;
 9         }
10         #content{
11             background-color: #dddddd;
12             width: 100px;
13             height: 100px;
14         }
15     </style>
16 </head>
17 <body>
18     <div id="main">
19         <div id="content"></div>
20     </div>
21     <script>
22         var mymain = document.getElementById("main");
23         var mycontent = document.getElementById("content");
24         mymain.addEventListener("click",function () {console.log("main")},false)
25         mycontent.addEventListener("click",function () {console.log("content")},false)
26 
27         /*content先出现，然后是main，冒泡，从下往上*/
28 
29         mymain.addEventListener("click",function () {console.log("main")},true)
30         mycontent.addEventListener("click",function () {console.log("content")},true)
31         /*main 先出现，然后是content，捕捉，从上往下*/
32     </script>
33     </script>
34 </body>
35 
36 
37
绑定事件的第三种方式addEventListener

二、jQuery

　1、转换：$("对象")[0] ==> DOM对象；$(DOM对象) 《==》$("对象")

  1 <!--
  2 $("#tb :checkbox").prop("checked"); //获取值
  3 $("#tb :checkbox").prop("checked",true); //设置值
  4 
  5 $("#tb :checkbox").each(function(k){
  6    //this,dom对象，当前循环的元素，$(this)； k当前索引
  7   })
  8 三元运算 var v =条件？真值：假值
  9 
 10 文本操作：
 11     $(..).text() 获取文本内容
 12     $(..).text("<a>1</a>") 设置文本内容(不解析)
 13     $(..).html() 获取文本内容
 14     $(..).html("<a>1</a>") 设置文本内容
 15 
 16     $(..).val() 获取值
 17     $(..).val(..) 设置值
 18 
 19 样式操作：
 20     addClass
 21     removeClass
 22     toggleClass  开关>:有则移除，无则加
 23 
 24 属性操作：
 25     专门用于做自定义属性
 26     $(..).attr("n") 获取
 27     $(..).attr("n","v") 设置值
 28     $(..).removeAttr("n") 移除
 29 
 30     <input type="checkbox" id="i1" checked="checked"/>
 31     专门用于checkbox,radio
 32     $(..).prop("checked",true);选中,设置
 33 
 34     index 获取索引位置
 35 
 36 文档处理：
 37     append
 38     prepend
 39     after
 40     before
 41 
 42     remove
 43     empty
 44 
 45     clone
 46 
 47 CSS处理：
 48     $(".t1").css("样式名称","样式值")
 49     点赞：
 50     $("t1").append()
 51     $("t1"),remove()
 52 
 53 位置：
 54     $(window).scrollTop() 获取
 55     $(window).scrollTop(0) 设置
 56     scrollLeft([val])
 57 
 58     offset().left
 59     offset().top 指定标签在HTML中的坐标
 60 
 61     position() 指定标签相对父标签(relative)标签的坐标
 62 
 63     高度：纯高度，边框，外边距，内边距
 64     $("i1").height() 获取纯高度
 65     $("i1").innerHeight()
 66     $("i1").outerHeight()
 67     $("i1").outerHeight(true)
 68 
 69 事件绑定：
 70     $('.c1').click()
 71     $('.c1')....
 72     $('.c1').bind('click',function(){})
 73     $('.c1').unbind('click',function(){})
 74     $('.c1').delegate('a','click',function(){}) 委托
 75     $('.c1').undelegate('a','click',function(){})
 76     $('.c1').on('click',function(){})
 77     $('.c1').off('click',function(){})
 78 
 79     阻止事件发生：return false
 80     当页面框架加载完毕后，执行: $(function(){.操作.})
 81 
 82 jQuery扩展：
 83     $.extend({
 84         "hello":function(){
 85             return "sb";
 86         }
 87     })
 88     var v = $.hello();
 89     alert(v);
 90 
 91     $.fn.extend({
 92         "hello":function(){
 93             return "sb";
 94         }
 95     })
 96     var v = $('#i1').hello();
 97     alert(v);
 98 
 99     自执行函数，避免全局变量冲突
100     (function(arg){
101         var status = 1;
102         $.extend({
103         "hello":function(){
104             return "sb";
105             }
106         })
107     })(jQuery)
108 -->
基本知识 
 1 <body>
 2     <input type="button" value="全选" onclick="checkAll();"/>
 3     <input type="button" value="取消" onclick="cancelAll();"/>
 4     <input type="button" value="反选" onclick="reverseAll();"/>
 5 
 6     <table border="1">
 7         <thead></thead>
 8         <tbody id="tb">
 9             <tr>
10                 <td><input type="checkbox"/></td>
11                 <td>1</td>
12                 <td>2</td>
13             </tr>
14             <tr>
15                 <td><input type="checkbox"/></td>
16                 <td>3</td>
17                 <td>4</td>
18             </tr>
19             <tr>
20                 <td><input type="checkbox"/></td>
21                 <td>5</td>
22                 <td>6</td>
23             </tr>
24             <tr>
25                 <td><input type="checkbox"/></td>
26                 <td>7</td>
27                 <td>8</td>
28             </tr>
29         </tbody>
30     </table>
31 
32     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
33     <script>
34         function checkAll() {
35            $("#tb :checkbox").prop("checked",true);
36         }
37         function cancelAll() {
38            $("#tb :checkbox").prop("checked",false);
39         }
40         function reverseAll() {
41            $("#tb :checkbox").each(function(){
42                //this 代指当前循环的每一个元素,Dom对象
43                /*if(this.checked){
44                    this.checked = false;
45                }else{
46                    this.checked = true;
47                }第一种Dom实现*/
48 
49                /*if($(this).prop("checked")){
50                    $(this).prop("checked",false);
51                }else{
52                    $(this).prop("checked",true);
53                }第二种*/
54 
55                var v = $(this).prop("checked")?false:true;
56                $(this).prop("checked",v);
57                /*第三种三元运算*/
58            })
59         }
60 
61     </script>
62 </body>
多选，取消，反选 
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .header{
 6             background-color: black;
 7             color: wheat;
 8         }
 9         .context{
10             min-height: 50px;
11         }
12         .hide{
13             display: none;
14         }
15     </style>
16 </head>
17 <body>
18     <div style="height: 400px;width: 200px;border: 1px solid #dddddd;">
19         <div class="item">
20             <div class="header">标题一</div>
21             <div class="context">内容</div>
22         </div>
23         <div class="item">
24             <div class="header">标题二</div>
25             <div class="context hide">内容</div>
26         </div>
27         <div class="item">
28             <div class="header">标题三</div>
29             <div class="context hide">内容</div>
30         </div>
31     </div>
32     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
33     <script>
34         $(".header").click(function(){
35             /*当前点击的标签 $(this)
36             获取某个标签的下一个标签
37             获取某个标签的父标签
38             获取所有的兄弟标签
39             添加样式和移除样式 $().addClass("hide") $().removeClass("hide")*/
40 
41             /*筛选器
42             $(this).next()下一个
43             $(this).prev()上一个
44             $(this).parent()父标签
45             $(this).children()孩子
46             $(this).siblings()兄弟
47             $(this).find(".c1")子子孙孙*/
48             $(this).next().removeClass("hide");
49             $(this).parent().siblings().find(".context").addClass("hide");
50         })
51     </script>
52 </body>
左侧菜单 
  1 <head>
  2     <meta charset="UTF-8">
  3     <title>Title</title>
  4     <style>
  5         .hide{
  6             display: none;
  7         }
  8         .modal{
  9             position: fixed;
 10             top:50%;
 11             left: 50%;
 12             width: 500px;
 13             height: 400px;
 14             margin-left: -250px;
 15             margin-top: -250px;
 16             background-color: #dddddd;
 17             z-index: 10;
 18         }
 19         .shadow{
 20             position: fixed;
 21             top:0;
 22             left: 0;
 23             right: 0;
 24             bottom: 0;
 25             opacity: 0.6;
 26             background-color: black;
 27             z-index: 9;
 28         }
 29     </style>
 30 </head>
 31 <body>
 32     <a onclick="addElement();">添加</a>
 33 
 34     <table border="1" id="tb">
 35         <tr>
 36             <td target="hostname">1.1.1.1</td>
 37             <td target="port">80</td>
 38             <td>
 39                 <a class="edit">编辑</a> | <a class="del">删除</a>
 40             </td>
 41         </tr>
 42         <tr>
 43             <td target="hostname">1.1.1.2</td>
 44             <td target="port">80</td>
 45             <td>
 46                 <a class="edit">编辑</a> | <a class="del">删除</a>
 47             </td>
 48         </tr>
 49         <tr>
 50             <td target="hostname">1.1.1.3</td>
 51             <td target="port">80</td>
 52             <td>
 53                 <a class="edit">编辑</a> | <a class="del">删除</a>
 54             </td>
 55         </tr>
 56     </table>
 57     <div class="modal hide">
 58         <div>
 59             <input name="hostname" type="text"/>
 60             <input name="port" type="text"/>
 61         </div>
 62         <div>
 63             <input type="button" value="取消" onclick="cancelModal();"/>
 64             <input type="button" value="确定" onclick="confirmModal();"/>
 65         </div>
 66     </div>
 67     <div class="shadow hide"></div>
 68 
 69     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 70     <script>
 71         $(".del").click(function(){
 72             $(this).parent().parent().remove();
 73         });
 74         
 75         function confirmModal() {
 76             var tr = document.createElement("tr");
 77             var td1 = document.createElement("td");
 78             td1.innerHTML = "1.1.1.1";
 79             var td2 = document.createElement("td");
 80             td2.innerHTML = "80";
 81             $(tr).append(td1);
 82             $(tr).append(td2);
 83             $("#tb").append(tr);
 84             $(".modal,.shadow").addClass("hide")
 85         }
 86 
 87         function addElement() {
 88             $(".modal,.shadow").removeClass("hide");
 89         }
 90         function cancelModal() {
 91             $(".modal,.shadow").addClass("hide");
 92             $(".modal input[type='text']").val("");
 93         }
 94 
 95         $(".edit").click(function(){
 96             $(".modal,.shadow").removeClass("hide");
 97             var tds = $(this).parent().prevAll();
 98             tds.each(function(){
 99                 //获取td的target属性值，应用自定义属性
100                 var n = $(this).attr("target");
101                 //获取td中的内容
102                 var text = $(this).text();
103                 var a1 = '.modal input[name="';
104                 var a2 = '"]';
105                 var temp = a1 + n +a2;
106                 $(temp).val(text);
107             });
108 
109             /*第一种方式，添加不能改变顺序
110             var port = $(tds[0]).text();
111             var host = $(tds[1]).text();
112             $(".modal input[name='hostname']").val(host);
113             $(".modal input[name='port']").val(port);
114             */
115             /*循环获取tds中的内容
116             获取<td>内容</td>获取中间的内容
117             赋值给input标签中的value*/
118         })
119     </script>
120 
121 </body>
模态对话 
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .hide{
 6             display: none;
 7         }
 8         .menu{
 9             height: 38px;
10             background-color: #dddddd;
11             line-height: 38px;
12         }
13         .active{
14             background-color: aqua;
15         }
16         .menu .menu-item{
17             float: left;
18             border-right: 1px solid red;
19             padding: 0 5px;
20             cursor: pointer;
21         }
22         .content{
23             min-height: 100px;
24             border: 1px solid #eeeeee;
25         }
26     </style>
27 </head>
28 <body>
29     <div style="width: 700px;margin: 0 auto;">
30         <div class="menu">
31             <div class="menu-item active" a="1">菜单一</div>
32             <div class="menu-item" a="2">菜单二</div>
33             <div class="menu-item" a="3">菜单三</div>
34         </div>
35         <div class="content">
36             <div b="1">内容一</div>
37             <div class="hide" b="2">内容二</div>
38             <div class="hide" b="3">内容三</div>
39         </div>
40     </div>
41     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
42     <script>
43         $(".menu-item").click(function(){
44             $(this).addClass("active").siblings().removeClass("active");
45             var target = $(this).attr("a");
46             $(".content").children("[b='"+ target +"']").removeClass("hide").siblings().addClass("hide")
47         })
48     </script>
49 </body>
tap菜单-自定义属性 
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .hide{
 6             display: none;
 7         }
 8         .menu{
 9             height: 38px;
10             background-color: #dddddd;
11             line-height: 38px;
12         }
13         .active{
14             background-color: aqua;
15         }
16         .menu .menu-item{
17             float: left;
18             border-right: 1px solid red;
19             padding: 0 5px;
20             cursor: pointer;
21         }
22         .content{
23             min-height: 100px;
24             border: 1px solid #eeeeee;
25         }
26     </style>
27 </head>
28 <body>
29     <div style="width: 700px;margin: 0 auto;">
30         <div class="menu">
31             <div class="menu-item active">菜单一</div>
32             <div class="menu-item">菜单二</div>
33             <div class="menu-item">菜单三</div>
34         </div>
35         <div class="content">
36             <div>内容一</div>
37             <div class="hide">内容二</div>
38             <div class="hide">内容三</div>
39         </div>
40     </div>
41     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
42     <script>
43         $(".menu-item").click(function(){
44             $(this).addClass("active").siblings().removeClass("active");
45             var v = $(this).index();
46             var m =$(".content").children().eq(v).removeClass("hide").siblings().addClass("hide");
47         })
48     </script>
49 </body>
tap菜单-索引 
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .container{
 6             padding: 50px;
 7             border: 1px solid red;
 8         }
 9         .item{
10             position: relative;
11             width:30px;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="container">
17         <div class="item">
18             <span>赞</span>
19         </div>
20     </div>
21     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
22     <script>
23         $(".item").click(function(){
24             AddFavor(this)
25         })
26 
27         function AddFavor(self) {
28             //DOM对象
29             var fontsize = "15";
30             var top = 0;
31             var right = 0;
32             var opacity = 1;
33             var tag = document.createElement("span");
34             $(tag).text("+1");
35             $(tag).css("color","green");
36             $(tag).css("position","absolute");
37             $(tag).css("fontsize",fontsize + "px");
38             $(tag).css("right",right + "px");
39             $(tag).css("top",top + "px");
40             $(tag).css("opacity",opacity);
41             $(self).append(tag);
42 
43             var obj = setInterval(function(){
44                 fontsize = fontsize +10;
45                 top = top -5;
46                 right = right -5;
47                 opacity = opacity -0.1;
48 
49                 $(tag).css("fontsize",fontsize + "px");
50                 $(tag).css("right",right + "px");
51                 $(tag).css("top",top + "px");
52                 $(tag).css("opacity",opacity);
53 
54                 if(opacity<0){
55                     clearInterval(obj);
56                     $(tag).remove();
57                 }
58             }, 100);
59         }
60     </script>
61 </body>
点赞 
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .error{
 6             color: red;
 7         }
 8     </style>
 9 </head>
10 <body>
11     <form id="f1" action="1.html" method="post">
12         <div><input name="n1" type="text"/></div>
13         <div><input name="n2" type="password"/></div>
14         <div><input name="n3" type="text"/></div>
15         <div><input name="n4" type="text"/></div>
16         <input type="submit" value="提交"/>
17     </form>
18     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
19     <script>
20         $(":submit").click(function(){
21             $(".error").remove();
22             var flag = true;
23             $("#f1").find("input[type='text'],input[type='password']").each(function () {
24                var v = $(this).val();
25                if(v.length <=0){
26                    flag = false;
27                    var tag = document.createElement("span");
28                    tag.className = "error";
29                    tag.innerHTML = "必填";
30                    $(this).after(tag);
31                    //return false; 第一个不通过，下面不验证
32                }
33             });
34             return flag;
35 
36            /* var v = $(this).prev().val();
37             if(v.length > 0){
38                 return true;
39             }else {
40                 alert("请输入内容");
41                 return false;
42             }*/
43         })
44     </script>
45 </body>
表单验证 
 1 <body>
 2     <a onclick="return clickOn()" href="http://www.baidu.com">走你1</a>
 3     <a id="i1" href="http://www.baidu.com">走你2</a>
 4     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 5     <script>
 6         function clickOn() {
 7             alert(123);
 8             return true;
 9         }
10         $("#i1").click(function(){
11             alert(456);
12             return false; /*return false走不了*/
13         })
14     </script>
15 </body>
走你-验证

猜你喜欢

转载自www.cnblogs.com/alpari-wang/p/10109524.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022