索引
jQuery是什么
jQuery是一个函数库(library function)。
jQuery与原生js对比
选择元素
- 一般选择器
$(document) //选择整个文档作为对象 $('Dome') //选择id名为Dome的元素 $('div.banner') //选择class名为banner的div元素
- 智能选择器
$('section:first') //选择页面中第一个section元素 $('tr:odd') //选择表格中的奇数行 $('div:visible') //选择可见的div元素
tips:这个一般选择器和智能选择器是我自己的定义。
原生选择器对比一般选择器
- javascript原生选择器
<div id="menu" class="div-top"></div> <script type="text/javascript"> document.getElementsByTagName('div'); //获取div标签 document.getElementById('menu'); //获取id名为menu的元素 //要获取class还要自己写方法什么数组判断正则的 </script>
- jquery一般选择器
<div id="menu" class="div-top"></div> <script type="text/javascript"> $('div'); //获取div标签 $('#menu'); //获取id名为menu的元素 $('.div-top'); //获取class名为div-top的元素 </script>
总结:简单,易维护。当然也要在head里把jquery的库添加上,才能用jquery的方法。
原生选择器对比智能选择器
- javascript原生选择器
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> var li_first = document.querySelector("li"); //获取第一个li,定义为li_first li_first.style.cssText="background:blue;"; //把li_first的样式的背景颜色的值改为蓝色 </script>
- jquery智能选择器
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> $('li:first').css('backgroud'."blue"); //获取第一个li,并把样式的背景颜色的值改为蓝色 </script>
总结:理解的话当然是原生的易懂,比如此例中每一个.都相当于汉字的的,主要是固定语法是非常语义化。使用的话jquery方便,jquery胜在高效,智能,具体怎么用还要看需求。
兼容性
- 所有浏览器都兼容jquery,ie>v6
- jquery可以与原生js并存,但方法不能混用
<!--正确的js jq共存写法1--> <div id="nav">135246</div> <script> var Nav1 = document.getElementById('nav'); //js获取id,变量名为Nav1 Nav1.onclick=function () { //js点击事件 alert( this.innerHTML ); //打警告框出来,警告内容是自身 //alert( $(this).html() ); //使this方法函数化的jquery写法 } </script> <!--正确的js jq共存写法2--> <script> $(function(){ $('#div1').click(function(){ alert( $(this).html() ); //alert( this.innerHTML ); //js写法 }); }); </script>
<!--错误的js jq混用方法1--> <div id="nav">135246</div> <script> var Nav1 = document.getElementById('nav'); //js获取id,变量名为Nav1 Nav1.onclick=function () { //js点击事件 //alert( $(this).innerHTML ); //这样是错的 //alert( this.html() ); //这样也是错的 </script> <!--错误的js jq混用方法2--> <script> $(function() { $('#div1').click(function() { alert($(this).html()); //alert( $(this).innerHTML ); //这样是错的 //alert( this.html() ); //这样也是错的 }); }); </script>
总结:高度兼容,但需要注意方法所用的语法。
ajax、动画等较为复杂的实现
这里要提到jquery的理念,write less , do more。为什么到现在才提这个理念,因为需要do的越more,实际write的越less。这里不写例子了。
下一章:《jQuery学习第二章,遍历、过滤器》
参考文献
版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
分类:javascript语言
标签:javascript, jquery