JavaScript中的jQuery

JavaScript学习过程中的个人笔记，详细请看https://www.liaoxuefeng.com/wiki/1022910821149312
再次感谢廖大

简介

jQuery是JavaScript世界中使用最广泛的一个库。
jQuery可以帮我们干这些事情：
1）消除浏览器差异
2）简洁的操作DOM的方法
3）轻松实现动画、修改CSS等各种操作
jQuery有1.x和2.x两个主要版本，2.x移除了对IE 6、7、8的支持，因此代码更精简。
使用jQuery只需要在页面的<head>引入jQuery文件即可：<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>。
jQrery把所有功能全部封装在一个全局变量jQrery中，而$也是一个合法的变量名，它是变量jQuery的别名。
$ 本质上是一个函数，但函数也是对象，所有$除了可直接调用外，也可以有很多其他属性。

选择器

选择器是jQuery的核心，一个选择器写出来类似$('#dom-id')。
选择器就是帮我们快速定位到一个或多个DOM节点。

 //按ID查找var div = $('#bac');//查找<div id = "abc">//将返回一个jQuery对象[<div id="abc">...</div>]//如果不存在id为abc的<div>，将返回[]而不是null。var divDom = div.get[0]//假设存在dic，获取第一个DOM元素var anothor = $(divDom);//重新包装成jQuery对象。//按tag查找var ps = $('p');、、返回所有<p>节点//按class查找，在class名称前加一个.var a = $(".red");//返回所有包含class = "red"的节点var b = $(".red.green");返回同时包含red和green的节点。//按属性查找var emali = $('[name=email]');//找出<??? name="email>//当属性的值包含空格等特殊字符时，需要用双括号括起来//按属性查找还可以使用前缀查找或后缀查找var icons = $('[name^=icon]');//找出所有name属性以icon开头的DOMvar name= $('[name$=with]');//找出所有name属性以with结尾的DOM//组合查找var emailInput = $('input[name=email]')//找出所有name为email的<input>//多项选择器$('p,dic');//找出所有的<p>和<div>$('p.red,p.green');//把<p class="red">和<p class="green">都选出来//选出来的元素是按照在HTML中出现的顺序排列的，而且不会有重复元素。

如果两个DOM元素具有层级关系，可以使用层级选择器$('ancestor descendant')来选择，层级之间用空格隔开。
层级选择器的好处在于缩小了选择范围。
子选择器$('parend>child')类似层级选择器，但是先顶了层级关系必须是父子关系。
过滤器通常附加在选择器上，帮助我们更精确地定位元素。

   :first-child      //第一个元素:last-child      //最后一个元素:nth-child(2)   //第二个元素:nth-child(even) //序号为偶数的元素:nth-child(odd)   //序号为奇数的元素:input            //<input>,<textarea>.<select>和<button>:file         //<input type="type">,input[type=file]:checkbox       //复选框，input[type=checkbox]:radio            //单选框，input[type=radio:focus            //当前输入焦点的元素:checked         //当前勾上的单选框和复选框:enabled          //可正常输入的<input>,<select>，也就是没有灰掉的输入:disabled     //和enabled相反，选择那些不能输入的:visible           //所有可见的:hidden          //所有不可见的

通常情况下选择器可以直接定位到我们想要的元素，当我们拿到一个jQuery对象后，还可以以这个对象为基准，进行查找和过滤。
最常见的查找是在某个节点的所有子节点中查找，只用find()方法，它本身又接收一个任意的选择器。
parent()方法可以从当前节点向上查找。
next()和prev()方法可以查找同一层级的节点，可以传入选择器。
filter()方法可以过滤到不符合选择器条件的节点，或者传入一个函数，注意函数内部的this被绑定为DOM对象，而不是jQuery对象。
map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象。
一个jQuery对象如果包含了不止一个DOM节点，first()、last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉。

操作DOM

