继续死磕前端

前端
字数统计: 3.9k字   |   阅读时长≈ 15分钟
Author：闫玉良
昨天将所有的基础知识进行了回顾，今天继续磕，不死不休～

今天要说的便是 jquery 这个函数库，毕竟它影响范围之广，不会都不好意说自己会前端？

更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

jquery

long long ago ～ 人们发现了一个好用的工具，它涵盖了常用的所有功能，还提供了很多相当方便的设计（如 Ajax）。因此，它的面世，如星星之火燎原之势迅猛发展，以至于微软公司把它作为官方库。

这个小小的 js 文件，你可以说他是插件，也可以称其为框架，随你喜欢，只要知道一点，它很好用就可以了。肯定有人会问如何下载之类的问题，其实我很不愿意回答，毕竟这些随意百度到的东西很浪费时间和文字，但是秉承着服务的宗旨，贴出以下链接：

1、http://jquery.com/ 官方网站

2、https://code.jquery.com/ 版本下载

1.简单入门

还记得上篇文章反复强调的一个问题嘛？就是 js 代码放在何处执行的问题。要么老老实实放置在所需应用样式的标签后面，要么将其丢到 window.onload 方法内部。

jquery 提供了一种速度更快，使用更便捷的方式，那便是 ready 方法。它长成了下面美丽的样子：

1
2
3
$(document).ready(function(){
  ......
});

嫌弃它的臃肿，可以简写为：

1
2
3
$(function(){
  xxx
});

现在是否顺眼了许多？

1.1 jquery 选择器

还记到大明湖畔（CSS）的夏雨荷（选择器）吗？选择器可以快速定位到元素并为其应用样式效果。jquery 选择器的选择规则与 CSS 相同，只是目的是为其添加操作。

不要有任何心理负担，它相当简单，如下：

1.选择 id 为 Ethan 的元素（类比 id 选择器）

1
$('#Ethan')

2.选择 class 为 Yan 的元素（类比类选择器）

1
$('.Yan')

3.选择所有的 p 标签（类比标签选择器）

1
$('p')

4.选择 id 为 mylist 的元素下所有 li 标签下的 span 元素（类比层级选择器）

1
$('#mylist li span')

5.选择 name 属性为 yan 的 input 元素

1
$('input[name=yan]')

如果一类元素范围太广，需要更精确一些呢？可以使用如下的过滤条件：

1.has 包含条件：

1
$('div').has('p');

包含 p 元素的 div 元素

2.判等条件：

1
$('div').eq(5);

第 5 个 div 元素

3.寻找条件：

1
$('#box').find('.myClass');

选择 id 是 box 元素中 class 为 myClass 的元素

4.前一个元素：

1
$('#box').prev();

5.后一个元素：

1
$('#box').next();

已经知道了如何定位某个元素，那么如何定位一个精确的集合呢？这个也不难：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//选择id是box的元素之前所有的同辈元素
$('#box').prevAll();

//选择id是box的元素后面所有的同辈元素
$('#box').nextAll(); 

//选择id是box的元素的父元素
$('#box').parent(); 

//选择id是box的元素的所有子元素
$('#box').children(); 

//选择id是box的元素的同级元素
$('#box').siblings();

有人会想，如果我写错了，没找到报错怎么办？大可放心，jquery 有容错机制，即使没有找到元素，也不会出错。还为你提供了验证是否找到的方法，那便是 length 属性。length 值为 0 时代表没选择到想要元素；为 1 则代表选择到了相应的元素。

除了选择元素，还可以选择样式呢！啥都能找到，强不强？既然都能找到了，重新赋值也必须到位！

1
2
3
4
5
6
7
// 获取div的样式
$("div").css("width");
$("div").css("color");

// 赋值
$("div").css("width","20px");
$("div").css("color","red");

如果你足够的细心，你也许会问，选择器一般都选择多个元素，那么你获取到的是哪一个元素的值呢？

答：第一个。

再看看其他操作样式的类名吧：

1
2
3
4
5
6
7
8
9
10
11
// 为id为div1的对象追加样式divClass2
$("#div1").addClass("divClass2") 

