首页 > 代码库 > jQuery:（一）jQuery简介

jQuery:（一）jQuery简介

2024-11-21 14:17:02   202人阅读

一、jQuery简介
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。

二、jQuery的优势
1、强大的选择器。
2、出色的DOM封装。
3、可靠的事件处理机制。
4、出色的浏览器兼容性。
5、使用隐式迭代简化编程。
6、丰富的插件支持。
7、体积小，压缩后只有100KB左右。

三、下载和使用jQuery
1、下载
进入jQuery官网：http://jquery.com下载
2、jQuery库文件
jQuery库分开发版和发布版

名称 大小 说明
jquery-1.版本号.js(开发版) 约268kb 完整无压缩版本，主要用于测试、学习和开发。
jquery-1.版本号.min.js(发布版) 约91KB 经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目。

3、搭建jQuery使用环境

3.1 下载jQuery类库。

3.2 在页面中引入jQuery

<script type="text/javascript" src="http://www.mamicode.com/jquery-3.2.1.js"></script>

四、jQuery语法结构

语法：$(selector).action();

说明：

工厂函数$()：将DOM对象转化为jQuery对象。
选择器 selector：获取需要操作的DOM元素。
方法action()：jQuery中提供的方法，包括绑定事件处理的方法。

示例：

$("#current").addClass("current");   // id选择
$("input").addClass("current");     // 标签选择
$(".current").addClass("other");    // class类名选择

五、jQuery代码风格
1、$(selector).action();
$等同于"jQuery"
$(document).ready()等同于jQuery(document).ready()
2、方法举例

语法 说明
css("属性","属性值") 为元素设置CSS样式的值
addClass("类样式名") 为元素添加类样式
html("html代码") 为元素设置innerHTML的值

操作连缀书写：
$("h2").css("background-color","#CCFFFF").next().css("display","block");

六、$(document).ready()
$(document).ready()与window.onload类似，但也有区别：

  window.onload $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后（包括图片、视频等）才能执行 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、视频等）并没有加载完
编写次数 同一页面不能同时编写多个 同一页面能同时编写多个
简化写法 无 $(function(){
   //执行代码
});

七、jQuery对象和DOM对象
1、DOM对象：直接使用JavaScript获取的节点对象
   var objDOM=document.getElementById("title");
   var objHTML=objDOM.innerHTML;
2、jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法：
   $("#title").html()
   等同于
   document.getElementById("title").innerHTML;
提示：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用。

3、jQuery对象转DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
示例：
var $txtName=$(".txtName");    //jQuery对象
var txtName=$txtName[0];       //DOM对象
通过get(index)方法得到相应的DOM对象
示例：
var $txtName=$(".txtName");    //jQuery对象
var txtName=$txtName.get(0);   //DOM对象

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>jQuery对象转化成DOM对象</title>
    <style type="text/css">
        p{
            display: none;;
        }

        .show{
            display: block;
        }
    </style>
    <!--引入jQuery类库-->
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
            var $txtname=$(".txtName"); //获取jQuery对象
         var txtname=$txtname[0]; //获取DOM对象

         console.log($txtname);
         console.log(txtname);
       });
    </script>
</head>
<body >
    <p id="title">
      <a href="hello world"></a>
    </p>

    <div class="txtName">
        111111111
    </div>
</body>
      
</html>

 

4、DOM对象转jQuery对象

使用$()函数进行转换：$(DOM对象)
示例：
var txtName=document.getElementById("txtName");   //DOM对象
var $txtName=$(txtName);                          //jQuery对象
注意：
1、jQuery对象命名一般约定以$开头。
2、常使用$(this)来获取触发该事件的当前jQuery对象。

jQuery:（一）jQuery简介


联系
我们