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

随机推荐

Storm实现数字累加Demo
import java.util.Map; import backtype.storm.Config; import backtype.storm.LocalCluster; import backt ...
使用spring EL表达式+自定义切面封装缓存模块
需求是这样的,业务代码需要使用到缓存功能以减少数据库压力,使用redis来实现,并且需要生成缓存的key由方法的传参拼接而成(貌似也只能这样才能保证同样的select查询可以使用缓存),简单的方式就是 ...
网络游戏程序员须知 UDP vs TCP（转）
本文为作者原创或翻译,转载请注明,不得用于商业用途. 作者:rellikt@gmail.com 首发链接:http://blog.csdn.net/rellikt/archive/2010/08/21 ...
spring boot日志管理配置
spring Boot在所有内部日志中使用Commons Logging,但是默认配置也提供了对常用日志的支持,如:Java Util Logging,Log4J,Log4J2和Logback.每种L ...
JVM-Java8的MetaSpace
Java 8 彻底将永久代 (PermGen) 移除出了 HotSpot JVM,将其原有的数据迁移至 Java Heap 或 Metaspace 为什么取消了永久代而用MetaSpace代替了永久代 ...
如何删除Eclipse里某个工作空间？
很多时候,一个Eclipse中或多或少的都会有那么几个工作空间(workspace),但是久而久之你会发现有些工作空间你觉得不再需要了或者觉得碍眼,怎么办? 其实很简单,方法有两种. 1.打开你的Ec ...
数据库-转换sql语句
文章描述:主要说明转换成SQL语句的过程.----必要信息(数据库名,表名,条件)转换成SQL语句一些界面上数据增删改查的操作往往只需要输入一数据库名,表名,加条件就可以进行数据查询了,在这背后是怎 ...
阿里云域名ssl证书导入aws负载均衡使用
一 .原因由于公司战略需求,需要将阿里云的服务器迁移到aws,在迁移过程中,我们需要使用的是aws的负载均衡,可以在EC2的控制台负载平衡位找到负载均衡.根据业务需求我们使用的是应用程序负载均衡器 ...
编程开发(C/C++&Java&Python&JavaScript&Go&PHP&Ruby&Perl&R&Erlang)
使用Docker快速部署主流编程语言的开发.编译环境及其常用框架,包括C.C++.Java.Python.JavaScript.Go.PHP.Ruby.Perl.R.Erlang等. 在今后采用编程语 ...
Java List 生成树
package com.victop.ibs; import java.util.ArrayList; import java.util.List; import org.apache.commons ...

JQuery 选择器 筛选器