jQuery学习第一章，认识jQuery，write less , do more - 温柔的夜

索引

1 jQuery是什么
2 jQuery与原生js对比
3 参考文献

jQuery是什么

jQuery是一个函数库（library function）。

函数库（library function）

在计算机科学中，库（英语：library）是用于开发软件的子程序集合。库和可执行文件的区别是，库不是独立的计算机程序，他们是向其他程序提供服务的代码。——引自wiki

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>

总结：高度兼容，但需要注意方法所用的语法。