前端学习之jquery：
jQuery：一个库

Jquery的基础语法: $(selector).action()

基本选择器：

<script>

    //基本选择器

    //$("*")    $("#id")    $("div")    $("p")    $("element")    $(".class")

    //层级选择器

    //$("*")    $("*")    $("*")    $("*")    $("*")

    <!--层级选择器-->

    // $(".outer p").css("color","red")       //后代选择器

    // $(".outer>p").css("color","red")       //子代选择器

    // $(".outer+p").css("color","red")        //紧挨着的？？？

    // $(".outer~p").css("color","red")        //

    //基本筛选器

    $(".li:first").css("color","red")       //

    $(".li:eq(1)").css("color","red")       //选择第几个~~

    $(".li").eq(2).css("color","red")       //效果同上 但方便遍历哦

    $(".li:odd").css("color","red")       //控制奇数偶数行

    $(".li:gt(2)").css("color","red")       //gt lt 大于或者小于xx行执行

    //属性选择器

    $("[alex = 'sb'][id = p1]").css("color","red")  //一个不够选两个属性

    //表单属性选择器

    $("[type = 'text']").css("width","200px")   //

    $(":text").css("width","200px")             //input表单的标签才可以这样哦

    //一堆筛选器

    $(".outer").children.css('color','red')     //son

    $(".outer").find.css('color','red')         //子代中

    $(".li").eq(2).nextAll().css('color','red')

    $(".li").eq(2).nextUntil("#end").css('color','red')     //直到id end

    $(".li").eq(2).prev().css('color','red')

    $(".li").eq(2).prevAll().css('color','red')

    $(".li").eq(2).prevUntil('li:eq(0)').css('color','red')

    console.log($(".outer .inner p").parent().html())   //第一个父亲

    $(".outer .inner p").parent().css('color','red')    //全红！

    $(".outer .inner p").parentsUntil("body").css('color','red')    //直到 全红！

    $(".outer").siblings().css('color','red')            //同胞

</script>

例子 左侧菜单例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .outer{

            height: 1000px;

            width:100%;

        }

        .menu{

            float:left;

            background-color: green;

            width: 30%;

            height: 500px;

        }

        .content{

            float:left;

            background-color: red;

            width: 70%;

            height: 500px;

        }

        .title{

            background-color: burlywood;

            line-height: 40px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class = "outer">

    <div class = "menu">

        <div class = "item">

            <div class = "title" onclick="show(this)">菜单1</div>

            <div class = "con">

                <div>111</div>

                <div>211</div>

                <div>311</div>

            </div>

        </div>

        <div class = "item">

            <div class = "title" onclick="show(this)">菜单2</div>

            <div class = "con hide">

                <div>222</div>

                <div>222</div>

                <div>222</div>

            </div>

        </div>

        <div class = "item">

            <div class = "title" onclick="show(this)">菜单3</div>

            <div class = "con hide">

                <div>333</div>

                <div>333</div>

                <div>333</div>

            </div>

        </div>

    </div>

    <div class = "content"></div>

</div>

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

<script>

    function show(self) {

        $(self).next().removeClass("hide")

        $(self).parent().siblings().children(".con").addClass("hide")

    }

</script>

</body>

</html>

06 Jquery 基础的更多相关文章

  1. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  2. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  3. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  4. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  5. 【jQuery基础学习】09 jQuery与前端（这章很水）

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  6. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  7. 8、网页制作Dreamweaver（jQuery基础:安装、语法）

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  8. jquery 基础汇总---导图篇

    最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...

  9. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

随机推荐

  1. linux自动备份lampp的日志

    要求是:每天23:59自动备份lampp的日志/opt/lampp/logs/access_log 放到这个目录下/tmp/bak 命名格式:access_log.日期 1.新建shell脚本#vi ...

  2. OO第一次博客作业（第一单元总结）

    Q:菜是绿的,鸡是黄的,那菜鸡是什么颜色的? A:红的,强测全WA了,能不红么. 菜不菜的问题先不说了,认真研究一下这次的题目,以及WA的原因吧. 程序结构简析 三次实验的核心结构都是差不多 第一次的 ...

  3. robot framework中的返回值

    1.若想要再setup中有返回值,给后续的操作使用 A)在setup的关键词中需要的返回值,设置为global variable或者suit variable:如下图:但是在编译器中,会报错,但是执行 ...

  4. CodeForce Educational round Div2 C - Vasya and Robot

    http://codeforces.com/contest/1073/problem/C   题意:给你长度为n的字符串,每个字符为L, R, U, D.给你终点位置(x, y).你每次出发的起点为( ...

  5. 【分布式锁】redis实现

    转载:https://www.jianshu.com/p/c970cc710SETNX命令简介 SETNX key value 将key的值设为value,并且仅当key不存在. 若给定的key已经存 ...

  6. KiCad EDA 原理图库的最佳实践

    KiCad EDA 原理图库的最佳实践 由于有 Alias 别名元件,可以不用一个每一个元件都有一个元件. 对每种元件类型建议一个元件库. 因为 Value 和 元件名是一样的,所以元件名要尽可能的简 ...

  7. ORA-00257: archiver error. Connect internal only, until freed……

    今天给客户测 试问题,让客户把数据发过来了.解压缩后一看,他们还是用的oracle 815版本的(他们exp导出时,带了导出日志,从导出日志中看出来是oracle 815版本的),不过没有关系,低版本 ...

  8. Java递归：一个NB自慰的操作

    递归的核心思想:自身调用自身 示例一:求5的阶乘 常规方法: 使用while循环 1 public class Demo01 { 2 3 public static void main(String[ ...

  9. 新手尝试Android studio连接mumu调试程序

    由于Android studio本身虚拟机比较卡在安装as的时候就没有安装.于是自己安装了一款手机模拟器mumu模拟器.我想真机可以调试那么摸仪器应该也可以,于是就从网上找资料,其实连接很简单. 1. ...

  10. Windows下安装Spark环境

    根据博客总结 https://blog.csdn.net/nxw_tsp/article/details/78281533 需要的安装软件可以在网盘下载: 链接:https://pan.baidu.c ...