少妇精品一区,丰满熟女人妻一区在线

JQuery的概述

JQuery
- jQuery是一款快速的，簡潔的JS框架（JS代碼庫），是繼Prototype之后一款優(yōu)秀的JS框架，
- jQuery的設計宗旨是"write less,do more"，寫的更少，而做的更多，
- jQuery封裝了JS的常用功能。
JQuery可以更好的完成如下的操作
- 簡化優(yōu)化了對dom的操作
- 簡化優(yōu)化了ajax的實現
- 提供了豐富的事件處理
- 提供了簡單的動畫效果
- 提供了非常豐富的插件機制，市場上有非常多的jQuery的插件，比如表單校驗插件，日期插件，樹形結構的插件
JQuery的官網
- http://jquery.com
JQuery的常用版本
- 1.x; 1.8.3 支撐老版本IE瀏覽器
- 2.x;
- 3.x;
JQuery 查詢的意思更加方便的查詢和控制頁面的控件

1.1.1 上面說到的框架與庫的區(qū)別

庫的英文是Library (lib),框架英文 Framework
庫是將代碼集合成一個產品,供程序員去調用
面向對象的代碼組成形成的庫是類庫,面向過程代碼組成的庫叫做函數庫,在函數庫中可以直接使用函數叫做庫函數
- 特點:靈活,需要就調用,不需要的地方自己實現
框架是為解決一類問題而開發(fā)的產品
- 框架的用戶一般只需要使用框架提供的類和函數,就可以實現全部功能
- 特點:一條龍服務,使用框架的時候,必須要使用框架的全部代碼,即使用不到你也不能挑三揀四,必須按照規(guī)則來,不靈活
jQuery定位官方說框架(重量級),java看來,他其實就是一個js代碼庫(輕量級)
jquery提高你的工作效率,并不是提高代碼的運行效率
JQuery的語法特點
- 快速獲取文檔的元素
- 提供漂亮頁面動態(tài)效果
- 創(chuàng)建AJAX異步加載網頁
- 提供js語法的增強--元素遍歷數組處理
- 增強了事件處理--消除了瀏覽器兼容問題
- 更改網頁的內容 --文本,插入或者翻轉網頁的圖像

1.2 jQuery入門案例

??是在頁面加載完成之后執(zhí)行指定的事件即onload事件

第一種方式

<body onload="alert('頁面加載完成了!');" > 
</body>

第二種方式

<script type="text/javascript">
    window.onload = function() {
        alert("頁面加載完成了！1");
    }
</script>

第三種方式

<script type="text/javascript">
    $(function(){
        alert("頁面加載完成了！jQuery!");   
    });
</script>

使用步驟
- 導包在項目放入jq的jar包
- 頁面中引用
  - <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
- 調用jQuery方法 $(匿名函數);
jQuery所有的操作基本上以$開頭--說明這段代碼其實使用的是jQuery的方法
- $(匿名函數);可以在頁面加載完成之后執(zhí)行這段匿名函數,替代window.onload事件
JQ與直接BOM的區(qū)別
- jQuery可以把我們的代碼合并執(zhí)行
- window.onload 多次編寫會被后面的方法覆蓋

1.3 jQuery對象與dom對象的轉換

jQuery對象可以調用jQuery的方法，jQuery對象不可以調用dom的方法，
dom對象可以調用dom的方法，dom對象不可以調用jQuery的方法，
jQuery對象和dom對象都只能調用自己的方法，都只能訪問自己的屬性。

??為了方便使用所以jQuery對象與dom對象之間需要互相轉換。

方法其實是有歸屬感 j-Query方法歸屬于jQuery對象,dom方法歸屬于dom對象
dom對象->jquery對象 $(dom對象)

//獲取div標簽的dom對象
var domDiv01 = document.getElementById("div01");
alert(domDiv01.innerHTML);
alert($(domDiv01).html());//將dom對象轉換成jQuery對象

jQuery對象->dom對象 jQuery對象[0] 或者 jQuery對象.get(0)

//獲取div標簽的jQuery對象
var jQueryDiv01 = $("#div01");
alert(jQueryDiv01.html());
alert(jQueryDiv01.get(0).innerHTML);//將jQuery對象轉換成dom對象

1.3.1 核心方法

$();核心方法 -- 方法名是jQuery-- 為了方便簡寫成$
- 方法可以傳很多類型的參數(類似于java中的重載)
- $(function(){}) 頁面加載完成之后執(zhí)行匿名函數中的代碼
- $("#div01") 使用選擇器直接獲得jQuery頁面中元素對象
- $(dom對象) 將Dom對象轉化成jQuery對象
- 將一個html對象轉化成jQuery對象

1.4 JQuery的常用選擇器

1.4.1我們比較熟悉的選擇器

