1.表单校验：
<style type="text/css"> .outline{ outline: #00FF00 dotted thick; } </style>
<form id="form" action="./post.php" method="post"> 用户名：<input id="username" name="username" required=""> 密码： <input type="password" name="password" pattern="^w{6,20}$"> <input id="submit" type="submit" value="登录" disabled> </form>
<script type="text/javascript"> $(document).ready(function(){ "use strict"; var console = window.console; var $ = window.$; $("#submit").removeAttr('disabled'); console.log('1.已经取消登录按钮的禁用状态'); var arrInput = $("input[name='username'],input[name='password']"); arrInput.focus(function() { $(this).addClass('outline'); }); arrInput.blur(function() { $(this).removeClass('outline'); }); $("input[name='password']").blur(function() { var strPassWord = $("input[name='password']").val(); var rePattern = $("input[name='password']").attr("pattern"); var re = new RegExp(rePattern); if (re.test(strPassWord)) { console.log('3.密码符合条件'); } else { console.log('3.密码不符合条件'); } }); $("#submit").before('4.我是新加的input框' + '<input type="text" name="xixi">'); $("#submit").submit(function(event) { $.ajax({ type: 'post', url: './post.php', data: $("#form").serialize(), dataType:'json', success: function(data) { console.log(data); } }); event.preventDefault(); }); }); </script>
2.判断body背景色是否透明，鼠标放下，body背景色变红：
<html> <head> <title>杨帆jq2</title> </head> <style type="text/css"> .red { background-color: red; } </style> <body style="background:transparent;"> <div style="height:100px;background-color: grey;"></div> <script src="https://qidian.gtimg.com/yuewen/v1/js/jquery.min.js"></script> <script type="text/javascript"> "use strict"; var console = window.console; var $ = window.$; console.log('1.body的背景色为：' + $("body").css('backgroundColor')); $.fn.isBackgroundColorTransparent = function(){ var color = $(this).css('backgroundColor'); if(color == 'transparent') { console.log('2.body的背景色是透明的'); } else if(color.split(',').length > 3 && color.split(',')[3].split(')')[0] == 0) { console.log('2.body的背景色是透明的'); return true; } else { console.log('2.body的背景色不是透明的'); return false; } }; $("body").isBackgroundColorTransparent(); if($("body").isBackgroundColorTransparent()) { $("body").css('backgroundColor','pink'); console.log('3.body的背景色是透明的，现在设置成粉色了'); } else { } var color = $("body").css('backgroundColor'); $(document).on('mousedown', function (event) { var elTarget = event.target; if(elTarget.tagName.toLowerCase() == 'body') { $("body").css('backgroundColor','red'); console.log('4.鼠标放下，body背景色变红'); } }); $(document).on('mouseup', function (event) { var elTarget = event.target; if(elTarget.tagName.toLowerCase() == 'body') { $("body").css('backgroundColor',color); console.log('4.鼠标抬起，body背景色恢复'); } }); // $(document).on({ // mousedown: function(event) { // var elTarget = event.target; // if(elTarget.tagName.toLowerCase() == 'body') { // $("body").css('backgroundColor','red'); // console.log('4.鼠标放下，body背景色变红'); // } // }, mouseup: function(event) { // var elTarget = event.target; // if(elTarget.tagName.toLowerCase() == 'body') { // $("body").css('backgroundColor','yellow'); // console.log('4.鼠标放下，body背景色变黄'); // } // } // }); // 若body上没有内联样式 // $("body").on("mousedown mouseup", function(event) { // var elTarget = event.target; // if(elTarget.tagName.toLowerCase() == 'body' && $(this).attr('style') == '') { // $("body").toggleClass("red"); // console.log('4.鼠标放下，body背景色变红'); // } // }); </script> </body> </html>
3.获取标签内的文本内容
<body> <p>呜呜呜<em>111.1111</em><cite> 万 字 </cite><i>|</i><em>2323.2323</em><cite> 万 字<span>*</span>sssss</cite><i>|</i><!-- 注释 --></p> <script src="http://qidian.gtimg.com/lulu/theme/modern/js/plugin/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ "use strict"; var console = window.console; var $ = window.$; var childs = [].slice.call(document.querySelector('p').childNodes); var arr = []; function getText(obj) { obj.forEach(function(item,i){ if (item.nodeType == 3) { arr.push(item.textContent || item.innerText); } else if (item.childNodes.length) { getText([].slice.call(item.childNodes)); } }); } getText(childs); console.log(arr); // childNodes 属性返回节点的子节点的集合， // nodeType一共有12种类型 // TEXT_NODE == 3 文本节点的nodeType == 3 // innerText 兼容IE，textContent只支持IE8+以上。 }); </script> </body>
4.序列化表单值
<body> <div> First name: <input type="text" name="FirstName" value="Bill" /><br /> Last name: <input type="text" name="LastName" value="Gates" /><br /> <input type="checkbox" name="vehicle" value="Car"/> <input type="checkbox" name="vehicle" value="Car2"/> <input type="file" name="文件名称"/> 密码:<input type="password" name="密码" /> Male:<input type="radio" name="性别" value="male" /> Female: <input type="radio" name="性别" value="female" /> </div> <button>序列化表单值</button> <p></p> <script src="https://qidian.gtimg.com/yuewen/v1/js/jquery.min.js"></script> <script type="text/javascript"> "use strict"; var console = window.console; var $ = window.$; $.fn.serialize = function(){ var msgObject = []; $(this).find('input').each(function(){ var self = this; var key = $(this).attr('name'); var value = $(this).val(); var type = $(this).attr('type'); if (type == 'checkbox' && $(this).is(':checked') == false) { } else if (type == 'radio' && $(this).is(':checked') == false) { } else if (value == '') { } else { msgObject.push(key + '=' + value); } }); return msgObject.join('&'); }; $("button").click(function(){ $("p").text($("div").serialize()); }); </script> </body>