jQuery是一个轻量级的JavaScript库,拥有独特的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性、链式操作以及方便的ajax等功能。jQuery的最新版本可在官方网站(http://jquery.com)下载。

1.jQuery库类型(2种)

名称

类型

大小

说明

jquery.js

开发版

约229KB

完整无压缩版本,主要用于测试、学习和开发

jquery.min.js

生产版

约31KB

经过工具压缩或经过服务器开启Gzip压缩,主要用于产品和项目

2. jQuery模板

<!-- JQuery.html -->
<!DOCTYPE html>
<html>
<head>
<title>Test JQuery</title>
<script type="text/javascript" src="jquery-3.2.0.js"></script>
</head>
<body>
<!-- add your code here. --> </body>
</html>

3.$(document).ready()

该代码作用类似于JavaScript中的Windows.onload()。不过两者之间仍有以下区别:

windows.onload

$(document).ready()

执行时机

网页加载完成后

DOM结构加载完成后(不必等页面加载完成)

编写个数

最多1个

任意个

编码形式

windows.onload = function(){ /*…*/};

$(document).ready(function(){/*…*/});

编码简写

$(function(){/*…*/});

注意:在jQuery库中,$就是jQuery的简写形式。

jQuery代码必须写在<script type="text/javascript"></script>标签内。

3.1 实例:

<script type="text/javascript">
$(document).ready(function(){
alert("Hello JQuery");
});
</script>

简写形式:

<script type="text/javascript">
$(function(){
alert("Hello JQuery");
});
</script>

4.DOM对象和 jQuery对象

 4.1 DOM对象(通过document获取的element对象)

var  question = document.getElementById(“question”);

4.2 jQuery对象 (通过$()获取的对象)

注意: 为了方便识别jQuery变量,获取jQuery对象的变量名前面应加上“$”.

var  $question = $(“#question”);

5. jQuery对象与DOM对象的相互转换

  5.1   jQuery对象转换成DOM对象

  jQuery提供了两种方法将jQuery对象转换成DOM对象,即[index]和get(index).

  5.1.1 [index]方法

var  $question = $(“#question”); //jQuery对象
var question = $question[0]; //DOM对象

  5.1.2 get(index)方法

var  $question = $(“#question”); //jQuery对象
var question = $question.get(0); //DOM对象

5.2 DOM对象转换成jQuery对象

    jQuery对象本质上是就是通过jQuery包装DOM对象后产生的对象所以只需要用$()把DOM对象包装起来就可以获得jQuery对象。

var question = document.getElementById(“question”);
var $question = $(question);

注意:平时用到的jQuery对象都是通过$()函数创造出来的,$()函数就是一个jQuery对象的制造工厂。

如有纰漏,敬请联系!感谢您的支持。

  更多内容,请访问:http://www.cnblogs.com/BlueStarWei/

jQuery入门:认识jQuery的更多相关文章

  1. jquery 入门之-------jquery 简介

    什么是jquery? Jquery是一个Javascript库,通过封装原生的Javascript函数得到一套定义好的方法.它可以用个少的代码完成更多更强大更复杂的功能,从而得到开发者的青睐. So! ...

  2. jQuery入门、jQuery选择器、jQuery操作

    一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...

  3. JQuery入门

    JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...

  4. JQuery入门篇

    JQuery入门篇 jQuery选择器 “$”表示JQuery对象 根据ID查找 $(‘#var’)表示将一个id值为var的DOM节点封装成一个jQuery对象,DOM节点必须以“#”开头. 例如: ...

  5. jQuery入门(1)jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  6. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. jQuery入门(3)事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  8. jQuery入门(4)jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. jQuery入门必须掌握的一些API

    jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...

  10. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

随机推荐

  1. EFDB 基本规范&知识

    public abstract class AccountRole //这是继承类型 { [Key] public int ID { get; set; } public bool isDisable ...

  2. .NET中利用反射来实现自动映射两个对象中的数据成员

    在以前的项目开发之中,经常会遇到这样一个问题:比如在外面项目的架构设计之中,我们采用MVC和EntityFramework来构建一个Web应用程序.比如我们采用常用的多层架构,例如有Presentat ...

  3. 类中的两大类(string类、math类)的应用

    类是我们在学习C#的过程中很关键也是特别容易让人蒙逼得地方,类的应用直接可以调用它的属性和方法来进行判断和验证 string类(也叫字符串类) C#中的String类很有用,下面是一些它的常用方法的总 ...

  4. Java程序通过代理访问网络

    问题背景 最近工作上有开发爬虫的任务,对目标网站数据进行抓取,由于大部分网站都在国外,无法直接访问,需要通过代理才能登录.爬虫部署的服务器在香港,所以爬虫部署到服务器后,是可以访问目标网站的,但本地开 ...

  5. oracle数据库命令-持续更新

    一.系统命令 登录 dba用户命令 sqlplus / as sysdba 2. 用户命令 删除用户 DROP USER **** CASCADE; DROP SCHEMA **** CASCADE; ...

  6. [BNUZOJ1261][ACM][2016北理校赛]方块消除(栈,字符串)

    玩过方块消除游戏吗?现在规定当有两个或两个以上相邻且颜色相同的方块在一起的时候,它们就会产生消除反应.当存在多个消除反应同时产生时,最下的反应先执行.现在只给你其中一列,求最后剩下的方块结果. 输入要 ...

  7. ASP渲染下拉框使时间依次减少

    <%    x=year(now())    y=year(now())-1    Do While  y>2002%><li><a href="#201 ...

  8. JavaScript实现评论点赞功能

    通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setT ...

  9. iOS性能之HTTP2.0

    在移动互联网领域蓬勃发展的今天,APP的性能也成为各大公司重点关注的方向,该系列文章主要针对iOS的性能的几个方面做一些研究. 什么是HTTP2.0? 网上很容易搜到关于HTTP2.0的概念的文章,这 ...

  10. 如何在appconfig中配置服务的ip

    开发了一个WindowsService消息服务器,刚开始一直都是在代码中把IP地址写死,所以每次只要是更换了新的IP地址后,都需要重新编译项目.所以考虑把ip配置到config文件中, 这样做的好处是 ...