一篇文章教会你jQuery应用
一 认识jQuery
jQuery是JavaScript Query的缩写形式。jQuery是一款非常优秀的JavaScript库,即便是MVVM框架盛行的今天,也有超过半数的网页及应用直接或间接的使用了jQuery。jQuery的设计理念是“Write Less, Do More“,即写的更少,做的更多!使用jQuery可以大大简化我们的JS代码,从而提高开发效率。
jQuery现在有3个大的版本,分别是1.x,2.x,3.x。你可以从jQuery官方网站下载需要的版本,然后从本地引入到自己的项目,也可以使用CDN引入。在你下载jQuery时一般有两个可选的版本,一个是压缩版(不包含换行和空格,体积更小,多用于实际项目开发),另一个是未压缩版(包含换行和空格,体积稍大,多用于学习和测试)。
<script src="jquery-1.12.4.js"></script>
<!--本地引入-->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<!--CDN引入-->
另外,jQuery从第二个大的版本开始,为了优化网络响应和使语法更加简洁,抛弃了对IE6、7、8的支持,并且从2.1.0开始,压缩版本的文件中也不再包含注释信息了。为了获得更好的兼容性,我们这里使用的jQuery文件版本号是1.12.4。
二 jQuery核心
1,$符号
jQuery实际上是一个函数对象。事实上,jQuery通过全局变量jQuery引用该函数对象,$符号是jQuery变量的一个别名,为了写的更少,我们通常都使用$符号表示该对象。
window.jQuery === window.$; //true
jQuery === $;// true
typeof($);// 'function'
如果你还使用了其他框架,或自定义了$变量,那么有可能和jQuery的$符号造成冲突。
jQuery.noConflict();
在使用jQuery编程之前,首先调用noConflict()方法,解除jQuery对$符号的占用,这样就可以解决这一问题了。但往后就只能通过变量jQuery来使用jQuery的所有功能了。
2,参数
$核心函数可以接收3种类型的参数,分别是函数引用、字符串、DOM对象。
a) 接收一个函数
$(function(){
//some code
});
//这种方式的完整写法应该是:
//$(document).ready(function(){some code});
这种方式类似原生JS的window.DOMContentLoaded方法,只要HTML文档解析完毕并生成DOM tree就会触发该事件。但是在jQuery中可以同时存在多个该方法。
b) 接收字符串
var box1 = $('div');
//接收css选择器字符串,可以拿到DOM tree中相应的DOM元素,并把它包装成jQuery对象
var box2 = $('<div></div>');
//接收HTML代码片段,可以创建相应的DOM元素,并把它包装秤jQuery对象
c) 接收DOM元素
var box = document.getElementById('#box');
var jBox = $(box);//jQuery obj
如果核心函数接收一个DOM元素,那么它会把该DOM元素包装成一个jQuery对象,并返回。
jQuery对象事实上是一个类数组,保存了获取到的DOM元素。只有通过jQuery对象才可以访问jQuery提供的属性和方法。
3,静态方法
jQuery提供了一些静态方法,例如遍历数组,字符串去空格,判断数据类型等等,这些方法在ES5之前都是很实用的方法,但ES5之后,原生JS就已经实现了这类似的方法,所以这里就不再详细讲解了,有兴趣可以自行查看官方文档。jQuery把ajax相关操作也封装为静态方法,稍后会专门讲解。这里要讲的只有holdReady方法。
$.holdReady(true);
$(function(){
//some code
});
$.joldReady(false);
//参数true,暂停ready方法的执行,参数false,恢复ready方法的执行
三 jQuery 属性和节点
1,选择器
选择器是jQuery的核心功能。绝大多数css支持的选择器都可以在jQuery得到支持。
$('p');//标签选择器
$('.class');//类选择器
$('#id');//id选择器
$('[type=text]');//属性选择器
$('input[type=email]');//组合选择器
$(#id p);//后代选择器
$(#id p:first-child);//筛选选择器
//...
通过核心函数获取到的DOM元素都被包装成jQuery对象,以类数组的形式存储。我们可以通过eq方法获取其中某一个,还可以通过get方法获取DOM对象。
var divList = $('div');//获取所有div
var domDiv = divList.get(0);//获取第一个Dom元素,如果有的话
var jqDiv = divList.eq(0);//获取第一个jq对象,如果有的话
var another = $(domDiv);//把Dom元素转化成jq对象
另外jQuery还提供了一些通过层级结构查找元素的方法。
$('div').find('span');//查找div内部的span,等同于$('div span')
$('li').first();//获取匹配的元素中的第一个
$('li').last();//获取匹配的元素中的最后一个
$('div').next();//获取所有匹配到的div的下一个兄弟元素的集合
$('div').prev();//获取所欲匹配到的div的上一个兄弟元素的集合
$('div').parent();//获取匹配到的div的共同父元素
$('div').children();//获取div的子元素集合
$('div').siblings();//获取div的兄弟元素集合
//...
2,属性操作
获取DOM元素之后,jQuery把它们包装成jq对象,然后你就可以通过jQuery提供的方法修改相应的DOM元素了,包括CSS,文本,属性节点,HTML结构等等。
属性及属性节点相关:
$('div').attr('name','test');//设置属性名:name,属性值:test
$('div').attr('name');//获取属性name的值
$('div').removeAttr('name');//删除属性name ****************************** $('div').prop('name','test');
$('div').prop('name');
$('div').removeProp('name');
//prop的用法和attr一模一样,唯一不同的是prop既可以操作DOM元素的属性,也可以操作它的属性节点
当属性没有被显示的设置时,通过attr()方法获取将返回undefined,而prop()方法可以返回true或者false,所以,如果你要检索和更改DOM属性,比如元素的checked,selected,或disabled状态,推荐使用prop()方法,其他时候都使用attr方法。
注意,使用上诉方法获取属性值时,返回的只是第一个匹配的DOM元素的相应属性值。但是设置的时候却是为所有匹配的DOM元素都添加该属性。
class类相关:
$('div').addClass('test');//添加类,如需添加多个类,使用空格隔开即可
$('div').removeClass('test');//删除类,如需删除多个类,也用空格隔开即可
$('div').toggleClass('test');//切换类,如果DOM元素已经有该类了,那么就删除,如果没有则添加
文本及结构相关:
$('div').html();//获取第一个匹配到的div的内容
$('div').html('<p>我是段落</p>');//设置所有匹配到的div的内容
$('div').text();//获取所有匹配元素的文本内容
$('div').text('hello');//设置所有匹配到的div的文本内容
$('input').val();//获取匹配元素value值
$('input').val('hello');//获取匹配元素value值
css相关:
$('div').css('background-color','red');//设置元素的单个css属性
$('div').css({
width:'200px',
height:'200px',
background-color:'red'
});//通过对象设置多个css属性
尺寸及位置相关:
$('div').width();//获取div的内容区宽度,可传参设置
$('div').height();//获取div的内容区高度,可传参设置
//innerWidth,innerHeight表示content+padding的宽高
//outerWidth,outerHeight表示content+padding+border的宽高
$('div').offset();//获取div相对视口的偏移量,返回值是一个包含top和left属性,且值为数字的对象
$('div').position();//获取div相对父元素的偏移量,返回值是一个包含top和left属性,且值为数字的对象
//offset和position都以像素计,并且只对可见的元素起作用
3,节点
jQuery也提供了节点的增、删、改、查相关方法。
$("div").append("<p>Hello</p>");//在div内部的末尾插入元素
$("div").prepend("<p>Hello</p>");//在div内部的开头插入元素
$("div").after("<p>Hello</p>");//紧挨着div的后面插入元素
$("div").before("<p>Hello</p>");//紧挨着div的前面插入元素
$("div").remove();//删除div元素,但是会保留文本
$("div").empty();//清空div中的所有内容
四 jQuery 事件
1,事件绑定和移除
jQuery提供了两种绑定事件的方式,第一种是on+事件名称的具体事件方法,第二种是直接使用on方法。
$('div').onclick(function(){});
$('div').on('click',function(){});
//事件处理函数可以是匿名函数,也可以是函数引用,如果涉及到解除事件绑定,建议使用函数引用的方式
jQuery的事件绑定类似原生JS的addEventListener方法,可以同时绑定同一类型的多个事件,而不会相互覆盖。
jQuery通过off方法解除事件绑定。
function test(){};
$('div').on('click',test);
$('div').off();//移除div绑定的所有事件
$('div').off('click');//移除div绑定的所有click事件
$('div').off('click',test);//移除div绑定的具体事件
2,阻止事件冒泡和默认行为
使用jQuery阻止事件冒泡和默认行为与原生JS一样。不太清楚的可以查看我的《DOM之事件(一)》。
$('div').on('click',function(e){
//some code
e.stopPropagation();
});
//阻止事件冒泡
$('a').on('click',function(e){
//some code
return false;//简单方式
//e.preventDefault();//W3C标准方式
});
//阻止默认行为
3,一次性事件和自动触发事件
通常我们给元素绑定的事件处理程序需要特定的事件才能触发,比如click,mouseover等等,jQuery提供了triggerHandler方法,你可以通过该方法手动触发元素绑定的事件处理程序,而不用等到特定事件发生。
$('div').on('click',function(){
//some code
});
//一般需要等到用户点击div,函数才会被执行
$('div').triggerHandler('click');
//自动触发div的click事件,不用等到用户点击
jQuery还提供了另一个方法:trigger。它的功能和triggerHandler方法一样。他们的不同之处在于triggerHandler不会触发事件的默认行为和冒泡。
$('div').one('click',function(){
//some code
});
//jQuery通过one方法绑定一个只会被触发一次的事件处理程序
4,事件委托
jQuery通过delegate方法实现事件委托。该方法使用上和原生JS有一些区别,原生JS实现事件委托也请移步《DOM之事件(一)》。
$("ul").delegate("li", "click", function(){
$(this).toggleClass("test");
});
//把li的点击事件委托给ul,被委托元素一般是委托元素的父元素
五 jQuery 动画
1,显示和隐藏
jQuery通过show方法和hide方法实现元素的显示和隐藏。它的原理是修改元素的display和宽高及opacity属性。
$('div').show(1000);
//使div显示,1000表示整个过程持续时间,单位是ms
$('div').hide(1000);
//使div隐藏
这两个方法还可以接受一个回调函数作为第二个参数,用于设置动画完成后需要执行的操作。
2,展开和收起
jQuery通过slideDown,slideUp实现平缓的展开和收起元素。该方法是通过高度变化(向下增大或减小)来动态地显示元素,在显示完成后可选地触发一个回调函数。
$("p").slideDown(1000);
//展开,可以设置一个时间,表示整个过程持续时间,单位ms
$("p").slideUp(1000);
//收起
$("p").slideToggle(1000);
//切换
展开后收起动画常用来做下拉菜单。
3,淡入淡出
jQuery通过fadeIn和fadeOut实现淡入淡出效果。该方法的原理是修改元素的opacity属性,不会改变元素的宽高。也可接收一个回调函数。
$("div").fadeIn(1000);
//淡入,可一接收一个数字作为参数,表示过程持续时间,单位ms
$("div").fadeOut(1000);
//淡出
$("div").fadeTo(1000,0.5);
//调整到指定值
$("div").fadeToggle(1000);
//切换
4,自定义动画
jQuery通过animate方法实现自定义动画效果。
$('div').animate({
width:500px,
opacity:0.8
},1000);
//该方法接收一个对象,表示动画结束时元素的状态,第二参数是一个数字,表示持续时长,单位ms,也可以接收一个回调函数作为第三个参数
注意,jQuery的动画采用队列形式,每编写一个动画,就向动画队列中插入一个,只能等前面的执行完后才执行后面的。
5,停止和延迟
jQuery的stop方法可以暂停正在执行的动画。
$('div').stop();
//立即停止当前动画,直接开始执行队列中后续的动画,如果有的话
$('div').stop(true,true);
//stop方法可以接收两个blloean值作为参数。第一个规定在停止当前动画的同时是否清除队列中的其他动画,第二个规定在停止当前动画的同时是否要直接完成队列中其他动画。
介于jQuery通过队列形式控制动画执行,我们建议在调用jQuery动画之前都先调用一次stop方法,以免造成动画混乱。
$('div').stop();
$('div').animate({
//some code
},1000);
jQuery通过delay延迟动画的执行。
$('div').animate({
width:200px;
height:200px;
},1000).delay(1000).animate({
background-color:red;
},1000);
//在改变宽高后等待1000ms再改变背景颜色
六 jQuery Ajax
jQuery封装了功能完整的Ajax方法,我们常用的jQuery方法有3个,分别是$.ajax()、$.get()、$.post()。
1,ajax()方法
ajax方法接收一个对象作为参数,对象的属性名为ajax的设置参数,属性值为ajax的设置值。
$.ajax({
type: "POST",
url: "some.php",
data: "name=ren&age=12",
cache: false;
dataType:"text",
success: function(msg){
//some code
},
error:function(msg){
//some code
}
});
常用的参数有:
type:请求类型,可选值有post和get。
url:发送请求的地址。
data:发送到服务器的数据。必须是“key0=value0&key1=value1“或键值对的形式(对象)。
cache:规定是否读取缓存数据,true表示读取,false表示不读取,直接从服务器获取。
dataType:期望服务器返回的数据类型,可选值有xml,html,script,json,text。
success:ajax请求成功回调函数。
error:ajax请求失败回调函数。
使用ajax()方法时,所有的设置参数都是可选的,除了上诉参数外,还有很多其他的参数可选,这让我们在通过jQuery实现ajax时有了更大的灵活性。如果你想了解更多相关参数的信息,请到jQuery官网查询。
2,get()方法
如果你觉得ajax()方法发送简单get请求还是太麻烦,那么你可以直接使用$.get()方法。
$.get(
"url",
{ name: "ren", age: "12" },
function(msg){
//some code
},
"text"
);
该方法只需要4个参数,发送请求的url,发送的数据,请求成功的回调函数,期望的返回值类型。
3,post()方法
使用$.post()方法和$.get()一样,他们都只需要4个参数。
$.post(
"url",
{ name: "ren", age: "12" },
function(msg){
//some code
},
"text"
);
4,load()方法
load()方法可以直接请求服务器的数据并添加到DOM元素中。默认使用get方式,如果你向服务器发送了数据,将自动转换为post方式。
$("div").load(
"test.html",
{name:"ren",age:"12"},
function(){//some code}
);
//载入一份新的html文档到div中,并向服务器发送了数据。
load()方法可以有3个参数,请求的url,向服务器发送的数据,请求成功后的回调函数。
写在最后:jQuery作为一款工具库,我们只需要知道它能干什么和怎么干就好,不必完全深入的学习它。当我们需要用它的时候配合官方文档编写相关代码即可。如果你在技术上有所追求,那么你还是可以仔细研读jQuery源码,相信一定会有不少收获。其实不光jQuery,在你学习其他框架或库或工具的时候,也可以按照这种方式学习,作为一个软件工程师,计算机原理,操作系统,网络技术等等才是构造你上升的基石,其次才是各种编程语言,热门框架及工具等等。
一篇文章教会你jQuery应用的更多相关文章
- 一篇文章教会你利用Python网络爬虫获取电影天堂视频下载链接
[一.项目背景] 相信大家都有一种头疼的体验,要下载电影特别费劲,对吧?要一部一部的下载,而且不能直观的知道最近电影更新的状态. 今天小编以电影天堂为例,带大家更直观的去看自己喜欢的电影,并且下载下来 ...
- 万能的林萧说:一篇文章教会你,如何做到招聘要求中的“要有扎实的Java基础”。
来历 本文来自于一次和群里猿友的交流,具体的情况且听LZ慢慢道来. 一日,LZ在群里发话,"招人啦." 然某群友曰,"群主,俺想去." LZ回之,"你 ...
- 一篇文章教会你,如何做到招聘要求中的“要有扎实的Java基础
来历 本文来自于一次和群里猿友的交流,具体的情况且听LZ慢慢道来. 一日,LZ在群里发话,“招人啦.” 然某群友曰,“群主,俺想去.” LZ回之,“你年几何?” 群友曰,“两年也.” LZ憾言之,“惜 ...
- 一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程
今天小编给大家详细的讲解一下Scrapy爬虫框架,希望对大家的学习有帮助. 1.Scrapy爬虫框架 Scrapy是一个使用Python编程语言编写的爬虫框架,任何人都可以根据自己的需求进行修改,并且 ...
- 一篇文章教会你用Python抓取抖音app热点数据
今天给大家分享一篇简单的安卓app数据分析及抓取方法.以抖音为例,我们想要抓取抖音的热点榜数据. 要知道,这个数据是没有网页版的,只能从手机端下手. 首先我们要安装charles抓包APP数据,它是一 ...
- 一篇文章教会你使用Python定时抓取微博评论
[Part1--理论篇] 试想一个问题,如果我们要抓取某个微博大V微博的评论数据,应该怎么实现呢?最简单的做法就是找到微博评论数据接口,然后通过改变参数来获取最新数据并保存.首先从微博api寻找抓取评 ...
- 一篇文章教会你如何将DOM转换为virtual DOM
[一.Virtual DOM简介] Virtual DOM是虚拟节点,它通过Javascript的Object对象模拟DOM中的节点,然后通过特定的render方法将其渲染成真实的DOM节点. 浏览器 ...
- 一篇文章教会你用Python爬取淘宝评论数据(写在记事本)
[一.项目简介] 本文主要目标是采集淘宝的评价,找出客户所需要的功能.统计客户评价上面夸哪个功能多,比如防水,容量大,好看等等. 很多人学习python,不知道从何学起.很多人学习python,掌握了 ...
- 一篇文章教会你使用Java8中的Lambda表达式
简介 Java 8为开发者带来了许多重量级的新特性,包括Lambda表达式,流式数据处理,新的Optional类,新的日期和时间API等.这些新特性给Java开发者带来了福音,特别是Lambda表达式 ...
随机推荐
- react-router url参数更新 但是页面不更新的解决办法
今天发现, 当使用react-router(v4.2.2)时,路由需要传入参数, 但是如果路由跳转时,url仅仅改变的是参数部分,如从hello/1跳转到hello/2,此时虽然参数更新了,但是页面是 ...
- 【Offer】[47] 【礼物的最大价值】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 在一个m*n的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于0).你可以从棋盘的左上角开始拿格子里的礼物,并每次向左(以自 ...
- Vue 前端uni-app多环境配置部署服务器的问题
目录 前端Vue 针对问题 package.json描述 多环境部署 查看源码获取解决方案 转载请标明出处: http://dujinyang.blog.csdn.net/ 本文出自:[奥特曼超人的博 ...
- math库的使用
math库简介 math库是Python提供的内置数学内函数库,因为复数类型常用于科学计算,一般计算并不常用,因此math库不支持复数类型,仅支持整数和浮点数运算,math库一共提供4个数学常数和44 ...
- tomcat启动抛出异常
2018-5-26 15:55:47 org.apache.catalina.startup.VersionLoggerListener log信息: Server version: Apache T ...
- Redis的实现(java)
日常操作 public static void main(String[] args) { Jedis jedis = ); //1.开启事务 Transaction transaction = je ...
- http响应
1.http响应 2.响应行常见状态码 200 :请求成功. 302 :请求重定向. 当访问网址A时,由于网址A服务器端的拦截器或者其他后端代码处理的原因,会被重定向到网址B. 304 :请求资源没有 ...
- PHPCon 2019 第七届 PHP 开发者大会总结
往届回顾-2018:PHPCon 2018链接: https://pan.baidu.com/s/17nfrfqk9K4vwKPAsjBVW7A——提取码:rjbr 随着PHP7的诞生,兼顾了高性能和 ...
- 机器学习常用性能度量中的Accuracy、Precision、Recall、ROC、F score等都是些什么东西?
一篇文章就搞懂啦,这个必须收藏! 我们以图片分类来举例,当然换成文本.语音等也是一样的. Positive 正样本.比如你要识别一组图片是不是猫,那么你预测某张图片是猫,这张图片就被预测成了正样本. ...
- java教程系列二:Java JDK,JRE和JVM分别是什么?
多情只有春庭月,犹为离人照落花. 概述 本章主要了解JDK,JRE和JVM之间的区别.JVM是如何工作的?什么是类加载器,解释器和JIT编译器.还有一些面试问题. Java程序执行过程 在深入了解Ja ...