1. 什么是jQuery以及学习的意义等
jQuery是一个js库
JS库是什么？
把常用的方法，进行封装，封装到一个单独的js文件当中，要用的时候直接调用。
学习jQuery主要学什么？
学习jQuery提供给我们的方法
2.jQuery的使用步骤
1）引入jQuery包
2）写进入口函数
入口函数的两种书写方式：
方式一： $(document).ready(function(){
});
方式二：
$(function(){
});
3)
写入需要实现的功能
例：
<script src="jquery-1.12.4.js"></script>//引入jQuary包 <script> $(document).ready(function(){ //入口函数 $("#btn1").click(function(){//需要执行的功能 $("div").show(400,500); }); $("#btn2").click(function(){ $("div").text("我是文字内容"); }) }); </script>
jQuery的版本
大版本：
1.x (1.1-1.12) ie 6/7/8 支持的
2.x (2.1-2.12) 不支持ie 678
3.x 不支持ie 678
小版本：
每个大版本又分两个小版本：
compressed(压缩版): 将变量名尽可能的变为单个字母，把注释和换行空格全部去掉用以减小体积
uncompressed(未压缩版): 注释全部保留，变量名尽可能的语义化
根据小版本体积大小不同，使用环境不同
项目上线，使用压缩版
开发过程当中使用未压缩版
扩展：
3.x之后的版本，出现一个 slim 版 削减版
移除了 effects ajax 模块
入口函数的注意事项
//1. 在使用jQuery之前未引包 $ is not defined
//2. 引包的顺序一定要注意，在使用之前引包 $ is not defined
//3. 引包的路径一定要写对！
$符号是什么
//$本质 就是一个函数,根据所给的参数不同 功能不同
//第一种用法：
//传入字符串css选择器
//功能：获取页面上的元素
//栗子：$("#id")
//语法：$(selector)
//第二种用法：
//传入DOM对象
//功能：把DOM对象转成jQuery对象
//栗子：$(document)
//语法：$(DOMObj)
//第三种用法：
//传入一个fucntion
//功能：入口函数
//$(function)
JQuery对象和DOM对象
<script> $(document).ready(function(){ // dom对象通过js方法获取到的元素 就是DOM对象 var son1=document.getElementById("son1"); son1.style.backgroundColor="pink"; // son1.css("backgroundColor","green");//错误 dom也不能调用jauary方法 //jquary对象通过jQuery方法获取到的元素 就是jQuery对象 var $lis=$("li"); $lis.css("backgroundColor","green"); // $lis.style.backgroundColor="pink";//错误 jquary不能调用dom方法 }); </script>
jQuery和JavaScript
//jQuery对象其实就是DOM对象的包装集。
//dom对象以伪数组的形式存放在jQuery对象中
基本选择器（id选择器、类选择器、标签选择器、交集/并集选择器）
//基础选择器 //id选择器 $("#id") //类选择器 $(".className") //标签选择器 $("TagName") //交集选择器 $(selector1selector2) //并集选择器 $(selector1,selector2)
层级选择器（子代、后代）
//层级选择器 //后代选择器 $(selector1 selector2) //子代选择器 $(selector1>selector2)
案例：
<script src="jquery-1.12.4.js"></script> <script> $(function(){ // $(".hf,.wsy").css("backgroundColor","pink"); //并集选择器 // $("li.nj").css("backgroundColor","grey"); //交集选择器 // $("#dlt>li").css("backgroundColor","red"); //子代选择器 $("#dlt li").css("backgroundColor","blue"); //后代选择器 }); </script> <ul id="sl"> <li>联合司令官</li> </ul> <ul id="dlt"> <li class="tz">李云龙</li> <li>狙击手</li> <li>士兵</li> <ul class="fl"> <li>俘虏1</li> <li>俘虏2</li> <li>俘虏3</li> </ul> <li>士兵</li> <li>士兵</li> <li class="hf">伙夫</li> <li class="wsy">卫生员</li> </ul> <ul id="tfe"> <li class="tz">楚云飞</li> <li>狙击手</li> <li>士兵</li> <li class="nj">士兵</li> <li>士兵</li> <li class="hf">伙夫</li> <li class="wsy">卫生员</li> </ul> <ul id="bx"> <li>百姓</li> <li>百姓</li> </ul>
过滤选择器（odd，even，eq）
<script> $(document).ready(function () { $("li:odd").css("backgroundColor","lightblue");//奇数过滤选择器 $("li:even").css("backgroundColor","red");//偶数过滤选择器 $("li:eq(5)").text("改变的文字");//序号过滤选择器 }); </script> <body> <ul> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> </ul>
筛选选择器(children(selector)、find(selector)、next()、siblings(selector)、parent()、eq(index))
$(this).children(selector)获取当前元素的子代标签
$(this).find(selector) //在当前元素的后代元素中寻找和selector对应的元素
$(this).next() //获取当前元素的下一个元素
$(this).siblings(selector) //获取当前元素的兄弟元素
$(this).parent() //获取当前元素的父级元素
$(this).eq(index)) //获取当前元素的索引位置