JQuery 基础（一）
程序员文章站
2024-03-17 17:49:52
...
JQuery 基础（一）
一、概念
javaScript框架，用来简化js开发，优化HTML文档操作、时间处理、动画设计和Ajax交互。
实例：如下的代码中要获取多个div元素
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
var div1= document.getElementById("div1");
var div2= document.getElementById("div2");
...n
</script>
</body>
可以设计一个方法，用来获取元素，直接调用方法即可。
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
var div1= document.getElementById("div1");
var div2= document.getElementById("div2");
...n
function get(id){
var obj = cocument.getEmenetByid(id);
return obj;
}
</script>
</body>
将方法单独携程一个js文件，通过在页面中引入即可。
function $(id){
var obj = cocument.getEmenetByid(id);
return obj;
}
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<sript src="js/getId.js"></sript>
var div1 = $("div1");
</body>
二、快速入门
1.步骤
下载JQuery
导入JQuery文件
版本说明：
1.x：兼容ie678，使用比较广泛，官方制作BUG维护，功能不再新增，因此一般项目来说，使用1.x即可。最终版本1.12.4（2016年5月20日）。
2.x：很少使用，官方制作BUG维护，功能不再新增，如果不考虑兼容低版本浏览器可以使用，最终版本2.2.4（2016年5月20日）。
3.x:最新版本，支持最新浏览器，是官方维护的最新版本，3.3.1（2017年3月20日）
引入文件说明：
jquery-3.3.1.js 给程序员读的，有良好格式
jquery-3.3.1.min.js 提交较小，生产用
<head>
<script src = "js/jsqeuy-3.3.1.min.js"> </script>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
var div1 = $("#idv1");
</script>
</body>
三、JQuery对象和JS对象的区别和转换
<head>
<script src = "js/jsqeuy-3.3.1.min.js"> </script>
</head>
<body>
<div id="div1"> div1 </div>
<div id="div2"> div2 </div>
<script>
//1通过js方式获取名称为div的所有元素
var divs = document.getElementsByTagName("div");
//跟换div的内容为“new context”
for(var i = 0;i<divs.lenth;i++){
divs[i].innerHtml("new COntext");
$(divs[i]).html("js-->jq");
}
//2通过jq方式获取名称为div的所有元素
var $divs=$("div");
//跟换div的内容为“new context”
$divs.html("new context");
$divs[0].innerHtml("jq-->js");
</script>
</body>
1.区别
- JQuery对象操作更加方便
- js和jq两者的方法是不通用的。
2.转换
jq–>js: jq对象[索引] 或者jq对象.get(索引)
js–>jq: $(js对象)
上一篇： UI优化策略-OverDraw
下一篇： jdbc 获取连接步骤