jQuery的选择器和框架的学习方法

今天了解了一下框架和库和插件等。
框架：使用原生语言实现某个功能，然后封装起来，多个或多种功能封装成一个入口的使用方式，考虑功能的性能和扩展，等兼容问题
库：就是封装了多个功能
而插件：就是一个或同一类功能的封装。
而jQuery为例子，如果需要学习或使用jQuery框架需要的步骤是：
1你得需要找到这个框架得官网（搜索引擎搜）
如jQuery
找到官网之后，看他的介绍，是用来干嘛得，功能什么。

补充：官网是英文可以点击右键翻译,或者直接找第三方静态资源托管搜索
2.找到官网上的快速入门之类的：如一分钟上手啊，三分钟上手啊的

3.接着你觉得可以用就下载，可以下载也可以在线引入用，

其中有压缩和未压缩的，区别是压缩的带有min，压缩的是看不懂的，如果需要学习和了解就下载未压缩的。
有好几个版本的，需要哪个下哪个
4.尝试着观察源码，试着学习了解，
5.就是页面引入

 <script src="../jquery.js"><\/script> 

6.查看使用文档，使用说明，
7.借鉴使用案例
8.不会的话就差博客，技术支持，或者讨论群等等

这里讲的时jQuery的框架，相信大家都不陌生或多或少的听过大名。
重新封装了选择器，DOM的操作，事件的绑定，ajax，动画，隐式迭代
jQuery的官方的主打思想：少些多做！写的更少，做得更多
连缀执行: 一行代码解决所有问题（相当霸气！）
下载完成之后查看源码jq:或者直接搜索jQuery入口是什么，得到$ 或者jq的入口，执行函数。
需要处理什么就直接传参如： jQuery（） 或$()
这里我了解到了jq的基本选择器（跟js的Dom选择器差不多哈）
但是区别是：jq所有选择器选择出来的元素都是以数组的形式返回
jq选择的元素不需要解析就可以直接使用
而jq的DOM元素必须解析之后，才能使用原生js的DOM的属性或方法
做个比较：

 var box1 = $("#box1");
  var box2 = document.getElementById("box2");

原则上来说，原生jsDOM不能使用jq的DOM方法
但是，原生jsDOM对象可以被转成jq的DOM对象
这个时候就可以使用jq的方法了
原生js的DOM对象和jq的DOM对象的转换方式：
原生js转jq
$(原生DOM对象)
jq转原生js
jqDOM对象[0]
选择器：id：失明特性

$("#box").css("background","red");

class

$(".cont").css("background","red");

标签

 $("span").css("background","red");

属性

$("input[abc=hello][qwe]").css("background","red");

包含：后代

$(".msg h2").css("background","red");

群组：

$("#box,.cont,span").css("background","red");

包含：子

$(".msg>h2").css("background","red");

下一个兄弟

 $(".msg+span").css("background","red");

下所有兄弟

$(".msg~span").css("background","red");

指定索引，从0开始

 $(".cont:eq(1)").css("background","red");

    // $(".list li:eq(2)").css("background","red");

第一个或最后一个

$(".list li:first").css("background","red");
    // $(".list li:last").css("background","red");

jq最大的特性：隐式迭代
两个jq的属性操作
prop：
如果设置的是内置属性，会可见
如果设置的是自定义属性，会不可见

$("#box").prop("title","这是一个title");//可见

     $("#box").prop("qwe","这是一个qwe");//不可见
     // $("#box").removeProp("qwe");//删除属性
    // $("#box").removeProp("title");//删除属性

attr：
不管内置还是自定义，都可见

$("#box").attr("title","这是一个title");//内置
     $("#box").attr("qwe","这是一个qwe");//自定义的都可见
     var box = $("#box");
	删除
    // box.removeAttr("id");
    // box.removeAttr("title");
    // box.removeAttr("qwe");

但是一般都是这样用

$("#box").attr({
         zxc:"hahaha",
         hello:"world",
        "class":"123"

还有样式:

 $("#box").css({
        width:"100px",
        height:200,
        background:"red",
        opacity:0.5,
        fontSize:30,
        lineHeight:"100px"
    });

css这个方法，接收的参数，有个数不同的时候，有类型不同的时候
一个：
字符：获取
对象：批量设置
数组：批量获取

两个：单个设置