JQuery入门1_1

• JQuery定义：
  jQuery轻量级的JavaScript库，核心是JavaScript，兼容css和各种浏览器，核心理念是写得少做得多。
• $(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。
  $(document).ready(function(){
  });
  最后要以分号结尾。
  
• JQuery加载页面的三种方法：

1. $(document).ready(function(){});
2. $(function(){});
3. jQuery(function($){});

• 类数组对象：
  一个对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为“类数组对象”。它依然呈现出数组的行为
  
  

---

JQuery对象转化为DOM对象

html代码中
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

• 利用JS代码：

JavaScript代码
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

• JQuery中自带get()方法
  jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

$ ('div')是jquery直接获取元素；$(div)是将dom对象转换成jquery， $ ("div")是直接用jQuery方法获取一个div元素,$div在这里是被定义的jQuery变量。

• 注意：此方法只有放在body中才有效。
  在body中，当文档加载的时候会自动实行脚本（javascript）
  如果不放在body中，在代码开头要加上
  $(document).ready(function(){});==原生js代码中的window.οnlοad= function（）{}。
  jquery提供了get()方法，将jquery对象转换为DOM对象，get()方法的简化方法为[0]。
  $ div[0]等价于$div.get(0)，转为DOM元素一般使用[0]方法.

---

DOM对象转化为JQuery对象

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

• 通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。
  

click函数

<script>
$(function(){
   $("#b1").click(function(){//在jQ中的function调用，在$(function(){ }) 中执行
   //click不是在onclick中，而是直接利用$(获取对象).click（这中间写要执行的操作）
      $("div").addClass("pink");
   });
});
</script>
  <button id="b1">给所有的div元素增加背景色</button>