01.jquery選擇器

jquery選擇器&基本操作

this是一個(gè)js原生對象--dom對象,假如選擇器選擇了一個(gè)集合，而且給集合中的每一個(gè)元素都綁定了事件，比如單擊事件，當(dāng)點(diǎn)擊某個(gè)元素是，this的指代就是當(dāng)前點(diǎn)擊的dom元素，需要使用$(this)轉(zhuǎn)換成jq對象然后進(jìn)行相關(guān)操作

jQuery是一個(gè)快速、簡潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設(shè)計(jì)的宗旨 是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計(jì)模式，優(yōu) 化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互

JavaScript框架：本質(zhì)上就是一些js文件，封裝了js的原生代碼而已

一、使用步驟快速入門

  1. 下載jquery;
    • 目前有三大版本
      1. 1.x: 使用最廣泛，適合一般項(xiàng)目，兼容ie678,官方只做bug，維護(hù)功能不在更新。
      2. 2.x: 很少被使用，不考慮兼容低版本瀏覽器，不兼容ie678，官方只做bug，維護(hù)功能不在更新。
      3. 3.x: 【我就使用這個(gè)！】一般特殊條件下使用，不兼容ie678,很多老的jquery插件不支持這個(gè)版本,功能在添加，bug在修護(hù)。
    • jquery-xxx.js 與 jquery-xxx.min.js的區(qū)別
      1. jquery-xxx.js:開發(fā)版本。給程序員看到，有良好的縮進(jìn)。體積大一些
      2. jquery-xxx.min.js:生產(chǎn)版本。程序中使用，沒有縮進(jìn)。體積小，程序加載更快。
  2. 導(dǎo)入jquery的js文件：一般導(dǎo)入min.js文件
  3. 使用方式
var div1 = $("#div1")
alger(div1.html)

二、Jquery對象和js對象的區(qū)別與轉(zhuǎn)換

js獲取的一些元素可能是一個(gè)集合，需要遍歷操作；而jquery通過選擇器選擇的是一個(gè)對象。這個(gè)對象里面
可能只有一個(gè)元素，也可能有多個(gè)元素；但是可以統(tǒng)一操作它們

<body>
    <div>aaaaa</div>
    <div>aaaaa</div>
</body>
<script>
$(function () {
    var $divs = $("div");
    $divs.text("bbbb");
})
  1. jquery對象在操作時(shí)，更加方便。
  2. jquery對象和js對象的方法不通用，可以將他們進(jìn)行相互的轉(zhuǎn)換，然后調(diào)用對應(yīng)的方法
  3. jquery對象和js對象的相互轉(zhuǎn)換
    1. jq --> js: jq對象[索引] 或者 jq對象.get(索引)
    2. js --> jq: $(js對象) 例如：$(this) 
<body>
    <div>aaaaa</div>
    <div>aaaaa</div>
</body>
<script>
$(function () {
    // jq --> js
    var $divs = $("div");
    $divs.text("bbbb");
    $divs[0].innerText = "aaaa"

    // js --> jq
    var divs = document.getElementsByTagName("div")
    $(divs).html("拉拉啊")
})

三、選擇器：篩選具有相似特征的元素(標(biāo)簽)

1.基本操作

  1. 入口函數(shù)

簡寫形式【推薦】, 后面的案例代碼都是放在這個(gè)里面的

$(function () {
    ...
})

完整形式(了解)

$(document).ready(function () {

})
  • window.onload和$(function)的區(qū)別
    1. window.onload只能定義一次，如果定義多次，后面的將會(huì)將前面的覆蓋掉
    2. $(function)可以定義多次。
  1. 事件綁定
$("#b1").click(function () {
    alert("點(diǎn)擊了我")
})
  1. 樣式控制：css方法
<button id="b1">點(diǎn)擊事件</button>
<button id="b2">點(diǎn)擊事件</button>

$("#b1").css("background-color", "pink")
$("#b2").css({"background-color":"pink","color":"white"})

2.選擇器分類