// 移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass")  

// 移除多个样式
$("#div1").removeClass("divClass divClass2") 

// 重复切换anotherClass样式
$("#div1").toggleClass("anotherClass")

1.2 绑定点击事件

1
2
3
4
5
$('#btn').click(function(){
  // 内部的 this 指的是原生对象
  ...
  // 使用 jquery 对象用 $(this)
});

js 对象与 jquery 对象有些许不同，jquery 对象是对 js 对象的封装，然后让其拥有了 jquery 的操作方法。他俩之间可以相互转换。

DOM 对象转 jquery 对象：

1
$(js对象)

jquery 对象转 DOM 对象：

1
2
3
jQuery对象[index];    //方式1 （推荐使用）

jQuery对象.get(index); //方式2

获取元素的索引值可以使用 index() 方法

1.3 jquery 动画

通过 animate 方法可以设置元素某属性值上的动画，动画执行完后会执行一个函数。

1
2
3
4
5
6
$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});

animate 参数详解：

1
2
3
4
5
6
7
8
/*
    animate参数：
    参数一：要改变的样式属性值，写成字典的形式
    参数二：动画持续的时间，单位为毫秒，一般不写单位
    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
    参数四：动画回调函数，动画完成后执行的匿名函数

*/

2.进阶

2.1 特殊效果

1.fadeIn() 淡入

2.fadeOut() 淡出

3.hide() 隐藏

4.show() 显示

5.toggle() 切换元素的可见状态

6.slideDown() 向下展开

7.slideUp() 向上卷起

8.slideToggle() 依次展开或卷起某个元素

Example:

1
2
3
4
5
6
7
$btn.click(function(){
  $('#div1').fadeIn(1000,
                   'swing',
                   function(){
    									alert('done');
  								});
});

在看过很多属性时，不知道大家是否发现了一个规律：凡是成对出现的属性，一般都有一个组合属性，名字带有 toggle

2.2 链式调用

链式调用，其实就是将多个方法一直拼接在对象后面，像链条一样调用。如下：

1
2
3
4
5
6
7
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

换行是为了加注释解释每一个方法，其实它为一行。

2.3 属性操作

还记得昨天总结中 js 对象如何获取元素内容嘛？没错，是 innerHTML。jquery 中则是使用 html() 方法获取和设置 html 内容：

1
2
3
4
5
// 获取内容
var $htm = $('#div1').html();

// 设置 html 内容
$('#div1').html('<span>xxx</span>');

jquery 中获取或者设置某个属性值时可以使用如下方法：

1
2
3
4
5
// 取出图片的地址
var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });

2.4 事件

常用的一些事件函数：

1.blur() 元素失去焦点

2.focus() 元素获得焦点

3.click() 鼠标单击

4.mouseover() 鼠标进入（进入子元素也触发）

5.mouseout() 鼠标离开（离开子元素也触发）

6.mouseenter() 鼠标进入（进入子元素不触发）

7.mouseleave() 鼠标离开（离开子元素不触发）

8.hover() 同时为mouseenter和mouseleave事件指定处理函数

9.ready() DOM加载完成

10.submit() 用户递交表单

2.5 正则表达式-表单验证

正则表达式无比强大，处处可以看见其身影。当我们验证邮箱格式、手机号、身份证号时必不可少，那么 jquery 中如何使用呢？

1
2
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

大家可以看到，其由规则与参数两部分组成。其中规则老生常谈，我们再复习一遍：

\d 匹配一个数字，即0-9

\D 匹配一个非数字，即除了0-9

\w 匹配一个单词字符（字母、数字、下划线）

\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]

\s 匹配一个空白符

\S 匹配一个非空白符

\b 匹配单词边界

\B 匹配非单词边界

. 匹配一个任意字符

量词：

? 出现零次或一次（最多出现一次）

+ 出现一次或多次（至少出现一次）

* 出现零次或多次（任意次）

{n} 出现n次

{n,m} 出现n到m次

{n,} 至少出现n次

范围：使用中括号将可选内容列出，代表内容中任意一个

[abc123] : 匹配‘abc123’中的任意一个字符

