jQuery

1、jQuery的基本概念

1.1、什么是jQuery

js的方法库，封装了很多js的方法，需要的时候可以直接调用

注意事项：方法调用的时候都要带();

1.2、使用jQuery的三个步骤

//1、 引入jQuery包
<script src="jquery-1.11.1.js"></script>

//2、 入口函数
$(document).ready(function(){});

//3、 书写函数体
$("#btnShowDiv").click(function () {
    $("div").show(1000);
});

1.2.1、js与jQuery入口函数执行的差别

js：当页面所有元素包括图片，样式文件，等所有资源都加载完才开始执行;

jQuery：当页面的文档树加载完成后就会执行，并不会等所有的文件都加载完成再执行

1.3、jQuery的版本

1.X 支持IE6/7/8

2.X 不支持IE6/7/8

3.0 不支持IE6/7/8

1.4、$符号的本质

$符其实就是一个函数，参数不同，功能不同(常用的几种功能如下代码)

注意事项：括号中的参数为字符串类型的时候不要忘记引号

  $(function() {});//参数是function，说明是入口函数

  $("#btnSetConent");//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素

  $("div");//查找所有的div元素

1.5、jQuery对象与DOM对象

1.5.1、使用js方法获取的页面元素返回的就是dom对象

var btn = document.getElementById("btnShowDiv");

var divs = document.getElementsByTagName("div");

dom对象只可以使用dom对象的方法和属性

domObject.innerHTML = "dom对象设置文本";

domObject.style.display= "block";//dom对象显示对象

domObject.onclick = function() {}//dom对象绑定事件

1.5.2、使用jQuery方法获取页面元素返回的就是jQuery对象

注意事项:jQuery对象调用方法的时候，方法记得加().

$("div");//标签选择器返回的jquery对象。

$("#btnShowDiv");//id选择器返回的jquery对象。

jquery对象只能使用jquery对象的方法

var $obj = $("div");

$obj.html("jquery对象设置文本的方法");

$obj.show();//jquery对象显示文本

$obj.click(function() {});//jquery对象绑定事件

1.5.3、jQuery对象与DOM对象之间的转换

1、jquery对象转DOM对象的方法

var $li = $("li");
//第一种方法（推荐使用）

$li[0]
//第二种方法

$li.get(0)
//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

2、DOM对象转jQuery对象的方法

var $obj = $(domObj);

// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

2、jQuery选择器

2.1、基本选择器

• ID选择器
  • 用法：$("#ID")
  • 说明：获取指定的ID，不要忘记引号

• 类选择器
  • 用法：$(".类名")
  • 说明：获取同一类元素
• 标签选择器
  • 用法：$("selecor")
  • 说明：获取同一类标签的所有元素
• 并集选择器
  • 用法：$("div,p,li")
  • 说明：用逗号分隔，满足条件的所有的所有的元素都会被选中
• 交集选择器
  • 用法：$("div.redClass")
  • 说明：两个元素之间没有空格，同时满足条件的元素才会被选中

2.2、层级选择器

• 子代选择器
  • 用法：$("ul>li")
  • 说明：用>连接，只会选择到他儿子级的元素，不会选择到孙子级的元素
• 后代选择器
  • 用法：$("ul li")
  • 说明：用空格分隔开来，会选择到父级元素下所有的子级元素，包含孙子辈等

2.3、过滤选择器

• :eq（index）
  • 用法：$("li:eq(2)").css("color", "red")
  • 说明：会选择到li下面索引值为2的li标签，注意：元素的索引值是从0开始
• :odd
  • 用法：$("li:odd").css("color", "red")
  • 说明：会选中索引值为奇数的元素，索引值是从0开始的，所以在实际现实中表示的是偶数行
• :even
  • 用法：$("li:even").css("color", "red")
  • 说明：会选中索引值为偶数的元素，索引值是从0开始的，所以在实际现实中表示的是奇数行

2.3、过滤选择器(是方法)

• children(selector)
  • 用法：$("ul").children("li")
  • 说明：获取$("ul")下的所有的儿子级的li，获取到的是一个集合，相当于$("ul>li")，子类选择器
• find(selector)
  • 用法：$("ul").find("li")
  • 说明：获取的是$("ul")下的所有的li元素包括孙子级，相当于$("ul li")后代选择器
• siblings(selector)
  • 用法：$("#first").siblings("li")
  • 说明：获取的是所有的兄弟节点，并且不包括自身
• parent()
  • 用法：$("#first").parent()
  • 说明：查找父级节点
• eq(index)
  • 用法：$("li").eq(2);
  • 说明：相当于$("li:eq(2)"),index从0开始

3、jQuery操作样式

3.1 设置样式

1. 设置单个样式

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

2. 设置多个样式

   //参数是一个对象，对象中包含了需要设置的样式名和样式值
   css(obj);
   //使用案例
   $("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
   });
   

3. 获取样式

   /*name:需要获取的样式名称*/
   css(name);
   /*案例*/
   $("div").css("background-color");
   

   注意：获取样式操作只会返回第一个元素对应的样式值

3.2 操作样式

1. 添加样式类

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

2. 移除所有样式类

   //不带参数，移除所有的样式类
   removeClass()
   //例子，移除div所有的样式类
   $("div").removeClass();
   

3. 移除单个样式类

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

4. 切换样式类

   //name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
   toggleClass(name);
   //例子
   $("div").toggleClass("one");
   

5. 判断是否有样式类

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

3.3、总结

1. 如果操作到的样式非常少，可以考虑css方法

2. 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。

3. 如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。