jQuery基础

　　jQuery是一种轻量级的，功能多样的，快速的JavaScript库。它使HTML文档遍历和操作(POM），事件处理，动画，还有Ajax用一个简单易用API接口来跨多个浏览器使用。jQuery结合了通用性和可扩展性来改变了数百万计的人写JavaScript代码的方式。

 一、入口函数

　　jQuery入口函数的两种写法：

　　其中第一种只需能看懂即可，用的不多

$(document).ready(function () {
    console.log("这是jQuery入口函数的第一种写法");
});


===============================


$(function() {
    console.log("这是jQuery入口函数的第二种方法");
});

开发用版本 .min.js

学习用版本 .js

　　js的入口函数比jQuery的入口函数执行得晚一些，并且jQuery的入口函数不等页面的图片加载，但是这两种的入口函数都等待文档的加载。

jQuery推荐使用步骤：

1. 引入jQuery库
2. 入口函数
3. 功能实现

写入口函数的好处是使代码更加灵活，可以放在HTML页面的任何位置。

二、jQuery对象与DOM对象(js对象)的区别

　　DOM对象：使用js的方式获取到的元素就是js对象

var cloth = document.getElementById("cloth");
cloth.style.backgroundColor = "pink";

　　jQ对象：使用jQ方式获取到的元素就是jQ对象

var $li = $(li);
$li.text("xxx");

　　

　　区别：

• • js对象和jQuery对象的方法不能混用
  • 他们不是一个对象

　　联系：

　　　　jq对象其实就是js对象的集合，伪数组jQuery.fn.init[ x ]，里面存放了一大堆的js对象。它有自己的方法。

　　

　　jQuery对象转换为DOM对象：

　　　　如果想用jQuery对象调用js对象的方法，可以从伪数组中取出来DOM对象，这样就可以调用了。

　　　　　　$li[0]     /    $li.get(0)

　　DOM对象转换为jQuery对象：

　　　　如果想用js对象调用jQuery对象的方法，就花钱买（在DOM对象前加$）

　　　　　　var cloth = document.getElementById("cloth")；

　　　　　　$(cloth).text("xxx")；

　　

三、$符号的实质　　

　　$其实是一种函数，用的时候记得加()。

　　三种用法：

1. 参数是一个function，那就是一个入口函数
2. 把dom对象转换为jQuery对象，$(domobj)
3. 参数是一个字符串
   • $("div") 标签选择器  $("#btn") id选择器  $(".current") 类选择器　　　

　　

　　　　

四、基本选择器

　　jQuery的选择器返回的是jQuery对象，并提供一组方法，可以让我们更方便的找到页面种的元素。　　

　　jQuery提供很多种选择器，但是虽然很多，选择器之间可以相互替代，所以我们平时真正用到的只是少数的最常用的选择器。

<script>
        $(function(){
            $("#four").css("backgroundColor", "red");
        });

        $(".green").css("backgroundColor", "green");

        $("li").css("color", "blue");
　　　　　
　　　　　// 并集

        $("#four, .green").css("backgroundColor", "pink");
</script>

五、层级/过滤选择器

• 子代选择器：$("ul > li") ，不会获取到孙子层级的元素
• 后代选择器：$("ul li")，使用空格，代表后代选择器，包括孙子等层级。
• ：even
• ：odd
• ：lt ()
• ：gt()
• ：eq()
• ：first
• ：second