什么是jQuery对象

参考：http://jquery.cuishifeng.cn/css.html

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

jquery的基础语法：$(selector).action()

引入：

<script src="jquery.min.js" type="text/javascript"></script>

一.   选择器

1.基本选择器

$("*")           所有
$("#id")        id选择器
$(".class")     类选择器
$("element")   元素选择器
$(".class,p,div")多选择器

2.层级选择器

$(".outer div")  后代选择器
$(".outer>div")  子代选择器
$(".outer+div")  毗邻选择器 找下方紧挨着的兄弟
$(".outer~div")  毗邻选择器 找下方的兄弟

3.基本筛选器（:）

$("li:first")  所有li标签第一个
$("li:eq(2)")  偶数
$("li:even") 
$("li:gt(1)")
$("li:lt(5)")

4.属性选择器 ([])

$('[id="div1"]')   
$('[name="sb"][id="p1"]') 多重属性选择

5.表单选择器

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

二. 筛选器

1.过滤筛选器

$("li").eq(2)  
$("li").first() 
$("li").last()
$("ul li").hasclass("test") 判断布尔值

2.查找筛选器

 $("div").children(".test") 子代选择器 div里面子代类test标签
 $("div").find(".test")     后代选择器 div里面后代类test标签

 $(".test").next()    下一个兄弟元素标签
 $(".test").nextAll() 下面所有的元素标签
 $(".test").nextUntil() 指定范围

 $("div").prev()  上一个兄弟元素标签
 $("div").prevAll()  上面所有兄弟元素标签
 $("div").prevUntil("#end”)   div开始 id标签end结束

 $(".test").parent()  父类标签元素
 $(".test").parents()  
 $(".test").parentUntil("#end") 

 $("div").siblings() 查找所有的兄弟元素

eg.左侧菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>left_menu</title>

    <style>

          .menu{

              height: 500px;

              width: 30%;

              background-color: gainsboro;

              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">菜单一</div>

            <div class="con">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

        <div class="item">

            <div class="title">菜单二</div>

            <div class="con hide">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

        <div class="item">

            <div class="title">菜单三</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>

           $(".item .title").click(function () {

                $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

//                $(this).next().removeClass("hide");

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

           })

</script>

</body>

</html>

参考：https://www.cnblogs.com/yuanchenqi/articles/6070667.html

https://www.cnblogs.com/chichung/p/9703618.html

JQuery 选择器 筛选器的更多相关文章

  1. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  2. jquery选择器筛选器

    jQuery对象 Query 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里 ...

  3. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  4. jQuery 初识 筛选器 属性选择器

    ---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］   jQuery由美国人John Resi ...

  5. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  6. jQuery基本筛选器-表单筛选器-关系筛选器

    一.基本筛选器 :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd ...

  7. jquery查找筛选器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS筛选器简单实例1

    1.通配符 <!--筛选器---通配符实例--> <!--支持IE7+ --> <style type="text/css"> *.all { ...

  9. jQuery中的选择器及筛选器

    1.jQuery的介绍 1.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! 2.它是轻量级的js库,这是其它的js库所不 ...

随机推荐

  1. Java Web入门学习（四）Eclipse与Maven、Tomcat整合配置 （重整版并解决问题）

    Java Web学习(四)Eclipse与Maven整合配置 (重整版) 一.准备工作 1.Tomcat 8.5.15 2.Maven3.5 3.Eclipse Neon.3 Release (4.6 ...

  2. springboot自定义错误页面

    springboot自定义错误页面 1.加入配置: @Bean public EmbeddedServletContainerCustomizer containerCustomizer() { re ...

  3. 在 mac 上利用 homebrew 安装软件

    在mac经常需要安装一些软件,你可以通过app store下载,或者可以通过浏览袭搜索下载.这里介绍通过homebrew安装一些软件,它会自动为你下载一些软件的相关依赖,免去安装的烦恼. 首先我们需要 ...

  4. kendo UI 入门

    Kendo UI 是一套前端开发宽假,意为日本的“剑道” 首先到官方网站下载最新的30天试用版,地址为:http://www.telerik.com/download/kendo-ui 需要简单注册一 ...

  5. mysql2

    第三章   保证数据完整性 3.1 数据完整性的概述:实体完整性  域完整性  引用完整性  用户自定义完整性 3.2 数据完整性的实现   3.2.1 创建非空约束  (在定义列后加上  not n ...

  6. CentOS install搭建SVN服务器

    安装步骤如下: 1.命令:yum install subversion 之后会打印很多消息,显示 Complete! 则完成. 2.查看 svn 版本:svnserve --version 3.创建S ...

  7. [CQOI 2018]破解D-H协议

    Description 题库链接 给出 \(A,B,P,g\) ,\(g\) 是 \(P\) 的原根,求出 \(A\equiv g^a\pmod{P}\) , \(B\equiv g^b\pmod{P ...

  8. [转]VS 2010 : 如何开发和部署Outlook 2010插件(Add-in)

    本文转自:https://www.cnblogs.com/chenxizhang/archive/2010/05/08/1730766.html 概述: 这篇文章,我将通过一个简单的例子,给大家分享一 ...

  9. ado.net中事务的使用

    ADO.Net中也提供了事务处理功能,通过ADO.net事务,可以将多个任务绑定在一起,如果所有的任务成功,就提交事务,如果有一个任务失败,就讲滚回事务 执行ADO.Net事务包含四个步骤,接下来以S ...

  10. 关于PLSQL启动用时较长的问题解决

    问题: 打开登陆界面缓慢. 解决: 1.删除控制面板中的打印机 2.将打印机改为手动并停止启动状态 .