<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象</title>
<script src="../js/jquery-3.3.1.js"></script>
<script>
//3种对象 1.jQuery对象
//选择器选中的目标一定为jQuery对象
//一般jQuery方法返回的节点为jQuery对象
//jQuery赋值的方法返回的是jQuery对象
//2.DOM对象
//从jQuery中获取一个DOM
//-$obj[i]、 $obj.get(i)
//3.内置对象(String)
//一般jQuery方法若返回具体的值是String
function print(){
var $ps = $("p");//方便区分是jQuery对象还是DOM,用$区分
for(var i=0;i<$ps.length;i++){
console.log($ps[i]);
alert($ps[i].innerHTML);
}
}
//传入的this 是正在点击的那张图片
//此处的this是一个DOM对象
function chg(img){
if($(img).width()=="218"){
$(img).width("250px").height("250px");
}else{
$(img).width("218px").height("218px");
}
}
</script>
</head>
<body>
<input type="button" value="打印"
οnclick="print();"/>
<p>1,jQuery对象本质上是DOM数组</p>
<p>2.jQuery对象和DOM对象可以互转</p>
<p>3.jQuery只能调用jQuery方法</p>
<p>4.DOM对象只能调用DOM方法</p>
<div>
<img src="../images/1.jpg" οnclick="chg(this);"/>
<img src="../images/2.jpg" οnclick="chg(this);"/>
<img src="../images/3.jpg" οnclick="chg(this);"/>
</div>
</body>
</html>
jQuery对象part2
最新推荐文章于 2022-08-01 12:15:45 发布