二jquery基本操作(2)

1jquery對樣式的操作(類)

1.1增加/刪除樣式

1.1.1addClass()
1.1.2removeClass()

1.2檢查是否有某個指定的樣式

hasClass()

1.3.增加刪除樣式

toggleClass()

2jquery對屬性的操作

2.1添加(或者返回)/刪除屬性(常用)

attr() 沒有是添加,有的話是返回,有兩個參數(shù),屬性名,屬性值,如果屬性值沒有設(shè)置,就可以得到這個值
removeAttr()
小知識:
圖片的lazingloading:頁面打開后圖片會默認(rèn)請求,為了不讓未顯示到當(dāng)前屏上的圖片去請求,可以用window.scrollY獲取滾動條的位置。當(dāng)沒有滾動到圖片位置時可以移除圖片的src屬性,滾動到相關(guān)位置時再添加上這個圖片,可以減輕服務(wù)器的請求壓力

2.2獲取設(shè)置表單對象的值

val()

2.3以json形式返回data-*屬性值

data()

3jquery對css的操作

$('p').css("屬性名","屬性值");如果沒傳屬性值,意思就是獲取這個屬性的屬性值和attr一樣
注意:使用css設(shè)置font-size時不需要加px,返回的卻是帶px的字符串
此時需要用parseInt();

4jquery對domTree的操作

在Dom樹中找到指定的元素并進(jìn)行操作

4.1向上遍歷

parent() parents()包括爺爺
parentsUtil() closest()

4.2向下遍歷

find() children()

4.3同級遍歷

siblings() next() nextAll() nextUntil() nextUntil() prev() prevAll() prevUntil()

4.4迭代操作(對數(shù)組的遍歷操作)

4.4.1filter()

括號里是函數(shù)function(index,object){}
如果return true;返回匹配對象

4.4.2each()

返回上不會做一些操作

4.4.3map()

如果return true;返回return的內(nèi)容,內(nèi)容匹配,返回內(nèi)容
以下是這三個方法在console.log()里的執(zhí)行情況
html代碼:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript"src="jquery-3.1.0.min.js">
    
  </script>
  <script type="text/javascript">
    
  </script>
 </head>
 <body>
    <div id="" class="nav-list">
        <ul>
            <li class="nav-item">
                <h3><a href="#">研發(fā).編程</a></h3>
                <p><a href="#" id="test">HTML5</a>
                   <a href="#">Java</a>
                </p>
            </li>
            <li class="nav-item">
                <h3><a href="#">研發(fā).編程</a></h3>
                <p><a href="#">HTML5</a>
                   <a href="#">Java</a>
                </p>
            </li>
        </ul>
    </div>
 </body>
</html>

var jqueryList = $('a');
undefined
jqueryList.filter(function(){console.log(arguments)});
[]
jqueryList.filter(function(index,object){return index%2==0;});//返回偶數(shù)對象
[a, a, a]0: a1: a2: alength: 3prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.filter(function(index,object){return $("#test");});
[a, a#test, a, a, a, a]0: a1: a#test2: a3: a4: a5: alength: 6prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.filter(function(index,object){return index%2==1});//返回奇數(shù)對象
[a#test, a, a]0: a#test1: a2: alength: 3prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.filter(function(index,object){return $(object).attr("id")});//有id屬性的對象
[a#test]0: a#testlength: 1prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.map(function(index,object){return $(object).attr("id")});//有id屬性的對象
["test"]
jqueryList.map(function(index,object){return index%2==0});//返回偶數(shù)對象
[true, false, true, false, true, false]0: true1: false2: true3: false4: true5: falselength: 6prevObject: r.fn.init[6]__proto__: Object[0]
jqueryList.map(function(index,object){return $(object).attr("id")||object});//有id屬性的對象
[a, "test", a, a, a, a]
jqueryList.each(function(index,object){return $(object).attr("id")||object});//有id屬性的對象
[a, a#test, a, a, a, a]

本文相關(guān)代碼鏈接:https://github.com/wangyiman/jqueryResource

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

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,143評論 1 92
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,030評論 25 709
  • 我該正視自己的問題,不該逃避,也不能忽視,更不能騙自己。 繼續(xù)這樣狀態(tài),好像會廢的!
    小未之閱讀 196評論 0 0
  • 早上聽全會報告、主旨報告,下午聽專題報告,上、下午各一次茶歇,每天都是這個模式(偷偷告訴你,一般下午茶歇過后我就走...
    楊小賴一點兒也不賴閱讀 245評論 0 0
  • 古訓(xùn):七上八下,逢七可以上,逢八準(zhǔn)備下。俗話說:七軟八硬,否則就會欺軟怕硬。人過三十七,既不要欺負(fù)人,更不能被人欺...
    水中船閱讀 396評論 0 1

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