1.基本選擇器

  1. 標(biāo)簽選擇器(元素選擇器)
    • $("html標(biāo)簽名")：；選擇對應(yīng)的標(biāo)簽
  2. id選擇器
    • $("#id的屬性值")：：選擇該id值對應(yīng)的標(biāo)簽
  3. 類選擇器
    • $(".class類名"): ：選擇具有該類名的元素。
  4. 并集選擇器
    • $("選擇器1,選擇器2..."): 選擇這些集合
  5. 通配符選擇器【很少使用】
    • $("*")

2.層級選擇器

  1. 后代選擇器
    • $("A B"): 選擇A元素內(nèi)部的所有B元素
  2. 子選擇器
    • $("A>B"): 選擇A元素內(nèi)部的所有B子元素
  3. 毗鄰選擇器
    • $("A+P"): 匹配A后面跟著的一個(gè)P,之間不能有其他元素
  4. 兄弟選擇器
    • $("A~P"): 匹配A同級后面所有的P。

3.屬性選擇器

  1. 屬性名稱選擇器
    • $("A[屬性名]")：包含指定屬性的選擇器
  2. 屬性選擇器
    • $("A[屬性名='值']")：包含指定屬性等于特定值的選擇器。
    • $("A[屬性名!='值']"): 不包含指定屬性等于特定值的選擇器。
    • $("A[屬性名^='值']"): 包含指定屬性以特定值開頭的選擇器。
    • $("A[屬性名$='值']"): 包含指定屬性以特定值結(jié)尾的選擇器。
    • $("A[屬性名*='值']"): 匹配給定的屬性是以包含某些值的元素。
  3. 復(fù)合屬性選擇器
    • $("A[屬性名='值'][]..."): 包含多個(gè)屬性條件的選擇器

4.過濾選擇器

一般放在其他過濾器后面，如 $("div:first")

  1. 首元素選擇器
    • :first: 獲取選擇的元素中的第一個(gè)元素
    • $('span').first(): 這種方式也可以
  2. 尾元素選擇器
    • :last: 獲取選擇元素中的最后一個(gè)元素
  3. 非元素選擇器
    • :not(selector) 不包括指定內(nèi)容的元素，
$("div:not(:last)").text("我不是最后一個(gè)")
  1. 偶數(shù)選擇器
    • :even: 偶數(shù)，從0開始計(jì)數(shù)
  2. 奇數(shù)選擇器
    • :odd: 奇數(shù)，從0開始計(jì)數(shù)
  3. 等于索引選擇器
    • :eq(index): 指定索引元素
  4. 大于索引選擇器
    • :gt(index): 大于指定索引的元素
  5. 小于索引選擇器
    • :lt(index): 小于執(zhí)行索引元素
  6. 標(biāo)題選擇器
    • :header: 獲得標(biāo)題(h1~h6)元素，固定寫法
<h1></h1>
<h2></h2>
$(":header").text("我是一個(gè)標(biāo)題")

5.表單過濾選擇器

配合表單元素使用

  1. 可用元素選擇器
    • :enabled：獲得可用元素
  2. 不可用元素選擇器
    • :disabled: 獲得不可用元素
  3. 單選/復(fù)選框選中選擇器
    • :checked: 獲得單選/復(fù)選框中的元素
  4. 下拉框選中選擇器
    • :selected: 獲得下拉框中的元素
  5. 獲取input框type屬性：
    • :radio: 類似的還有【:submit、:file、:text....】
//選擇input的type類型可以直接用:屬性值的方式
$(':radio');

//1.獲取單選框中的value值(選中值標(biāo)記為checked)
$('input[type=radio]:checked').val();

//2.獲取復(fù)選框中的value值 僅僅獲取第一個(gè)值 @@@@@->證明我猜的底層實(shí)現(xiàn)是對的
$('input[type=checkbox]:checked').val();

//3.下拉列表被選中的值(下拉列表中的選中用selected)
$('#timespan option:selected').val();

//設(shè)置單選值
$('input[type=radio]').val('113');

