jquery 所有contenteditable=true的元素_JavaScript學習筆記（三十一） jQuery（上）
技術標籤：jquery 所有contenteditable=true的元素
jQuery
jQuery是一個前端庫，也是一個方法庫他裡面封裝著一些列的方法供我們使用
我們常用的一些方法它裡面都有，我們可以直接拿來使用就行了
jQuery之所以好用，很多人願意使用，是因為他的幾個優點太強大了
優質的選擇器和篩選器
好用的隱式迭代
強大的鏈式程式設計
因為這些東西的出現，很多時候我們要做的事情被 “一行程式碼解決”
接下來我們就來認識一下
jQuery
jQuery 的使用
jQuery官網
官網是全英文的
也沒啥可看的，不過沒事的時候可以看看了解一下
jQuery方法大全中文網
這個網站可以多看看
裡面是
jQuery的方法大全，而且是中文的
我們要使用
jQuery首先要下載一個可以去官網下載，也可以直接百度搜索下載，都可以
然後就是在頁面裡面引入
jQuery.js就行了
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle>head> <body> <script src="./jquery/jquery.js">script> body>html>
然後就可以開始使用了
jQuery向全域性暴露的介面就是jQuery或者$都行
選擇器和篩選器
選擇器和篩選器就是用來幫我們獲取 DOM 元素的
選擇器
jQuery有著相當強大的選擇器
// 按照 id 獲取頁面中的元素const ele = jQuery('#box') const ele = $('#box')-
上面兩個都可以按照 id 來獲取元素
// 按照類名來選擇const eles = jQuery('.a')const eles = $('.a')-
上面就是按照類名來選擇元素，可以獲取到一組元素
const lis = jQuery('li')const lis = $('li')
-
上面就是按照標籤名來獲取元素，可以獲取到一組元素
const eles = jQuery('ul > li')const eles = $('ul > li')-
上面就是按照選擇器來獲取元素，可以獲取到一組元素
特殊選擇器
直接找到第一個
$('li:first') // 找到所有 li 中的第一個直接找到最後一個
$('li:last') // 找到所有 li 中的最後一個直接找到第幾個
$('li:eq(3)') // 找到所有 li 中索引為 3 的那個找到所有奇數個
$('li:odd') // 找到所有 li 中索引為 奇數 的找到所有偶數
$('li:even') // 找到所有 li 中索引為 偶數 的篩選器
jQuery 的篩選器就是在選擇器選擇到一組元素以後
對元素進行篩選，也可以對準確的某一個元素進行判斷和獲取
找到所有元素中的第一個
$('li').first()找到所有元素中的最後一個
$('li').last()找到某一個元素的下一個兄弟元素
$('li:eq(3)').next()找到某一個元素的上一個兄弟元素
$('li:eq(3)').prev()找到某一個元素的後面的所有兄弟元素
$('li:eq(3)').nextAll()找到某一個元素的前面的所有兄弟元素
$('li:eq(3)').prevAll()找到某一個元素的父元素
$('li:eq(3)').parent()找到某一個元素的所有結構父級，一直到 html
$('li:eq(3)').parents()找到一組元素中的某一個
// 在 li 的所有父級裡面找到所有 body 標籤$('li').parents().find('body')// 找到 div 標籤下所有後代元素中所有類名為 box 的元素$('div').find('.box')屬性操作
給一個元素新增某個屬性
// 給 div 元素新增一個 id 屬性，值是 box$('div').prop('id', 'box')// 獲取 div 的 id 屬性console.log($('div').prop('id'))-
prop 這個方法只能新增元素自己本身就有的屬性
如果是新增的自定義屬性，不會顯示在標籤上，但是可以使用
給一個元素新增某個自定義屬性
// 給 div 新增一個 index 屬性，值是 1$('div').attr('index', 1)// 獲取 div 的 index 屬性console.log($('div').attr('index'))移除元素的某一個屬性
// 移除元素自己本身的屬性$('div').removeProp('id')// 移除元素的自定義屬性$('div').removeAttr('index')操作元素的類名
// 判斷某一個元素有沒有某一個 class$('div').hasClass('box') // true 表示該元素有 box 類名，false 表示該元素沒有 box 類名// 給元素新增一個類名$('div').addClass('box2') // 給 div 元素新增一個 box2 類名// 移除元素的類名$('div').removeClass('box') // 移除 div 的 box 類名// 切換元素類名$('div').toggleClass('box3') // 如果元素本身有這個類名就移除，本身沒有就新增操作元素的內容
// 給元素的 innerHTML 賦值$('div').html('hello world')// 獲取元素的 innerHTML$('div').html()// 給元素的 innerText 賦值$('div').text('hello world')// 獲取元素的 innerText$('div').text()// 給元素的 value 賦值$('input').val('admin')// 獲取元素的 value 值$('input').val()操作樣式
jQuery 操作元素的樣式就是一個方法
css
// 給元素設定一個 css 樣式$('div').css('width', '100px')// 獲取元素的某一個樣式$('div').css('width')// 給元素設定一組樣式$('div').css({width: '100px',height: '200px'})
苦逼的日子，有你真好
看見這個分享了嗎，點它