jQuery:（一）jQuery简介
一、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="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类名选择
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第一个JQuery程序</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
alert("这是编写的第一个JQuery程序");
});
</script>
</head>
<body> </body>
</html>
五、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简介的更多相关文章
- jQuery遮罩插件jQuery.blockUI.js简介
利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...
- [转]Jquery Validate用法简介
原文链接:http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html 正文: 官网地址:http://bassistance.de/ ...
- JQuery快速入门-简介
一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...
- jQuery初探 jQuery选取和操纵元素的特点
jQuery初探 jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当 ...
- jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined
jQuery实例--jQuery实现联动下拉列表查询框 在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...
- jQuery - 2.jQuery选择器
1.id 选择器 2.标签选择器 3.类选择器 4.复合选择器 5.层次选择器 JQuery的迭代 JQuery选择器 JQuery选择器用于查找满足条件的元素,比如可以用$("#控件I ...
- jQuery-认识JQuery，jQuery选择器
认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...
- jQuery extend() & jQuery.fn.extend()，插件编写
资料来源:网上资料整理并自行改编测试.复制以下代码并依赖jquery.js,jquery.validate.js即可执行.有误之处,请@我啊,敬请赐教. <!DOCTYPE html PUBLI ...
- jquery.validate+jquery.form提交的三种方式
原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...
- webpack+react+jquery和jquery插件
要引入jquery插件 全局引入jquery plugins : [new webpack.ProvidePlugin({ $: 'jquery', jQuery:'jquery' "win ...
随机推荐
- [React] Use the useReducer Hook and Dispatch Actions to Update State (useReducer, useMemo, useEffect)
As an alternate to useState, you could also use the useReducer hook that provides state and a dispat ...
- （剑指Offer）面试题12：打印1到最大的n位数
题目: 输入数字n,按顺序打印出从1到最大的n位十进制数. 比如输入3,打印1,2,3一直到最大的3位数即999. 思路: 1.不考虑n的范围,直接打印. void Print1ToMaxOfNDig ...
- C#基础视频教程3.2 常见控件类型和使用方法
这一部分我们介绍如何使用第三方的控件,我们前面一节介绍了使用微软提供的官方控件,比较中规中矩,而且也不用担心稳定性.但是很多时候我们还是会希望用第三方的控件让自己的软件更美观,更独特. 就单纯的按钮, ...
- 解决iOS Xcode 模拟器键盘不弹出
1. 选中模拟器,在屏幕上方的菜单中找到Hardware->Keyboard 2. 直接快捷键shift+command+k
- Linux 监测CPU常用的工具sar iostat vmstat top uptime
sar -u 1 2 iostat -c 1 2 vmstat 1 2 top uptime Linux监控CPU整体性能常用的工具有: # mpstat: mpstat 不但能查看所有CPU的平均信 ...
- AjaxAnyWhere 实现页面局部刷新,局部分页
这个比較jquery.单纯ajax异步简单多了.不多说了直接上代码. 须要引入:ajaxanywhere-1.2.1.jar (最新)和 /ajaxAnyWhereDemo/WebRoot/js/aa ...
- Java多线程具体解释
Java多线程具体解释 多线程简单介绍 概述 多线程(multithreading).是指从软件或者硬件上实现多个线程并发运行的技术.具有多线程能力的计算机因有硬件支持而可以在同一时间运行多于一个线程 ...
- Android开发优化之——从代码角度进行优化
通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻 辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点, ...
- Linux命令-目录处理命令:rmdir
rmdir /tmp/shijiazhuang/yuhuaqu 删除一个子目录(必须是空目录) rmdir /tmp/shijiazhuang 删除一个不为空的目录会失败
- EMQ学习 ---集群
emqttd集群设置管理 一.先来看EMQ的文档定义:http://emqtt.com/docs/v1/cluster.html emqttd集群设置管理 假设部署两台服务器s1.emqtt.io, ...