一步一步学习 JQuery (一) JQuery 对象
jQuery 理念: 写得少, 做得多. 优势如下:
轻量级
强大的选择器
出色的 DOM 操作的封装
可靠的事件处理机制
完善的 Ajax
出色的浏览器兼容性
链式操作方式
JQuery:Hello World
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入Jquery 库 version 1.9.1 -->
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
//$(function(){}) 相当于window.onload,代码写在{}之间
$(function(){
//1.选取button
//2.为button添加onclick响应函数
$("button").click(function() {
//3.弹出Helloworld
alert("HelloWorld");
});
})
</script>
</head>
<body>
<button> Click Me</button>
</body>
</html>
1、JQuery 对象
jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象
jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法:
(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function() {
//alert($(this).text());//将this封装的成为一个JQuery对象，调用方法
//1.将JQuery 对象转为DOM对象
//获取一个Jquery对象
var $btn = $("button");
//JQuery 对象是一个数组
alert($btn.length);// 3 ,无论点哪个显示都是3,这是Jquery的隐士转换,获取所有的button的click
alert($btn[0].firstChild.nodeValue);
//alert($btn.get(0).firstChild.nodeValue);
});
})
</script>
</head>
<body>
<button id="btn"> Click Me</button>
<button> Click Me1</button>
<button> Click Me2</button>
</body>
</html>
1.2 DOM 对象转成 jQuery 对象
对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 转换后就可以使用 jQuery 中的方法了
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入Jquery 库 version 1.9.1 -->
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function() {
var btn = document.getElementById("btn");
var $btn = $(btn);
alert($btn.text()); //显示value
});
})
</script>
</head>
<body>
<button id="btn"> Click Me</button>
<button> Click Me1</button>
<button> Click Me2</button>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
