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>

效果如下:

前端 -----jQuery的选择器的更多相关文章

  1. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  2. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  3. Web前端JQuery面试题(二)

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  4. Web前端JQuery面试题(一)

    Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...

  5. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  6. 前端 jQuery副本

    jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...

  7. 前端——jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  8. 前端-jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  9. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

随机推荐

  1. java 经典程序 100 例

    1,编写程序,判断给定的某个年份是否是闰年.闰年的判断规则如下:( 1)若某个年份能被 4 整除但不能被 100 整除,则是闰年.( 2)若某个年份能被 400 整除,则也是闰年. import ja ...

  2. 08_XML的解析_SAX解析

    [对比SAX解析和DOM解析] * 在使用DOM解析XMl文档时,需要读取整个XML文档,在内存中架构代表整个DOM树的DOcument对象,从而对XML文档进行操作,在这种情况下,如果XML文档特别 ...

  3. ☀【动画】过渡 transition

    CSS3 动画系列3-transition(过渡) √http://www.css88.com/archives/5403 如果丘处机没有路过牛家村,中国将是最发达国家 <!DOCTYPE ht ...

  4. zend framework 1 连接oracle数据库的写法

    1 用Zend_Db_Adapter_Pdo_Oci方式 $config =array( 'host'=>'192.168.5.40', 'port'=>'1521', 'dbname'= ...

  5. [Docker] Docker Machine intro

    List all the docker machine: docker-machine ls Can check 'ip' and 'status': docker-machine ip defaul ...

  6. Redis的集群搭建

    一.集群的搭建 1.准备工作 (1)安装ruby环境 redis集群管理工具redis-trib.rb依赖ruby环境,首先需要安装ruby环境: yum -y install ruby yum -y ...

  7. 新安装的Ubuntu设置root密码

    一.问题描述 新安装的Ubuntu切换到root用户时如果没有设置root用户密码会操作失败.此时需要先设置root用户密码. 二.解决办法 打开终端执行 sudo passwd 命令. 输入设置的密 ...

  8. asp.net正则表达式类的定义

    using System; using System.Collections; using System.Reflection; using System.Reflection.Emit; using ...

  9. C#:安装Windows服务,动态指定服务名及描述(转载)

    来源:http://www.cnblogs.com/Fooo/p/3476675.html Installer.cs public Installer() { InitializeComponent( ...

  10. PHP 扒一扒这些题目都考了哪些知识点

    1.模除 题目: <?php echo -10%3; *结果* -1 分析:其实这道题的知识点是在考模除和正负号的关系,那么我们看一段进阶的代码 <?php echo "10%3 ...