javascript+jQuery补充
Posted 人生苦短，我用python
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript+jQuery补充相关的知识，希望对你有一定的参考价值。
一、jQuery事件绑定
<div class=‘c1‘> <div> <div class=‘title‘>菜单一</div> <div class=‘content‘>内容 一</div> </div> <div> <div class=‘title‘>菜单一</div> <div class=‘content‘>内容 一</div> </div> <div> <div class=‘title‘>菜单一</div> <div class=‘content‘>内容 一</div> </div> <div> <div class=‘title‘>菜单一</div> <div class=‘content‘>内容 一</div> </div> </div> jQuery事件绑定： 1. $(‘.title‘).click(function(){ var v = $(this).text(); console.log(v); }) 2. $(‘.title‘).bind(‘click‘,function(){ var v = $(this).text(); console.log(v); }) 3. $(‘.c1‘).delegate(‘.title‘,‘click‘,function(){ var v = $(this).text(); console.log(v); }) 4. $(‘.c1‘).on(‘click‘,‘.title‘, function () { var v = $(this).text(); console.log(v); });
委托绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="txt" type="text"/> <input id="btn" type="button" value="提交"/> <ul> <li>111</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(‘#btn‘).click(function () { var v = $(‘#txt‘).val(); // var v = $(this).siblings().val(); var temp = document.createElement(‘li‘); temp.innerHTML=v; $(‘ul‘).append(temp); }) // 绑定委托 $(‘ul‘).delegate(‘li‘,‘click‘,function () { var v = $(this).text(); v = v+ ‘+1‘; $(this).text(v); }) </script> </body> </html>
页面框架加载完成：
$(function () {
...
})
使用：希望查看页面立即执行的操作
阻止默认事件的发生：
$(‘#bd‘).click(function () {
var v = $(this).text();
alert(v);
return false;
})
二、表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form id="f1" action="http://www.baidu.com" method="GET"> <p><input type="text" name="username" require="true" /></p> <p><input type="password" name="password" require="true" min-len="6" max-len="18" /></p> <p><input type="text" name="phone" require="true" phone="true" /></p> <input type="submit" value="提交" /> </form> <script src="jquery-1.12.4.js"></script> <script> $(function () { checkValidate(); }); function checkValidate() { $(‘#f1‘).find(‘:submit‘).click(function () { $(‘#f1‘).find(‘span‘).remove(); var flag = true; $(‘#f1‘).find(‘:text,:password‘).each(function () { // $(this)代指每一个input标签 // 每一次执行都是一个标签 // 如果有某个标签的某一项不满足，调到下一个标签 var value = $(this).val();//获取标签里面的值 var require = $(this).attr(‘require‘);//获取属性，看是否是必填 if(require){ if(value.length == 0){ var n = $(this).attr(‘name‘); var errorTag = document.createElement(‘span‘); errorTag.innerHTML = n + ‘输入不能为空‘; $(this).after(errorTag); flag = false; // return true; // continue return false; // break; } } var minLen = $(this).attr(‘min-len‘); if(minLen){ var valueLen = value.length; var minLen = parseInt(minLen); if(valueLen < minLen){ var n = $(this).attr(‘name‘); var errorTag = document.createElement(‘span‘); errorTag.innerHTML = n + ‘太短了‘; $(this).after(errorTag); flag = false; // return true; // continue return false; // break; } } var phone = $(this).attr(‘phone‘); if(phone){ // value: asdfasdf var re = /^\d+$/;//正则匹配^行首$行尾 if(!re.test(value)){//查看正则是否匹配 var n = $(this).attr(‘name‘); var errorTag = document.createElement(‘span‘); errorTag.innerHTML = n + ‘格式错误‘; $(this).after(errorTag); flag = false; // return true; // continue return false; // break; } } }); return flag; }) } </script> </body> </html>
以上是关于javascript+jQuery补充的主要内容，如果未能解决你的问题，请参考以下文章