JQuery

找到div標籤並給div標籤設置爲紅色

// 原生js操做
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';

// jQuery操做
$('#d1').css('color','blue');

基礎語法

$(selector).action()

// 樣式演變，本來應該
jQuery();
// 爲了簡化
$();

基本選擇器

id選擇器：

$("#id")

標籤選擇器：

$("tagName")

class選擇器：

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class類的div標籤

全部元素選擇器：

$("*")

組合選擇器：

$("#id, .className, tagName")

層級選擇器：

x和y能夠爲任意選擇器

$("x y");// x的全部後代y（子子孫孫）
$("x > y");// x的全部兒子y（兒子）
$("x + y")// 找到全部緊挨在x後面的y
$("x ~ y")// x以後全部的兄弟y

基本篩選器：

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配全部索引值爲偶數的元素，從 0 開始計數
:odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
:gt(index)// 匹配全部大於給定索引值的元素
:lt(index)// 匹配全部小於給定索引值的元素
:not(元素選擇器)// 移除全部知足not條件的標籤
:has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

例子：

$("div:has(h1)")// 找到全部後代中有h1標籤的div標籤
$("div:has(.c1)")// 找到全部後代中有c1樣式類的div標籤
$("li:not(.c1)")// 找到全部不包含c1樣式類的li標籤
$("li:not(:has(a))")// 找到全部後代中不含a標籤的li標籤

屬性選擇器：

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

例子：

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標籤
$("input[type!='text']");// 取到類型不是text的input標籤

表單篩選器(from表單)：

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

例子：

$(":checkbox")  // 找到全部的checkbox

表單對象屬性:

:enabled
:disabled
:checked
:selected

例子：

找到可用的input標籤

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input標籤

找到被選中的option：

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">廣州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到全部被選中的option

篩選器方法

下一個元素：

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

上一個元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素：

$("#id").parent()
$("#id").parents()  // 查找當前元素的全部的父輩元素
$("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止。

兒子和兄弟元素：

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

查找

搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

$("div").find("p")

等價於$("div p")

篩選

篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的

等價於 $("div.c1")

補充：

.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素

三級菜單展現

$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')

直接操做css屬性

// 兩個參數設置屬性
$('#p1').css('font-size','24px')
// 一個參數獲取屬性
$('#p1').css('font-size')

// 一次設置多個屬性
$('#p1').css({"border":"1px solid black","color":"blue"})

位置操做

// 不加參數獲取位置參數
$(".c3").offset()
// 加參數設置位置參數
$(".c3").offset({top:284,left:400})

// position只能獲取值，不能設置值

// scrollTop獲取當前滾動條偏移量
$('window').scrollTop();
$('window').scrollTop(0);  // 設置滾動條偏移量

尺寸

// 盒子模型測試下列參數
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
// 加參數標籤設置值

文本操做

// text() html() 不加參數獲取值，加參數設置值
// val() 不加參數獲取值，加參數設置值

自定義登錄校驗

<form action="">
  <div>
    <label for="input-name">用戶名</label>
    <input type="text" id="input-name" name="name">
    <span class="error"></span>
  </div>
  <div>
    <label for="input-password">密碼</label>
    <input type="password" id="input-password" name="password">
    <span class="error"></span>
  </div>
  <div>
    <input type="button" id="btn" value="提交">
  </div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () {
    var username = $("#input-name").val();
    var password = $("#input-password").val();

    if (username.length === 0) {
      $("#input-name").siblings(".error").text("用戶名不能爲空");
    }
    if (password.length === 0) {
      $("#input-password").siblings(".error").text("密碼不能爲空");
    }
  })
</script>

<!--js代碼取消默認事件的方式-->
return false

屬性操做

// 獲取文本屬性
$('#d1').attr('s1')  // 獲取屬性值
$('#d1').attr('s1','haha')  // 設置屬性值
$('#d1').attr({'num':50,'taidi':'gay'})  // 設置多個屬性
$('#d1').removeAttr('taidi')  // 刪除一個屬性

// 獲取check與radio標籤的checked屬性
$('#i1').prop('checked')
$('#i1').prop('checked',true)

文檔處理

// 標籤內部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))

// 標籤內部頭部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))

// 標籤外部下面添加元素
$(A).after(B)// 把B放到A的後面
$(A).insertAfter(B)// 把A放到B的後面

// 標籤外部上面添加元素
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

//移除和清空元素
remove()// 從DOM中刪除全部匹配的元素。
empty()// 刪除匹配的元素集合中全部的子節點
// 替換標籤
replaceWith()  // 什麼被什麼替換
replaceAll()  // 拿什麼替換什麼

// 克隆事例
<button id="b2">屠龍寶刀，點擊就送</button>
// clone方法加參數true，克隆標籤而且克隆標籤帶的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);  // true參數
  });

事件

// click事件以上面的克隆案例爲參考

// hover事件
$('p').hover(  // 寫兩個函數一個表示鼠標移進去，另外一個標示鼠標移出來
  function () {
    alert('來啦，老弟')
  },
  function () {
    alert('慢走哦～')
  }
)
// input實時監聽
    $('#i1').on('input',function () {
        console.log($(this).val())
    });

// focus/blur 其餘同理js事件

// 取消標籤默認的事件
return false

$('input').click(function (e) {
        alert(123);
        // return false
        e.preventDefault();
    });


// 事件冒泡
div>p>span  // 三者均綁定點擊事件
$("span").click(function (e) {
        alert("span");
        e.stopPropagation();  // 阻止事件冒泡
    });

// 事件委託
<button>按鈕</button>
<script src="jQuery-3.3.1.js"></script>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>

文檔加載

$(document).ready(function(){
// 在這裏寫你的JS代碼...
})

$(function(){
// 你在這裏寫你的代碼
})

jQuery自帶的動畫效果

// 標籤記得設置高和寬

$('img').hide(5000)
$('img').show(5000)

$('img').slideDown(5000)
$('img').slideUp(5000)

$('img').fadeIn(5000)
$('img').fadeOut(5000)
$('img').fadeTo(5000,0.4)

each()

$.each(array,function(index){
  console.log(array[index])
})

$.each(array,function(){
  console.log(this);
})

// 支持簡寫
$divEles.each(function(){
  console.log(this)  // 標籤對象
})

data()

$("div").data("k",100);//給全部div標籤都保存一個名爲k，值爲100
$("div").data("k");//返回第一個div標籤中保存的"k"的值
$("div").removeData("k");  //移除元素上存放k對應的數據