前端学习之jquery

1.   什么是jQuery对象？

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：$(“test”).html();

$("#test").html()

       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

var $variable = jQuery 对象

var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jqueryde基础语法：$(selector).action()

2.寻找元素（选择器和筛选器）

2.1 选择器

2.1.1基本选择器

$("*")     $("#id")     $(".class")     $(".class,p,div")　　

2.1.2 层级选择器

$(".out  div")#后代选择器   $(".out>div")#子代选择器 

$(".out+div") #毗邻选择器（紧邻下一个选择器）   $(".out~div")兄弟元素选择器

2.1.3 基本筛选器

$("li:first")  //第一个li

$("li:last")   //最后一个li

$("li:even")   //挑选下标为偶数的li

$("li:odd")    //挑选下标为基数的li

$("li:eq(4)")  //下标等于4的li

$("li:gt(2)")   //下标大于2的li

$("li:lt(2)")   //下表小于2的li

2.1.4 属性选择器

<div alex="sb">alex</div>

$("[alex='sb']").css("color","green")

2.1.5表单选择器

<input type="text" value="">

$(":text").css("border","2px solid green")

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

2.2 筛选器

2.2.1过滤选择器（重点）

$("ul li").eq(2).css("color","green") //推荐使用

$("ul li").first().css("color","yellow")

console.log($("ul li").hasClass("item"))  //true

2.2.2查找筛选器

 //孩子组

 $(".div1").children(".div2").css("color","red")//children(找子代（儿子层）)

 $(".div1").find("p").css("color","yellow")   //find（找后代（儿子跟孙子层））

//兄弟组（next）

 $(".div2").next(".p2").css("color","red")   //下一个兄弟标签

 $(".div2").nextAll().css("color","yellow")  //找全部兄弟标签

$(".div2").nextUntil("a").css("color","red") //（开区间，取中间部分）

//兄弟组（prev）

$("a").prev(".p2").css("color","red")

$("a").prevAll().css("color","red")

$("a").prevUntil().css("color","green")

//父亲组（parent）

$(".test").parent()  $(".test").parents()  $(".test").parentUntil() 

//所有的兄弟除了自己本身（siblings）

$(".p2").siblings().css("color","green")

3 操作元素（属性）

对于属性操作：attr：操作自定义属性

    prop：操作固有属性

   prop（“属性名”） --------取值

   prop（“属性名”，属性值）  ------赋值

$("").attr();

$("").removeAttr();

$("").prop();

$("").removeProp();

--------------------------CSS类

$("").addClass(class|fn)

$("").removeClass([class|fn])

--------------------------HTML代码/文本/值

$("").html([val|fn])

$("").text([val|fn])

$("").val([val|fn|arr])

---------------------------

$("").css("color","red")

<style>

      .menu{

              height: 500px;

              width: 30%;

              background-color: #e0e0e0;

              float: left;

          }

          .content{

              height: 500px;

              width: 70%;

              background-color: rebeccapurple;

              float: left;

          }

         .title{

             line-height: 50px;

             background-color: #425a66;

             color: forestgreen;}

         .hide{

             display: none;

         }

 </style>

</head>

<body>

<div class="outer">

    <div class="menu">

        <div class="item">

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

            <div class="con">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

        <div class="item">

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

            <div class="con hide">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

          <div class="item">

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

            <div class="con hide">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

    </div>

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

</div>

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

<script>

    function show(self) {

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

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

    }

</script>

</body>

左侧菜单

前端学习之jquery的更多相关文章

  1. 前端学习之jquery/下

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

  2. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

  3. 前端学习之-- Jquery

    Jquery学习笔记 中文参考文档:http://jquery.cuishifeng.cn Jquery是一个包含DOM/BOM/JavaScript的类库引入jquery文件方法:<scrip ...

  4. 前端学习之jquery（二）

    操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...

  5. web前端学习总结--JQuery

    jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器 使用户 ...

  6. 前端学习之三——jquery选择器

    Jquery中的选择器分为几大类:基本过滤选择器,层次选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象选择器和表单对象属相过滤选择器. 1.非基本过滤选择器,一般需 ...

  7. web前端开发学习：jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

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

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

  9. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

随机推荐

  1. centos7上修改主机名

    centos7上修改主机名 2017-10-09   13:45:17 个人原创,转载请注明,否则追究法律责任 1,临时修改: 和centos5,centos6 一样,重启失效 2,永久修改: 命令: ...

  2. 使用axios向后端传递数据，后端接收不到？

    开始使用axios的时候,按照官网的例子请求后端接口,遇到了后端接收不到数据的情况. 翻看了文档也没找到解决方法.先来了解下基本的axios 想要使用axios,需要先安装 npm install a ...

  3. Spring OAuth2 GitHub 自定义登录信息

    # 原因 最近在做一款管理金钱的网站进行自娱自乐,发现没有安全控制岂不是大家都知道我的工资了(一脸黑线)? 最近公司也在搞 Spring OAuth2,当时我没有时间(其实那时候不想搞)就没做,现在回 ...

  4. Redis 学习相关的网站

    Redis 命令参考 http://doc.redisfans.com/ https://redis.io/commands http://www.redis.net.cn Redis教程 http: ...

  5. 9.FileWriter 和 BufferWriter

    FileWriter 和 BufferWriter的使用场景 http://www.cnblogs.com/xjyh/p/4529809.html

  6. C++实现Date日期类

    定义一个Date类,包含三个属性年.月.日 实现了如下功能: 年月日的增加.减少:2017年10月1日加上100个月30天是2025年5月31日 输出某天是星期几:2017年10月1日是星期日 判断某 ...

  7. python全栈开发-Day8 函数基础

    python全栈开发-Day8 函数 一 .引子 1. 为何要用函数之不用函数的问题 #1.代码的组织结构不清晰,可读性差 #2.遇到重复的功能只能重复编写实现代码,代码冗余 #3.功能需要扩展时,需 ...

  8. java 打印近似圆

    只要给定不同半径,圆的大小就会随之发生改变近似圆如图 设半径为r,圆心为(r,r). 由勾股定理 易得y = r -√(2*r*x-x*x) 此处注意x+=2.因为打印窗口上一行2个字节的宽度与一列的 ...

  9. maven库

    1.本地仓库 本地仓库是你本地的一个山寨版,只有你看的到,主要起缓存作用. 当你向仓库请求插件或依赖的时候,会先检查本地仓库里是否有.如果有则直接返回,否则会向远程仓库请求,并做缓存. 本地仓库默认在 ...

  10. 删除日志释放空间最好不要用rm

    目前在维护一些服务器有一个根目录空间经常告警no space left ,切到/var/log 目录下du -sh * 的时候,发现有一个authlog占了12G,然后立马执行了rm authlog: ...