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 设置样式
- 设置单个样式
//name：需要设置的样式名称 //value：对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色 - 设置多个样式
//参数是一个对象，对象中包含了需要设置的样式名和样式值 css(obj); //使用案例 $("#one").css({ "background":"gray", "width":"400px", "height":"200px" }); - 获取样式
/*name:需要获取的样式名称*/ css(name); /*案例*/ $("div").css("background-color");注意：获取样式操作只会返回第一个元素对应的样式值
3.2 操作样式
- 添加样式类
/*name：需要添加的样式类名，注意参数不要带点.*/ addClass(name); /*例子,给所有的div添加one的样式。*/ $("div").addClass("one"); - 移除所有样式类
//不带参数，移除所有的样式类 removeClass() //例子，移除div所有的样式类 $("div").removeClass(); - 移除单个样式类
//name:需要移除的样式类名 removeClass("name"); //例子，移除div中one的样式类名 $("div").removeClass("one"); - 切换样式类
//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。 toggleClass(name); //例子 $("div").toggleClass("one"); - 判断是否有样式类
//name:用于判断的样式类名，返回值为true false hasClass(name) //例子，判断第一个div是否有one的样式类 $("div").hasClass("one");
3.3、总结
1. 如果操作到的样式非常少，可以考虑css方法
2. 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3. 如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。