前端学习之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. kubernetes实现用户自定义扩缩容

    本文章主要参考walkthrough,aggregation和auth.涉及custom metric API的注册认证以及API server aggregation的相关知识.walkthroug ...

  2. day01的那些事

    代码之道 路漫漫其修远兮,吾将上下而求索

  3. 重读 必须知道的.NET

    1 .public ,对访问成员无限制,属于访问级别最高的权限. protected 访问包含类或者丛类派生类的类. internal  仅限于程序集, protected inernal 访问仅限于 ...

  4. struts2基于注解配置action

    如果使用struts2,就需要配置文件或者注解,关于struts2的配置文件struts.xml非常熟悉,对于注解可能spring使用的比较多.配置文件的繁琐衬托出了注解的简洁方便,一条或者几条注解解 ...

  5. Gradient Descent

    理自Andrew Ng的machine learning课程. 目录: 梯度下降算法 梯度下降算法的直观展示 线性回归中的梯度下降 前提: 线性回归模型 :$h(\theta_0,\theta_1)= ...

  6. ASP.NET MVC编程——缓存

    Web缓存分为服务端缓存和客户端缓存. 1 服务端缓存 1.1请求域内的缓存:HttpContext.Items 类型: HttpContext.Items的类型为IDictionary,且键和值都是 ...

  7. 【Saltstack】Saltstack简单说明

    [Saltstack] Saltstack是一个服务器集中管理中心平台,可以帮助管理员轻松的对若干台服务器进行统一操作.类似的工具还有Ansible,Puppet,func等等.相比于这些工具,sal ...

  8. JVM学习六：JVM之类加载器之双亲委派机制

    前面我们知道类加载有系统自带的3种加载器,也有自定义的加载器,那么这些加载器之间的关系是什么,已经在加载类的时候,谁去加载呢?这节,我们将进行讲解. 一.双亲委派机制 JVM的ClassLoader采 ...

  9. 痛吻过YY寻找到真爱的三非渣本春招之路

    写下这篇文章可能就不是大家乐于见闻的面经了,更多是深入一些面试细节. 前言 我猜拿到了BAT等一线互联网公司Offer的小伙伴或者那些老鸟看到这条标题的时候会不屑一顾,认为YY这种级别的公司是属于二线 ...

  10. NOIP知识点

    基础算法 贪心 枚举 分治 二分 倍增 高精度 模拟 图论 图 最短路(dijkstra.spfa.floyd) 最小生成树(kruskal.prim) 并查集 拓扑排序 二分图染色 Tarjan 树 ...