jQuery与js很多人刚一接触的时候，都会晕懵懵的，其实很好区别：
jQuery可以理解为是js的封装，使用jQuery时，要先引入jQuery文件<script src="jquery-*.min.js"></script>，
jquery-版本号[.min] .js 其中min表示压缩版
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(未压缩版): 注释全部保留，变量名尽可能的语义化
根据小版本体积大小不同，使用环境不同
项目上线，使用压缩版
开发过程当中使用未压缩版
======================================================================================
直接进行代码，形象直接：：
在HTML页面
<body>
<div id="one"><span>one</span></div>
<div class="test" bs="aa">two</div>
<div class="test">three</div>
<div class="test">four</div>
<input type="text" name="uid" bs="aa" id="uid" />
<input type="button" id="btn" value="取消绑定" />
<input type="button" id="add" value="绑定事件" />
</body>Jquery代码：都写在script里面
<script type = "text/javascript">
$(document).ready(function(e){
//可以简写为$(function(e){
//Jquery与js找对象
//JS通过id、name、className、TagName找对象的写法
var a = document.getElementById("one"); //id
var b = document.getElementsByClassName("test");//classname
var d = document.getElementsByTagName("div"); //tagname
var c = document.getElementsByName("uid"); //name
//JQUERY通过id、name、className、TagName找对象的写法
var aj = $("#one"); //id选择器
var bj = $(".test"); //类选择器
var cj = $("div"); //标签选择器
var dj = $("[name='uid']"); //name注意中括号，特别注意属性可以自己定义例如：bb="aa"
var ej = $("div.test"); //div中class为test的元素，Jquery可以使用选择器找对象。。。
//通过上面的代码可以看出js中的document.getElementsByClassName等被jQuery的$替代
==========================================================================
//Jquery与js操作对象
==========================================================================
//JS操作属性：
a.setAttribute("",""); //设置属性，修改属性
a.remove(""); //移除属性
a.getAttribute(""); //获取属性
//JQUERY操作属性
aj.attr("",""); //设置属性，修改属性
aj.removeAttr(""); //移除属性
aj.attr(""); //获取属性
//对于属性的操作，并没有区别
==========================================================================
//JS操作内容
a.innerText; //非表单元素的取值，赋值是：a.innerText = "aaaa"; 无参数的情况下是取值， 有参数的情况下是赋值
a.innerHTML; //非表单元素的取值，赋值是：a.innerHTML = "<a>123</a>"; 可以解析html标签
a.value; //表单元素的取值，赋值是：a.value = "aaaa";
//JQUERY操作内容
aj.text(); //非表单元素的取值，赋值是：aj.text("aaaa");
aj.html(); //非标单元素的取值，赋值是：aj.html("<a>123</a>"); 可以解析html标签
aj.val(); //标签元素的取值，赋值是：aj.val("aaaa");无参数是取值，有参数是赋值
==========================================================================
//JS操作样式
a.style.backgroundColor = red; //设置样式
a.style.color; //获取样式，只能获取内联样式，也就是写在标签里面的样式
//JQUERY操作样式
aj.css("color","yellow"); //设置样式
aj.css("color"); //可以获取到内嵌式的样式属性
==========================================================================
//JS操作元素，创建元素两种方式
//第一种用html赋值来创建元素
var s = "<input type='button' value='"+i+"' class='bbb' οnclick='doselect(this)'>"
var dd = document.getElementById("test");
dd.innerHTML += s;
//第二种是使用createElement
var ab = document.createElement("input");
ab.setAttribute("type","button");
ab.setAttribute("value",i);
ab.setAttribute("class","bbb");
ab.setAttribute("onclick","doselect(this)");
var dd = document.getElementById("test");
dd.appendChild(ab);
//删除元素
var dd = document.getElementById("test");
dd.remove;
//JQUERY操作元素,创建元素
var str = "<div id='a' style='width:100px; height:100px; background-color:red'></div>";
div.append(str);
//删除元素
$("#a").remove();
==========================================================================
//JQUERY中的事件
$(".test").click(function(){
alert($(this).text());
});
$(".test").bind("click",function(){ //绑定事件，注意可以同时绑定多个
alert($(this).text());
});
$("#btn").click(function(){
$(".test").unbind("click"); //解除绑定事件
});
$("#add").click(function(){
$(".test").bind("click",function(){
alert($(this).text());
});
});
});
</script>================================================================================
筛选选择器(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)) //获取当前元素的索引位置
