jQuery基礎操做

1.jQuery的介紹

jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，
可以極大地簡化JavaScript編程。
jQuery對象：
jQuery對象就是經過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。若是一個對象是 jQuery對象
$("#i1").html()的意思是：獲取id值爲i1的元素的html代碼。其中html()是jQuery裏的方法。
至關於：document.getElementById("i1").innerHTML;
雖然 jQuery對象是包裝 DOM對象後產生的，可是 jQuery對象沒法使用 DOM對象的任何方法，同理 DOM對象也不能使用 jQuery裏的方法。
一個約定，咱們在聲明一個jQuery對象變量的時候在變量名前面加上$：
var $variable = jQuery對像
var variable = DOM對象
$variable[0]//jQuery對象轉成DOM對象

jQuery的使用:

1.首先要下載jQuery,放到html文件下
2.在html中boby中引入jQuery <script src="jquery-3.3.1.js" ></script>
3.若是進行jQuery的操做，在script標籤中執行

                查找標籤             

             選擇器          

1.基本選擇器

1.全部元素選擇器：$("*")
2.id選擇器：$("#id")
3.標籤選擇器：$("tagName")
4.class選擇器：$(".className")
配合使用：$("div.c1")  // 找到有c1 class類的div標籤。and的關係
5.組合選擇器：$("#id, .className, tagName") 把符合條件的都能找到，or的關係，逗號分開

2.層級選擇器

找到的都是y標籤
1.$("x y");// x的全部後代y（子子孫孫） 
2.$("x > y");// x的全部兒子y（兒子）
3.$("x + y")// 找到全部緊挨在x後面的y
4.$("x ~ y")// x以後全部的兄弟y

<ul class="dropdown-menu">
    <li><a href="#">Rain</a></li>
    <li><a href="#">Egon</a></li>
    <li><a href="#">Yuan</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Q1mi</a></li>
</ul>
<div>你好嗎</div>
<span>我很好</span>
<div>你怎麼樣</div>

1.$(".dropdown-menu  a") #r.fn.init(4) [a, a, a, a, 4個符合條件的，找到的都是a標籤
2.$(".dropdown-menu>a")  #fn.init 無結果
3.$(".dropdown-menu>li") #r.fn.init(5) [li, li, li, li.divider, li
4.$(".dropdown-menu+div")  #r.fn.init [div,
5.$(".dropdown-menu~div")  #r.fn.init(2) [div, div,

3.屬性選擇器

<input type="text" name="username">
 <input type="checkbox" name="gender" value="basketball">籃球
1.[attribute]
2.[attribute=value]// 屬性等於
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標籤
$("input[name='username']") // 取到name屬性爲username類型的input標籤
$("input[type!='text']");// 取到類型不是text的input標籤

4.基本篩選器

:first // 第一個  $("div:first");
:last // 最後一個 $("#1 >div:last");
:eq(index)// 索引等於index的那個元素  $("#1 > div:eq(1)");
:even // 匹配全部索引值爲偶數的元素，從 0 開始計數
:odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
:gt(index)// 匹配全部大於給定索引值的元素
:lt(index)// 匹配全部小於給定索引值的元素
not和has

