jQuery基础

jQuery就是一个js库，基于原生JS封装的一个类库，提供了很多的方法 调取里面的方法实现自己需要的。

优点：方法多 ，隐式迭代，没有兼容性问题，动画简单，功能强大，代码简单

如何使用jQuery?

1.（引入jQuery文件）

<script src="js/jquery-1.9.1.js"></script>

2.入口函数

$(function(){
          //代码....
      })

关于JQuery的$符号： 

$是一个函数：$();

selector 传递的值支持三种类型

1.string 基于选择器选择

 2.元素对象 selector.nodeType: 把js对象转换为JQ对象

3. 函数： 把传递的函数执行， 把jq当作 实参传递给函数

 $(function($){
        console.log($);

    })

$(function() {});//参数是function，说明是入口函数
    $("#btnSetConent");//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
    $("div");//查找所有的div元素

 jQ选择器：基于各种选择器创建一个JQ 实例(JQ对象)

1. selector 选择器的类型（一般是字符串，但是支持函数或者元素对象

2. context 基于选择器获取元素时候指定的上下文默认（document）

jQ对象：一个类数组结构（JQ）实例，这个数组集合中包含了获取到的元素

基本选择器

ID选择器

$("#id") // 获取指定ID的元素

类选择器

$(".class")// 获取同一类class的元素

标签选择器

$("div") //获取同一类标签的所有元素

并集选择器

$("div,p,li")//使用逗号分隔，只要符合条件之一就可。获取所有的div p li 元素

交集选择器（标签指定选择器）

 $("div.redClass");	//注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

层级选择器

子代选择器

$("ul>li");//	使用>号，获取子代层级的元素

后代选择器

$("ul li");	//使用空格，代表后代选择器，获取ul下的所有li元素

过滤选择器

:eq（index）

$("li:eq(2)").css("color", "red"); //获取到的li元素中，选择索引号为2的元素

:odd

$("li:odd").css("color”, "red");//获取到的li元素中，索引号为奇数的元素

:even

$("li:even").css("color”, "red");//获取到的li元素中，索引为偶数的元素

jQuery  操作样式

CSS操作

设置单个样式

//name：需要设置的样式名称
//value：对应的样式值
css(name, value);
//例
$("#nav").css("background","gray");//将背景色修改为灰色

Class操作

添加样式

name：需要添加的样式类名，注意参数不要带点.
addClass(name);
//例子,给所有的div添加one的样式。
$(“div”).addClass(“one”);

移除样式

//name:需要移除的样式类名
removeClass(“name”);
//例子，移除div中one的样式类名
$(“div”).removeClass(“one”);

判断是否有样式

//name:用于判断的样式类名，返回值为true false
hasClass(name)
//例子，判断第一个div是否有one的样式类
$(“div”).hasClass(“one”);

在jQuery 中常用的筛选方法：

    filter   // 同级筛选
    children  //子集筛选
    find    //后代筛选
    each //在JQ中遍历 可遍历内容：1. 数组2. 对象 3. 类数组（JQ对象）