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>
三、jQuery扩展
扩展的两种方式
- .extend({})
- .fn.extend({})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $.extend({'alex':function () { console.log('sb') }}); $.alex(); $.fn.extend({'wusir':function () { console.log('wsb',this) }}); $('li').wusir(); </script> </body> </html>
自执行函数
(function(jq){
function common(){
}
jq.extend({
xx: function(){
common();
}
})
})($);
javascript高级
- 作用域相关 1. function func(){ if(1==1){ var v= 123; } console.log(v); } func() A. 报错(Java,C#) B. 123(对) C.undefined =》 JavaScript/python是以函数为作用域，非括号为作用域 =》 括号为作用域 2. xo = 'root1'; function func(){ var xo = 'root2'; function inner(){ console.log(xo); } inner(); } func(); 作用域链 // root2 3. xo = 'root1'; function func(){ var xo = 'root2'; function inner(){ console.log(xo); } return inner; } result = func(); result(); // 作用域链在函数调用之前已经创建，当寻找变量时，根据最开始创建的作用域查找 // root2 4. xo = 'root1'; function func(){ var xo = 'root2'; function inner(){ console.log(xo); } xo = 'root3' return inner; } result = func(); result();
//root3 5. function func(){ console.log(xo);//undefined var xo = '123'; console.log(xo);//123 } func() // 提前声明,JS 1. 预编译： var xo; 2. 执行
预编译
6.
function func(num){
console.log(num); // function
num = 18;
console.log(num); // 18
function num(){
}
console.log(num); // 18
}
func(666);
a. 预编译 AO
先编译参数：
AO.num = undefined
AO.num = 666
再编译变量：
如果AO中有num，则不做任何操作
否则 AO.num = undefined
最后编译函数：
AO.num = function num(){
}
b. 执行
7.
function func(num){
console.log(num); // function
function num(){
}
console.log(num); // function
num = 18;
console.log(num); // 18
}
func(666);
先编译参数：
AO.num = undefined
AO.num = 666
再编译变量：
如果AO中有num，则不做任何操作
否则 AO.num = undefined
最后编译函数：
AO.num = function num(){
}
8.
function func(){
console.log(xo);
var xo = 123;
}
func()
编译：
参数：
AO
变量：
AO.xo = undefined
执行：
函数和面向对象相关
1. function func(arg){ console.log(this,arg); } func(18); // func.call(window,20); // func.apply(window,[30]); (function(arg){ console.log(this,arg); })(123) 在函数被执行时，默认this是代指window对象 function func(){ window.nn = 'root'; //nn = 'root'; this.nn = 'root'; } func() console.log(nn); =====> a. 在函数内部，默认都有this变量。默认情况下，执行函数时 this=window b. 使用 函数名.call 或者 函数名.apply 可以对函数中的this主动设置值
2. 在JS中没有字典类型
var dict = { name: 'alex', age: 18 } 等价于 var dict = new Object(); # 表示创建空字典 dict.name = 'alex'; dict.age = 18;
当做对象调用的时候，var obj1 = new func('root');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function func(name) {
this.Name = name
}
var obj1 = new func('root');
console.log(obj1.Name);
var obj2 = new func('root1');
console.log(obj2.Name)
</script>
</body>
</html>
当做函数时，this是window，当做类时，this是对象
面试题
谁调用函数，this就是谁。 函数()执行时候默认window.函数() 每一个函数里都有一个this Name = '666'; var dict = { Name: 'root', Age: 18, Func: function(){ // this等于dict console.log(this.Name); // root function inner(){ console.log(this.Name); // 666 } inner(); } } dict.Func(); ============================ 谁调用函数，this就是谁。 函数()执行时候默认window.函数() 每一个函数里都有一个this 变量查找顺序，作用域链 Name = '666'; var dict = { Name: 'root', Age: 18, Func: function(){ // this等于dict console.log(this.Name); // root // that 等于dict var that = this; function inner(){ // this=window console.log(that.Name); // root } inner(); } } dict.Func();
3. 原型
function Foo(name){
this.Name = name;
}
// 原型
Foo.prototype = {
Func: function(){
console.log(this.Name);
}
}
obj1 = new Foo(1)
obj2 = new Foo(2)
obj3 = new Foo(3)
