一、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); //
}
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)

javascript+jQuery补充的更多相关文章

  1. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  2. Jquery补充及插件

    此篇为jQuery补充的一些知识点,详细资料请看另一篇博客,地址:https://www.cnblogs.com/chenyanbin/p/10454503.html 一.jQuery中提供的两个函数 ...

  3. dom&JavaScript&Jquery

    目录 dom&JavaScript&Jquery 建节点 添加节点 删除节点: 替换节点: 属性节点 获取值操作 class的操作 指定CSS操作 操作节点 获取input用户输入 操 ...

  4. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  5. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  6. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  7. javascript --- jQuery --- Deferred对象

    javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应 ...

  8. javascript/jquery读取和修改HTTP headers

    javascript/jquery读取和修改HTTP headers jquery修改HTTP headers jQuery Ajax可以通过headers或beforeSend修改request的H ...

  9. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

随机推荐

  1. js杂记:x:function(){}

    发现问题于jQuery源码,整理问题于百度知道: 如下: x:function(){} 这代表一个对象的函数 例如: var ooo = { p1:0, p2:'xxx', f1:function(p ...

  2. 如何成长为一名合格的web架构师?

    写代码要经历下面几个阶段.  一 .你必须学习面向对象的基础知识,如果连这个都忘了,那你的编程之路注定是在做原始初级的重复! 很多程序员都知道类.方法.抽象类.接口等概念,但是为什么要面向对象,好处在 ...

  3. Effective Java - 构造器私有、枚举和单例

    目录 饿汉式单例 静态常量 静态代码块 懒汉式单例 尝试加锁 同步代码块 双重检查 静态内部类单例 枚举单例 Singleton 是指仅仅被实例化一次的类.Singleton代表了无状态的对象像是方法 ...

  4. 该如何真正进入SEO行业?

    今天一个多年的朋友突然问我这个问题,他作为一个seo局外人,感觉SEO挺神秘,我认为要入行就要先了解一个SEO是什么职业,它的工作有那些,然后再考虑怎样进行学习或培训. 一.查看网站状态 seo人员每 ...

  5. mysql 终端命令

    1.打开数据库 /usr/local/MySQL/bin/mysql -u root -p 2.输入root密码 3.使用我的数据库 use mysql 4.查看表 desc table_name 5 ...

  6. POI自动调整列宽支持中文

    /** * @Description:表格自适应宽度(中文支持) * @Author: * @param sheet sheet * @param columnLength 列数 */ private ...

  7. django基础知识之GET属性:

    GET属性 QueryDict类型的对象 包含get请求方式的所有参数 与url请求地址中的参数对应,位于?后面 参数的格式是键值对,如key1=value1 多个参数之间,使用&连接,如ke ...

  8. LNMP WEB架构构建

    LNMP WEB架构处理请求过程 1.Nginx为一款高性能Web服务器,本身是不能处理PHP的,当接收到客户端浏览器发送HTTP Request请求时,Nginx服务器响应并处理web请求,静态资源 ...

  9. c++学习书籍推荐《C标准库(英文版)》下载

    <C标准库(英文版)>是由世界级C语言专家编写的C标准库经典著作,影响了几代程序员. <C标准库(英文版)>集中讨论了C标准库,全面介绍了ANSI/ISO C语言标准的所有库函 ...

  10. ASP.NET CORE 入门教程(附源码)

    ASP.NET CORE 入门教程 第一课 基本概念 基本概念 Asp.Net Core Mvc是.NET Core平台下的一种Web应用开发框架 符合Web应用特点 .NET Core跨平台解决方案 ...