02-jQuery的选择器

我们以前在CSS中学习的选择器有：

今天来学习一下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>

转载于:https://www.cnblogs.com/zsdbk/p/9130506.html

jQuery 的选择器相关推荐

jQuery的选择器（一）
2019独角兽企业重金招聘Python工程师标准>>> jQuery选择器完全继承CSS风格,jQuery 选择器允许对 HTML 元素组或单个元素进行操作. jQuery的选择器包 ...
jQuery css()选择器使用说明
css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...
jQuery 基础选择器/层级选择器/隐式迭代
jQuery 选择器 jQuery 层级选择器隐式迭代(重要) <!DOCTYPE html> <html lang="en"><head>& ...
java与jquery的选择器区别_JQuery选择器
原标题:JQuery选择器声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. JQuery 介绍: 用于搜索H ...
JQuery简介选择器
JQuery简介&选择器文章目录 JQuery简介&选择器一.jquery介绍二.jquery加载三.jquery选择器 1.id选择器 2.类选择器 3.元素选择器 4.全选 ...
第70天：jQuery基本选择器（一）
一.jQuery基本选择器 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 jQuery能做的javascipt都能做到,而javascri ...
jquery下选择器整理
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
[jQuery] 说说看jQuery的选择器有哪些？
[jQuery] 说说看jQuery的选择器有哪些? 1.基本选择器: #id .element ..class .* .selector1... 2.层次选择器: ancestor descenda ...
jQuery学习--选择器的使用
jQuery基本选择器 1. jQuery的ready事件 -> js的onload 2. 选择器的使用 1. jQuery的ready事件 -> js的onload 大多是第一种,匿名函 ...
浅谈jQuery的选择器
jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("A B") 查找A元素下面的所有子节点,包括非直接子节点 $("A>B") ...

jQuery 的选择器

02-jQuery的选择器

1、jQuery 的基本选择器

2、层级选择器

3、基本过滤选择器

4、属性选择器

5.筛选选择器

jQuery 的选择器相关推荐

最新文章

热门文章