JQuery基础

JQuery简介

1,JQuery简单背景介绍;
jQuery是继prototype之后又一个优秀的Javascript框架。
jQuery是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
jQuery是免费、开源的。
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)

2,JQuery版本介绍;
jQuery1.x:经典版本,兼容IE6,7,8;
jQuery2.0:改进版本,及后续版本将不再支持IE6,7,8浏览器。

jQuery能干什么?
jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

3,JQuery文件介绍;
jQuery1.x.js:jQuery源文件;学习jQuery或者debug的时候使用;
jQuery1.x.min.js:jQuery压缩之后的文件;正常项目中使用;

JQuery引入

引入jquery的标签应该放在使用jquery之前.

   <script type="text/javascript" src="jquery1.x/jquery-1.11.2.min.js"></script>

验证引入jquery

  <script type="text/javascript">
         alert($);
  </script>

注意错误:ReferenceError:$ is not defined

JQuery体验

模拟Struts2的debu标签.
获取和修改某个元素的文本内容

1,$等于jQuery(jQuery===$),$就是jQuery的缩写.
2,

    //页面加载完毕
    window.onload = function(){
        var msg = document.getElementById("msg");
        //console.debug(msg.innerHTML);    
    }
    
    //$(fn),页面加载完毕后,执行fn函数.
    $(function(){
        //#代表id,id=msg
        var msg = $("#msg");
        console.debug(msg.html());
    });

3,$()是一个函数。
1,$();函数传入不同的参数执行的效果也不一样.
2,$("#xxx"); 代表获取id为xxx的元素.也可能是创建一个DOM对象;
3,$(fn); 代表页面加载完毕后执行fn函数.

JQuery对象

1,引入问题:通过document.getElementById()找到的console内容和通过$();找不到元素console返回的内容不一样;

1,通过jQuery方法获取的页面元素,都是jQuery对象。
2,jQuery对象其实就是对DOM对象进行了包装,增强相关了方法,让开发者使用起来更加便利。
3,虽然jQuery对象包装了DOM对象但是两种不能混用,各位可以理解为jQuery对象与DOM对象是两个不类型的对象,但是我们调用jQuery对象的方法,事实上底层代码还是操作的是DOM对象。

jQuery对象和DOM对象的转换(jQuery对象上有很多DOM对象没有的方法):

    //得到dom对象
    var msg = document.getElementById("msg");
    //dom对象转换jquery对象
    $(msg).hide(3000);

DOM对象和jQuery对象的转换(jquery中没有提供获取标签名的方式,所有需要把jquery对象转换为dom对象):

    //jquery对象
    var username = $("#username");
    //jquery对象转换为dom对象
    console.debug(username[0].nodeName);//
    console.debug(username.get(0));//get(0)等效于username[0]

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注