前端笔记-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>