当弹出以上信息时，说明环境已经搭建好
用JS获取class的方法
document.getElementById('div1'); document.getElementsByTagName('div'); getByClass(document,'box');用jQuery获取 选择标签：$('div') 选择ID：$('#div1') 选择class：$('.box')
$('li:first').css('background','red');表示在<li>标签中的第一个li；可以将first改成last；也可以将first改成eq()，相当于是下标，从0开始计数；将first改成even，即是基数行；将first改成odd，即为偶数行
筛选：$('li.box').css……即是li标签中有class为box 也可以写成$('li').filter('.box').css…… $('li').filter('[title=hello]').css……即是li标签中有title为hello
jQuery的写法函数化
JavaScript写法jQuery写法$(function(){})function $(){}innerHTML = 123html(123)function html(){}onclick = function(){}click(function(){})function click(){}window.onload$()JavaScript原生代码与jQuery的代码比较
window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onclick = function(){ alert(this.innerHTML); } $(function(){ $('#div1').click(function(){ alert($(this).html()); }) })jQuery要有(); jQuery与JavaScript可以共存，不能混用
$(function(){ var oDiv = $('#div1'); oDiv.html('hello'); oDiv.css('background','red'); oDiv.click(function(){ alert(123); }) })通过链式方法写成
$('#div1').html('hello').css('background','red').click(function(){ alert(123); })取值赋值合体 在JavaScript中的写法：
oDiv.innerHTML = 'hello'; //赋值 alert(oDiv.innerHTML); //取值在jQuery中的写法：
$('#div1').html('hello'); //赋值 alert($('#div1').html()); //取值当一组元素的时候，取值是一组中的第一个 当一组元素的时候，赋值是一组中的所有元素
attr()： 设置属性，括号内一个元素为取值，括号内两个元素为赋值 filter()： 进行过滤筛选 not()： 与filter()相反 has()： 包含的元素被选出，除了第一个元素以外
例子：选项卡 原生：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> #div1 div { width: 200px; height: 200px; border: 1px red solid; display: none; } .active { background: red; } </style> <script type="text/javascript"> window.onload = function (){ var oDiv = document.getElementById('div1'); var aInput = oDiv.getElementsByTagName('input'); var aCon = oDiv.getElementsByTagName('div'); for (var i = 0; i < aInput.length; i++) { aInput[i].index = i; aInput[i].onclick = function (){ for (var i = 0; i < aInput.length; i++) { aInput[i].className = ''; aCon[i].style.display = 'none'; } this.className = 'active'; aCon[this.index].style.display = 'block'; } }; } </script> </head> <body> <div id="div1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display:block;">111</div> <div>222</div> <div>333</div> </div> </body> </html>jQuery：
$(function (){ $('#div1').find('input').click(function(){ $('#div1').find('input').attr('class',''); $('#div1').find('div').css('display','none'); $(this).attr('class','active'); $('#div1').find('div').eq($(this).index()).css('display','block'); }) })addClass()：在属性添加class值 removeClass()：在属性后面删除class值 width()：物体的宽 innerWidth()：width+padding outerWidth()：width+padding+border outerWidth(true)：width+padding+border+margin 后续操作不一样 insertBefore()：剪切到前面 insertAfter()：剪切到后面 appendTo()：把一个节点剪切到指定节点的最后面 prependTo()：把一个节点剪切到指定节点的最前面 before()： after()： append()： prepend()：
<script type="text/javascript"> $(function(){ $('span').insertBefore($('div')); }) </script> </head> <body> <div>div</div> <span>span</span> </body> </html>span与div的位置互换
remove()：删除节点 on()：开启事件 off()：关闭事件 两种写法一样
$('div').on('click',function(){ alert(123); }) $('div').click(function(){ alert(123); }) $('div').on({ 'click':function(){ alert(123); } 'mouseover':function(){ alert(456); } })可以有多个事件
scrollTop()：滚动距离
