一、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属性操作用户输入和选择的值
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)
1 className // 获取所有类名 2 classList.remove(cls) // 删除指定类 3 classList.add(cls) // 添加类
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>
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])
1 var obj = document.getElementById('i1') 2 3 obj.style.fontSize = "10px"; 4 obj.style.backgroundColor = "red";
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>
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);
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>
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>
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>
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>
1 <body> 2 <div id="i1"> 3 4 <div id="i2">欢迎张总莅临指导 </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>
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
二、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>
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>
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>