文档章节

基础选择器

江戸川
 江戸川
发布于 2018/10/20 07:46
字数 1081
阅读 1
收藏 0

注意:本教程参考自网上流传的李兴华老师的jquery开发框架视频,但是苦于没有相应的配套笔记,由我本人做了相应的整理.

本次学习的内容

学习jquery提供的各种选择器的使用,掌握了jquery选择器就相当于掌握了jquery核心。

具体内容

在dom操作里面可以使用getElementById()与getElementsByTagName()两个函数进行元素的选择,但是这两个函数也仅仅只能够进行元素的选择。例如:如果说现在要写根据样式选择?或者说根据属性选择?不可能直接做到,需要进行大量的javascript编程才可以实现这样的功能,而这些操作在jquery里面可以轻松的实现

 

基础选择器

在之前使用过一个”$(id)”这样的操作来找到某一个html元素,但是这样的选择器在jquery里面还有许多,比如下面给出几个基础的选择器使用形式:

范例:根据ID选择元素

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function show() {
				alert($("#msg").val());
			}
		</script>
	</head>
	<body>
		<input type="text" name="msg" id="msg">
		<input type="button" value="显示信息" onclick="show()">
	</body>
</html>

虽然此时可以实现根据id取出指定元素,但是会有一个限制出现,在实际的开发之中,很多的表达参数(name与id属性一致,也就是说如果参数名称是a,那么id也是a)名称上都会带有”.”,依靠“.”来实现简单java类对象属性的自动赋值操作。

范例:有”.”的参数

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function show() {
				alert($("#member\\.msg").val());
			}
		</script>
	</head>
	<body>
		<input type="text" name="member.msg" id="member.msg">
		<input type="button" value="显示信息" onclick="show()">
	</body>
</html>

范例:取得元素对象

       定义一个mldn.css的文件,保存所需要的样式内容

.infocls {
	background: red;
	color: yellow;
	font-weight: bold;
	border: 3px #00ff00 solid;
}
<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/mldn.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("span").attr("class","infocls"); //设置属性
			});
			
		</script>
	</head>
	<body>
		<div>www.mldn.cn -a</div>
		<div>
			<span>www.mldn.cn -b</span>
		</div>
		<span>www.mldn.cn -c</span>
	</body>
</html>

这种操作的形式就好像是直接利用了getElementsByTagName()的函数形式不关心所有的结构层次,只关心元素的名称信息。

根据样式选择元素

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/mldn.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".cls").attr("class","infocls"); //设置属性
			});
			
		</script>
	</head>
	<body>
		<div class="cls">www.mldn.cn -a</div>
		<div>
			<span>www.mldn.cn -b</span>
		</div>
		<span class="cls">www.mldn.cn -c</span>
		<input type="text" value="www.mldn.cn" class="cls">
	</body>
</html>

范例:选择所有元素

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/mldn.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("*").attr("class","infocls"); //设置属性
			});
			
		</script>
	</head>
	<body>
		<div class="cls">www.mldn.cn -a</div>
		<div>
			<span>www.mldn.cn -b</span>
		</div>
		<span class="cls">www.mldn.cn -c</span>
		<input type="text" value="www.mldn.cn" class="cls">
	</body>
</html>

范例:取得多个元素名称的对象

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/mldn.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("input,div").attr("class","infocls"); //设置属性
			});
			
		</script>
	</head>
	<body>
		<div>www.mldn.cn -a</div>
		<div>
			<span>www.mldn.cn -b</span>
		</div>
		<span>www.mldn.cn -c</span>
		<input type="text" value="www.mldn.cn -d">
	</body>
</html>

如果说前面的几个选择器还可以通过正常的dom支持来实现的话,那么根据样式的选择或者是根据元素名称的选择,那么就不能够直接得到支持了,都需要经过编程实现。

在使用基础选择器的过程之中,利用”,”可以分隔多个选择器,但是需要强烈注意一点的是:不要增加无谓的空格。

© 著作权归作者所有

共有 人打赏支持
江戸川
粉丝 0
博文 50
码字总数 19366
作品 0
济南
程序员
私信 提问
可扩展、模块化CSS--基础样式规则(翻译文)

基础样式规则是被应用到元素选择器、派生选择器、子选择器或者伪类,并不包括和选择器。这些样式一般是默认的样式并且被引用到整个项目。 所以,基础样式一般的内容就是默认定义链接的样式,项...

ziven先生
2018/02/04
0
0
【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jiangqq781931404/article/details/50615736 import React, {AppRegistry,Component,StyleSheet,Text,View,Sw......

江清清
2016/01/31
0
0
Hybird App之选择器详解(一)

学习混合app开发,要学会一些基础才能上手。本文主要介绍元素选择器、选择器分组、类选择器 元素选择器 最常见的选择器就是元素选择器,文档的元素就是最基本的选择器 例如: index.html sty...

DWade_Coding
2018/01/01
0
0
CSS基础知识

1.CSS的编写格式 键值对形式的,冒号左边是属性名,右边属性名称 2.CSS的3种书写形式 3.标签选择器 1>.标签选择器 2>.类标签选择器 3>.id标签选择器 4>.群组选择器 5>.选择器组合 6>.后代选择...

Ethan-GOGO
2015/12/17
85
0
Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观的多样性。作一个形象的比喻:对于一个...

爱吃西瓜的番茄酱
2017/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7 下安装 Nginx

1、添加Nginx存储库 要添加CentOS 7 EPEL仓库,请打开终端并使用以下命令 yum install epel-release 2、安装Nginx 现在Nginx存储库已经安装在您的服务器上,使用以下yum命令安装Nginx yum i...

Oo若离oO
36分钟前
0
0
漏洞防御与修复工作

漏洞管理工作是企业安全建设必不可少的一环,在风险管理工作中,漏洞管理能够防患于未然,企业对漏洞管理有着广泛的基础建设和实践经验。但随着攻防技术的发展,传统漏洞管理的安全技术和管理...

linuxprobe16
今天
1
0
MicroPython技术及应用前景

1 Micropython技术是什么? MicroPython极精简高效的实现了Python3语言。它包含Python标准库的一小部分,能在单片机和受限环境中运行。 1.1 MicroPython发展 由剑桥大学的理论物理学家乔治....

bodasisiter
今天
8
0
跟我学Spring Cloud(Finchley版)-13-通用方式使用Hystrix

本节详细讲解使用Hystrix的通用方式。 简介 Hystrix是由Netflix开源的一个延迟和容错库,用于隔离访问远程系统、服务或者第三方库,防止级联失败,从而提升系统的可用性与容错性。Hystrix主要...

周立_ITMuch
今天
3
0
🛠️Hanjst/汉吉斯特更新加JavaScript运行时优化等

这是 Hanjst/汉吉斯特 发布以来的首个主要升级更新版本。这次的主要升级更新的内容包括移除HTML Comments注释行, 优化在 Hanjst include模板文件时的JavaScript运行时环境。 Hanjst 在设计和...

wadelau
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部