JQuery基础
编写简单的jQuery程序
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World!");
});
</script>
</head>
<body>
</body>
</html>
页面加载事件语法格式
$(document).ready(function(){
……
});
上面的写法与下面的一样
$(function(){
……
});
加上上面的语法目的是为了防止脚本找不到还没有加载完的内容
<html>
<head>
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
var btnClick = document.getElementById("btnClick");
btnClick.onclick = function () { //找不到ID为btnClick的元素
alert("Hello World!")
}
</script>
</head>
<body>
<input type="button" name="name" id="btnClick" value="Click me!" />
</body>
</html>
加上之后就可以访问了
<html>
<head>
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var btnClick = document.getElementById("btnClick"); //可以访问到ID为btnClick的元素了
btnClick.onclick = function () {
alert("Hello World!")
}
})
</script>
</head>
<body>
<input type="button" name="name" id="btnClick" value="Click me!" />
</body>
</html>
jQuery中的链式操作
在jQuery中，通常调用jQuery对象的每一个方法后，都会将该对象作为返回值返回，所以可以使用链式操作。
$(document)
.ready(function(){alert("first");})
.ready(function(){alert("second");});
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>标签的一组元素 |
|
* |
匹配所有元素 |
集合元素 |
$("*")选取所有的元素 |
jQuery对象和DOM对象
- DOM对象：使用JavaScript中的DOM API操作获得的元素对象
- JQuery对象：jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象和DOM对象的转换
jQuery对象转换成DOM对象方法一
//$("div")以一个伪数组的形式返回页面中所有的div元素,$("div")是一个非Dom对象
var $div = $("div");
//因为是一个伪数组的形式，所以可以通过下标来访问
//$("div")[0]根据索引获取对应的div元素,现在的$("div")[0]是一个Dom对象
var div = $div[0];
alert(div.innerHTML);
jQuery对象转换成DOM对象方法二
var $div = $("div");
var div = $div.get(0);
alert(div.innerHTML);
DOM对象转换成jQuery对象方法
var div = document.getElementById("id");
var $div = $(div);
JQuery中的包装集
将选择器所选择的元素封装在一个类似于数组的jQuery对象中，该对象封装了所选择的元素
确定包装集的大小
使用size()方法
jQuery元素包装集运行起来与数组非常相似：像JavaScript数组那样拥有length属性。而这个属性的值，就是包装元素的个数。
<script type="text/javascript">
$(function(){
alert($("div").size());
});
</script>
<div>这个是div1</div>
<div>这个是div2</div>
<div>这个是div3</div>
获得元素在包装集中的位置
使用index(element)方法
<script type="text/javascript">
$(function(){
alert($("div").index($("#id_div")));
});
</script>
<div>这个是div1</div>
<div id="id_div">这个是div2</div>
<div>这个是div3</div>
对包装集进行筛选
add(expression) 方法：添加元素到包装集
<script type="text/javascript">
$(function () {
//3个li元素加上一个p元素，现在包装集中有4个元素
document.write($("li").add("p").size());
})
</script>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<p>我是p元素</p>
</body>
not(expression) 方法：删除包装集中的元素
<script type="text/javascript">
$(function () {
//包装集中有3个li元素，现在调用了not方法，去掉了id为liTwo的元素，只剩下2个
document.write($("li").not("#liTwo").size());
})
</script>
<body>
<ul>
<li>111</li>
<li id="liTwo">222</li>
<li>333</li>
</ul>
</body>
filter(expression) 方法：对包装集中的元素进行过滤
<script type="text/javascript">
$(function () {
//包装集中有3个li元素，现在调用了filter方法，去掉了id不是liTwo的元素，只剩下1个元素
document.write($("li").filter("#liTwo").size());
})
</script>
<body>
<ul>
<li>111</li>
<li id="liTwo">222</li>
<li>333</li>
</ul>
</body>
<script type="text/javascript">
$(function () {
$("li").filter(function (index, ele) {
//index包装集中元素的下标
//ele包装集中的元素
if (index % 2 == 0) { //取下标为偶数的元素
ele.style.backgroundColor = "red"; //设置背景色
}
})
})
</script>
<body>
<ul>
<li>111</li>
<li id="liTwo">222</li>
<li>333</li>
</ul>
</body>
slice(begin, end) 方法：获取包装集的子集
begin：一个整数，指示0的位置上的元素开始被选中。如果为负，则表示从集合的末尾的偏移量
end：一个整数，指示0的位置上被选中的元素停止。如果为负，则表示从集的末尾的偏移量。如果省略，范围，持续到集合的末尾
<script type="text/javascript">
$(function () {
//取包装集中下标1到最后的元素
console.log($("li").slice(1));
//取包装集中下标0到1的元素（不包括2）
console.log($("li").slice(0, 2));
//如果提供一个负数，这表明立场从集的结尾开始，而不是开头
console.log($("li").slice(-2));
console.log($("li").slice(-2,-1));
})
</script>
<body>
<ul>
<li>111</li>
<li id="liTwo">222</li>
<li>333</li>
</ul>
<p>我是p元素</p>
</body>
