关于jQuery的理解、跟js的关系以及基本函数

• jQuery是什么：j代表js ，Query代表查询

jQuery库是指一种封装好的JavaScript函数库，一个轻量级的"写的少，做的多"的JavaScript库，jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作。

jQuery不能算作一个框架，只能算作是一个库，jQuery所提供的功能跟框架所提供的功能是一样的，只是说从约束的角度上来对比的话jQuery就只能算库

JavaScript库是被封装好的一些JavaScript函数，是为了应对JavaScript高级程序设计时遇到的困难开发的，提供针对常见JavaScript任务的函数，包括动画、DOM操作以及Ajax处理。

• API

说得更加通俗易懂一些，别人写好的代码，或者编译好的程序，提供给你使用，就叫做API。你使用了别人代码（或者程序）中的某个函数、类、对象，就叫做使用了某个API。

还有很多第三方（非官方）的组织机构、公司、个人提供的代码，也是一种 API。这些代码有的免费，有的收费；有的开源，有的闭源。这些代码大都针对某个特定的应用领域编写，有时候被称为框架或者库。
 

• jQuery不是前端框架，它是一个JavaScript库。

框架与库之间最本质区别在于控制权：you call libs, frameworks call you(控制反转)

库：库是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合(方法和函数)，库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；

框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。

• jQuery中所封装的函数，就是用原生态JavaScript的语句所编写的，然后封装起来供开发者使用，更加的简单方便

• jQuery的一些简单使用

• jQuery的加载函数

• jQuery的文件的结构：自执行函数，也称立执行函数，是将函数的声明和调用合并在一起

• $ 和 $() 的作用

$这个符号是在jQuery库中定义，属于jQuery

$有点类似原生态js的window对象

在jQuery中，$作为了window对象的一个属性（对象属性，对象函数）

$  类似java的类  

$（）  相当于类的构造方法

• 选择器：
        jQuery中的选择器就是一个标记，为了快速获取指定的标签

• jQuery中常见基本选择器：
   

ID选择器  $("#id").css("color",""red);

class选择器 : 获取一组元素  $(".class属性").方法
element选择器：获取一组数据  $("li")
子代选择器:获取子标签  $("#ul>li")
后代选择器:获取所有后代标签  
$("#ul    li")
相邻选择器
分组选择器
通配符选择器  *  代表所有标签
群组选择器：可以同时设置多个标签的样式  $("#ul,.box").css("background","red");
.....

• 层次选择器

• 后代选择器(交集)  所有后代：$("#ul1 li").css("color","red");
• 子代选择器：>
  
  
  
   

• 过滤选择器

• 获取第一个元素:first  获取第一个节点 $("#ul1>li:first").css("background","red");
• 最后一个元素:last  $("#ul1>li:last").css("background","red");
• 获取指定的节点 下标  $("#ul1>li:eq(2)").css("background","yellow");
• 获取偶数下标的元素:even  过滤下标为偶数，位置为奇数的标签      $("#ul1>li:even").css("background","yellow");
• 获取奇数下标的元素:odd  过滤下标为奇数，位置为偶数的标签  $("#ul1>li:odd").css("background","yellow");
• 获取某一范围元素
• :gt大于：  不包括自己    $("#ul1>li:gt(2)").css("background","yellow");
• :lt小于 ：不包括自己

 $("#ul1>li:lt(2)").css("background","yellow");

注意事项：如果gt和lt混合使用，并且gt在前，那么获取后元素的下标胡i重新编号。  $("#ul1>li:gt(0):lt(3)").css("background","yellow");
lt在前  $("#ul1>li:lt(4):gt(0)").css("background","yellow");

• 表单选择器

• 获取普通文本  $("form>input:input:text").css("background","red");
• 获取选择单选框的值  $("#demo1>input:radio:checked")val();
• 获取选择多选框的值 
• each方法 :
  $("#demo2>input:checkbox:checked").each(function(){  console.log($(this).val());
  });
• var checkboxs = $("#demo2>input:checkbox:checked");
  i  下标
  k  元素 $.each(checkboxs,function(i,k){console.log(i,k); console.log($(k).val())
  });

});