jQuery的简单入门

jQuery

一、用jQuery改写onclick事件

用原生js的onclick事件：

<script type="text/javascript">
    window.onload = function (){
        var btnObj = document.getElementById("btn01");
        btnObj.onclick = function (){
            alert("HelloWorld");
        }
    }
</script>

用jQuery改写后：

<script type="text/javascript">
   $(function (){ //表示页面加载完成之后，相当于 window.onload = function(){}
      var $btnObj = $("#btnId"); //表示按 id 查询标签对象
      $btnObj.click(function (){
         alert("jQuery的单击事件");
      });
   });
</script>

二、jQuery核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 很多功能。$()就是调用$这个函数。

核心函数的四个作用：

$(function (){
    alert("!!");
});

$(function (){
    alert("!!");
    $("<div><span>div-span1</span></div>\n" +
        "    <div><span>div-span2</span></div>").appendTo("body");
});

三、jQuery对象和DOM对象的区分

3.1什么是jQuery对象和DOM对象？

dom对象：

1. 通过 getElementById()查询出来的标签对象是 Dom 对象
2. 通过 getElementsByName()查询出来的标签对象是 Dom 对象
3. 通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4. 通过 createElement() 方法创建的对象，是 Dom 对象

jQuery对象：

1. 通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
2. 通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
3. 通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象

jQuery对象表示为：[object Object]

3.2 jQuery对象的本质是什么？

jQuery对象是由DOM对象所组成的数组 + jQuery提供的一系列功能函数构成

3.3 jQuery对象和DOM对象的使用区别

• jQuery对象不能使用DOM对象的属性和方法

• DOM对象也不能使用jQuery对象的属性和方法

3.4 jQuery对象和DOM对象之间的转换

• dom对象转换为jQuery对象
  1. 先有DOM对象
  2. $(DOM对象) 就可以转为jQuery对象
• jQuery对象转换为dom对象
  1. 先有jQuery对象
  2. jQuery对象[下标] 取出对应的dom对象

四、jQuery选择器

详情见代码及课件