02-jQuery的选择器
我们以前在CSS中学习的选择器有:
今天来学习一下jQuery 选择器。
jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。
1、jQuery 的基本选择器
今天来学习一下jQuery 选择器。
jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。
1、jQuery 的基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div></div>
<div id="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//入口函数
$(function(){
//三种方式获取jquery对象
var jqBox1 = $("#box");
var jqBox2 = $(".box");
var jqBox3 = $('div'); //操作标签选择器
jqBox3.css('width', '100');
jqBox3.css('height', 100);
jqBox3.css('background-color', 'red');
jqBox3.css('margin-top', 10); //操作类选择器(隐式迭代,不用一个一个设置)
jqBox2.css("background", "green");
jqBox2.text('哈哈哈') //操作id选择器
jqBox1.css("background", "yellow"); })
</script> </body>
</html>
效果如下:
2、层级选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//获取ul中的li设置为粉色
//后代:儿孙重孙曾孙玄孙....
var jqLi = $("ul li");
jqLi.css("margin", 5);
jqLi.css("background", "pink"); //子代:亲儿子
var jqOtherLi = $("ul>li");
jqOtherLi.css("background", "red");
});
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</ul>
</body>
</html>
3、基本过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
</head>
<body>
<ul>
<li>哈哈哈哈,基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li> </ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript"> $(function(){
//获取第一个 :first ,获取最后一个 :last //奇数
$('li:odd').css('color','red');
//偶数
$('li:even').css('color','green'); //选中索引值为1的元素 *
$('li:eq(1)').css('font-size','30px'); //大于索引值1
$('li:gt(1)').css('font-size','50px'); //小于索引值1
$('li:lt(1)').css('font-size','12px'); }) </script>
</html>
4、属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<!--<p class="p1">我是一个段落</p>-->
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button> </form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $(function(){
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red'); //匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px'); //匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow'); //匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red') }) </script>
</html>
5.筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> //获取第n个元素 数值从0开始
$('span').eq(1).css('color','#FF0000'); //获取第一个元素 :first :last 点语法 :get方法 和set方法
$('span').last().css('color','greenyellow');
$('span').first().css('color','greenyellow'); //查找span标签的父元素(亲的)
$('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'}); //选择所有的兄弟元素(不包括自己)
$('.list').siblings('li').css('color','red'); //查找所有的后代元素
$('div').find('button').css('background','yellow'); //不写参数代表获取所有子元素。
$('ul').children().css("background", "green");
$('ul').children("li").css("margin-top", 10); </script>
</html>
02-jQuery的选择器的更多相关文章
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery(选择器)
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
- jquery相对选择器,又叫context选择器,上下文选择器;find()与children()区别
jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...
- jQuery之选择器
jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...
- 关于jquery ID选择器的一点看法
最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2. $( ...
- jQuery的选择器中的通配符[id^='code'] 【转】
JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...
- jquery下 选择器整理
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
随机推荐
- dede织梦后台页面及功能修改精简操作方法
有很多使用织梦程序的站长往往都不喜欢使用默认的后台,但对于很多小白站长其实也不太懂程序的功能,而且如果显示或者开了过多的功能只会给自己带来困扰,所以小白站长都喜欢一些傻瓜式的后台操作界面.那么,ded ...
- HTML---仿网易新闻登录页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- maven的安装和配置
这篇文章主要是对maven安装说明,以便后续翻阅,本人刚接触,请多见谅! 1.maven官网下载:http://maven.apache.org/download.cgi 2.解压到你想要放的路径里, ...
- Java 四种引用介绍及使用场景
强引用-FinalReference 介绍: 强引用是平常中使用最多的引用,强引用在程序内存不足(OOM)的时候也不会被回收,使用方式: String str = new String("s ...
- Source Code Pro 编程字体
Source Code Pro :是 Adobe 公司号称最佳的编程字体,而且还是开源的 它非常适合用于阅读代码,支持 Linux.Mac OS X 和 Windows 等操作系统,而且无论商业或个人 ...
- 【学习】DataFrame&Series类【pandas】
参考链接:http://blog.csdn.net/yhb315279058/article/details/50226027 DataFrame类: DataFrame有四个重要的属性: index ...
- ---command line edit and histroy of perl cpan shell
https://www.redhat.com/archives/psyche-list/2003-February/msg00494.html perl -MCPAN -e shell > in ...
- Django 重写用户模型
AUTH_USER_MODEL = 'myapp.MyUser' django——重写用户模型 Django内建的User模型可能不适合某些类型的项目.例如,在某些网站上使用邮件地址而不是用户名作为身 ...
- Python学习—爬虫篇之破解ntml登陆问题
之前帮公司爬取过内部的一个问题单网站,要求将每个问题单的下的附件下载下来.一开始的时候我就遇到一个破解登陆验证的大坑...... (╬ ̄皿 ̄)=○ 由于在公司使用的都是内网,代码和网站的描述 ...
- AltiumDesigner印制导线的走向及形状
印制导线的走向及形状.在PCB布线时,相邻层的走线方向成正交结构,应避免将不同的信号线在相邻走成同一方向,以减少不必要的层间窜扰.当PCB布线受到结构限制(如某种背板)难以避免出现平行布线时,特别是当 ...