JQuery是一套JAVAscript脚本库.使用JQuery将极大的提高编写JavaScript代码的效率,让写出来的代码更加优雅,更加健壮.
JQuery第一个版本JQuery1.0发布时间是2006年1月，目前最新版本是JQuery3.1.0，JQuery2.0及后续版本已不再支持IE6/7/8浏览器。
同类JS库：DojoExtjs
选择器
带有特定语法格式的字符串，用于对页面元素进行筛选
包装集
将选择器所选择的元素封装在一个类似于数组的JQuery对象中，该对象封装了所选择的元素
JQuery中的基本选择器
|
选择器 |
描述 |
示例 |
|
#id |
根据给定的id匹配一个元素 |
$(“#test”) 选取id为test 的元素 |
|
.class |
根据给定的类名匹配元素 |
$(“.test”) 选取所有class 为test的元素 |
|
element |
根据给定的元素名称匹配元素 |
$(“p”) 选取所有的 <p>元素 |
|
Selector1, Selector2, Selector3 ... |
将每一个选择器匹配到的元素合并后一起返回 |
$(“div,span,p.cls”) 选取所有<div>，<span> 和拥有class为cls的 <p>标签的一组元素 |
|
* |
匹配所有元素 |
$(“*”) 选取所有的元素 |
1、通过ID选取元素
语法：$("#id")
2、通过类名获取元素
语法：$(".className")
3、通过标签名获取元素
语法：$("tagName")
4、一次性获取多个元素
语法：$("selector1,selector2,select3...")
1、使用size()方法(JQuery1.8中被废弃，使用length代替)
代码如图：
获得元素在包装集中的位置
index(element)
代码如图：
对包装集进行筛选
添加元素到包装集：add(expression)
代码如图：
删除包装集中的元素：not(expression)
代码如图：
对包装集中的元素进行过滤：filter(expression)
代码如图：
获取包装集的子集：slice(begin,end)
代码如图：
选择器综合示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../assets/js/jquery-3.1.1.min.js"></script>
<title>选择器</title>
</head>
<body>
<script>
$(function () {
alert("包装集的大小"+$("div").length);
alert("元素在包装类中的位置"+$("div").index($("#id_div")));
//div和p元素都加上css样式
$("div").add("p").css("background-color","yellow");
//div和p元素不添加样式
$("div").not($("#id_div")).css("background-color","orange");
//对包装集中的元素进行过滤
$("div").filter($("#id_div")).css
("background-color","beige");
//获取包装集的子集：slice（begin,end）
$("div").slice(1,3).css("background-color","cyan");
})
</script>
<!--size()方法jQuery1.8中被废弃，使用length代替-->
<div>这个是div1</div>
<div id="id_div">这个是div2</div>
<div>这个是div3</div>
</body>
</html>
京公网安备 11010802035086号