老师博客：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>

　　

前端学习-jQuery的更多相关文章

  1. 前端学习——JQuery Ajax使用经验

    0.前言     在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...

  2. 前端学习——jquery操作例子

    一.jquery和DOM函数的转换 . jquery转换成dom $(] . dom转换成jquery var i1=documen.getElementById('#i1')---------> ...

  3. 前端学习☞jquery

    一 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 j ...

  4. 前端学习——使用Ajax方式POST JSON数据包

    0.前言     本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...

  5. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  6. 前端学习之jquery/下

    前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...

  7. 前端学习之jquery

    前端学习之jquery 1.   什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

随机推荐

  1. Socket 网络通信

    Socket 网络通信 1.OSI (Open System Interconnect Reference Model)(开放系统互联参考模型) 从下低到高 :物理层.数据链路层.网络层.传输层.会话 ...

  2. SpringBoot使用WebJars

    本人主要做的是java,但是从第一份工作开始,就一直在做一个写前端又写后端的程序员,相信很多朋友和我一样,不仅要会后台代码,还要懂得很多的前端代码,例如javascipt和css样式. 本文就为大家简 ...

  3. 自己总结的C#编码规范--6.格式篇

    格式 格式的统一使用可以使代码清晰.美观.方便阅读.为了不影响编码效率,在此只作如下规定: 长度 一个文件最好不要超过500行(除IDE自动生成的类). 一个文件必须只有一个命名空间,严禁将多个命名空 ...

  4. Yolov3实战 基于darknet window版

    特此声明:训练过程预先认为你对yolov3神经网络有一定了解的基础上进行. 目录 一.先备齐下面的工具(预先善其事,必先利其器) 二.接下里使用我们的工具编译我们的环境 三. 训练自己的数据集 1.  ...

  5. 语音VLAN异常流量分析

    现象描述:有线网络里,接入层交换机上,凡是被划入语音vlan的端口,都会呈现出相同的流量表现,而且瞬间流量都很大,30 - 40 MB级别,对有线网络的稳定性有很大的影响. 设备型号: IP 电话:A ...

  6. [Python]Flask 源代码分析-config

    flask有一个Config类,含from_object, from_pyfile, from_environ等载入命名空间的方法.载入命名空间的本质是载入一个dict[key]=value的字典. ...

  7. MySQL环境变量的配置

    找到mysql安装的bin目录下复制此路径: 我的电脑右击属性====>>高级系统设置==>>环境变量 找到path 单击编辑将路径粘贴到变量值的最前面,在bin后面加上英文的 ...

  8. FPGA - 认识FPGA

    一.何为FPGA? FPGA,英文全拼:Field-Programmable Gate Array 现场可编程门阵列,它是在PAL.GAL.CPLD等可编程器件的基础上进一步发展的产物.它是作为专用集 ...

  9. 搭建TFS 2015 Build Agent环境(四)

    在通过TFS做DI时,我们经常用到FTP文件上传.TFS发布中,提供了cURL上载文件功能.要想使用此功能,请参考下面步骤启用: 1.登录BuildAgent所在的机器 2.打开cmd(以管理员权限运 ...

  10. 腾讯云CDN python SDK

    腾讯云CDN python SDK 博主在开发时偶尔要用到CDN,感觉适合学生党的应该是腾讯云的CDN了,还提供了每月10G的流量,博主平时学习使用已经足够了. 代码 #coding=utf-8 fr ...