//設(shè)置復(fù)選框
$('input[type=checkbox]').val('b');

//設(shè)置下拉列表 multiple屬性可選
$(':selected').val('3');

//文本框 設(shè)置值
$('input[type=text]').val('222');

四、DOM操作

sq選擇器選擇是一個(gè)集合，如果需要【獲取】(不包含設(shè)置，設(shè)置是統(tǒng)一設(shè)置)某個(gè)元素的屬性或者內(nèi)容，默認(rèn)獲取第一個(gè)(index=0)的元素的內(nèi)容

1.內(nèi)容操作

  1. html(): 獲取/設(shè)置元素的標(biāo)簽體內(nèi)容
    • html(): 獲取
    • html(...): 設(shè)置
  2. text(): 獲取/設(shè)置元素的標(biāo)簽體純文本內(nèi)容
    • text(): 獲取
    • text(...): 設(shè)置
  3. val(): 獲取/設(shè)置元素的value屬性值。
    • val(): 獲取值
    • val(...): 設(shè)置值

2.屬性操作

1.通用屬性操作？【不行就換唄！】

  1. 操作元素自定義屬性
    1. attr(): 獲取/設(shè)置元素的屬性
      • attr("attribute") :獲取屬性值
      • attr("attribute", "value") :設(shè)置屬性值
      • attr({"attr1":"val1","attr2":"val2"...}) :多個(gè)屬性值

      • 注意，attr如果設(shè)置class屬性會(huì)覆蓋，建議用專門的方法設(shè)置class屬性
        2. removeAttr("attribute"):刪除屬性

<input id = "test1"type="text" value="" style="background-color: red">
<input id = "test2" type="text" disabled>

$("#test1").attr("value", "test1")
$("#test2").attr("value", "test2")
$("#test1").removeAttr("style")
$("#test2").removeAttr("disabled")
  1. 操作元素固有的屬性（w3c文檔對應(yīng)標(biāo)簽列出的屬性）
    1. prop()：獲取/設(shè)置元素的屬性,prop()獲取在匹配的元素集中的第一個(gè)元素的屬性值.它是對當(dāng)前匹配到的dom對象設(shè)置屬性
      • prop("attribute") :獲取
      • prop("attribute", "value") :設(shè)置
    2. removeProp("attribute"): 刪除屬性
<input id="test1" type="text">
var test1 = $("#test1").prop("value")
console.log(test1)

2.對class屬性的操作

  1. addClass(): 添加class屬性值,支持同時(shí)添加多個(gè)
  2. removeClass(): 刪除class屬性值,支持同時(shí)刪除多個(gè)
  3. toggleClass(): 切換class屬性
    • toggleClass("one"): 已存在one，則刪除，不存在，則添加,支持同時(shí)切換多個(gè)
  4. hasClass('xxx'): 判斷當(dāng)前對象內(nèi)部是否有響應(yīng)的類名，返回布爾值。
<input id="test1" type="text" class="one">
<input id="test2" type="text" class="one two three">

var test1 = $("#test1")
test1.addClass("two three")
test1.removeClass("two three")
test1.toggleClass("two three")
var test2 = $("#test2")
test2.toggleClass("two three")

3.設(shè)置css屬性

  1. css()
    • 只設(shè)置一個(gè)的簡寫：css("attribute", "values")
    • 多個(gè)： css({"attr1":"value1","attr2":"value2"...})

4.獲得父/子節(jié)點(diǎn)

  1. parent():獲取父節(jié)點(diǎn)
  2. children("選擇器")：獲取子節(jié)點(diǎn)

5.同輩元素選擇

  1. prev(): 查找當(dāng)前元素的前一個(gè)元素【同輩】
  2. prevAll(): 查找當(dāng)前元素之前的所有元素【同輩】
    • prevAll("選擇器")
  3. siblings(): 匹配同輩元素匯總相關(guān)的對象(不包含本身)
    • siblings("選擇器")

案例：鼠標(biāo)移動(dòng)變大變小效果

