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：阻止事件向上层元素传播。