【基础-3】JQuery基础笔记

一、简介

========================================================================
1、Javascript世界中使用最广泛的一个库，理念是“Write Less,Do More”

2、优点
消除浏览器差异
简洁的操作DOM的方法
轻松实现动画、修改CSS等各种操作

3、版本：目前最新3…，如需兼容IE6~8使用1…版本

4、使用jQuery：在页面head引入即可

5、$符号：把所有功能封装在一个全局变量jQuery中，$是一个合法的变量名，是变量jquery的别名

 如果`$`变量被占用，采用jquery在占用`$`之前先在内部保存原来的$
$; // jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)

二、选择呢器

========================================================================

1、是jQuery的核心，一个选择器写出来类似`$('#dom-id')`

1.按ID查找：`$('#domId') `，不存在会返回[]对象，不会返回undefined或者null
2.按tag查找：`$('p')`
3.按class查找：`$('.dom')、$('.dom.dom2')`
4.按属性查找：`$('[name=email]');`
5.组合查找：`$('input[name=email]');`
6.多项选择器：`$('p,div');`

2、层次选择器

1.层次选择器：层级用空格隔开，$('ul.lang li')
2.子选择器：层级关系必须是父子关系，$('ul.lang > li')
3.过滤器：附加在选择器上精准定位元素，$('ul.lang li:first-child')
4.表单相关

:input  可以选择input、textarea、select、button
:file   可以选择 input type="file"，同input[type=file]
:checkbox   可以选择复选框，同input[type=checkbox]
:radio   可以选择复选框，同input[type=radio]
:focus   获取当前输入焦点元素，$('input:focus')
:checked   选择被选中的单选框和复选框，$('input[type=radio]:checked')
:enabled   选择正常输入的input、select
:disabled   和:enabled相反，选择不能输入的

5.其他选择器
可见元素：$('div:visible')
隐藏元素：$(div:hidden)

3、查找和过滤

1.find()：在某个节点的所有子节点中查找，接收任意的选择器
$('ul.lang').find('.dy')

2.parent()：从当前节点开始向上查找
$('#swift').parent()

3.next()、prev()：同一层级节点

4.过滤

filter()：滤掉不符合选择器条件的节点
$('ul.lang li').filter('.dy')
或者传入一个参数，注意函数内部this被绑定为dom对象

$('ul.lang li').filter(function() {
	return this.innerHTML.indexOf('S') === 0;
})

map()：把一个jQuery对象包含的若干DOM节点转化为其他对象

var langs = $('ul.lang li');
var arr = langs.map(function(){
	return this.innerHTML;
}).get();

first()、last()、slice()：返回新的对象，把不需要的dom节点去掉

三、操作DOM

========================================================================

1、修改Text和HTML，无参是获取。有参是修改

获取节点的文本：$('#test').text()
获取原始HTML文本：$('#test').html()

2、修改CSS

获取CSS属性：$('#test-div').css('color');
设置CSS属性：$('#test-div').css('color', '#336699');
清除CSS属性：$('#test-div').css('color', '');
class是否包含highlight：$('#test-div').hasClass('highlight');
添加highlight这个class：$('#test-div').addClass('highlight');
删除highlight这个class：$('#test-div').removeClass('highlight');

3、显示和隐藏DOM

显示：show()、隐藏：hide()

4、获取DOM信息

1.浏览器可视窗口大小

$(window).width(); // 800
$(window).height(); // 600

2.HTML文档大小

$(document).width(); // 800
$(document).height(); // 3500

3.某个div的大小

var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效

5、操作dom节点的属性

设置属性：attr()
移除属性：removeAttr()

prop()与attr()对属性checked处理有所不同

var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true

prop()返回值更合理一些。不过，用is()方法判断更好，还有selected

var radio = $('#test-radio');
radio.is(':checked'); // true

6、操作表单

获取值：val()、设置值：value()

7、修改DOM结构

append()：添加DOM，接受字符串和原始dom对象
append()把DOM添加到最后，prepend()则把DOM添加到最前

$('#test-div>ul').append('<li><span>Haskell</span></li>');
// 创建DOM对象
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';

// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象
ul.append($('#scheme'));

// 添加函数对象
ul.append(function (index, html) {
	return '<li><span>Language - ' + index + '</span></li>';
});

同级节点可以用after()或者before()方法
删除节点：remove()，如果包含若干节点，可以一次性删除多个节点

四、事件

========================================================================

1、on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数

2、鼠标事件

click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave

3、键盘事件：键盘事件仅作用在当前焦点的DOM上，通常是和

keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发

4、其他事件

focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当、或的内容改变时触发；
submit：当提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发，仅作用于document对象
$(function(){...})

5、事件参数：所事件都会传入Event对象作为参数，可以从event对象上获取更多信息

$(function(){
	$('#testMouseMoveDiv').mousemove(function(e){
		$('#testMouseMoveSpan').text('pageX=' + e.pageX + ',pageY=' + e.pageY);
	})
})

6、取消绑定：off(‘click’,funcName)

7、事件触发条件

1.监控文本框的内容改动

var input = $('#test-input');
input.change(function(){
	console.log('changed..')
})

用JavaScript代码去改动文本框的值，将不会触发change事件
希望用代码触发change事件，可以直接调用无参数的change()方法

var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件
input.change()相当于input.trigger('change')，它是trigger()方法的简写

8、浏览器安全限制：只有在用户触发下才能执行：window.open()

var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');
function popupTestWindow() {
	window.open('/');
}
button1.click(function () {
	popupTestWindow();
});

button2.click(function () {
	// 不立刻执行popupTestWindow()，100毫秒后执行:
	setTimeout(popupTestWindow, 100);
})

五、动画

========================================================================
以固定的时间间隔，每次把DOM元素的CSS样式修改一点，内置动画有
1、show / hide：左上角展开，时间以ms为单位，也可以是flow和fast

$('#div').hide(3000);
$('#div').show(slow);

2、slideUp / slideDown：垂直方向逐渐展开或收缩的
3、fadeIn / fadeOut：淡入淡出，fadeToggle()则根据元素是否可见来决定下一步动作
4、自定义动画：animate()

var div = $('#test-animate');
div.animate({
	opacity: 0.25,
	width: '256px',
	height: '256px'
}, 3000, function () {
	console.log('动画已结束');
	// 恢复至初始状态:
	$(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

5、串行动画：通过delay()方法实现暂停

var div = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
.delay(1000)
.animate({
	width: '256px',
	height: '256px'
}, 2000)
.delay(1000)
.animate({
	width: '128px',
	height: '128px'
}, 2000);

六、AJAX

========================================================================
1、参数

$.ajax(url, settings)
async：意不执行，默认true
method：'GET'、'POST'、'PUT'
contentType：发送POST请求的格式，
默认值'application/x-www-form-urlencoded; charset=UTF-8'
也可以指定为text/plain、application/json
data：发送的数据，可以使字符串、数组或object
headers：发送的额外的HTTP头，必须是一个object
dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。

2、get方法

$.get('/path/to/resource', {
	name: 'Bob Lee',
	check: 1
});

3、post方法：post()和get()类似，但是传入的第二个参数默认被序列化为application/x-www-form-urlencoded

var jqxhr = $.post('/path/to/resource', {
	name: 'Bob Lee',
	check: 1
});

4、getJSON：快速通过GET获取一个JSON对象

var jqxhr = $.getJSON('/path/to/resource', {
	name: 'Bob Lee',
	check: 1
}).done(function (data) {
	// data已经被解析为JSON对象了
});

5、安全限制：和Javascript写ajax的限制一样
如果使用JSONP可以在ajax()中设置jsonp:‘callback’，让jquery实现JSONP跨域加载数据

七、拓展：编写jQuery插件

========================================================================
给jQuery对象绑定一个新方法付是通过拓展$.fn对象实现的

$.fn.highlight = function (options) {
	// 合并默认值和用户设定值:
	var opts = $.extend({}, $.fn.highlight.defaults, options);
	this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
	return this;
}
// 设定默认值:
$.fn.highlight.defaults = {
	color: '#d85030',
	backgroundColor: '#fff8de'
}