前端jquery部分很精彩_jquery

二、选择器
1.id选择器

我是一个div

2.元素标签名选择器element

我是一个div
我是一个div
我是一个div
标题1
标题2
标题3
标题4

3.类选择器

我是一个拥有class的h3
我是一个拥有class的h3
我是一个拥有class的h3

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

我是一个div
我是一个div
我是一个div
我是一个div
标题1
标题2
标题3
标题4
我是一个拥有class的h3
我是一个拥有class的h3
我是一个拥有class的h3

5.群组选择器

我是一个div
标题1
我是一个拥有class的h3

6.后代选择器

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

6.指定选择器

class的div
class的p
普通div

7.子选择器

子p1
子p2
子p3

  
孙子p1
  
孙子p2
  
孙子p3

8.next(选择器)

p1
p2
p3
div
p4
p5
p6
p7

9.nextall(选择器)

p1
p2
p3
div
p4
p5
p6
p7

10.prev方法

p1
p2
p3
div
p4
p5
p6
p7

11.prevall方法

p1
p2
p3
div
p4
p5
p6
p7

12.slbings()方法

p1
p2
p3
div
p4
p5
p6
p7

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

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

1.基本筛选

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

2.内容筛选器

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

3.可见性过滤器

-

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

4.子元素过滤器

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

5.其他方法

四、基础DOM和css操作

1.元素内容操作

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

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

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

2.元素属性操作

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

3.元素样式操作

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

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

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

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

4.css方法

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

以上就是本文的全部内容，希望对大家的学习有所帮助。