jQuery.简介

一、jQuery简介

流行的JavaScript类库
为了简化 JavaScript 的开发，一些 JavsScript 库诞生了。JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面，并且兼容各大浏览器
当前流行的 JavaScript 库有:：
jQuery,，MooTools， Prototype， Dojo， YUI， EXT_JS，DWR，www.open-open.com

二、jQuery是什么

jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

三、jQuery语法

jQuery：简单例子

 <!--引入jquery的js库-->
    <script type="text/javascript" src="script/jquery-1.4.2.js"></script>
    <script language="JavaScript">
      $(document).ready(function(){
    
    //等待dom元素加载完毕,类似window.onload;
          alert("您好,我是张三丰");
      });
    </script>

四、什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
比如：

 $("#test").html()

意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法，这段代码等同于用DOM实现代码：

document.getElementById(" test ").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象
var variable = DOM 对象

五、jQuery和dom对象转化

1、DOM对象转成jQuery对象
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。转换后就可以使用 jQuery 中的方法了
2、jQuery对象转成DOM对象
(1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象
(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

代码实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery和dom对象转化</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
     
     
        alert("nice to meet you!")
    });

    //这个是dom对象
    var name = document.getElementById("name");
    alert(name.value);

    //转换为jQuery对象
    var $name=$(name);
    alert($name.val());

    //jQuery对象转化为dom
    var name1=$(name).get(0);
    alert(name1.value);
    </script>

    <form action="#">
        姓名<input type="text" id="name">
    </form>
</body>
</html>

jQuery.简介

jQuery.简介

一、jQuery简介

二、jQuery是什么

三、jQuery语法

四、什么是jQuery对象？

五、jQuery和dom对象转化

猜你喜欢