前端笔记-jquery
jquery簡(jiǎn)介
兼容性強(qiáng),輕量級(jí)庫(kù),js的框架,國(guó)外的大神寫好我們只要調(diào)用就好了,jquery可以把js寫的更加簡(jiǎn)單
jquery使用
<script src='jquery-x.x.x.js'></script> 引入文件就行了
jquery語(yǔ)法
$(selector).action()
jquery選擇器
1.基本選擇器
$("*") ?$("#id") ? $(".class") ?$("element") ?$(".class,p,div")
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.1.min.js"></script> </head> <body> <div name="test0">helloworld</div> <p class="test1">hellop</p> <div id="test2">hello2</div> <script> // css操作 $('*').css('color','red');//css全屬性操作 $('div').css('color','yellow').css('background','pink');//指定標(biāo)簽操作還支持多個(gè)屬性選擇 $('.test1').css('color','blue');//單指定標(biāo)簽操作 $('p,#test2').css('color','green');//多標(biāo)簽操作 </script> </body> </html>?
2.層級(jí)選擇器
$(".outer div") ?$(".outer>div") ? $(".outer+div") ?$(".outer~div")
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.1.min.js"></script> </head> <body> <div class="outer"><div name="test0">1<span class="test1"><span class="test1">hellop</span></span><span>11</span><div id="test2">hello2</div></div> </div> <div>222</div> <script>$('.outer span').css('color','red');//選擇屬性outer里span標(biāo)簽 $('.outer>div').css('color','pink');//大于號(hào)表示選擇屬性outer直系div標(biāo)簽 $('.outer+div').css('color','green');//加號(hào)表示屬性outer其下面兄弟div標(biāo)簽 $('.outer~div').css('color','yellow');//波浪號(hào)表示屬性outer其下面所有兄弟div標(biāo)簽,只找下不招上 </script> </body> </html>?
3.基本篩選器
$("li:first") ?$("li:eq(2)") ?$("li:even") $("li:gt(1)")
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.1.min.js"></script> </head> <body> <ul class="outer1"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li> </ul><script> // $('.outer1 li:first').css('color','red');//冒號(hào)表示只對(duì)li的第一個(gè)標(biāo)簽進(jìn)行處理 // $('.outer1 li:last').css('color','red');//冒號(hào)表示只對(duì)li的最后一個(gè)標(biāo)簽進(jìn)行處理 // $('.outer1 li:eq(2)').css('color','green');//冒號(hào)表示只對(duì)li的第3個(gè)進(jìn)行處理,從0開始 // $('.outer1 li:even').css('color','blue');//冒號(hào)表示只對(duì)li偶數(shù)標(biāo)簽進(jìn)行處理 $('.outer1 li:gt(1)').css('color','pink');//冒號(hào)表示只對(duì)大于第2個(gè)li標(biāo)簽進(jìn)行處理,從0開始,it小于</script> </body> </html>4.屬性選擇器
$('[id="div1"]') ? $('["alex="sb"][id]')
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.1.min.js"></script> </head> <body> <div class="outer" test="a">2222<div name="test0">1<span class="test1"><span class="test3">hellop</span></span><span class="test1">11</span><div id="test2">hello2</div></div> </div> <div>222</div><script>$('[test]').css('color','red');//對(duì)屬性為test的標(biāo)簽操作 $('[test="a"]').css('color','red');//對(duì)屬性為test='a'的標(biāo)簽操作 $('[name="test0"] [class="test1"] [class="test3"]').css('color','yellow');//對(duì)屬性的標(biāo)簽操作</script> </body> </html>?
?
?
5.表單選擇器
?$("[type='text']")----->$(":text")
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.1.min.js"></script> </head> <body> <input type="button" value="1123"> <script>$(':button').css('color','red').css('width','300px');//input標(biāo)簽專用,使用冒號(hào)加上標(biāo)簽屬性可以進(jìn)行操作 </script> </body> </html>?
jquery篩選器
1.過(guò)濾篩選器
$("li").eq(2) ?$("li").first() ? 和之前基本篩選器差不多
$("ul li").hasclass("test") 返回布爾值,查看當(dāng)前標(biāo)簽下是否有test屬性
2.查找篩選器
$("div").children(".test") ? ? children()是對(duì)其子標(biāo)簽進(jìn)行操作,不包括其本身,子標(biāo)簽下的標(biāo)簽,還可以對(duì)children括號(hào)中加限定條件
$("div").find(".test") ? find()是對(duì)其子孫標(biāo)簽進(jìn)行操作,不包括其本身
?
$(".test").next() ? ? next()是對(duì)選擇標(biāo)簽的下面一個(gè)兄弟標(biāo)簽操作
$(".test").nextAll() ?? nextAll()是對(duì)選擇標(biāo)簽的下面所有兄弟標(biāo)簽操作
$(".test").nextUntil() nextUntil()是對(duì)選擇標(biāo)簽的下面所有兄弟標(biāo)簽操作,截止nextUntil括號(hào)中填寫的標(biāo)簽,不包括在內(nèi)
?
$("div").prev() ? prev()是對(duì)選擇標(biāo)簽的上面一個(gè)兄弟標(biāo)簽操作
$("div").prevAll() ? prevAll()是對(duì)選擇標(biāo)簽的上面所有兄弟標(biāo)簽操作
$("div").prevUntil() prevUntil()是對(duì)選擇標(biāo)簽的上面所有兄弟標(biāo)簽操作,截止prevUntil括號(hào)中填寫的標(biāo)簽,不包括在內(nèi)
?
$(".test").parent() ? parent()是對(duì)選擇標(biāo)簽的父標(biāo)簽操作,注意對(duì)父標(biāo)簽操作后其子標(biāo)簽都會(huì)受到繼承的影響而改變
$(".test").parents() ? parents()是對(duì)選擇標(biāo)簽的祖輩標(biāo)簽操作,直到body標(biāo)簽
$(".test").parentUntil()? parentUntil()是對(duì)選擇標(biāo)簽的祖輩標(biāo)簽操作,截止括號(hào)中填寫的標(biāo)簽,不包括在內(nèi)
?
$("div").siblings() siblings()是除自己以外的所有兄弟標(biāo)簽都會(huì)改變
轉(zhuǎn)載于:https://www.cnblogs.com/RainBol/p/10492669.html
總結(jié)
以上是生活随笔為你收集整理的前端笔记-jquery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python调用大漠插件教程03窗口绑定
- 下一篇： osip状态机分析