一般开发中不用原生的JavaScript而是用JQuery，开发效率比较高。
下面程序是原生和JQuery库的比较程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function () { var oDiv = document.getElementById('div1'); alert('原声弹出的' + oDiv); }; $(document).ready(function () {//这是jquery的写法，作用和原生js的window.onload作用是一样的 var $div = $('#div1'); alert('jquery弹出的' + $div); }); //下面是上面jQuery完整写法的简写 $(function () { var $div = $('#div1'); alert('jquery简写弹出的' + $div); }); </script> </head> <body> <div>这是一个div元素</div> </body> </html>
虽然原生的js函数是写在前面的，但是实际上JQuery弹出之后才会弹出js的alert，因为window.onload是等标签加载完成之后，再渲染完之后才允许。ready是等标签加载完之后就运行，所以要快。
JQuery选择器
* jquery可以快速的选择元素，选择规则和css样式相同，使用length属性判断是是否选择成功
* $(#myid) 选择id为myid的网页元素
* $('.myclass') 选择class为myclass的元素
* $("li") 选择所有li元素
* $("#ul1 li span") 选择id为ul1元素下的所有li下的span元素
* $("input[name=first]") 选择name属性等于first的input属性
*
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--不能直接撬开这里写--> <script type="text/javascript"> /* * jquery可以快速的选择元素，选择规则和css样式相同，使用length属性判断是是否选择成功 * $(#myid) 选择id为myid的网页元素 * $('.myclass') 选择class为myclass的元素 * $("li") 选择所有li元素 * $("#ul1 li span") 选择id为ul1元素下的所有li下的span元素 * $("input[name=first]") 选择name属性等于first的input属性 * * 对选择集进行过滤 * $("div").has("p") 选择包含p元素的div元素 * $('div').not(".myclass") 选择class不等于myclass的div元素 * $('div').filter('.myclass') 选择class等于myclass的元素 * $('div').eq(5) 选择第六个div元素 * */ $(function () { var $div = $(#div1); var $div2 = $('.box'); var $li = $('.list li'); $div.css({'color': 'red'}); $div2.css({'color': 'green'}); $li.css({'color':'prink'}); }); </script> <!--<style type="text/css">--> <!--#div1{--> <!--color: red;--> <!--}--> <!--.box{--> <!--color: green;--> <!--}--> <!--.list li{--> <!--background-color: mediumspringgreen;--> <!--}--> <!--</style>--> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
对选择集进行过滤
* $("div").has("p") 选择包含p元素的div元素
* $('div').not(".myclass") 选择class不等于myclass的div元素
* $('div').filter('.myclass') 选择class等于myclass的元素
* $('div').eq(5) 选择第六个div元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { var $div=$('div') $div.css({backgroundColor:'red'}); $div.has('p').css({backgroundColor:"green"}); $div.eq(4).css({textIndent:'20px'}); }) </script> </head> <body> <div>1</div> <div><p>2</p></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </body> </html>
判断是否选择到了元素
JQuery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素，length等于0就是没找到元素，大于0就是找到了元素
var $div1=$("#div1"); alert($div1.length);
手册上传至github。