JQuery

http://jquery.cuishifeng.cn/      

jquery連結

0、Jquery建立标簽

var $option = $('<option>')      

一、選擇标簽

注意

var $variable = jQuery對像
var variable = DOM對象
$variable[0]//jQuery對象轉成DOM對象      

DOM對象和JQuery對象直接的轉換

$ 符代替的JQuery

1、基礎選擇器

标簽選擇器

$("h2")      

id選擇器

$("#i1")      

類選擇器

$(".c1")      

選擇所有元素

$("*")      

組合選擇器

$("#i1, h2, .c1")      

配合選擇器

$("h2.c1")      

2、層級選擇器

後代選擇器

$("form input")      

兒子選擇器

$("label>input")      

毗鄰選擇器

$("label+input")      

弟弟選擇器

$("#p2~li")      

層級選擇器，選擇的都是後面的

3、屬性選擇器

$("form input[type='email']")      

4、基本篩選器

:first // 第一個
:last    // 最後一個
:eq(index)    // 第index個元素
:gt(index)    // 大于指定索引元素
:lt(index)    // 小于指定索引元素
:odd    // 索引為奇數的元素
:even    // 索引為偶數的元素
:not(元素選擇器)    // 不含有該元素選擇器
:has(元素選擇器)    // 含有該元素選擇器，    這裡指的是該元素選擇器的父标簽      

index是從0開始的，可以看成list，index可以為負數

5、表單篩選器

:text
:password
:radio
:checkbox
:file

:submit
:button
:reset      

表單對象屬性

:disabled
:checked
:selected      

二、篩選器方法

下一個元素

$("#i1").next()
$("#i1").nextAll()
$("#i1").nextUntil(#i2")      

next()不包含自己本身，nextUntil() 不包含Until本身

上一個元素

$("li").prev()
$('li').prevAll()
$('li').prevUntil("#p3")      

父親元素

$("#id").parent()
$("#id").parents()  
$("#id").parentsUntil()       

兒子元素

$("#id").children()      

兄弟姊妹元素

$("#id").siblings()      

查找

$("div").find(".c1")      

其它

.first() 
.last() 
.not() 
.has() 
.eq()       

三、操作标簽

1、樣式操作

addClass()
removeClass()
hasClass()
toggleClass()      

注意：()裡的是名稱，不帶 . #

修改CSS樣式

$(this).css({"color": "red", "font-size": "24px"});      

2、位置操作

$(".c1").offset();    // 擷取标簽位置，相對于body
$(".c1").offset({top:100, left:100});     //設定标簽的位置相對于body
$(".c3").position();    //擷取相對于父級标簽的位置      

注意：position()，不能設定位置

$(window).scrollTop(120);    // 設定到距離頂部120px
$(window).scrollTop();    // 擷取目前滾動條的值
$(window).scroll()   // 對滾動條做監聽

scrollLeft() // 擷取比對元素相對滾動條左側的偏移      

 3、尺寸

$(".c1").height();    // 擷取context 高度
$(".c1").height(200);    //設定context 高度
$(".c1").width();    //擷取context 寬度
$(".c1").width(400); //設定context 寬度


$(".c1").innerHeight();    // 擷取 context + padding的高度
$(".c1").innerHeight(140);    //設定 context + padding的高度
$(".c1").innerWidth();    // 擷取 context + padding的寬度
$(".c1").innerWidth(240);    //設定 context + padding的寬度


$(".c1").outerHeight();        // 擷取 context + padding + border 的高度
$(".c1").outerHeight(150);    // 設定 context + padding + border 的高度
$(".c1").outerWidth();        // 擷取 context + padding + border 的寬度
$(".c1").outerWidth(300);    // 設定 context + padding + border 的寬度      

注意：修改的是context的大小

4、文本操作

html操作

$("#d1").html();    # 檢視第一個符合查找标簽的html
$("#d1").html("<p>hello</p>");    // 設定全部标簽      

文本操作

$("#d1").text();    //擷取所有符合查找标簽的值
$("#d1").text("jkl");    // 設定所有的值      

值

text
$(":text").val();    // 檢視文本的值
$(":text").val("wutong");    //設定文本的值

password
$("：password").val();    // 檢視
$(":password").val("fghvbX3ec");    //設定

checkbox
var $checkEle = $(":checkbox:checked");
for (var i = 0; i<$checkEle.length; i++){
    console.log($($checkEle[i]).val());
}
// 檢視選擇的多選框

$("[name='hobby']").val(['basketball']) // 設定多選框


radio
$(":radio:checked").val()    // 檢視選擇單選框的值



//select
$("#s1").val()     //檢視select的選項
$("#s1").val("010")    //設定


注意：radio和checkbox都是多個标簽，其中radio是單選框，是以可以直接使用val()
checkbox要通過循環，設定值的時候他們可以通過共同的name屬性來設定      

 5、屬性操作

$("img").attr("src");    // 擷取屬性 src 相當于key
$("img").attr("src", "a.jpg")    // 設定屬性 屬性->key 屬性值->value
$("img").attr({"src": "a.jpg", 'title': '美女'})
$("img").removeAttr("src")      

對于radio和checkbox 屬性用prop()
$("#h1").prop("checked")    // 擷取目前選擇框的狀态
$("#h3").prop("checked", false)    //設定選擇框的狀态      

 6、文檔操作

标簽内部
var liEle = document.createElement("li")
liEle.innerText = 0;
$("#u1").prepend(liEle);    // 在ul内部元素的最前面
$("#u1").append(liEle);        // 在ul内部元素的最後面
注意：建立的标簽是一個對象
　　　appendTo() 和 prependTo() 隻是把 #ul 和 liEle 的位置換了      

同級标簽
var liEle = document.createElement("li");
liEle.innerText=2.5
$("#l1").after(liEle);        // 同級元素l1的後面
$("#l1").before(liEle);        // 同級元素l1的前面
注意：insertAfter() insertBefore() 隻是把 #li 和 liEle 的位置換了      

$("ul").remove();    // 删除ul本身
$("ul").empty();    // 清空ul      

// 替換操作
var imgEles = document.createElement("img");
var url = "v.jpg"
$(imgEles).attr("src", url);
$("a").replaceWith(imgEles);      

// 克隆
$("#b1").clone(true).insertAfter(this);
true 複制标簽本身的事件      

 四、事件

1、頁面加載

// 在head 裡添加， 格式
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function () {
        // JQuery和JavaScript代碼
    });
