（1）JQuery基礎核心

標籤：style   blog   http   io   color   ar   使用   sp   java   

一、知識點簡記：

1、JQuery的相容性非常好，不需要考慮不同瀏覽器的相容問題。


2、主流的JavaScript庫：YUI、Prototype、Mootools、Dojo、ExtJS（載入頁面卡，付費）。


3、JQuery2.0不再支援IE6/7/8。


4、完全不支援IE6：網易雲課堂。


5、"$"是JQuery對象，JQuery特有的對象。


6、使用"$"符號和"jQuery"是恒等的。


7、$(function(){

alert($);//返回的是jQuery對象的內部
alert($());//返回JQuery對象
alert($(‘#box‘));//返回JQuery對象
alert($(‘#box‘).css(‘color‘,‘red‘));//返回JQuery對象
$(‘#box‘).css(‘color‘,‘red‘).css(‘font-size‘,‘200px‘).css(‘font-weight‘,‘blod‘);
//既然能返回jQuery對象，那麼在一個css()之後還能繼續添加css樣式，例如上一行所示
});


8、為什麼要使用$(function(){});這段代碼進行首尾包裹？原因是我們的JQuery庫檔案是在body元素之前載入的，我們必須等待所有的DOM元素載入後，延遲支援DOM操作，否則就無法擷取到。


9、$(document).ready(function(){});簡寫為$(function(){});一般不用window.onload。


10、如果有其他庫引入之後會造成一些符號的衝突，比如一個b庫裡面也有$符號，那麼我們可以將JQuery對象的$（即JQuery對象）換個變數名：
    var  $$=jQuery;
    另一種方法是：
    jQuery.noConflict();//將$所有許可權剔除
    剔除$所有權之後,原來的$的get方法無效，那麼可以寫上下面一句：
    var $$=jQuery;//然後alert($$(‘#box‘).get(0));

二、demo

簡單項目結構：

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>JQuery</title><script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript" src="demo.js"></script>  </head>    <body><!-- <input type="button" value="button"/> --><div id="box">基礎核心</div>    </body></html>

demo.js檔案：

/*$(function(){$('input').click(function(){alert("JQeury程式");});});*//*$(function(){$('#box').css('color','red');//將添加一個行內的css樣式});*//*jQuery(function(){$('#box').css('color','red');//將添加一個行內的css樣式});*//*$(function(){alert($);//返回的是jQuery對象的內部alert($());//返回JQuery對象alert($('#box'));//返回JQuery對象alert($('#box').css('color','red'));//返回JQuery對象$('#box').css('color','red').css('font-size','200px').css('font-weight','blod');});*//*window.onload=function(){$('#box').css('color','red');};*//* * //只列印出2，不列印1，因為覆蓋了前面的值 *  * window.onload=function(){alert(1);};window.onload=function(){alert(2);};*//*//這裡先列印1再列印2，沒有被覆蓋$(document).ready(function(){alert(1);});$(document).ready(function(){alert(2);});*/$(function(){alert($('#box'));//返回JQuery對象alert(document.getElementById('box'));//[object HTMLDivElement]，原生DOM對象alert($('#box').get(0));//擷取原生的dom對象，擷取第一個id為box的元素alert($(document.getElementById('box')));//返回JQuery對象，Jquery對象和Dom對象之間的互換});

（1）JQuery基礎核心