JQuery 选择器筛选器

什么是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 选择器筛选器的更多相关文章

jQuery 选择器筛选器样式操作文本操作属性操作文档处理事件动画效果插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
jquery选择器筛选器
jQuery对象 Query 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里 ...
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
jQuery 初识筛选器属性选择器
---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］ jQuery由美国人John Resi ...
jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
jQuery基本筛选器-表单筛选器-关系筛选器
一.基本筛选器 :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd ...
jquery查找筛选器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS筛选器简单实例1
1.通配符   <style type="text/css"> *.all { ...
jQuery中的选择器及筛选器
1.jQuery的介绍 1.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! 2.它是轻量级的js库,这是其它的js库所不 ...

随机推荐

课程一(Neural Networks and Deep Learning)，第一周（Introduction to Deep Learning）—— 2、10个测验题
1.What does the analogy “AI is the new electricity” refer to? (B) A. Through the “smart grid”, AI i ...
Netty核心概念(5)之Channel
1.前言上一节讲了Netty的第一个关键启动类,启动类所做的一些操作,和服务端的channel固定的handler执行过程,谈到了不管是connect还是bind方法最终都是调用了channel的相 ...
Angularjs集成第三方js插件之Uploadify
有时候需要用一些第三方插件,比如datepicker,slider,或者tree等.以前的做法是直接通过jquery取得某个元素,然后调用某个方法即可.但在angularjs中,不能直接这么写,必须写 ...
SPSS学习系列之SPSS Modeler的功能特性（图文详解）
不多说,直接上干货! Win7/8/10里如何下载并安装最新稳定版本官网IBM SPSS Modeler 18.0 X64(简体中文 / 英文版)(破解永久使用)(图文详解) 我这里,是以SPSS ...
Names and Identifiers
JLS:https://docs.oracle.com/javase/specs/jls/se7/html/jls-6.html#jls-6.2 Not all identifiers in a pr ...
深入理解Java虚拟机：垃圾收集器与内存分配策略
目录 3.2 对象已死吗判断一个对象是否可被回收引用类型 finalize() 回收方法区 3.3. 垃圾收集算法 1.Mark-Sweep(标记-清除)算法 2.Copying(复制)算法 3. ...
koa2开发入门
一.koa2入门 1.创建koa2工程首先,我们创建一个目录hello-koa并作为工程目录用VS Code打开.然后,我们创建app.js,输入以下代码: // 导入koa,和koa 1.x不同, ...
桌面程序开发入门(WinForm with C#)
1.使用Visual Studio 2013创建新项目 2.创建一个主窗体和4个子窗体 3.创建一个数据库.一个表.一个存储过程 4.在配置文件里添加数据库连接字符串 5.真正的编码工作. 第一步:创 ...
linux 权限详解
转载自博客园: http://www.cnblogs.com/123-/p/4189072.html 用户组在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所 ...
Sass进阶之路,之一(基础篇)
Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通 ...

JQuery 选择器 筛选器