前端学习之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. 移动端HTML5性能优化

    移动端HTML5性能优化 [导读] 得益于智能手机的普及和各行各业互联网+的运动,移动端的市场占比疯狂增长. 2016年1月发布的2015年电商数据显示,2015年中国移动端网购交易额同比暴涨123 ...

  2. cmd 命令大全

    1.windows 系统定时关机 定时关机:shutdown -s -t 300 at 18:30 shutdown -s 取消定时:shutdown -a 注意:300为秒数,在windows co ...

  3. Java代理模式之动态代理

    动态代理类的源码是程序在运行期间由JVM根据反射等机制动态生成的,所以不存在代理类的字节码文件.代理角色和真实角色的联系在程序运行时确定! Java中有两种动态代理,一种是JDK自带的,另一种的CGL ...

  4. Python十题（第2课）

    一.天天向上的力量 C 一年365天,以第1天的能力值为基数,记为1.0.当好好学习时,能力值相比前一天提高N‰:当没有学习时,由于遗忘等原因能力值相比前一天下降N‰.每天努力或放任,一年下来的能力值 ...

  5. 网络通信 --> TCP三次握手和四次挥手

    TCP三次握手和四次挥手 建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 一.TCP报文格式 如下图: (1)序号:Seq序号,占32位,用来标识从TCP源端向目的端发 ...

  6. 跟着大神学zookeeper分布式锁实现-----来自Ruthless

    前几天分享了@Ruthless大神的Redis锁,发现和大家都学习了很多东西.因为分布式锁里面,最好的实现是zookeeper的分布式锁.所以在这里把实现方式和大家分享一下. zookeeper分布式 ...

  7. 使用Java编译思想

    1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本 2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文本 ...

  8. linux scp 命令

    scp 命令 scp 命令 意思是 secure copy 即安全拷贝,可以把它看做是 cp 命令的高级版,可以跨主机拷贝. 经常用来在局域网内不同主机之间分享文件,或者在本机与远程主机中分享文件. ...

  9. RESTFul API设计指南及使用说明

    RESTFul API设计指南及使用说明 一. 协议 API与用户的通信协议,使用HTTP协议. 二. 域名 应尽量将API部署在专用域名之下(http://api.example.com) 也可以将 ...

  10. java通过数据库连接池链接oracle

    开发工具:Eclipse J2EE 3.6 运行环境:jdk1.6 部署环境:Tomcat7 数据库连接池用的是dbcp,网上download下来的三个jar包. 把数据库连接池包和jdbc的包放到t ...