1、jquery的实现原理
function $(){
object=new Object();
object.username='username123';
object.say=function(){
alert('my name is :'+this.username);
return this;
}
object.eat=function(){
alert('my name is : eat eat etah ');
return this;
}
return object;
}
$().say().eat();
2、jquery对象和js对象互换
dom 对象转为jquery对象 $(dom)
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<img src="1.png" id="imgid">
</body>
<script>
img=document.getElementById('imgid');
$(img).attr({'src':'3.jpg'});//转为jquery对象
</script>
<html>
jquery对象转为dom对象
$('dom')[1];
$('dom').get(1);
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<h1>1111<h1>
<h1>2222<h1>
<h1>3333<h1>
</body>
<script>
tmp1=$('h1').html();
tmp2=$('h1').get(0).outerHTML;
tmp3=$('h1')[0].outerHTML;
alert(tmp1);
alert(tmp2);
alert(tmp3);
</script>
<html>
3、核心方法
each();
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<h1>1111<h1>
<h1>2222</h1>
</body>
<script>
$('h1').each(function(i){
$(this).attr({'num':i+1});
});
$('h1').click(function(){
$(this).html($(this).attr('num'));
});
</script>
<html>
length
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<h1>aa0</h1>
<h1>aa1</h1>
<h1>aa2</h1>
<h1>aa3</h1>
<h1>aa4</h1>
<h1>aa5</h1>
</body>
<script>
alert($("h1").length);
</script>
<html>
输出为6 size()方法1.8以后废弃
get();
$('dom')[1];
$('dom').get(1);
$('dom')get();//获取所有
$('dom')get()[0];
index();
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
.menu{
height:50px;
background:#272822;
line-height:50px;
}
.menu a{
color:#fff;
margin-left:15px;
font-size:20px;
text-decoration:none;
}
.info{
margin-top:15px;
background:#ccc;
height:150px;
color:#fff;
padding:10px;
}
.info p{
display:none;
}
.info p:first-child{
display:block;
}
.menu a:hover{
background:#ccc;
}
.menu ul{
list-style:none;
}
.menu ul li{
float:left;
color:#fff;
margin-left:15pxl
line-height:50px;
width:100px;
text-align:center;
}
.menu ul li:hover{
cursor:pointer;
background:#ccc;
}
</style>
</head>
<body>
<div class='menu'>
<ul>
<li>liux</li>
<li>java</li>
<li>liux</li>
</ul>
</div>
<div class='info'>
<p>linux is good!linux is good!linux is good!linux is good!linux is good!linux is good!linux is good!linux is good!
linux is good!linux is good!linux is good!linux is good!
</p>
<p>java is good!java is good!java is good!java is good!java is good!java is good!java is good!java is good!
java is good!java is good!java is good!java is good!
</p>
<p>linux is good!linux is good!linux is good!linux is good!linux is good!linux is good!linux is good!linux is good!
linux is good!linux is good!linux is good!linux is good!
linux is good!linux is good!linux is good!linux is good!linux is good!linux is good!linux is good!linux is good!
linu</p>
</div>
</body>
<script>
$('li').eq(0).css({'background':'#ccc'});
$('li').mouseenter(function(){
idx=$(this).index('li');
$('li').eq(idx).css({'background':'#ccc'});
$('p').eq(idx).show();
$('p').not($('p').eq(idx)).hide();
$('li').not($('li').eq(idx)).css({'background':'#000'});
});
</script>
<html>
data();
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<h1>11111</h1>
<h1>2222</h1>
<h1>2222</h1>
</body>
<script>
$('h1').each(function(i){
$(this).data({'num':i+1});
});
$('h1').click(function(){
$(this).html($(this).data('num'));;
});
</script>
<html>
网友评论