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库所不 ...
随机推荐
- JAVA对象 向上转型upcasting，向下转型downcasting
1:向上转型 向上转型,就是java多态中的父类引用指向子类对象.但要注意的是 父类引用不可以访问子类新增加的成员(属性和方法) 代码举例: /** * 定义一个父类 */ public class ...
- linux scp 使用方法
scp虽然只有把文见发送到远端和从远端copy文件俩功能,但是常常把俩功能的先写什么给计混了,所以我就用通俗的大白话给总结了下,十分容易记忆,这里给大家分享一下.scp 我们常用的两个功能: (1)把 ...
- C#连接mysql数据库的一个例子和获取本机IP的方法
本例子是一个最初级直接连接mysql数据库的例子,实现了往数据库插入数据的操作: string MyConnectionMysql="Server=localhost;Datbase=xxx ...
- ubuntu垃圾文件清理方法
linux和windows系统不同,linux不会产生无用垃圾文件,但是在升级缓存中,linux不会自动删除这些文件,今天就来说说这些垃圾文件清理方法. 1,非常有用的清理命令:sudo apt-ge ...
- Python字符串的格式化，看这一篇就够了
相信很多人在格式化字符串的时候都用"%s" % v的语法,PEP 3101 提出一种更先进的格式化方法 str.format() 并成为 Python 3 的标准用来替换旧的 %s ...
- Selenuim自动化测试模型
本章内容: 概念介绍 自动化测试模型 一.概念 自动化测试库.框架.工具之间的区别: 库是由代码集合成的一个产品,供程序员调用,面向对象的代码组织形成的库叫类库,面向过程的代码组织形成的库叫函数库. ...
- Java虚拟机监控命令
熟悉java的人都知道jdk的bin目录中有很多小工具,其中就包括用于监视虚拟机和故障处理的工具,今天就来仔细了解下各个工具的用法 jps JVM Process Status Tool,用于显示指定 ...
- https跨域到http问题解决
整体结构 用户--https-->Nginx--http-->Tomcat 页面中包含了iframe,iframe的src也是Https的,但是当frame里面的内容表单提交后tomcat ...
- 【Python】正则表达式纯代码极简教程
<Python3正则表达式>文字版详细教程链接:https://www.cnblogs.com/leejack/p/9189796.html ''' 内容:Python3正则表达式 日期: ...
- spring-session用redis实现session共享实践
什么是spring session? Spring Session provides an API and implementations for managing a user’s session ...