jQuery学习笔记(一)

        本文是基于jQuery视频教程的学习笔记，测试例子是在IntelliJ Idea下开发的，下载链接：下载链接

1.1 基础语法

页面元素的选择，内置功能函数，都是以$符号，是jQuery对象的缩写。可以将下列中所有的$符号替代为jQuery，效果依然保持不变。

jQuery(function()
   {
      //#是页面元素的选择，根据id来进行选择的
      //行内的css元素设置
      jQuery ('#box').css('color','red');
   }
);
//$是所有jQuery程序必须的开始function是匿名函数
alert($);//本身返回的是jQuery对象的内部方法，即其对象的内部
alert($());//包裹起来返回的是内部对象
$().css('color','red');//css是jQuery对象的方法，返回的仍然是对象。

因此可以通过连缀的方式对需要修饰的元素进行修饰：$('#box').css('color','red').css('font-size','200px');

1.2方法对比

window.οnlοad=function()与$(function()的对比

1.2.1 window.onload
    必须等待网页的全部内容加载完毕，才能执行js代码，也就是说，如果有较大的图片在加载，也必须等待其加载完毕才会执行。

执行次数：只能执行一次，如果有第二次，那么第一次的执行将会被覆盖,例如下面的代码只会被执行第二次：
   

window.οnlοad=function(){
     alert(1);
   }
 window.οnlοad=function(){
         alert(2);
    }

1.2.2 $(function() 

   也是延迟加载，只需要等待网页中的dom结构，即到就可以执行包裹的代码可以执行多次，第n此加载的代码不会上一次覆盖。如果$(function(){});和 window.οnlοad=function()两段代码同时并存，$(function(){})包裹的代码肯定是优先于window.οnlοad=function()执行的

$(function(){
alert(1);
});
$(function(){
   alert(2);
});

1.3 Dom对象与jQuery对象的相互转化

  (1)获取原生的dom(object HTMLDivElement)对象的方法

a.使用javascript语言：document.getElementById('box')

b.使用jQuery: $('#box').get(0)

  (2)dom对象与jQuery对象之间的相互转化

$(function(){
   alert(document.getElementById('box'));//返回原生的dom对象 object HTMLDivElement
   //console.warn(document.getElementById('box'));
    alert($('#box').get(0));
    //作用：实现jQuery对象转为dom对象，可能出现有多个，返回原生的dom对象 object HTMLDivElement,同时通过$ ('#box').get(0)我们可以看出，jQuery是支持批量处理的。
   //console.warn($('#box').get(0));
   alert($(document.getElementById('box')).css('color','red'));
   //作用：实现将dom对象转为jQuery对象 object
});

1.4多个库之间的冲突

jQuery在其他库之前被引入，且出现$符号在其他的js库中也被重用(此时$所有权在其他库中):

(1)那么根据1.1章（$实际上是对jQuery的简写）我们可以将$替换为jQuery.

eg.

 $(function(){
             alert(jQuery('#box').get(0));
        });

(2)将jQuery对象进行重新定义

var $$=jQuery;
$(function(){
   alert($$('#box').get(0));
});

jQuery在其他库之后被引入，那么所有权在jQuery中，需要将$剔除

使用

jQuery.noConflict();//去除冲突
var $$=jQuery;
$(function(){
   alert($$('#box').get(0));
});