通过jquery的选择器拿到jQuery对象之后，下一步就是操作对应的DOM节点。
jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本。
可以通过向text()和html()方法传入参数来设置文本和HTML文本。
一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。
css(‘name’,‘value’)可以改变jQuery对象的css。
jQuery对象的所有方法都返回一个jquery对象，这样我们可以进行链式调用。
jQuery对象的show()和hide()方法用来显示和隐藏DOM元素。并未改变DOM树的结构。

 //浏览器可视窗口大小$(window).width();$(widons).height();//HTML文档的大小$(document).width();$(document).height();attr()和removeAttr()方法用于操作DOM节点的属性// <div id="test-div" name="Test" start="1">...</div>var div = $('#test-div');div.attr('data');          // undefined, 属性不存在div.attr('name');          // 'Test'div.attr('name', 'Hello');   // div的name属性变为'Hello'div.removeAttr('name');   // 删除name属性div.attr('name');          // undefinedprop()方法和attr()类似，但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现，如：<input id="test-radio" type="radio" checked value="1">等价于<input id="test-radio" type="radio" checked="checked" value="1">prop() 和 attr()对于属性checked处理有所不同。var radio = $('#test-radio');radio.attr('checked');//'checked'radio.prop('checked');//true也可以用 is()方法判断radio.is(':checked');//true类似属性还有selected,处理的时候最好用 is(':selected');

对于表单，jQuery对象统一提供val()方法获取和设置对应的value属性。
jQuery的append()方法可以用来添加新的DOM节点。
append()方法可以传入字符串、原始的DOM对象、jQuery对象和函数对象
append()方法传入函数时，要求返回一个字符串、DOM对象或者jQuery对象。
append()把DOM添加到最后，prepend()则把DOM添加到最前。
如果要添加的DOM节点已经存在，它会首先从文档中移除，再添加。也就是说用append()，可以移动一个DOM节点。
同级节点可以用after()或者before()方法。
可以使用remove()方法删除DOM节点。

事件

对jQuery对象的on方法可以绑定一个事件，

 var a = $('#test');a.on('click',fnction(){alert('Hello');});//另一种简化的方法是直接调用click()方法a.click(function(){alert('Hello');});

鼠标事件
1）click:单击触发
2）dblclick:双击触发
3）mouseenter:鼠标移入时触发
4）mouseleave:鼠标移出时触发
5）mousemove:鼠标在DOM内部移动时触发
6）hover:鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave
键盘事件仅作用于当前焦点的DOM上，通常是<intpu>和<textarea>
1）keydown:键盘按下时触发
2）keyup:键盘松开时触发
3）keypress:按一次后触发
其他事件
1）focus:当DOM获得焦点时触发
2）blur:当DOM失去焦点时触发
3）change:当<input>、<select>或<textarea>的内容改变时触发
4）submit:当<form>提交时触发
5）ready:当页面被载入并且DOM树完成初始化后触发
ready仅作用于document对象。ready事件在DOM完成初始化后触发，且只触发一次，所以适合用来写其他的初始化代码。

 $(document).on('ready',function(){}); //写法一$(document).ready(function(){});       //写法二$(function(){});                       //写法三

所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息。
off('click',function)可以用来解除绑定的事件。
off()方法无法移除一个已绑定的匿名函数。
可以使用off('clock')一次性移除已绑定的click事件的所有处理函数
无参数调用off()一次性移除已绑定的所有类型的事件
事件的触发总是由用户操作引发的。

动画

用JavaScript实现动画的原理就是以固定的时间间隔（如0.1秒），每次把DOM元素的CSS样式修改一点，看起来就像动画了。
jQuery内置的几种动画样式：
1）show/hide/toggle:以无参形式调用show()和hide()，会显示和隐藏DOM元素，只要传递一个时间参数进去，就变成了动画，时间单位是毫秒，也可以是slow/fast等字符串。toggle()则根据当前状态决定是show()还是hide()
2）slideUp()/slideDown():show()/hide()是从左上角逐渐展开或收缩的，而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的，同样slideToggle()则根据元素是否可见来决定下一步动作。
3）fadeIn/fadeOut:效果时淡入淡出，通过不断设置DOM元素的opactiy属性来实现，同样有fadeToggle()方法。
4）animate():可以实现任意动画效果，我们需要传入的参数就是DOM元素最终的CSS状态和时间，还可以传入第三个参数，传入一个函数，当动画结束的时候，被调用。
5）delay():动画可以串行执行，通过delay()方法可以实现暂停。
jQuery动画的原理是逐渐改变CSS的值，对于不是block性质的DOM元素，对他们就不起作用。
jQuery没有实现对background-color的动画效果，用animate()设置颜色也没有效果。这种可以使用CSS3的transition实现动画效果。

