1,了解有哪些常用的js库
2,jquery版本有什么不同
3，jquery的加载方式
<scriptsrc="jquery-1.4.2.js"></script>
4，了解我们的第一段jquery代码
jQuery(document).ready(function(){
alert('心灵小站');
})
5,了解window.onload和jQuery.ready()的区别
相同点：都是页面加载完成之后执行
不同点：window.onload只可以执行最后一段代码。而jQuery.ready()可以执行多个不同的代码
了解简写的变形过程
第一变：
$(document).ready(function(){
alert('小站');
})
第二变：
$(function(){
alert('今年');
})
7，对比，jquery和传统JS在获取HTML元素的不同
<script>
$(function(){
$('#one').html('xlxz.org');
})
</script>
纯JS的方式：
<script>
vard=document.getElementById('one');
d.innerHTML='php.xlxz.php.xlxz？';
</script>
结论：jquery找到的就用jquery的方式去进行查找和操作,js找到的就用js的方式去查找和操作。
8，js对象和jquery对象我们可以互转,js的对象可以转换为jquery对象,jquery对象可以转为js对象
写jquery的时候，经常要查找一个对象，赋值给一个变量。
在js当中，我们也经常查找一个对象，赋值给一个变量。
产生问题：你区分不开，这是jquery找到的对象还是js找到的对象。
李式规定如下：
jQuery找到的对象统一声明变量时用var $变量名
Js找到的对象统一声明时，前面不要加$即可
,jquery对象如何转为纯js找到的dom对象
Var dom对象变量=$jquery对象[0]
Var dom对象变量=Jquery对象.get(0)
DOM对象变为jquery对象非常之简单，只需要用$(对象)一包就搞定了。
核心：
jQuery.noConflict()交出$的控制权 //了解
第一，用了jquery就尽量不要再用其他的js框架了
第二，jQuery()
Each(callback) 方法，相当于php当中的foreach遍历每个元素，然后对每个元素进行操作。
Size() 统计个数
Index() 当前元素的索引值
选择器当中的 >选择器，等价于筛选中的children()
$('#one >span').css('background','red');
$('#one').children('span').css('background','red');
选择器当中的查找下一个子元素，他们中间两个等价：
$('#one +div').css('background','red');
$('#one').next('div').css('background','red');
找所有的指定的后面的兄弟元素
//$('#one~ div').css('background','red');
$('#one').nextAll('div').css('background','red');
文件列表：
html jquery和DOM混偏案例,不推荐使用
Selector1.html 基本选择器
Selectorlayer.html 层级选择器
1.html
<html>
<head>
<title>jquery</title>
<script src="jquery/jquery-1.4.2.js"></script>
</head>
<body>
<script>
$(function(){
alert('哈哈哈哈大笑');
});
</script>
</body>
</html>
attribute.html
<html>
<head>
<title>attribute</title>
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script>
$(function(){
$haha = $('img').attr('src');
$('div img').attr({src:'test.jpg',alt:'dj',title:'hah'});
$('img').attr('title',function(){ return this.src});
$('img').removeAttr('src');
$('img').addClass('haha');
$('p').toggleClass('hah');
$('p').text();
alert($('input').val());
});
</script>
</head>
<body>
<img src="test.jpg">
<div>
<img />
</div>
<input type="text" value="haha">
<p class="hah">hahah</p>
<p>kdsflfdsl;as;sf;asfsl</p>
</body>
</html>
guolv.html
<html>
<head>
<meta charset="utf-8">
<title>guolv find 查找. +</title>
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script>
$(function(){
$('p').eq(2).css('background','#aa00ff');
$('p').filter(':first').css('border','solid red 4px');
$('p').click(function(){
$(this).css('background','#aa00ff');
$('p').not(this).css('background','#fff');
});
});
</script>
</head>
<body>
<div>
<p>haha</p>
<p>haha</p>
<p>haha</p>
<p>haha</p>
<p>haha</p>
<p>haha</p>
<p>haha</p>
</div>
</body>
</html>
j3.html
<html>
<head>
<title>你好吗</title>
<script src="jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/* $('button').click(function(){
$('div').each(function(index,ele){
$(ele).html(index).css('background','red').css('margin','10px');
});
});
*/
alert($('div').get(3));
});
/* window.onload=function(){
document.write('<div>wqkdsfj;asf</div>');
// };
jQuery(document).ready(function(){
// document.write('hajds');
}); */
</script>
<body>
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
</body>
</head>
</html>
jiandan.html
<html>
<head>
<title>简单选择器</title>
<script src="jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('div:first').css('background','red');
$('div:last').css('background','#11ffaa');
$('div:odd').html('odd');
$('div:even').html('even');
$('div:not(div:first)').css('background','#aaff00');
$('div:eq(2)').html('eq0');
$('p:gt(2)').css('background','red');
$('p:lt(2)').css('background','green');
$(':header').css('background','#aaff33');
$('.xa:contains(xx)').html('333');
$('div:has(p)').html('xxxxxxxxxx');
$('td:parent').css('border','solid red 2px');
$('tr:visible').css('border','solid red 3px');
$('tr:hidden').css('display','block').html('xxxyyyxxx').css('border','solid red 5px');
$('p[class]').html('class,class');
});
</script>
</head>
<body>
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
<h1>kdkddlsls</h1>
<h2>dsklf</h2>
<p class="xa">xxxx</p>
<p class="xa">ahakds</p>
<p class="xa">kldsf32sdl</p>
<div>
<p>ksjdfl</p>
</div>
<div>no.1</div>
<div>no.2</div>
<div>no.3</div>
<div>no.4</div>
<div>no.4</div>
<div>no.4</div>
<div>no.4</div>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
</body>
</html>
jquery1.html
<html>
<head>
<title>jquery.no.1.day</title>
<script src="jquery/jquery-1.4.2.js"></script>
<script>
/* jQuery(document).ready(function(){
alert('jQuery你好呀');
});
window.onload=function(){
alert('你好呀');
}
jQuery(document).ready(function(){
document.write('wqkdsjf;');
});
$(function(){
$('#one').html('你好吗');
});*/
function haha()
{
var $kk = document.getElementById('one');
$kk.innerHTML='haha';
}
$(function(){
$('#one').html('是我吗').css('background','red').click(function(){
$(this).html('yeye');
});
});
</script>
</head>
<body>
<div id="one"><a href="javascript:haha()">ha</a></div>
</body>
</html>
jquery2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>你好呀</title>
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script>
jQuery.noConflict();
jQuery(function(){
jQuery('#aax').css('background','red').html('wqvbb ');
});
document.write('<div id="aax"></div>');
</script>
</head>
<body>
pphphp
</body>
</html>
ziyuansu.html
<html>
<head>
<title>子无素</title>
<script src="jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("ul li:nth-child(2)").html('xx');
$('ul li:first-child').css('border','solid red 5px');
$('ul li:last-child').css('border','solid #aaccff 8px');
$('div p:only-child').css('border','solid #abccba 4px');
});
</script>
</head>
<body>
<div>
<p>haha</p>
<p>ixx</p>
</div>
<div>
<p>yaay</p>
</div>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
</body>
</html>