[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

限制开头与结尾：

^ 以紧挨的元素开头

$ 以紧挨的元素结尾

那么参数部分，常用的有：

g： global，全文搜索，默认搜索到第一个结果接停止

i： ingore case，忽略大小写，默认大小写敏感

还有常用的函数

test

用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

正则默认规则

匹配成功就结束，不会继续匹配，区分大小写

下面给大家个福利，总结了常用的正则表达式，直接复制粘贴即可：

1
2
3
4
5
6
7
8
9
10
11
//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;

//邮箱验证：        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;

//手机号码验证：
var rePhone = /^1[34578]\d{9}$/;

3.高级

3.1 事件冒泡

先来看看什么是事件冒泡：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

就这样一层一层往上冒的效果，我们形象的称为冒泡。那么它有什么作用呢？

答：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

这只是一种机制，但是我们并不是任何情况下都需要，那么可以将其关掉。通过：

1
event.stopPropagation();

既然说起阻止事件冒泡了，那么我们也提一下如何阻止表单提交吧：

1
event.preventDefault();

实际开发中其实常常将其混合使用，也就是两句话写在一起使用：

1
2
3
4
5
// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;

3.2 事件委托

同样，先来看定义：

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委托的写法 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

3.3 Dom 操作

Dom 操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：

1、移动现有标签的位置

2、将新创建的标签插入到现有的标签中

创建新标签 

1
2
var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');

移动或者插入标签的方法

1、append() 和 appendTo()：在现存元素的内部，从后面放入元素

1
2
3
4
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend() 和 prependTo()：在现存元素的内部，从前面放入元素

3、after() 和 insertAfter()：在现存元素的外部，从后面放入元素

4、before() 和 insertBefore()：在现存元素的外部，从前面放入元素

删除标签 

1
$('#div1').remove();

3.4 对象

JavaScript 的对象，可以简单的理解为一个键值对的集合，也就是 python 中的字典，键就是调用每个值的名称，值就是变量、函数、对象这些。

面向对象编程深入人心，有着 python 、java 的基础，大家应该不难理解。接下来说一下 js 中如何创建一个对象，并对其进行操作。

1.创建一个对象：

1
2
3
4
5
6
7
8
9
10
11
// first
var person = new Object();

// second
var person = {
  name: 'Ethan',
  age: 18,
  sayHello: function(){
    alert('Hello' + this.name)
  }
};

2.添加属性：

1
2
person.name = 'tom';
person.age = '99';

3.添加方法：

1
2
3
person.sayHello = function(){
  alert(this.name + '你好');
}

4.调用方法：

1
2
person.sayHello();
person.age;

4.Ajax

ajax一个前后台配合的技术，它可以让 javascript 发送 http 请求，与后台通信，获取数据和信息。ajax 技术的原理是实例化 xmlhttp 对象，使用此对象与后台通信。jquery 将它封装成了一个函数 $.ajax()，我们可以直接用这个函数来执行ajax请求。

此部分超级重要！超级重要！超级重要！

ajax需要在服务器环境下运行。

先来看一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

然后看一下其中的参数：

1、url 请求地址

2、type 请求方式，默认是 GET，常用的还有 POST

3、dataType 设置返回的数据格式，常用的是 json 格式，也可以设置为html

4、data 设置发送给服务器的数据

5、success 设置请求成功后的回调函数

6、error 设置请求失败后的回调函数

7、async 设置是否异步，默认值是 true，表示异步

简写方式：

$.ajax 按照请求方式可以简写成 $.get 或者 $.post 方式

1
2
3
4
5
6
7
8
9
10
11
$.get("/change_data", {'code':300268},
  function(dat,status){
  	if(status=='success'){
    	alert(dat.name);
    }
},'json');

$.post("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
},'json');

我们经常会听到两个词：局部刷新 和 无刷新。这是什么意思呢？

答：ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

打赏
  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • 页面访问量: 独立访客访问数:
  • 更多精彩文章请关注微信公众号『全栈技术精选』，id 为『Pythonnote』

请我喝杯咖啡吧~

支付宝
微信