先寫一個網頁先

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery的常用選擇器</title>
        <style type="text/css">
            div {
                height: 100px;
                width: 300px;
                border: 1px solid blue; 
            }           
        </style>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function() {
                
            
        </script>
    </head>
    <body>
        <div id="div01">小熊先生的個人主頁</div>
        
        <br />
        <div class="div02">小熊的手札</div>
        
        <br />
        <div>小熊的火鍋</div>
        
        <br />
        <div name="div04">小熊的烤肉</div>
        
        <br />
        <a name="div04">小熊的皮皮蝦</a>
    
    </body>
</html>

??JQ的選擇與JS非常的類似就是語法有些不同

id選擇器

var div01 = $("#div01");
alert(div01.html());

類選擇器

var classList = $(".div02");

元素選擇器

var divList = $("div");
alert(divList.size());

組合選擇器

var elementList = $("div,a");
alert(elementList.size());

屬性選擇器

var nameList = $("[name=div04]");
alert(nameList.size());

標簽屬性選擇器

var aNameList = $("a[name=div04]");
alert(aNameList.html());

注意:
- 只有id選擇器返回的jQuery對象,因為id一般是唯一的,其他返回的都是集合
- [name=div04]不是賦值,而是比較運算符
- 如果通過選擇器返回的集合只有一個元素,直接調用方法,操作屬性就可以

1.4.1一些比較特殊的選擇器

我們依舊先編寫一個網頁

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery的常用選擇器</title>
        <style type="text/css">
            div {
                height: 100px;
                width: 300px;
                border: 1px solid blue; 
            }           
        </style>
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function() {              
                
                
            });
            
        </script>
    </head>
    <body>
        <div style="display: none;">小火龍</div>
        <br />
        <br />
        
        <div>杰尼龜</div>
        <br />
        <br />
        
        <div>皮卡丘</div>
        <br />
        <br />
        
        <input type="checkbox" name="hobbies" value="xiaozhi" checked="checked"/>
        <input type="checkbox" name="hobbies" value="xiaoxia" checked="checked" />
        <input type="checkbox" name="hobbies" value="tom" />
        <input type="checkbox" name="hobbies" value="xiaogang" />
        <br />
        <br />
        
    
        
        
            
    
    </body>
</html>

獲取不可見標簽 : hidden

var hiddenList = $("div:hidden");

獲取可見標簽 : visible

var visibleList = $("div:visible");

獲取選中的復選框或者單選按鈕 input : checked

var checkedList = $("input:checked");

說明：其實JQ的選擇器還有很多，具體可以看看手冊會會用了有例子很簡單的。
案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery的常用選擇器</title>
        <style type="text/css">
            div {
                height: 100px;
                width: 300px;
                border: 1px solid blue; 
            }           
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function() {              
            
            //獲取隱藏域標簽   
            /* var list = $("input:hidden");
             alert(list.size());
             alert(list[0].value);*/
             
            //獲取單選按鈕選中標簽方式一
            /*var list = $("input[type=radio]:checked");
             alert(list.size());
             alert(list[0].value);
             */
            
             //獲取單選按鈕選中標簽方式二
            /*var list = $(".radio:checked");
             alert(list.size());
             alert(list[0].value);*/
             
             
            //獲取選中的下拉框
            var list = $("select option:checked");
             alert(list.size());
             alert(list[0].value);
            });
            
        </script>
    </head>
    <body>
        <div style="display: none;">小熊先生</div>
        <br />
        
        <div>小熊先生不開心</div>
        <br />

        <div>小熊先生很委屈</div>
        <br />
        
        <input type="checkbox" name="hobbies" value="java" checked="checked"/>
        <input type="checkbox" name="hobbies" value="android" checked="checked" />
        <input type="checkbox" name="hobbies" value="php" />
        <input type="checkbox" name="hobbies" value="python" />
        <br />
        
        <input type="hidden" name="option" value="add" />
        
        <input type="radio" class="radio" name="sex" value="男" checked="checked"/>男
        <input type="radio" class="radio" name="sex" value="女" />女
        <br />
        
        <select id="province">
            <option>--選擇省--</option>
            <option value="henan" selected="selected">河南省</option>
            <option value="niaoling">遼寧省</option>
            <optionvalue="shangdong">山東省</option>
        </select>
        <br />
    
    </body>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Web 基礎27 JQuery簡介及其入門案例（一）

Web 基礎27 JQuery簡介及其入門案例（一）

JQuery的概述

1.1.1 上面說到的框架與庫的區(qū)別

1.2 jQuery入門案例

1.3 jQuery對象與dom對象的轉換

1.3.1 核心方法

1.4 JQuery的常用選擇器

1.4.1我們比較熟悉的選擇器

1.4.1一些比較特殊的選擇器

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Web 基礎27 JQuery簡介及其入門案例 （一）

JQuery的概述

1.1.1 上面說到的框架與庫的區(qū)別

1.2 jQuery入門案例

1.3 jQuery對象與dom對象的轉換

1.3.1 核心方法

1.4 JQuery的常用選擇器

1.4.1我們比較熟悉的選擇器

1.4.1一些比較特殊的選擇器

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Web 基礎27 JQuery簡介及其入門案例（一）