一、jQuery简介

jQuery概述

为了简化JavaScript的开发，一些JavaScript程序库诞生了。JavaScript程序库封装了很多预定义的对象和实用函数，能帮助使用者轻松地建立有高难度交互的页面，并且兼容各大浏览器。

jQuery是什么:是一个javascript程序库。

JS是语言，jQuery是建立在这个语言上的一个基本库(框架)，利用jQuery可以更简单的使用JS。

jQuery的优势

①轻量级，使用灵巧(只需引入一个js文件)

②强大的选择器(模仿CSS选择器更精确、灵活)

③出色的DOM操作的封装(动态更改页面样式/页面内容,添加、移除等)

④可靠的事件处理机制(动态添加响应事件)

⑤提供基本网页特效(提供已封装的网页特效方法)

⑥完善的Ajax

⑦易扩展、插件丰富

二、 jQuery基本使用

在jQuery库中，$是jQuery的别名，$()等效于就jQuery()

①window.onload

window.onload =function(){ ... }  简写: $(function(){ ... })

②javascript基本操作

vardomObj =document.getElementById('box');//获得dom对象varobjHtml = domObj.innerHTML;//使用js中的属性innerHTML

③jQuery基本操作

// 获取对应元素的innerHTML$('#box').html()// 设置对应元素的innerHTML$('#box').html('hello')

④jQuery对象

jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法

// 通过jQuery方法获取的就是jQuery对象；var$box = $('#box')

建议: 获取jQuery对象变量命名，以'$'为前缀，这也是为了方便辨别jQuery对象。

⑤DOM对象转成jQuery对象

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象

varfoo =document.getElementById('foo')var$foo = $(foo)

⑥jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。

// 方式一: jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象var$foo = $('#foo');varfoo = $foo[0];

// 方式二: jQuery本身提供的，通过get(index)方法得到相应的DOM对象。var$foo = $('#foo');varfoo = $foo.get(0);

以上内容属于网络copy,以下内容属于手打copy

三、jQuery选择器

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器, jQuery的行为规则 都必须在获取到元素后才能生效

①基本选择器

a. ID选择器：$('#id'）

b.标签选择器：$('element')

c.类选择器：$(‘.className’）

d.通配选择器: $('*')

e.组选择器:$('selector1,selector2,selectorN')

②层级选择器

a.包含选择器：$('#id')

b.子选择器:$(‘parent>child')’

c.相邻选择器:$('prev +next')

d.兄弟选择器:$('prev~siblings')

③ 伪类选择器

a. :first 匹配找到的第1个元素

b. :last 匹配找到的最后一个元素

c. :eq(index) 匹配一个给定索引值的元素

d. :even 匹配所有索引为偶数的元素

e. :odd 匹配所有索引值为奇数的元素

f. :gt(index) 匹配所有大于给定索引值的元素

g. lt(index) 匹配所有小于给定索引值的元素

h. :not()去除所有与给定选择器匹配的元素

四、DOM属性操作

①添加类名

.addClass

②删除类名

.removeClass

③获取属性

.attr(attributeName)

④设置属性

$('.input').attr('src','head.png')

④移动属性

input.removeAttr('title')