jQuery篇之开门

目录
    简介

jQuery 是对 js（JavaScript）的封装，更简洁方便快捷。
不属于 W3C 标准
使用时仅需在head中引入即可

举例 ( js方式 和 jQuery方式 对比)

// -----------js方式-----------
function myFunction(){
    var p=document.getElementById("myTitle");  // 一个DOM对象
    p.innerHTML="Hello jQuery";
    p.style.color = 'red';
}
// onload：页面加载完毕后调用
onload=myFunction;


等价

// -----------jQuery 方式-----------
function myFunction(){ 
    $("#myTitle").html("Hello jQuery").css('color','red') //  $("#myTitle") 则是jQuery对象。一个类数组对象，包含了DOM对象的属性和操作方法。
}
// 等价于onload（所有页面元素加载完毕后调用）
$(document).ready(myFunction);

jQuery对象 <-> DOM对象

jQuery对象 -> DOM对象

  var $div = $('div') // jQuery对象
  var div = $div[0] // 转化成DOM对象(方式一)
  var div = $div.get(0) // 转化成DOM对象(方式二)

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


//原生与jQuery方法比较
//===表示数据和类型都相等
    if($div.length === div.length){
        $div.css("border","1px solid red");
    }

// 是否是jQuery对象
    if (ele instanceof jQuery) {}

1. 简介

有2个版本：

    开发版（用于研究）

    精简版（用于生产）

引用：

方式一（大多数）
    优势：浏览其他网站时引用过则会缓存在浏览器上。
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

方式二（下载后，本地文件引用）

最主要的jQuery函数：

    $() 

使用用别的标识符（如：cx）替换$
    var cx=jQuery.noConflict()
    cx("p").hide();

获取（通过css选择器或直接传入html对象来）

    $("#myId")      id为myId的jQuery对象(id 应该是唯一的，即使有相同时只会选择第一个)
    $(".myClass")   所有class为myClass的jQuery对象，类似getElementsByClassName
    $("*")  所有元素的 jQuery对象
    $("p")          所有元素类型为p的jQuery对象，类似getElementsByTagName
    $(body)

支持链式编程

    $("#p1").css("color","red").slideUp(2000).slideDown(2000);

    $("#p1").css("color","red")
            .slideUp(2000)
            .slideDown(2000);

写在read函数中(所有元素加载完毕)

    $(document).ready(myFunction);
    $(document).ready(function myFunction(){
    });

this

    this，表示当前的上下文对象(html对象)，可以调用html对象所拥有的属性和方法。
    $(this),代表的上下文对象(jquery对象)，可以调用jQuery的方法和属性值。


var imooc = {
    name:"cx",
    getName:function(){
        return this.name;
    }
}
imooc.getName(); //慕课网

p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

2. 例子

例1（所有的button元素添加点击事件---点击后隐藏被点击的button） ：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>

例2（所有的button元素添加点击事件---点击后隐藏所有的p元素）:

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>