:not(元素選擇器)// 找到全部知足not條件的標籤，即在這個標籤內沒有noy中的條件
:has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)111111111144       
$("#1:has(div)");將後代中有div標籤的id=1的標籤找出來。找到的時id=1這個大標籤
$("div:has(h1)")// 找到全部後代中有h1標籤的div標籤
$("li:not(「a")// 找到全部自己不含a標籤的li標籤
$("span:not("icon-bar")找到全部自己不含icon-bar類的span標籤

5.表單經常使用篩選

:text
:password
:file
:radio
:checkbox
$("input[type='checkbox']");能夠直接寫成$(":checkbox")
表單對象屬性:

:enabled  #可用的
:disabled
:checked  #單選和複選框
:selected #下拉框
$(":selected")  // 找到全部被選中的option

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">廣州市</option>
  <option value="shenzhen">深圳市</option>
</select>
$(":selected")  // 找到全部被選中的option

對符合條件的標籤作css樣式：$("div").css("color", "red")

         篩選器方法      

1.下一個元素：指同一級的元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

<div id="1">
    <div>天青色等煙雨
        <div class="sub">江南</div>
        <div>而我在等你</div>
     </div>
</div>
<div id="2">只要你敢不懦弱</div>
<div id="3">憑什麼咱們要錯過</div>
$("#1").next();顯示的是<div id="2">只要你敢不懦弱</div>這個標籤
$("#1").nextAll() 顯示全部和它同級的元素<div id="2">只要你敢不懦弱</div> <div id="3">憑什麼咱們要錯過</div>

2.上一個元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

3.父親元素：
$("#id").parent()  $("#2").parent();父元素是body
$("#id").parents()  // 查找當前元素的全部的父輩元素 找祖先，一直找到html
$("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止。
$(".jk").parentsUntil("#1");
4.兒子和兄弟元素：
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們 #上下都找
  find和filter   

find查找元素：
$("#id").find()// 搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。
$("div").find("p") 等價於$("div p") 找到div標籤中的全部p標籤
$("div").find("span") #r.fn.init(8) [span.sr-only, span.icon-bar,
filter篩選：用於縮小匹配的範圍
$("div").filter(".c1")  // 等價於 $("div.c1") 從結果集中過濾出有c1樣式類的div標籤。找到的時div標籤
$("div").filter(".navbar-header") #r.fn.init [div.navbar-header

             操做標籤         

   樣式類操做   

addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。

<div class="container">
1.$(".container").addClass("item")  <div class="container item ">
2.$(".container").hasClass("item")   #true
將全部p標籤的字體設置爲紅色：
$("p").css("color", "red"); 

菜單操做

<div class="menu">
    <div class="title">菜單一</div>
    <div class="item-list hide">
        <div>內容一</div>
        <div>內容二</div>
        <div>內容三</div>
    </div>
    <div class="title">菜單二</div>
    <div class="item-list hide">
        <div>內容一</div>
        <div>內容二</div>
        <div>內容三</div>
    </div>
    <div class="title">菜單三</div>
    <div class="item-list hide">
        <div>內容一</div>
        <div>內容二</div>
        <div>內容三</div>
    </div>
</div>
<script>
    // 找到全部 class 中有title的div標籤
    $(".title").on("click", function () {
        // 把其它的選項隱藏掉
        // $(this)
        // 找到當前點擊標籤的兄弟標籤  --> 含有title class的兄弟標籤
        $(this).siblings(".title").next().addClass("hide");
        $(this).next().removeClass("hide");
        // 方法二：
         $(".items").addClass("hide");  //批量操做
         $(this).next().removeClass("hide");
        // 當前點擊的標籤 下一個標籤 顯示出來--> 從class移除hide
        // this  --> 當前操做的標籤  --> DOM對象 --> 不能調用jQuery對象
        // $(this)    --> DOM對象用$()包起來就能轉換成jQuery對象,就能調用jQuery的方法
        // $(this).next()  --> 找到了當前點擊標籤的下一個標籤
    })
</script>

      位置    

offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()// 獲取匹配元素相對父元素的偏移
scrollTop()// 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()// 獲取匹配元素相對滾動條左側的偏移
$(".c1").offset(); #{left: 200, top:200}
能夠自定義：$(".c1").offset({left: 400, top:100}); 

    文本操做     

<div class="jer">你好嗎</div>
<span class="jer">我很好</span>
<div class="jer">你怎麼樣</div>

1.HTML代碼：
html()// 取得第一個匹配元素的html內容
$(".jer").html() "你好嗎"
html(val)// 設置全部匹配元素的html內容
$(".jer").html("zhaoguangfei")

<div class="jer">zhaoguangfei</div>
<span class="jer">zhaoguangfei</span>
<div class="jer">zhaoguangfei</div>

2.文本值：
text()// 取得全部匹配元素的內容 
$(".jer").text()  你好嗎我很好你怎麼樣"
text(val)// 設置全部匹配元素的內容
3.val值：用於獲取form表單的值
val()// 取得第一個匹配元素的當前值
val(val)// 設置全部匹配元素的值
val([val1, val2])// 設置checkbox、select的值

<p> #單選框 checked=""默認被選中
<label >性別：
    <input type="radio" name="gender" value="1" checked="">男 #默認被選中
    <input type="radio" name="gender" value="2">女
     <input type="radio" name="gender" value="3">不詳
</label>
</p>
<p>  #多選框 checked=""默認被選中
<label >愛好：
    <input type="checkbox" name="gender" value="basketball">籃球
    <input type="checkbox" name="gender" value="football">足球
    <input type="checkbox" name="gender" value="voallbe">網球
</label>
</p>
<p> #單選下拉框 selected="" 默認被選中
<label >喜歡看的書籍：
    <select name="book" >
        <option value="book1" selected="" >圍城</option>
        <option value="book2">活着</option>
        <option value="book3">大秦帝國</option>
        <option value="book4">平凡的世界</option>
        <option value="book5">穆斯林的葬禮</option>
    </select>

</label>
</p>
<p>  #多選下拉框 selected="" 默認被選中
<label >喜歡看的影視：
    <select name="tv" multiple>
        <option value="1" >唐人街探案</option>
        <option value="2" selected=""  >泰囧</option>
        <option value="3">極限挑戰</option>
        <option value="4">假裝者</option>
        <option value="5">琅琊榜</option>
    </select>
</label>
</p>

1.獲取值：

1.獲取單選框被選中的value值
console.log($('input[type=radio]:checked').val())
2.複選框被選中的value,獲取的是第一個被選中的值
console.log($('input[type=checkbox]:checked').val())

獲取全部選中的值：

var content=$("input[type='checkbox']:checked")
$.each(content,function(){
    console.log($(this).val());
})
basketball
football

獲取全部的值存到列表中：

var value=new Array();
$.each(content,function(){
    value.push(($(this).val()));
})
#["basketball", "football"]

3.下拉列表被選中的值
$("select[name='book'] option:selected").val()
4.下拉列表被選中的值，獲取的是第一個被選中的值
$("select[name='tv] option:selected").val()

2.設置值：

1.設置單選按鈕和多選按鈕被選中項
$('input[type=radio]').val(['112']);
$('input[type=checkbox]').val(['a','b']);
2.設置下拉列表框的選中值，必須使用select
由於option只能設置單個值，當給select標籤設置multiple。
那麼咱們設置多個值,就沒有辦法了，可是使用select設置單個值和多個值均可以
  $('select').val(['3','2'])

       屬性操做     

attr(attrName)// 返回第一個匹配元素的屬性值
attr(attrName, attrValue)// 爲全部匹配元素設置一個屬性值
attr({k1: v1, k2:v2})// 爲全部匹配元素設置多個屬性值
removeAttr()// 從每個匹配的元素中刪除一個屬性

attr():

1.獲取值：attr()設置一個屬性值的時候 只是獲取值
<div class="jer" name="zhao"></div>
$("select").attr('name');  #"zhao"
$("div").attr('class')  #"jer"
2.設置值

1.設置一個值 設置div的class爲box
$('div').attr('class','box')
//2.設置多個值，參數爲對象，鍵值對存儲

$('div').attr({name:'hahaha',class:'happy'})
$("div").attr({name:'haahha',class:['box','zhao']})
#<div class="box,zhao" name="haahha"></div>

removeAttr():

1.刪除單個屬性
$('div').removeAttr('class')
2.刪除多個屬性
$('div').removeAttr('name class');

   jquery中attr和prop的區別   

對於HTML元素自己就帶有的固有屬性(自己就帶有的屬性)，在處理時，使用prop方法。
對於HTML元素咱們本身自定義的DOM屬性，在處理時，使用attr方法。

<a href="#" id="link1"  class="btn" action="delete">刪除</a>

這個例子裏<a>元素的DOM屬性有「href、id,class和action」，很明顯，前三個是固有屬性，然後面一個「action」屬性是咱們本身自定義上去的
<a>元素自己是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時，建議使用attr方法
使用prop方法對自定義屬性取值和設置屬性值時，都會返回undefined值。
像checkbox，radio和select這樣的元素，選中屬性對應「checked」和「selected」，這些也屬於固有屬性，所以須要使用prop方法去操做才能得到正確的結果。

$("#chk1").prop("checked") == false  
$("#chk2").prop("checked") == true  

若是上面使用attr方法，則會出現：

$("#chk1").attr("checked") == undefined  
$("#chk2").attr("checked") == "checked" 

爲了兼容性，咱們在處理checkbox和radio的時候儘可能使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

  文檔處理    

1.添加

1.添加到指定元素內部的後面 父元素.append(子元素)

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
追加某元素，在父元素中添加新的子元素。子元素能夠爲：stirng | element（js對象） | jquery元素

var newtag=document.createElement("span")
newtag.innerText="天青煙雨";
$("[name=jerd]").append(newtag);  #js對象
$('[name=jerd]').append('<li>1233</li>'); #stirng
$('[name=jerd]l').append($('#app')); #jquery元素
若是追加的是jquery對象那麼這些元素將從原位置上消失。簡言之，就是一個移動操做。

2.添加到指定元素內部的前面父元素.prepend(子元素)

$(A).prepend(B)// 把B前置到A 前置添加， 添加到父元素的第一個位置

$(A).prependTo(B)// 把A前置到B 

3.添加到指定元素外部的後面

$(A).after(B)// 把B放到A的後面
$(A).insertAfter(B)// 把A放到B的後面

4.添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
增長.刪除操做

<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>操做</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>金老闆</td>
        <td><input type="button" value="刪除" class="delete"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>景女神</td>
        <td><input type="button" value="刪除" class="delete"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>隔壁老王</td>
        <td><input type="button" value="刪除" class="delete"></td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
    // 點擊添加按鈕添加一條新數據
    // 1. 找到按鈕綁定點擊事件
    $("#add").on("click", function () {
        // 當添加按鈕被點擊以後要作的事兒
        // 1. 建立一個新的tr
        var trEle = document.createElement("tr");
        trEle.innerHTML = "<td>4</td> <td>哪吒</td>";
        // 2. 把建立好的tr追加到tbody裏面
        $("tbody").append(trEle);
    });

    // 點擊每一行的刪除按鈕,把當前行刪除掉
    // 1. 找到每一行的刪除按鈕,綁定點擊事件
    $(".delete").on("click", function () {
        // 當每一行的刪除按鈕被點擊後要作的事兒
        // 1. 刪除當前被點擊的按鈕的這一行
        console.log(this);
        $(this).parent().parent().remove();

    })
</script>

2.修改

replaceWith()和replaceAll() 替換
remove()// 從DOM中刪除全部匹配的元素。
empty()// 刪除匹配的元素集合中全部的子節點。

1.replaceWith()和replaceAll()

 

$(selector).replaceWith(content);
將全部匹配的元素替換成指定的string、js對象、jquery對象。
//將全部的h5標題替換爲a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將全部h5標題標籤替換成id爲app的dom元素
$('h5').replaceWith($('#app'));
替換全部。將全部的h2標籤替換成p標籤。
$('<p>哈哈哈</p>')replaceAll('h2');

 

2.remove()

$(selector).remove(); 
刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）
$(selector).detach();：刪除節點後，事件會保留
var $btn = $('button').detach()
//此時按鈕能追加到ul中,
$('ul').append($btn) 
<input type="button" value="點我就點我">在原來位置消失，但在ul標籤內會出現

3.empty()

清空選中元素中的全部後代節點
//清空掉ul中的子元素，保留ul
$('ul').empty()

   克隆操做    

$(選擇器).clone();
1.clone()：克隆匹配的DOM元素
2.clone(true)：元素以及其全部的事件處理而且選中這些克隆的副本(簡言之，副本具備與真身同樣的事件處理能力)

<button id="b1">屠龍寶刀，點擊就送</button>
<hr>
<button id="b2">屠龍寶刀，點擊就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加參數true，克隆標籤但不克隆標籤帶的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加參數true，克隆標籤而且克隆標籤帶的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>