jquery 元素选择器
id选择器
JQuery 能使用CSS选择器来操作网页中的标签元素。如果想要通过一个id号去查找另一个元素就可以使用下面格式的选择
$('#my_id') 其中my_id表示根据id选择器获取页面中的指定的标签元素,且返回一个唯一的元素。
element元素选择器
$("element")就是元素名称
<body>
<div>1</div>
<div>2</div>
</body>
获取所有div元素的选择器:(修改所有div元素字体的样式)
<script type="text/javascript">
$('div').css("font-weight","bold") ;
</script>
.class选择器
$(".class") 其中.class参数表示元素的css类别(类选择器)名称。
<div class="red">my red </div>
<script type="text/javascript">
var $className = $(".red").attr("class")
</script>
$(“*”) 获取全部的元素
选择器中的参数就一个“*”, 既没有“#” 号,也没有 “.”号。 由于该选择器的特殊性,它常与其他元素组合使用,表示获取其他元素中的全部子元素。
sele1 sele2 seleN 选择器
调用的格式如下:
$("sele1,sele2,seleN") 参数sele1 sele2到seleN为有效选择器,每个选择器之间用","号隔开,它们可以是前天提到的各种类型的选择器
如 $('#id')
常用的几种选择器
选择器 | 描述 |
---|---|
$('*') | 选取所有的元素 |
$(this) | 选取当前的HTML元素 |
$('p.intro') | 选取class为intro的
元素 |
$('p:first') | 选取第一个
元素 |
$('ul li:first') | 选取第一个
|
$('ul li:first-child') | 选取每个ul元素的第一个
|
$('[href]') | 选取带有herf属性的元素 |
$(':button') | 选取所有type=button的元素和元素 |
$('tr:even') | 选取偶数位置的 |
$('tr:odd') | 选取奇数位置的 |
获取UL下li的个数
<ul class="dep_5">
<li></li>
<li></li>
</ul>
获取ul下li的个数:
$('.dep_5 li').length;
层叠选择器
$("form input") 选择所有form元素中的input元素
$("#main >*") 选择id值为main的所有的子元素
$("label+input") 选择所有的label元素的下一个input元素节点,
经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
input的选择器
$("input[name='ssgao']") 选择所name为ssgao的input元素
$("input[name!='ssgao']") 选择所name不是ssgao的input元素
$("input[name^='news']") 选择所有name属性以‘news’开头的input属性
$("input[name$='news']") 选择所有name属性以'news'结尾的input属性
$("input[name*='news']") 选择所有name属性包含'news'的input属性
jquery 操作class
jquery 拥有若干进行css操作的方法
addClass() 向被选元素添加一个或多个类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换
css() 设置或返回样式属性
jquery对css的操作
jquery返回css属性
$('p').css('propertyname');
jquery设置css属性
$('p').css('propertyname','value');
jquery 设置多个css属性
$('p').css('propertyname':'value','propertyname':'value');
jquery 设置背景色
$(selector).css('backgroundImage',"url(bg.jpg)");
var s = "images/"+row+".jpg"; //row表示变量信息
$('body').css('background-image',"url("+s+")");
jquery 元素选择器的更多相关文章
- jquery 元素选择器集合
一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { ...
- jQuery之选择器
jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...
- 从零开始学习jQuery-------jQuery元素选择器(三)
下面我们来介绍一下jQuery元素选择器,在Web开发中我们最常用的操作是获取元素,然后对获取的元素进行一系列的操作,jQuery根据获取页面元素的不同,可以将jQuery选择器分为四大类:基本选择器 ...
- jQuery 各种选择器 $.()用法
jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选 ...
- js jquery css 选择器总结
js jquery css 选择器总结 一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器 ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jQuery选择器总结 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
新年第一编文章 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值 ...
随机推荐
- 虹软人脸识别 arcface2.0 安卓版本
虹软官方网站提供了 AndroidStudio 版本的arcface2.0,我花了 几天的时间整理了一个 ADT版本的源码, 是自己从 官方 2.0 android版本中转换而来的.已经测试了,可 ...
- Qt--信号槽传递自定义结构体参数
自定义结构体参数的信号槽连接 (1) 对于自定义的结构体参数,信号槽无法识别参数,导致信号槽连接不起作用.所以需要注册结构体参数.在结构体中声明结束的地方加上结构体注册. struct DealDet ...
- 第 8 章 容器网络 - 055 - 创建 macvlan 网络
1.创建 macvlan 网络 在 host1 和 host2 中创建 macvlan 网络 mac_net1: docker network create -d macvlan --subnet=1 ...
- OpenGL + VS2015 + Windows10配置
官网下载OpenGL:https://www.opengl.org/resources/libraries/glut/ 解压后得到5个文件:glut.h,glut.dll,glut32.dll,glu ...
- 雷林鹏分享:jQuery EasyUI 窗口 - 创建简单窗口
jQuery EasyUI 窗口 - 创建简单窗口 创建一个窗口(window)非常简单,我们创建一个 DIV 标记: Some Content. 现在运行测试页面,您会看见一个窗口(window)显 ...
- C# FTP上传文件至服务器代码
C# FTP上传文件至服务器代码 /// <summary> /// 上传文件 /// </summary> /// <param name="fileinfo ...
- 20171104xlVBA各人各科进退
Sub 各班个人各科进步幅度() Dim dRank As Object Set dRank = CreateObject("Scripting.Dictionary") Dim ...
- 树分治TLE原因
1.树分治有logn层,如果各层都进行一次memset相当于大小没变,可能TLE: 2.根节点全局变量会变,需要用局部变量记录,还有子树大小. 3.找根的时候的size是当前size,而不是输入数据中 ...
- dsu on tree练习
dsu on tree主要是处理一些有根树子树询问的操作, 作用与点分治和线段树合并类似. 一般无根树询问所有树链信息的直接就点分了, 有根树的话一般用线段树合并或dsu on tree, 线段树合并 ...
- XXE漏洞
原理:XML外部实体注入,简称XXE漏洞,XML数据在传输中数据被修改,服务器执行被恶意插入的代码.当允许引用外部实体时,通过构造恶意内容,就可能导致任意文件读取.系统命令执行.内网端口探测.攻击内网 ...