jQuery: 选择器，筛选器
jQuery 简介
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
官方下载地址：http://jquery.com/download/
选择器
基本选择器: $("*"), $("#id"), $(".class"), $("element"), $(".class,p,div")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>hello div</div>
<div class="div1">hello div1</div>
<p>hello p</p>
<p id="p1">hello p1</p>
<script>
$("*").css("color","red");
$("*").css("color","red").css("background", "yellow");
$("div").css("color","red");
$("#p1").css("color","red");
$(".div1").css("color","red");
$(".div1, #p1").css("color","red");
</script>
</body>
层级选择器: $(".outer div"), $(".outer>div"), $(".outer+div"), $(".outer~div")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>hello div</div>
<div class="div1">hello div1</div>
<p>hello p</p>
<p id="p1">hello p1</p>
<p>hello p4</p>
<dir class="outer">
<div>
<p>hello p2</p>
</div>
<p>hello p3</p>
</dir>
<p>hello p5</p>
<p>hello p6</p>
<script>
$(".outer p").css("color","red"); // outer 下所有的 p 元素
$(".outer>p").css("color","red"); // outer 下的子 p 元素
$(".outer+p").css("color","red"); // outer 下面的一个 p 元素
$(".outer~p").css("color","red"); // outer 下面所有的 p 元素
</script>
</body>
基本筛选器: $("li:first"), $("li:eq(2)"), $("li:even"), $("li:gt(1)")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div">hello div
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<script>
$(".div li:first").css("color","green");
$(".div li:last").css("color","green");
$(".div li:eq(2)").css("color","green");
$(".div li:lt(2)").css("color","green");
$(".div li:gt(1)").css("color","green");
</script>
</body>
属性选择器: $('[id="div1"]'), $('["lily="luck"][id]')
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p lily="good">hello p1</p>
<p lily="luck">hello p2</p>
<script>
$("[lily]").css("color","pink");
$("[lily='luck']").css("color","pink");
</script>
</body>
表单选择器: $("[type='text']")----->$(":text") 注意只适用于input标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="text">
<input type="button">
<script>
$("[type='button']").css("width","200px");
$(":button").css("width","200px");
</script>
</body>
筛选器
查找筛选器: $("div").children(".test"), $("div").find(".test")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div2">hello2
<div class="div3">
hello3
</div>
</div>
<div>hello4</div>
</div>
<script>
$(".div1").children().css('color',"red")
$(".div1").children(".div2").css('color',"red") // 只找儿子辈
$(".div1").find(".div3").css("color","red") // 后辈都找
</script>
</body>
$(".test").next(), $(".test").nextAll(), $(".test").nextUntil()
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div8">hello8</div>
<div class="div2">hello2
<div class="div3">
hello3
</div>
</div>
<div class="div4">hello4</div>
<div class="div5">hello5</div>
<div class="div6">hello6</div>
<div class="div7">hello7</div>
</div>
<script>
$(".div2").next().css("color","red");
$(".div2").nextAll().css("color","red");
$(".div2").nextUntil(".div6").css("color","red"); //不包含 .div6
</script>
</body>
$("div").prev(), $("div").prevAll(), $("div").prevUntil()
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div8">hello8</div>
<div class="div9">hello9</div>
<div class="div10">hello10</div>
<div class="div2">hello2
<div class="div3">
hello3
</div>
</div>
<div class="div4">hello4</div>
<div class="div5">hello5</div>
<div class="div6">hello6</div>
<div class="div7">hello7</div>
</div>
<script>
$(".div2").prev().css("color","red");
$(".div2").prevAll().css("color","red"); // 在同级下起作用
$(".div2").prevUntil(".div8").css("color","red"); // 不包括 .div8
$(".div3").parent().css('color',"red");
$(".div3").parents().css('color',"red");
$(".div3").parentsUntil("body").css('color','red');
$(".div2").siblings().css('color','red');
</script>
</body>
jQuery 对象和DOM对象 相互转化
# DOM 对象： obj = document.getElementById('sel')
# jQuery 对象： $(obj)
# jQuery 对象：$('#'sel)
# DOM 对象： $('#'sel)[0]
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 选择器 筛选器
什么是jQuery对象 参考:http://jquery.cuishifeng.cn/css.html jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQue ...
- 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.通配符 <!--筛选器---通配符实例--> <!--支持IE7+ --> <style type="text/css"> *.all { ...
- jQuery中的选择器及筛选器
1.jQuery的介绍 1.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! 2.它是轻量级的js库,这是其它的js库所不 ...
随机推荐
- centos7换源
cd /etc/yum.repos.d/ #打开源目录 mv /CentOS-Base.repo /CentOS-Base.repo.bak #备份原来的源wget -O /etc/yum.repos ...
- 在Java里>、>>、>>>的含义
在java中: >表示大于,如:if(a>b)...结果是boolean类型 >>表示右移,如:int i=15; i>>2的结果是3,移出的部分将被抛弃. 转为二 ...
- 整理了一周的Python资料，包含各阶段所需网站、项目，收藏了慢慢来
这周应该有不少学校已经开学了,那么同学们都该动起来了,把家里面的那些懒习惯给扔掉了可以. 不知怎么的,最近不少关注我的读者都开始私信我怎么学好python?零基础转行是不是合适,还有希望吗?今年30了 ...
- Set存储元素为啥是唯一的(以HashSet为例源码分析)
本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作,如有错误之处忘不吝批评指正! 说些废话 以前面试的时候会遇到有人问Set 和list的区别 这个很好答,但 ...
- 获取完全一样的数据库，包括表与表之间的外键关系，check，default表结构脚本
今天公司给了一个任务,某一个项目由于数据过大,造成Sql Server 2012 的运行占用很大内存,于是要把之前的不常用的数据分开.要求写个脚本,要求: 1.能获取原来数据库中的表结构,主键一致.表 ...
- [机器学习]梯度提升决策树--GBDT
概述 GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Regression Tree),是一种迭代的决策树算法,该算法由 ...
- 南大算法设计与分析课程复习笔记(4)L4 - QuickSort
一.快速排序 算法导论上关于快速排序有两种写法 第一种,从头到尾遍历,不断将小于基准元素的项移到前面.代码很简介,只需要维护一个交换位置,表示小于基准元素的末尾位置加一 我们看算法导论上的一个例子: ...
- ListView的setOnItemClickListener位置错乱问题
如果你对一个ListView同时addHeaderView(listhHeaderView),也就是头部视图,再加setAdapter,当你加上setOnItemClickListener事件后你会发 ...
- [转]使用js把Unix时间戳转化成普通日期
本文转自:https://blog.csdn.net/maggie_live/article/details/80606846 方法一: var time = 1523141099;var unixT ...
- 【转载】C#工具类：Json操作帮助类
Json序列化和反序列化在程序开发中时常会遇到,在C#中可以使用很多种方法实现对数据的Json序列化和反序列化,封装一个Json操作工具类来简化相应的操作,该工具类中包含以下功能:对象转JSON.数据 ...