<style>
    li{width: 100px;height: 30px;margin-top: 5px;}
    li.active{height: 40px;}
</style>
<body>
<ul style="list-style: none;">
    <li></li><li></li><li></li><li></li>
</ul>
</body>
<script>
$(function () {
    $("li:even").css("background","darkcyan");
    $("li:odd").css("background","yellow");
    $("li").hover(function () {
        $(this).addClass("active").siblings("li").removeClass("active")
    })
})
</script>

3.CRUD操作

常規(guī)邏輯方式【推薦使用】

【如果添加的內(nèi)容是當(dāng)前頁面中的某些元素節(jié)點(diǎn)，那么這些元素將從原位置上消失。簡言之，就是一個(gè)移動(dòng)操作】

  1. append(): 父元素將子元素追加到末尾

    • 對象1.append(對象2)：將對象2添加到對象1元素內(nèi)部，在末尾

  2. prepend(): 父元素將子元素追加到開頭

    • 對象1.prepend(對象2)：將對象2添加到對象1內(nèi)部，在開頭

  3. after(): 添加元素到元素后邊

    • 對象1.after(對象2)： 將對象2添加到對象1后面，兄弟關(guān)系

  4. before(): 添加元素到元素前面

    • 對象1.before(對象2): 將對象2添加對象1前面，兄弟關(guān)系

  5. clone(): 復(fù)制操作

    • clone(): 克隆匹配的DOM元素并且選中這些克隆的副本。
    • clone(true): 元素以及其所有的事件處理并且選中這些克隆的副本(簡言之，副本具有與真身一樣的事件處理能力)

  6. replaceWith()： 替換

$('被替換的選擇器').replaceWith('<button>替換成按鈕</button>');
$('<a href="#">替換的超鏈接</a>').replaceAll('被替換的選擇器');

  1. remove(): 移除元素

    • 對象.remove(): 將對象刪除掉

  2. empty(): 清空元素的所有后代元素

    • 對象.empty(): 將對象的后代元素全部清空，但是保留當(dāng)前對象以及其屬性節(jié)點(diǎn)【內(nèi)容全沒了】

  3. detach()移除匹配的節(jié)點(diǎn)元素 刪除節(jié)點(diǎn)后返回節(jié)點(diǎn)數(shù)組 事件會(huì)保留

var $btn = $('button').detach();
$('ul').append($btn);

變態(tài)方式(始終不明白下面這4個(gè)存在的意義？)

  1. appendTo():

    • 對象1.appendTo(對象2)：將對象1添加到對象2內(nèi)部，在末尾

  2. prependTo()

    • 對象1.prepend(對象2)：將對象1添加到對象2內(nèi)部，在開頭

  3. insertAfter()

    • 對象1.insertAfter(對象2)：將對象1添加到對象2后面，兄弟關(guān)系

  4. insertBefore()

    • 對象1.insertBefore(對象2): 將對象1添加到對象2前面，兄弟關(guān)系

五、jquery的位置屬性

  1. position 獲取匹配元素相對于父元素的偏移
$('選擇器').position().left
  1. scrollTop/scrollLeft獲取匹配元素相對于滾動(dòng)條卷起的位置信息(就是滾過的區(qū)域)

scroll實(shí)時(shí)監(jiān)聽功能

$(document).scroll(function() {
    $(document).scrollLeft();
    $(document).scrollTop();
})
  1. offset 獲取匹配元素在當(dāng)前視口的相對偏移 相對于瀏覽器左上角
$("選擇器").offset();
$("選擇器").offset().left;
$("選擇器").offset().top;
$("選擇器").offset().left;
  1. 獲取/設(shè)置元素的寬高
var w = $('選擇器').width();
var h = $('選擇器').height();
$(('選擇器').width(400);
  1. 獲取innerWidth=width + (2 * padding) 不包括邊框 獲取匹配元素的內(nèi)部寬度
$('選擇器').innerWidth()

6.獲取outerWidth=width + 2 * (padding + border) 獲取匹配元素的外部寬度

$('選擇器').outerWidth()
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容