文档章节

基础选择器

江戸川
 江戸川
发布于 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
博文 46
码字总数 17148
作品 0
济南
程序员
私信 提问
可扩展、模块化CSS--基础样式规则(翻译文)

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

ziven先生
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
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

没有更多内容

加载失败,请刷新页面

加载更多

day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
23分钟前
1
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
1
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
2
0
RxJava threading

因为Rx针对异步系统设计,并且Rx也自然支持多线程,所以新的Rx开发人员有时会假设Rx默认是多线程的。在其他任何事情之前,重要的是澄清Rx默认是单线程的。 除非另有说明,否则每次调用onNex...

woshixin
昨天
0
0
Python的安装及文件类型、变量

一、为什么学习python 服务于大数据、人工智能、自动化运维。 简单易学 代码简洁 薪资高 近几年越来越火 二、Python的安装 linux 系统默认安装, CentOS7 默认安装了python2.7 安装ipython y...

枫叶云
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部