Jquery框架

Jquery引言

Jquery是什麼

Jquery是一個javascript的框架

Jquery的優勢

簡化javascript編程
Jquery能夠屏蔽瀏覽器的差異
Jquery簡化了Ajax的開發 $.ajax();
Jquery提供了豐富的UI組件與功能插件

其他JS框架

EasyUI、Dojo、ext.js、react.js、angular.js

第一個Jquery程序的開發

搭建Jquery的開發環境

聲明引入jquery庫
不帶min.js 沒有經過壓縮，源代碼不混淆的js文件，適用於學習，能夠看到源代碼。
帶min.js 經過壓縮，源代碼混淆的js文件，適用於生產環境，看不到源代碼。
功能完全一致

<script type="text/javascript" scr="${pageContext.request.contextPath}/js/jquery-1.8.0.min.js">
    <script type="text/javascript">
        function text1() {
            //javascript方式
            /*
            var div = document.getElementById("box");
            alert(div.innerHTML);
            */
            //jquery方式
            alert($("#box").text());
        }
    </script>
</script>

<body>
    <div id="box">
        hibiscidai
    </div>
</body>

Jquery語法的特點

簡介明瞭
支持鏈式調用

特殊函數

text() 獲得內幕標籤的文本信息
css() 修改具體的標籤樣式

DOM對象與Jquery對象

針對於js獲取對象：

var div = document.getElementByID("div");

針對於jquery獲取對象：

var div = $("#div");

基於上述的兩種方式，都可以獲取div標籤對象
上面通過js方式獲得的div標籤對象，稱之爲DOM對象
下面通過jquery方式獲得的div標籤對象，稱之爲jquery對象
只有jquery對象纔可以調用jquery方法
jquery對象中封裝了DOM對象

Juqery對象的獲取

選擇器

基本選擇器

id選擇器

$("#id") 獲得的是一個jquery對象
例見 ##搭建Jquery的開發環境

類選擇器

針對於class=“xxx”

function text() {
    $(".box").css("display","none");
}

<div class="box">
    hibaiscidai
</div>
<div class="box">
    dj741
</div>
<div class="box">
    dai
</div>

標籤選擇器

選擇HTML標籤對象

function text() {
    $("div,h1").css("display","none");
}

<div class="box">
    hibaiscidai
</div>
<div class="box">
    dj741
</div>
<div class="box">
    dai
</div>

全選擇器

把HTML頁面所有的標籤全部選擇

層次選擇器

後代選擇器

形如select select

function text() {
    $("#outer li").css("display","none");
}

<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <ul>
        <li>hibisicidai3</li>
        <li>hibisicidai4</li>
    </ul>
</ul>

此時同時選擇<ul id="outer">標籤內所有的對象

兒子選擇器

形如select1>select2

function text() {
    $("#outer>li").css("display","none");
}

<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <ul>
        <li>hibisicidai3</li>
        <li>hibisicidai4</li>
    </ul>
</ul>

此時選擇了前兩個li標籤（對應下標1、2）

第一個兄弟選擇器

形如select1+select2

function text() {
    $("t+li").css("display","none");
}

<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <li id="t">hibisicidai3</li>
    <li>hibisicidai4</li>
</ul>

此時選擇了li id="t"與其後一個li標籤（對應下標3、4）

後續所有兄弟

形如select~select2

function text() {
    $("t~li").css("display","none");
}

<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <li id="t">hibisicidai3</li>
    <li>hibisicidai4</li>
    <li>hibisicidai5</li>
</ul>

此時選擇了li id="t"及其後所有li標籤（對應下標3、4、5）

過濾選擇器

目的：對一組jquery對象進行再次篩選，表示獲得狀態

基本過濾選擇器

function text() {
    $("XXXX").css("display","none");
}

<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <li id="t">hibisicidai3</li>
    <li>hibisicidai4</li>
    <li>hibisicidai5</li>
</ul>

:first | 第一個

XXXX –> li:first

$("li:first").css("display","none");

獲取到：1

:last | 最後一個

XXXX –> li:last

$("li:last").css("display","none");

獲取到：5

:not(select) | 不選擇

