@H_502_0@

一、简介

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

@H_502_0@

二、选择器

1.id选择器

@H_502_0@2.元素标签名选择器element

我是一个div

标题1

标题2

标题3

标题4

@H_502_0@3.类选择器

我是一个拥有class的h3

@H_502_0@4.*选择器（匹配所有元素）

我是一个div

标题1

标题2

标题3

标题4

我是一个拥有class的h3

@H_502_0@6.后代选择器

ul的li的a标签 ul的li的a标签 ul的li的a标签

@H_502_0@6.指定选择器

普通div

@H_502_0@7.子选择器

502_0@子p1

@H_502_0@子p2

@H_502_0@子p3

@H_502_0@孙子p1

@H_502_0@孙子p2

@H_502_0@孙子p3

@H_502_0@8.next(选择器)

@H_502_0@p1

@H_502_0@p2

@H_502_0@p3

@H_502_0@p5

@H_502_0@p6

@H_502_0@9.nextall(选择器)

@H_502_0@p1

@H_502_0@p2

@H_502_0@p3

@H_502_0@p5

@H_502_0@p6

@H_502_0@10.prev方法

@H_502_0@p1

@H_502_0@p2

@H_502_0@p3

@H_502_0@p5

@H_502_0@p6

@H_502_0@11.prevall方法

@H_502_0@p1

@H_502_0@p2

@H_502_0@p3

@H_502_0@p5

@H_502_0@p6

@H_502_0@12.slbings()方法

@H_502_0@p1

@H_502_0@p2

@H_502_0@p3

@H_502_0@p5

@H_502_0@p6

@H_502_0@

三、筛选器（过滤选择器）

@H_502_0@滤器主要通过特定的过滤规则来筛选所需的 DOM 元素，和 CSS 中的伪类的语法类：使用冒号(:)开头。

页面所有 h1 ~ h6 元素 focus 过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者 Tab 键盘敲击激活的。 $('input').get(0).focus(); //先初始化激活一个元素焦点 $(':focus').css('background','red'); //被焦点的元素

@H_502_0@方法在出现相同元素的时候，first 会实现第一个父元素的第一个子元素，last 会实现最后一个父元素的最后一个子元素。所以，如果需要明确是哪个父元素，需要指明： $('#Box li:last').css('background','#ccc'); //#Box 元素的最后一个 li //或$('#Box li).last().css('background','#ccc'); //同上

@H_502_0@内容筛选器

@H_502_0@jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。

@H_502_0@3.可见性过滤器

显示的元素

@H_502_0@注意：:hidden 过滤器一般是包含的内容为：CSS 样式为 display:none、input 表单类型为 type="hidden"和 visibility:hidden 的元素。

@H_502_0@子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

@H_502_0@5.其他方法

@H_502_0@

四、基础DOM和css操作

@H_502_0@1.元素内容操作

@H_502_0@在常规的 DOM 元素中，我们可以使用 html()和 text()方法获取内部的数据。html()方法可以获取或设置 html 内容，text()可以获取或设置文本内容。

Box').html(); //获取 html 内容 $('#Box').text(); //获取文本内容，会自动清理 html 标签 $('#Box').html('www.li.cc'); //设置 html 内容 $('#Box').text('www.li.cc'); //设置文本内容，会自动转义 html 标签

@H_502_0@注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。 $('#Box').html($('#Box').html() + 'www.li.cc'); //追加数据如果元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。

获取表单内容 $('input').val('www.li.cc'); //设置表单内容

@H_502_0@如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。 $("input").val(["check1","check2","radio1" ]); //value 值是这些的将被选定

@H_502_0@2.元素属性操作

@H_502_0@除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。

获取属性的属性值 $('div').attr('title','我是域名'); //设置属性及属性值 $('div').attr('title',function () { //通过匿名函数返回属性值 return '我是域名'; }); $('div').attr('title',function (index,value) { //可以接受两个参数 return value + (index+1) + '，我是域名'; });

@H_502_0@3.元素样式操作

包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。而在整个 jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点掌握。

@H_502_0@$('div').css('color'); //获取元素行内 CSS 样式的颜色 $('div').css('color','red'); //设置元素行内 CSS 样式颜色为红色在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。

@H_502_0@除了行内 CSS 设置，我们也可以直接给元素添加 CSS 类，可以添加单个或多个，并且也可以删除它。

添加一个 CSS 类 $('div').addClass('red bg'); //添加多个 CSS 类 $('div').removeClass('bg'); //删除一个 CSS 类 $('div').removeClass('red bg'); //删除多个 CSS 类

@H_502_0@我们还可以结合事件来实现 CSS 类的样式切换功能。

方法的第二个参数可以传入一个布尔值， true 表示执行切换到class 类，false表示执行回默认 class 类(默认的是空 class)，运用这个特性，我们可以设置切换的频率。 var count = 0; $('div').click(function () { //每点击两次切换一次 red $(this).toggleClass('red',count++ % 3 == 0); });

@H_502_0@4.css方法

@H_502_0@

jQuery 不但提供了 CSS 的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的 CSS 操作方法，我们分别来了解一下。

获取元素的长度，返回的类型为 number $('div').width(500); //设置元素长度，直接传数值，默认加 px $('div').width('500pt'); //同上，设置了 pt 单位 $('div').width(function (index,value) { //index 是索引，value 是原本值 return value - 500; //无须调整类型，直接计算 });

获取元素的高度，返回的类型为 number $('div').height(500); //设置元素高度，直接传数值，默认加 px $('div').height('500pt'); //同上，设置了 pt 单位 $('div').height(function (index,value) { //index 是索引，value 是原本值 return value - 1; //无须调整类型，直接计算 });