</script>      

2、常用事件

click        // 點選
change    // select
keyup    // 鍵盤監聽
focus  blur    // 用在 input      

3、綁定事件

1、格式：
Jquery對象.on('事件', '選擇器', function(){})
2、優點
事件冒泡和事件捕獲
jquery對象選擇恰當的選擇器，在添加資料後，很好的決絕了資料不能删除的問題
3、順序
先冒泡到jquery對象 -> 選擇器進行事件捕獲      

4、動畫效果

$("img").show(時間毫秒);    // 圖檔 無->有
$("img").hide(時間);    // 隐藏
$("img").toggle(時間);    // 取反

滑動
.slideDown(時間)    // 向下
.slideUp(時間)    // 向上
.slideToggle(時間)    // 取反

淡入淡出
.fadeIn(時間)    // 入
.fadeOut(時間)     //出
.fadeToggle(時間)    // 取反
.fadeTo(時間, 阿爾法值)     // 什麼透明度

自定義
.animate({}, 時間)      

5、each

jquery對象.each(function(){....})    // 與for循環效果一緻      

li = [1, 2, 4, 5, 3]
$.each(li, function(i, v){
    console.log(i ,v)
});
i 索引 v li中的值      

1、作用
儲存資料
2、jQuery 對象都能儲存資料
3、格式
jQuery對象.data(key, value)    // 設定
jQuery對象.data(key)    // 擷取      

1、JQuery直接調用
jQuery.extend(
{k:function(){}}
)
調用 $.k    
2、JQuery對象調用
jQuery.fn.extend({k:function(){}}
)
調用    JQuery對象.k