web前端【第十一篇】jQuery属性相关操作
生活随笔
收集整理的這篇文章主要介紹了
web前端【第十一篇】jQuery属性相关操作
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
知識(shí)點(diǎn)總結(jié)?
1、屬性屬性（如果你的選擇器選出了多個(gè)對(duì)象，那么默認(rèn)只會(huì)返回出第一個(gè)屬性）、
attr(屬性名|屬性值)
- 一個(gè)參數(shù)是獲取屬性的值，兩個(gè)參數(shù)是設(shè)置屬性值
- 點(diǎn)擊加載圖片示例
removeAttr(屬性名)
-刪除屬性的值
prop(屬性名|屬性值)
- 屬性的返回值的是布爾類型
- 單選，反選，取消的例子
removeProp(屬性名)
-刪除屬性的值
循環(huán)：each（兩種循環(huán)示例）
- $.each(數(shù)組/對(duì)象, function(i, v){})
- $("div").each(function(){})
CSS類
- addClass 添加類屬性
- removeClass 移除類屬性
- toggleClass 開關(guān)|切換（有就移除，沒有就添加）
燈泡的例子
HTML代碼/文本/值
沒有參數(shù)就是獲取對(duì)應(yīng)的值，
有參數(shù)就設(shè)置對(duì)應(yīng)的值
- .html() 添加html標(biāo)簽 .html("<span>啦啦啦。</span>")
- .text() 添加文本 .text("啦啦啦。")
- .val()
input :一個(gè)參數(shù),獲取的是input框里面的值
checkbox :一個(gè)參數(shù)，獲取的是value的值
select :
單選：獲取值
多選：得到的是一個(gè)數(shù)組，設(shè)置的時(shí)候也要是數(shù)組
一、屬性操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>屬性示例</title> </head> <body> <img src="Bootstrap_i1.png" alt=""> <table border="1"><tbody><tr><td>1</td><td>武俠</td><td>銷售部</td></tr><tr><td>2</td><td>哎哎呀</td><td>財(cái)經(jīng)部</td></tr></tbody> </table> <form action=""><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="radio"><select name="" id=""><option value="">甘肅</option><option value="">蘭州</option><option value="">永登</option><option value="">天水</option><option value="">慶陽</option></select> </form> <script src="jquery-3.2.1.min.js"></script> <script> // $("img").attr("src","Bootstrap_i3.png"); // $("table").attr("aaa"); // $("table").attr("aaa","按時(shí)"); </script> </body> </html>二、示例圖片
1、attr
(1)得到屬性和設(shè)置屬性值
(2)設(shè)置自定義屬性值
2、removeAttr
3、prop
?
? 4、removeProp
?三、jquery中的循環(huán)的兩種方式
// 方式一li = [11,22,33];$.each(li,function (i,v) {console.log(i,v)// 0 11// 1 22// 2 33}) // 方式二$(".c1").each(function (i,v) {console.log(i,v) //這里的v拿到的是標(biāo)簽 // 0 <div class="c1">hah</div> // 1 <div class="c1">年</div> // 2 <div class="c1">娃的</div>console.log(v.innerText) //拿到文本}) </script>退出循環(huán)============================
?
?三、注意的一個(gè)下問題：
解決方法
?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaohema/p/8455514.html
總結(jié)
以上是生活随笔為你收集整理的web前端【第十一篇】jQuery属性相关操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 成都欢乐谷外面可以寄存东西吗
- 下一篇： 浏览器兼容CSS渐进增强 VS 优雅降级