前端笔记-jquery
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()是除自己以外的所有兄弟标签都会改变