AJAX

jQuery在$上绑定了ajax()函数，可以处理AJAX请求。
ajax(url, settings)接收一个URL和一个可选的setting对象，常用选项如下：
1）async:是否异步执行AJAX请求，默认为true，不要指定为false
2）method:发送的Method，缺省为GET，可指定为POST/PUT 等。
3）contentType：发送POST请求的格式，默认为'application/x-www-form-urlencoded; charset=UTF-8'，可指定为text/plain、application/json。
4）data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contenType把data序列化成合适的格式。
5）headers：发送的额外的HTTP头，必须是一个object。
6）dataType:接收的数据格式，可以指定为html/xml/json/text等，缺省情况下根据响应的content-Type猜测。
jQuery的jqXHR对象类似一个Promise对象，对于回调的响应，可以采用链式写法来处理

 var jqxhr = $.ajax('/aip/categories',{dataType:'json'}).done(function(data){//成功}).fail(function(data){//失败}).always(function(){//请求完成});

对于常用的AJAX操作，jQuery提供了单独的get()、post()和getJSON()等方法。

扩展

当jQuery内置的方法不满足需求的时候，我们可以进行扩展。
给jQuery对象绑定一个新插件函数是通过扩展$.fn对象实现的。
jQuery对象支持链式操作，所以我们写的插件函数也要能继续链式下去，需要在方法末尾加上return this;
jQuery提供的辅助方法$.extend(target, obj1,obj2...),它将多个object对象的属性合并到第一个target对象中，遇到同名属性，总是使用靠后的对象的值，也就是越往后优先级越高。
插件函数要有默认值，绑定在$.fn.<pluginName>.defaults上
用户在调用时可以传入设定值以便覆盖默认值。

JavaScript中的jQuery相关推荐

javascript中的jQuery简单应用
jQuery在JavaScript中有很强的功能这里仅做一个抛砖引玉的介绍 1.下载jQuery,http://jquery.com/download/ 这里下载的是Download the unc ...
html5页面引入jquery,如何在javascript中引入jQuery？
jquery是一个用来代替JavaScript来快捷书写前端脚本语言的库,jquery可以大大的简化复杂的js代码,使开发人员专注于实现页面的效果. jquery的导入方式有两种,一种是本地导入,一种 ...
如何在typescript中引入jquery
引入jQuery之前的操作在typescript中引入jQuery时首先要创建一个typescript项目(直接新建的typescript文件无法通过此方法引入) 一.创建typescript项目 ...
js html保存json,如何在json文件中存储jQuery或javascript变量？
我可以知道有没有机会将jquery变量保存在json文件中?提前致谢.如何在json文件中存储jQuery或javascript变量? 我: var image='/test/test.png'; 我 ...
在jQuery和JavaScript中，实现转跳
在jQuery和JavaScript中,实现转跳隐藏转跳,浏览器不产生历史记录(replace).代码片段: window.location.replace("http://insus.c ...
jQuery中的read 和JavaScript中的onload函数的区别
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,onload函数是最经常用到的,这个函数的作用是等待网页完全加载之后再去执行代码块中的语句,因为按照 ...
javascript中的onpropertychange事件与 jquery中的propertychange事件
2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9 而javascript中的onpropertychange事 ...
浅析 JavaScript 中的函数 uncurrying 反柯里化
柯里化柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
深入理解javascript中的立即执行函数(function(){…})()
2019独角兽企业重金招聘Python工程师标准>>> javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各 ...

JavaScript中的jQuery

简介

选择器

操作DOM

事件

动画

AJAX

扩展

JavaScript中的jQuery相关推荐

最新文章

热门文章