JQuery 学习笔记（学习的过程中会更新）
一 首先区分JQuery对象 和 DOM 对象
1 JQuery对象是通过JQuery封装DOM对象得到的对象 （DOM对象 文档对象模型中的节点 ）
2 区分DOM方法和JQuery的方法
3 DOM对象转换成JQuery对象 $(aa);//aa为相应的DOM对象 得到JQuery对象
JQuery对象转换成DOM对象 $("#id").get(0) 或者 $("#id")[0] 得到DOM对象 下面的这个例子有详细的解释
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8" />
<script
type="text/javascript"
src="jquery.js"></script>//引入JQuery
<script type="text/javascript">
$(document).ready(function(){
var $box = $("#box");
//获得相应的jquery对象 这里面有个小的点 我们在用document.getElementById("id")是会判断到底有没有这个元素
在去执行相应的操作 而使用JQuery选择器的时候返回的永远是一个JQuery对象 所以应该把它转换成DOM对象 或者 $("#id").length
来判断里面到底有没有元素
$box.click(function(){
if($box.is(":checked")) {
alert("checked");//使用的是JQuery对象的方法
}
});
});
$(document).ready(function(){
var $box =
$("#box");
var box = $box.get(0);//转换成DOM对象
$box.click(function(){
if(box.checked)
{//使用的是DOM对象的方法
alert("checked");
}
});
});
</script>
</head>
<body>
<input
type="checkbox" id="box"/><label
for="box">确认</label>
</body>
</html>
一个小的测试 使用JQuery实现事件的绑定
<!DOCTYPE html>//为页面中的p元素绑定onclick事件 上面的写法是用JQuery
下面的写法是最初的写法
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<!--
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
this.style.backgroundColor = "red"; //JQuery是实现了自己内部的遍历
不像原来的需要遍历取到的数组
});
})
</script>
-->
</head>
<body>
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<script
type="text/javascript">//这是利用原始的方法为元素绑定事件
function ptest() {
if(!document.getElementsByTagName)
{
return false;
}
if(!document.getElementsByTagName("p")) {
return false;
}
var pgroup =
document.getElementsByTagName("p");
for(var i = 0;i <
pgroup.length;i++) {
pgroup[i].onclick = function()
{
this.style.backgroundColor =
"red";
}
}
}
function
addLoadEvent(func) {
var oldonload = window.onload;
if(typeof
window.onload != ‘function‘) {
window.onload =
func;
} else {
window.onload = function()
{
oldonload();
func();
}
}
}
addLoadEvent(ptest());
</script>
</body>
</html>
可以为元素绑定toogle()方法 可以用来设置一组交替的动作(这里有一点问题)。。。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
