2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式
Posted 一棵树2016
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式相关的知识，希望对你有一定的参考价值。
jQuery的min版本和原版功能是一样的，min版主要应用于已经开发成的网页中，而非min版
的文件比较大，里面有整洁的代码书写规范和注释，主要应用于脚本开发过程当中。
JQuery是继prototype之后又一个优秀的javascript库。它是轻量级的js库 ，它兼容CSS3
，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后
续版本将不再支持IE6/7/8浏览器。jQuery能够使用户的html页面保持代码和html内容分离
，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,
做得更多)。jQuery是免费、开源的，使用MIT许可协议。
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
1，引入Jquery
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <!-- 引入jquery --> 8 <script src="jquery-1.11.2.min.js"></script> 9 10 </head> 11 <body> 12 13 </body> 14 </html>
①取元素： js方式和jquery方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <!-- 引入jquery --> 8 <script src="jquery-1.11.2.min.js"></script> 9 10 </head> 11 <body> 12 13 <div id="dv">第一个DIV</div> 14 15 <div class="v">第二个DIV</div> 16 <div class="v">第三个DIV</div> 17 <div class="v">第四个DIV</div> 18 19 <input type="text" name="uid"> 20 21 </body> 22 <script type="text/javascript"> 23 //一、js方式： 24 25 //①js取元素，取出来的是具体的元素对象 26 //1,根据Id取 27 //alert(document.getElementById("dv")); 28 //2,根据class取 29 //alert(document.getElementsByClassName("v")); 30 //3, collection 根据标签名找取到的是集合 31 // alert(document. getElementsByTagName(‘div‘)); 32 //4,根据name找 取到的是NodeList 数组 33 // alert(document.getElementsByName(‘uid‘)); 34 35 36 37 38 //二、jquery方式 39 40 //①jquery取元素，取出来的是jquery对象 41 $(document).ready(function(e){ 42 //1,根据Id取 43 //alert($("#dv")); 44 //2,根据class取 45 //alert($(".v")); 46 //循环输出 根据下标取取出来的是元素，eq取取出来的是对象 47 // var v=$(".v"); 48 // for (var i = 0; i < v.length; i++) { 49 // alert(v.eq(i)[0]); 50 // } 51 //3,Object根据标签名找取到的是对象 52 //alert($("div")); 53 //4,根据属性找的是对象 任意一个属性都可以这么取 54 //alert($("[name=uid]")); 55 56 57 58 59 }) 60 </script> 61 </html>
②操作内容
以上是关于2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式的主要内容，如果未能解决你的问题，请参考以下文章
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别