XXXX –> li:not(#t)

$("li:not(#t)").css("display","none");

獲取到：1、2、4、5（除3）

:even | 獲得所有的偶數內容(下標從0開始)

XXXX –> li:even

$("li:even").css("display","none");

獲取到：1、3、5（對應下標0、2、4）

:odd | 獲得所有奇數內容

XXXX –> li:odd

$("li:odd").css("display","none");

獲取到：2、4（對應下標1、3）

:eq(index) | 獲取對應下標的內容

XXXX –> li:eq(1)

$("li:eq(1)").css("display","none");

獲取到：2（對應下標1）

:gt(index) | 獲得大於某一個下標的內容

XXXX –> li:gt(1)

$("li:gt(1)").css("display","none");

獲取到：3、4、5（對應下標2、3、4）

:lt(index) | 獲得小於某一個下標的內容

XXXX –> li:lt(2)

$("li:lt(2)").css("display","none");

獲取到：1、2（對應下標0、1）

內容過濾器

function text() {
    $("XXXX").css("display","none");
}

<div id="box">
    hibiscidai1
</div>
<div>
</div>
<div>
    <p>123456</p>
</div>
<div>
    hibsicidai2
</div>

:contains(text)

獲得某些包含特殊文本的內容的標籤
XXXX –> div:contains(hibiscidai1)
獲取到第一個div

:empty

獲得內部沒有內容的標籤
XXXX –> div:empty
獲取到第二個div

:has(選擇器)

篩選包含某個選擇器的標籤
XXXX –> div:has(p)
獲取到第三個div

:parent

選擇器選取所有是其他元素的父元素且包含文本節點的元素

<ul><li>小黑</li></ul>
<ul></ul>

XXXX –> ul:parent
選取所有帶有子元素且包含文本的 <ul> 元素：

可見選擇器

:visible

選中樣式爲顯示的標籤對象
XXXX –> ul:visible

:hidden

選中樣式爲隱式的標籤對象
XXXX –> ul:hidden

屬性過濾器

function text() {
    $("XXXX").css("display","none");
}

<div id="box">
    hibisicidai1
</div>
<div id="pox">
    hibiscidai2
</div>
<div id="cox">
    hibiscidai3
</div>
<div>
    hibiscidai4
</div>

作用
選擇的是含有某些屬性的標籤對象
-[attribute]
XXXX –> div[id]
選擇所有有id屬性的div標籤對象(獲取到1/2/3)
[attribute=value]
XXXX –> div[id=pox]
(獲取到2)
[attribute!=value]
XXXX –> div[id!=pox]
(獲取到1/3/4)

表單屬性過濾器

function text1() {
    if ($("input[type=checkbox]:checked").length==0) {
        alert("請選擇要刪除的科目");
    }
}
function text2() {
    alert($("#city option:selected").text());
}

java <input type="checkbox" value="java" /><br />
python <input type="checkbox" value="python" /><br />
php <input type="checkbox" value="php" />
<input type="button" value="刪除" onclick="test1()" />

<select id="city" onchange="text2()" >
    <option>北京</option>
    <option>上海</option>
    <option>鄭州</option>
</select>

:checked

獲得所有被選中的checkbox

:selected

獲得當前被選中的option

表單選擇器

:text

:password

:radio

:checkbox

:submit

:button

:hidden

:file

:reset

DOM對象和Jquery對象的轉換

DOM對象—>jquery對象

語法:$(DOM對象)

function text1() {
    //javascript標籤對象獲取方式
    var div = document.getElementById("box");
    //DOM對象轉換爲Jquery對象
    alert($(div).text());
}

jquery—>DOM對象

語法:Jquery.get(index)

$("div").get(1).innerHTML="hibscidai";

一組Jquery對象(遍歷)

遍歷

function text1() {
    $("div").each(function (index) {
        //this 當前元素的DOM對象
        //idex 代表當前元素的下標
        alert($(this).text());
        alert(index);
    });
}

<div id="box">
    hibisicidai1
</div>
<div id="pox">
    hibiscidai2
</div>
<div id="aox">
    hibiscidai3
</div>
<div id="cox">
    hibiscidai4
</div>
<input type="button" value="click" onclick="test1()" />

長度

$("div").length
$("div").size()

獲取某一個Jquery對象eq(idx)

$("div").eq(1).text()

Jquery中核心的方法

修改HTML標籤屬性的方法

修改屬性

語法
jquery對象.prop(“屬性的名字”,”屬性的值”);

獲得屬性的值

語法
jquery對象.prop(“屬性的名字”)；

設置多個屬性的值

語法
jquery對象.prop(“屬性的名字”，屬性的值).prop(“屬性的名字”，”屬性的值”)

Jquery.prop{
“屬性名”：”屬性值”，
“屬性名”：”屬性值”，
}

function text1() {
    //修改div標籤的屬性
    $("#box").prop("title","xiaobai");
    //獲取屬性的值
    alert($("#box").prop("title"));
    //修改多個屬性的值(鏈式調用)
    $("#box").prop("title","xiaobai").prop("id","cox");
    //json方式
    $("#box").prop({
        "title":"xiaobai",
        "id","cox"
    });
}

修改標籤的樣式屬性

修改樣式

jquery對象.css(“css屬性”，屬性值)；

獲取樣式的值

jquery對象.css(“css屬性”)

設置多個css樣式

jquery對象.css(“css屬性”，屬性值).css(“css屬性”，”屬性值”)
jquery對象.css({
“css屬性”：”屬性值”,
“css屬性”：”屬性值”,
})

function text1() {
    //修改css樣式的屬性
    $("#box").css("width","200px");
    $("#box").css("height","200px");
    //修改多個樣式
    $("#box").css("width","200px").css("height","200px");
    $("#box").css({
        "width":"200px";
        "height":"200px";
    });
    //獲取樣式的值
    alert($("#box").css("width"));
}

延遲

Jquery.hide(毫秒) 以動畫的形式隱藏
Jquery.show(毫秒) 以動畫的形式顯示

//隱藏div
$("#box").hide(2000);
//顯示div
$("#box").show(2000);

修改樣式類型

語法
Jquery對象.removeClass();//刪除樣式類型
Jquery對象.addClass();//添加樣式類型

function test1() {
    //獲取第二個div的標籤對象
    //刪除原有樣式類型
    $("#box").removeClass();
    //添加原有樣式類型
    $("#box").addClass("box");
}

注：jquery.removeClass()沒有指定參數，則jquery把這個標籤的所有樣式刪除

text函數

用於獲取或者設置標籤內部文本信息
- 語法
jquery對象.text();//獲取文本內容
jquery對象.text("");//修改文本內容
- 注意
只針對於文本內容，忽略HTML標籤

HTML函數

用於獲取或者設置標籤內部的HTML標籤
- 語法
jquery對象.html();//獲取html標籤內容
jquery對象.html(“標籤”);//修改html標籤內容

function test1() {
    //獲取HTML標籤
    //alert($("#box").html());
    //修改HTML標籤
    $("#box").html("I  <font color=red >  &hearts;  </font>  you");
}

Val函數

用於獲取或者設置表單標籤中value屬性內容

function test1() {
    //獲取表單中的value值
    // alert($("#t").val());
    //修改表單中的value值
    $("#t").val("xiaohuahua");
}

Jquery中的事件處理

JS中事件處理的兩種方法

JavaScript編程式的事件處理

//頁面加載完成之後觸發事件
window.onload = function() {
    //獲取對應的標籤對象
    var input = document.getElementByID("box");
    //爲對應的標籤對象添加事件
    input.onclick = function() {
        //js代碼
    }
}

前臺控件代碼

<input type="button" id="box" />

Jquery中通過編程的方式加入事件處理

Jquery中編程式的事件處理

//頁面加載完成後觸發事件
$(function() {
    //獲取標籤對象，添加對應事件
    $("#box").click(function() {
        //Jquery代碼
    });
});

前臺控件

<input type="button" id="box" />

注意細節

this關鍵字

<script type="text/javascript">
    //頁面加載完成後觸發事件
    $(function() {
        $().click(function() {
            //this，實質是DOM對象，代表當前操作標籤對象
            console.info(this);
            console.info($(this));
        });
    });
</script>

event

<script type="text/javascript">
    //頁面加載完成後觸發事件
    $(function() {
        $("#box").click(function(event) {
            //event是一個Jquery對象
            console.info(event);
            //event.target是一個DOM對象
            console.info(event.target);
        });
    });
</script>

複合事件

toggle();

複合多個單機操作

toggle(fun1, fun2)

Hover()

複合mouseover , mouseout

Hover(fun1, fun2)

事件處理的完整寫法（瞭解）

簡化事件的寫法

$(function() {
    $("#box").click(function() {
        //Jquery代碼
    });

    $("#box").mouseover(function() {
        //Jquery代碼
    });
});

完整事件處理的寫法

$(function() {
    $("#box").on("click", function() {
        //Jquery代碼
    });
    $("#box").on("mouseover", function() {
        //Jquery代碼
    });
});

特殊事件（瞭解）

one 函數，保證一個事件只執行一次

Jquery中的DOM編程

Jquery創建的HTML標籤

創建標籤

var div = $("<div>hibiscidai</div>");

決定放置位置

$("#input").click(function() {
    //創建div標籤對象
    var div = $("<div>hibiscidai</div>");
    //父親角度
    $("#body").append(div);//把新創建的div標籤，放置在最後一個孩子處
    $("#body").prepend(div);//把新創建的div標籤，放置在第一個孩子處
    //兄弟角度
    $("#input").after(div);
    $("#input").before(div);
});

Jquery刪除現有標籤

清空標籤的內部信息

$("#box").empty();

刪除標籤

$("#box").remove();

Jquery替換

//創建input標籤
var input = $("<input type='text' value='xiaohei' />");
//替換原有標籤
$("#box").repalceWith(input);

克隆 clone()

clone() 不復制事件
clone(true) 複製事件

$("#box").click(function() {
    alert("xxxxxxxx");
});
$("#input").click(function() {
    //克隆div標籤
    var div = $("#box").clone(true);
    //放置在body標籤的最後孩子處
    $("#body").append(div);
});

一組關係方法

案例：級聯菜單

<script type="text/javascript">
    $(function(){
    //準備數據
    var data = {
        bj:['海淀','朝陽','豐臺'],
        tj:['河東','河西','南開'],
        zz:['金水','二七','順義'],
    };

    //獲取北京對應的區
    var sections =data['bj'];

    //獲取第二個select標籤對象
    var sectio n = $("#section");
    for(var  i = 0; i < sections.length; i++){
        //創建option
        var option = $("<option>"+sections[i]+"</option>");
        //把創建好的option放入第二個select標籤中
        section.append(option);         
    };

    //給一個select標籤添加change事件
    $("#city").change(function(){
        //清空原有標籤內部的信息
        section.empty();
        //獲取用戶選中的城市值
        var city = $("#city option:selected").val(); 
        //獲取該城市所對應的區
        var sections = data[city];
        for(var i = 0; i < sections.length; i++){
            //創建option標籤對象 
            var option = $("<option>"+sections[i]+"</option>");
            //把option標籤對象放入第二個select標籤中
            section.append(option);
        }
    });     
});
</script>

前臺表單控件

city
<select id="city" >
    <option value="bj">北京</option>
    <option value="tj">天津</option>
    <option value="zz">鄭州</option>
</select>
section
<select id="section">
</select>

事件委派

產生原因：通過最基本的方法，動態創建標籤對象時，並不能添加原有的事件
解決方案：

<script type="text/javascript">
    $(function() {
        $(":checkbox").click(function() {
            alert("xxxxxx");
        });

        //解決新創建的標籤對象沒有對應的事件
        $(":checkbox").live("click", function() {
            alert("xxxxxx");
        });

        $("#input").click(function() {
            //創建勾選框
            var c = $("<input type='checkbox' />");
            //獲取body標籤對象
            $("#body").append(c);
        });
    });
</script>

Jquery框架學習筆記

Jquery框架

Jquery引言

Jquery是什麼

Jquery的優勢

其他JS框架

第一個Jquery程序的開發

搭建Jquery的開發環境

Jquery語法的特點

特殊函數

DOM對象與Jquery對象

Juqery對象的獲取

選擇器

基本選擇器

id選擇器

類選擇器

標籤選擇器

全選擇器

層次選擇器

後代選擇器

兒子選擇器

第一個兄弟選擇器

後續所有兄弟

過濾選擇器

基本過濾選擇器

:first | 第一個

:last | 最後一個

:not(select) | 不選擇

:even | 獲得所有的偶數內容(下標從0開始)

:odd | 獲得所有奇數內容

:eq(index) | 獲取對應下標的內容

:gt(index) | 獲得大於某一個下標的內容

:lt(index) | 獲得小於某一個下標的內容

內容過濾器

:contains(text)

:empty

:has(選擇器)

:parent

可見選擇器

:visible

:hidden

屬性過濾器

表單屬性過濾器

:checked

:selected

表單選擇器

:text

:password

:radio

:checkbox

:submit

:button

:hidden

:file

:reset

DOM對象和Jquery對象的轉換

DOM對象—>jquery對象

jquery—>DOM對象

一組Jquery對象(遍歷)

遍歷

長度

獲取某一個Jquery對象eq(idx)

Jquery中核心的方法

修改HTML標籤屬性的方法

修改屬性

獲得屬性的值

設置多個屬性的值

修改標籤的樣式屬性

修改樣式

獲取樣式的值

設置多個css樣式

延遲

修改樣式類型

text函數

HTML函數

Val函數

Jquery中的事件處理

JS中事件處理的兩種方法

Jquery中通過編程的方式加入事件處理

注意細節