jquery基础之学习笔记

jQuery基础
jQuery对象
jQuery最重要的概念就是jQuery对象，用$代替．
jQuery构造函数
jquery对象本质是一个构造函数，主要作用返回jquery对象的实例．
只有生成了jquery对象实例，才能使用jquery对象中的各种方法．
jquery构造函数的参数：
jquery构造函数的参数，主要是css选择器，
dom对象作为参数$(doucment.body)
html字符串作为参数$('<li class="greed">test</li>')
$('<li>', {
    html: 'test',
    'class': 'greet'
});
或者
$('<li>').addClass('greet').html('test');


jquery构造函数返回的结果集
(1)length属性
类似数组的对象，拥有length属性
判断一个元素是否存在
$('li').length > 0
(2)下标运算符
$('li')[0] instanceof jquery //false
$('li')[0] instanceof Element //true
(3)is方法
返回一个布尔值，表示选中的结果是否符合某个条件．
(4)get方法
下标运算符的另一种写法
(5)eq方法
在结果集中取一个jquery对象的实例，从０开始
$('li').eq(0) instanceof jQuery //true;
(6)each,map
遍历结果集，对每一个成员进行操作
$('li').each(function(index, element) {
    $(element).prepend('<em>' + index + '</em>');
});
map方法和each完全一样，区别在于each没有返回值，map方法返回一个新的jQuery对象
$('input').map(function (index, element) {
    return $(this).val();
}).get().join(", ");
取出所有input元素中的值，用get方法得到一个包含这些值的数组，通过join方法返回一个逗号分隔的字符串
(7)内置循环
$('.class').addClass('highlight');


jquery的链式操作
$('li').click(function() {})
.find('span').attr('title', 'hello world');


$(doucment).ready();
ready方法接收一个函数作为参数，将该参数作为document对象的DOMContentLoaded事件的回调函数，
保证了页面中html，以及外部元素加载完毕后，执行该函数．
简写
$(function() {});


$.noConflict方法
给jquery变量规定新名字
var jq = $.noConflict();


结果集过滤
(1)first, last
$('li').first();
$('li').last
(2)next, prev
返回紧临的前或后一个元素
(3)parent,parents,children
(4)siblings,nextAll,prevAll
(5)closest,find
closest返回当前元素，以及当前元素所有上级元素中第一个符合条件的元素
$('li').closest('div');
find返回当前元素所有符合条件的下级元素
$('div').find('li');
以上两种形式等同$('li', 'div')优于$('div li')的写法
(6)filter,not,has
filter方法用于过滤结果集，可以接收多种类型参数
$('li').filter('.item');
//返回函数返回值为true的结果
$('li').filter(function(index) {
    return index % 2 === 1;
});


Dom相关方法
(1)html,text
(2)addClass, removeClass, toggleClass
(3)css
$('li').css('padding-left', '20px');
$('li').css({
    'padding-left': '20px'
});
(4)val
(5)prop,attr
网页元素的属性，attr(attribute)
dom元素的属性，prop(property)
prop与attr举例对比
<input type="checkbox" checked="checked" />
对于checked属性，attr方法读到的是checked，prop方法读到的是true;
$('input[type=checkbox]').attr('checked'); //checked
$('input[type=checkbox]').prop('checked'); //true
attr读取的是网页上该属性的初始值，
prop读取的是dom元素的该属性的值，
事实上这里，无论checkbox有没有被选中，返回值都是checked,这样一个在网页中以及初始化的值
(6)removeProp, removeAttr
(7)data
用于在一个dom对象上存储各种类型的数据．


添加，复制移动网页元素的方法
(1)append,appendTo
append将参数中元素插入当前元素尾部
append将当前元素，插入到参数元素的尾部
(2)prepend,prependTo
prepend将参数中元素插入当前元素的头部
prepend方法的参数如果不是新元素，而是当前页面存在的元素，则会产生移动元素的效果
$("p").prepend("strong")
// <strong>Hello </strong><p>World</p>
// 变为
// <p><strong>Hello </strong>World</p>
prependTo将当前元素插入到参数元素的头部
(3)after, insertAfter
after,将参数中的元素插入到当前元素的后面
insertAfter，将当前元素插在参数中的元素后面
(4)before, insertBefore
before将参数中的元素插在当前元素的前面
insertBefore将当前元素插入到参数元素的前面
(5)wrap,wrapAll,unwrap,wrapInner
wrap将参数中的元素变成当前元素的父元素
wrapAll为结果集的所有元素共同添加一个父元素
$('p').wrapAll('<div></div>');
//<p></p><p></p>
//<div><p></p><p></p></div>
unwrap移除当前元素的父元素
wrapInner为当前元素的所有子元素添加一个父元素
$("p").wrapInner('<strong></strong>')
// <p>Hello</p>
// 变为
// <p><strong>Hello</strong></p>
(6)clone
(7)remove,detach,replaceWith


jquery动画
(1)一些动画的简单写法
show：显示当前元素。
hide：隐藏当前元素。
toggle：显示或隐藏当前元素。
fadeIn：将当前元素的不透明度（opacity）逐步提升到100%。
fadeOut：将当前元素的不透明度逐步降为0%。
fadeToggle：以逐渐透明或逐渐不透明的方式，折叠显示当前元素。
slideDown：以从上向下滑入的方式显示当前元素。
slideUp：以从下向上滑出的方式隐藏当前元素。
slideToggle：以垂直滑入或滑出的方式，折叠显示当前元素。
(2)animate方法
$('a.top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop: 0}, 800);
});
//点击链接，回到页面头部的写法．
animate接收两个参数，第一个参数是一个对象，表示动画结束时相关css属性值，
第二个参数动画持续的毫秒数，第一个参数对象的成员名称必须和css属性值相同，如果css属性值中间
有连字符，则使用驼峰命名改写．
第三个参数，表示动画结束时的回调函数
(3)stop, delay
立即停止动画，与推迟运行动画


其他方法，序列化form表单中所有的元素值
serialize=>序列化称url使用的查询字符串
serializeArray=>表单元素值转成数组
[
    {name : '', value : ''},
    {name: '', value : ''}
]


事件处理
(1)简单方法
click
keydown　=> keyCode
keypress
keyup
mouseover
mouseout
mouseenter
mouseleave
scroll
focus
blur
resize
hover
(2)on, trigger, off, one
one表单提交的时候，特别有用


event对象
type：事件类型，比如click。
which：触发该事件的鼠标按钮或键盘的键。
target：事件发生的初始对象。
data：传入事件对象的数据。
pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角）。


preventDefault：取消浏览器默认行为。
stopPropagation：阻止事件向上层元素传播。