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