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库所不 ...

随机推荐

Java 并发编程——volatile与synchronized
一.Java并发基础多线程的优点资源利用率更好程序设计在某些情况下更简单程序响应更快这一点可能对于做客户端开发的更加清楚,一般的UI操作都需要开启一个子线程去完成某个任务,否者会容易导致客户 ...
android开发中的 Activity 与 Context 区别与联系
Context 是 Application /Activity /Service的基类 Intent(Context , Class); Activity中的上下文Context是随着活动的产生而产生 ...
centos7下搭建JAVA项目运行环境。 JAVA+MYSQL+TOMCAT+NGINX
环境: centos 7 64位一.配置mysql 5.71.下载mysql源安装包wget http://dev.mysql.com/get/mysql57-community-release-e ...
scanf()函数分析
首先,先来讲一下scanf的读取流程: 从键盘输入的都是字符类型(一系列的字符),scanf()的作用就是将这个字符序列转换成一个或多个指定的类型,并保存到变量中. 从键盘输入的字符序列会先缓存到键盘 ...
Oracle数据库中的分页--rownum
1. 介绍当我们在做查询时,经常会遇到如查询限定行数或分页查询的需求,MySQL中可以使用LIMIT子句完成,在MSSQL中可以使用TOP子句完成,那么在Oracle中,我们如何实现呢? Oracl ...
springboots Helloworld
1.eclipse gradle 插件 HELP----MarketPlace----搜索 buildship点击安装 WINDOW----preferences--gradle 配置安装好的grad ...
C# UML类图及类之间的几种关系
今天晚上看了大话设计模式中的UML类图这一节感觉受益匪浅,好多年不能理解的类之间的关系理解了. 一.UML类图的表示方法 1.类的表示方法 A类用一个矩形框分三层表示,第一层是类名,斜体类名表示抽象类 ...
[javaSE] 位运算符（&|^）
位运算是直接对二进制进行计算左移 << 右移 >> 先把整数换成四个8bit 0000-0000 0000-0000 0000-0000 0000-0000 这个二进制左右移 ...
[javaSE] 数组（查找-二分查找）
前提数组必须是有序的定义最小,最大,中间的角标索引 int min,max,mid; min=0; max=arr.length-1; mid=(min+max)/2; 上面的索引需要变化,使用循环 ...
java8 lambda 表达式
lambada 表达式实质上是一个匿名方法,但该方法并非独立执行,而是用于实现由函数式接口定义的唯一抽象方法使用 lambda 表达式时,会创建实现了函数式接口的一个匿名类实例可以将 lambda ...

JQuery 选择器 筛选器