前端学习之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. python中干掉tornado的连接失败日志

    用了tornado真的是比较舒服,很多事都为你做好了. 但也有不令人满意的地方--对于我这个洁癖来说,自动给我的控制台打印不受我控制的信息是不能忍受的. 连接到一个新的地方,如果失败,tornado会 ...

  2. ArrayList源码解析（JDK1.8）

    package java.util; import sun.misc.SharedSecrets; import java.util.function.Consumer; import java.ut ...

  3. Greetings

    1,Common English Greetings Hey! Hey man! Hey girl! Hi. How's it going? How are you doing? What's up? ...

  4. uuid原理及使用例子

    项目中常用UUID作为唯一标识码 UUID是128位整数(16字节)的全局唯一标识符 由以下几部分的组合: 当前日期和时间(UUID的第一个部分与时间有关,如果你在生成一个UUID之后,过几秒又生成一 ...

  5. flex布局之兼容

    Android 2.3 开始就支持旧版本 display:-webkit-box; 4.4 开始支持标准版本 display: flex; IOS  6.1 开始支持旧版本 display:-webk ...

  6. 开源一套基于vue全家桶的webapp

    一.设计初衷 原本今年就是有一个打算要做一套商业的作品,恰巧目前离职,在找工作的过程中,所以有时间闲下来沉淀对原本的知识进行梳理. 说一个题外话,就是由于博主之前是很早一批使用vue的用户,也就是距今 ...

  7. java中的notify和notifyAll有什么区别？

    先说两个概念:锁池和等待池 锁池:假设线程A已经拥有了某个对象(注意:不是类)的锁,而其它的线程想要调用这个对象的某个synchronized方法(或者synchronized块),由于这些线程在进入 ...

  8. MAVEN打包报错：com.sun.net.ssl.internal.ssl；sun.misc.BASE64Decoder；程序包 javax.crypto不存在处理办法

    以下是pom.xml里面的完整配置,重点是红色的部分,原因是引用的jar是jre下边的,而打包环境用的是jdk下边的jar,所以引用下就OK了.<build> <plugins> ...

  9. 借鉴别人的Oracle 11g安装和卸载图文教程

    Oracle 11g安装 1.解压下载的包,然后进入包内,点击setup.exe开始安装 . 2.出现如下:一般把那个小对勾取消,点击下一步进行, 弹出下图这个后点‘是' 3.下图后,选择创建和配置数 ...

  10. Linux下的/etc/hosts文件

    在Unix系统下面有一个/etc/hosts文件,在我的Mac上,这个文件的内容如下: ## # Host Database # # localhost is used to configure th ...