jQuery入门:认识jQuery
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的更多相关文章
- jquery 入门之-------jquery 简介
什么是jquery? Jquery是一个Javascript库,通过封装原生的Javascript函数得到一套定义好的方法.它可以用个少的代码完成更多更强大更复杂的功能,从而得到开发者的青睐. So! ...
- jQuery入门、jQuery选择器、jQuery操作
一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...
- JQuery入门
JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...
- JQuery入门篇
JQuery入门篇 jQuery选择器 “$”表示JQuery对象 根据ID查找 $(‘#var’)表示将一个id值为var的DOM节点封装成一个jQuery对象,DOM节点必须以“#”开头. 例如: ...
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(3)事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门必须掌握的一些API
jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
随机推荐
- BZOJ 1834: [ZJOI2010]network 网络扩容(网络流+费用流)
一看就知道是模板题= = ,不说什么了= = PS:回去搞期末了,暑假再来刷题了 CODE: #include<cstdio> #include<iostream> #incl ...
- Android开发10:传感器器及地图相关应用
前言 啦啦啦~各位小伙伴们好~经过这一学期的Android知识的学习,我们学到了很多和Android开发相关的知识,这一学期的学习也要告一段落了. 一起进入我们今天的相关内容~这次我们将一起学习使用 ...
- show_you_my_codes 001
program 001 第 0001 题:做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券), 使用 Python 如何生成 200 个激活码(或者优 ...
- HttpHelper万能框架V1.6
下载地址:http://yun.baidu.com/share/link?uk=1745303310&shareid=1343567367 引入:System.Web和System.Web.E ...
- 学习Java 以及对几大基本排序算法(对算法笔记书的研究)的一些学习总结(Java对算法的实现持续更新中)
Java排序一,冒泡排序! 刚刚开始学习Java,但是比较有兴趣研究算法.最近看了一本算法笔记,刚开始只是打算随便看看,但是发现这本书非常不错,尤其是对排序算法,以及哈希函数的一些解释,让我非常的感兴 ...
- HTML 5入门知识(三)
<canvas>标签 在网页中使用canvas元素,像使用其他HTML标签一样简单,然后利用JavaScript脚本调用绘图API,绘制各种图形.canvas拥有多种绘制路径.矩形.圆形. ...
- 关于Java空指针的控制(转)
1)在已经的String(字符串)调用 equal()和 equalsingnoreCase()而不是未知的对象 通常在已经的非空字符串在调用equals().因为equal()方法是对称的,调用a. ...
- lua和c的亲密接触
介绍 lua和c的亲密接触,靠的是一个虚拟栈.lua通过这个虚拟栈来实现和c之间值的互传.栈上的每一个元素是一个lua值(nil,number,string...). 当lua调用c函数的时候,这个函 ...
- CentOs下安装PHP环境的步骤
前言 在CentOs环境下安装php开发环境,需要首先安装一些源文件,然后使用yum命令直接安装即可,在Fedora 20 源中已经有了PHP的源,直接可以使用以下命令安装即可: # yum inst ...
- wemall app商城源码中基于PHP的ThinkPHP惯例配置文件代码
wemall doraemon是Android客户端程序,服务端采用wemall微信商城,不对原商城做任何修改,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可随意定制修改.本文分享其中 ...