1、概念

1、jQuery 理念: 写得少, 做得多。

2、引用

==1、引入jquery.js==

<!-- 引入jq的库 -->
<script src="../js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>        

==2、jQuery 对象==

<script>
//1、jq的入口函数
$(document).ready(function(){
    console.log(123);
 });
 
 $(function(){
     var $variable = jQuery 对象
 });
 // 2、所有的jq语法得到的对象都是jq的对象
// 3、jQuery 对象无法使用 DOM 对象的任何方法
// 4、DOM 对象也不能使用 jQuery 里的任何方法
// 5、 jQuery 对象是一个数组对象
</script>

==3、DOM与jq对象转化==

<script>
    //1、DOM 对象转成 jQuery 对象
 //2、用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象
    //document 获取的对象叫js的对象
       var btn=document.getElementById("btn");
    var $btn=$("button");    
 //3、将jq对象-----》js的dom对象
       console.log($btn[0].id);
</script>

3、选择器

==1、基本选择器==

eg：

$("#btn1").click(function(){
    $("#one").css("background","#fba");
});

==2、层次选择器==

eg:

$("#btn5").click(function() {
    //只能选择后面的元素
    //$("#two ~ div").css("background", "red");
    //而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
    $("#two").siblings("div").css("background", "red");
});

                $("#btn6").click(function() {
    //+ 只能选择相邻的元素
    //$("#one + span").css("background", "red");
    $("#one").nextAll("span:first").css("background", "red");
});

==3、过滤选择器==

==4、内容过滤选择器==

==5、可见性过滤选择器==

==6、属性过滤选择器==

==7、子元素过滤选择器==

==8、表单对象属性过滤选择器==

==9、表单选择器==