jquery簡介
兼容性強,輕量級庫,js的框架,國外的大神寫好我們只要調用就好了,jquery可以把js寫的更加簡單
jquery使用
<script src='jquery-x.x.x.js'></script> 引入文件就行了
jquery語法
$(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');//指定標簽操作還支持多個屬性選擇 $('.test1').css('color','blue');//單指定標簽操作 $('p,#test2').css('color','green');//多標簽操作 </script> </body> </html>
?
2.層級選擇器
$(".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標簽 $('.outer>div').css('color','pink');//大于號表示選擇屬性outer直系div標簽 $('.outer+div').css('color','green');//加號表示屬性outer其下面兄弟div標簽 $('.outer~div').css('color','yellow');//波浪號表示屬性outer其下面所有兄弟div標簽,只找下不招上 </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');//冒號表示只對li的第一個標簽進行處理 // $('.outer1 li:last').css('color','red');//冒號表示只對li的最后一個標簽進行處理 // $('.outer1 li:eq(2)').css('color','green');//冒號表示只對li的第3個進行處理,從0開始 // $('.outer1 li:even').css('color','blue');//冒號表示只對li偶數標簽進行處理 $('.outer1 li:gt(1)').css('color','pink');//冒號表示只對大于第2個li標簽進行處理,從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');//對屬性為test的標簽操作 $('[test="a"]').css('color','red');//對屬性為test='a'的標簽操作 $('[name="test0"] [class="test1"] [class="test3"]').css('color','yellow');//對屬性的標簽操作</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標簽專用,使用冒號加上標簽屬性可以進行操作 </script> </body> </html>
?
jquery篩選器
1.過濾篩選器
$("li").eq(2) ?$("li").first() ? 和之前基本篩選器差不多
$("ul li").hasclass("test") 返回布爾值,查看當前標簽下是否有test屬性
2.查找篩選器
$("div").children(".test") ? ? children()是對其子標簽進行操作,不包括其本身,子標簽下的標簽,還可以對children括號中加限定條件
$("div").find(".test") ? find()是對其子孫標簽進行操作,不包括其本身
?
$(".test").next() ? ? next()是對選擇標簽的下面一個兄弟標簽操作
$(".test").nextAll() ?? nextAll()是對選擇標簽的下面所有兄弟標簽操作
$(".test").nextUntil() nextUntil()是對選擇標簽的下面所有兄弟標簽操作,截止nextUntil括號中填寫的標簽,不包括在內
?
$("div").prev() ? prev()是對選擇標簽的上面一個兄弟標簽操作
$("div").prevAll() ? prevAll()是對選擇標簽的上面所有兄弟標簽操作
$("div").prevUntil() prevUntil()是對選擇標簽的上面所有兄弟標簽操作,截止prevUntil括號中填寫的標簽,不包括在內
?
$(".test").parent() ? parent()是對選擇標簽的父標簽操作,注意對父標簽操作后其子標簽都會受到繼承的影響而改變
$(".test").parents() ? parents()是對選擇標簽的祖輩標簽操作,直到body標簽
$(".test").parentUntil()? parentUntil()是對選擇標簽的祖輩標簽操作,截止括號中填寫的標簽,不包括在內
?
$("div").siblings() siblings()是除自己以外的所有兄弟標簽都會改變
