前端学习-jQuery

老师博客：https://www.cnblogs.com/yuanchenqi/articles/6070667.html

day43,day44

jquery 中文文档：http://jquery.cuishifeng.cn/

首先我们得下载一个jquery文件 jquery-3.1.1.js,然后工程引入

<script src="jquery-3.1.1.js"></script>

jquery的基础语法：$(selector).action()

selector 是选择器

jQuery 是什么

<1>jQuery 由 John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择

什么是jQuery对象：
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>
 
<div class="div1">hello world</div>
<script>
    $(".div1").css("color","red")
</script>
</body>
</html>

寻找元素(选择器和筛选器)

3.1 选择器

3.1.1 基本选择器

$("*")                匹配所有标签  
$("#id")              匹配id标签    
$(".class")           匹配类标签
$("element")  　　　　　按照标签名字找，比如${"span"}
$(".class,p,div")     匹配多种类型的标签
 
 
$(selector) 这个拿到的是一个对象，比如有多个同名class标签，拿到的就是一个数组

3.1.2 层级选择器

$(".outer div")    后代选择器（outer 下的 div标签，影响所有的后代）
$(".outer>div")    子代选择器（只影响子代）
$(".outer+div")    紧挨着的兄弟，且是向下的
$(".outer~div")    兄弟标签，且是向下的，不用紧挨着（同级别中间隔了别的标签也可以）

3.1.3 基本筛选器

$("li:first")  
$("li:eq(2)")  
$("li:even") 
$("li:gt(1)")
 
<ul> <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
//    $("li:first").css("color","red")   //第一个
//    $("li:eq(3)").css("color","red")   //这里eq是从0-4
//    $("ul li:even").css("color","red")   //选中所有的基数
    $("ul li:lt(2)").css("color","red")   //index小于2（也就是0,1）
//    $("ul li:gt(1)").css("color","red")   //第二个以后的都选中//    $("ul li").gt(1).css("color","red")   //推荐用这种，上面的所有筛选器都可以用 . 的方式，比如$("ul li").last 等等</script>

3.1.4 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>
 
<!--<div class="div1">hello world</div>-->
<!--<script>-->
    <!--$(".div1").css("color","red")-->
<!--</script>-->
 
<p id="s1" bigbao="xxx">hello world</p>
<p id="s2" bigbao="xxx">hello world</p>
 
<script>
 
//    $('[bigbao="xxx"]').css("color","red") // 自定义属性bigbao=‘xxx’的全部选中
    $("[bigbao='xxx'][id='s1']").css("color","red")   //选中id为s1,且自定义属性bigbao的值是xxx的
 
</script>
 
</body>
</html>

3.1.5 表单选择器

$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>
 
<input type="text">
<input type="submit">
 
<script>
 
$(":text").css("width","300px")
 
</script>
</body>
</html>

查找筛选器*****

$("div").children(".test") #只找到子代
 $("div").find(".test")  #找到后代中所有的 .test
                             
$(".test").next()    下一个标签
$(".test").nextAll()    后面所有的
$(".test").nextUntil(“#end”)  直到id为end的标签结束
                            
$("div").prev()  上一个标签
$("div").prevAll()  上面所有的
$("div").prevUntil("#start")   上面直到id为start的结束
                         
$(".test").parent()  第一层父亲
$(".test").parents()  所有的祖先
$(".test").parentUntil() 所有祖先，逐级向上，直到什么时候结束
 
$("div").siblings() 除了自己，找到其他相邻的

$("ul li").hasclass("test") 判断某一个标签内是不是含有class=test的筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="div1"></div>
 
<script src="jquery-3.1.1.js"></script>
<script>
    console.log($("div").hasClass("div1"))
</script>
</body>
</html>

实例：左侧菜单

实现点击母菜单按钮，罗列子菜单，其他菜单隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 100%;
            height: 100%;
 
        }
        .menu{
            float: left;
            background-color: #2f4050;
            /*background-color: white;*/
            width: 15%;
            height: 1000px;
            font-size: 13px;
            color: whitesmoke;
 
        }
        .content{
            float: left;
            background-color: antiquewhite;
            width: 83%;
            height: 1000px;
            margin-left: 10px;
        }
        .title{
            background-color: yellowgreen;
            line-height: 30px;
            text-align: center;
        }
        .hide{
            display: none;
        }
    </style>
 
</head>
<body>
<script src="jquery-3.1.1.js"></script>
 
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">用户管理</div> <!-- onclick 绑定的函数 传参数 关键字this，点击后直接获取到本次点击的对象，然后传给show函数 -->
            <div class="con">
                <div>查看用户组</div>
                <div>查看用户</div>
            </div>
        </div>
        <div class="item ">
            <div class="title" onclick="show(this)">资产管理</div>
            <div class="con hide">
                <div>查看资产组</div>
                <div>查看资产</div>
                <div>查看机房</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">授权管理</div>
            <div class="con hide">
                <div>Sudo</div>
                <div>系统用户</div>
                <div>授权</div>
            </div>
        </div>
        <div class="item ">
            <div class="title" onclick="show(this)">上传下载</div>
            <div class="con hide">
                <div>文件上传</div>
                <div>文件下载</div>
            </div>
        </div>
    </div>
    <div class="content"></div>
 
    <script>
        function show(self) {  // 这里的self 就是点击的标签对象,我们要取消点击标签的hide,其他标签添加hide属性，我们先找到我们点击标签的parent,然后利用parent的siblings,再找到他们的孩子的con标签
                $(self).next().removeClass("hide"); //
                $(self).parent().siblings().children(".con").addClass("hide"); //这里有hide就不添加，没hide就添加
        }
    </script>
</div>
</body>
</html>