- 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节点。
var div = $('#bac');
var divDom = div.get[0]
var anothor = $(divDom);
var ps = $('p');、、返回所有<p>节点
var a = $(".red");
var b = $(".red.green");返回同时包含red和green的节点。
var emali = $('[name=email]');
var icons = $('[name^=icon]');
var name= $('[name$=with]');
var emailInput = $('input[name=email]')
$('p,dic');
$('p.red,p.green');
- 如果两个DOM元素具有层级关系，可以使用层级选择器
$('ancestor descendant')来选择，层级之间用空格隔开。 - 层级选择器的好处在于缩小了选择范围。
- 子选择器
$('parend>child')类似层级选择器，但是先顶了层级关系必须是父子关系。 - 过滤器通常附加在选择器上，帮助我们更精确地定位元素。
:first-child
:last-child
:nth-child(2)
:nth-child(even)
:nth-child(odd)
:input
:file
:checkbox
:radio
:focus
:checked
:enabled
:disabled
: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();
$(document).width();
$(document).height();
attr()和removeAttr()方法用于操作DOM节点的属性
var div = $('#test-div');
div.attr('data');
div.attr('name');
div.attr('name', 'Hello');
div.removeAttr('name');
div.attr('name');
prop()方法和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');
radio.prop('checked');
也可以用 is()方法判断
radio.is(':checked');
类似属性还有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节点。
事件
var a = $('#test');
a.on('click',fnction(){
alert('Hello');
});
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学习笔记，重点介绍了jQuery的选择器、DOM操作和事件处理。jQuery简化了DOM操作，提供丰富的选择器如层级选择器和过滤器，方便快捷地实现动画效果，并提供了方便的事件绑定与处理。此外，还涉及到了jQuery的AJAX功能和插件扩展方法。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
