jQuery学习之------选择器

a.id选择器

<div id=”test1”></div>

var div1=$(“#test1”);                //同css的写法一样id选择器用#号实现

div1.css(‘color’,’red’);

b.class选择器:

<div class=”test2”></div>

var div2=$(“.test2”);                  //同css的写法一样class选择器用.号实现

div2.css(‘color’,’red’);

c. 元素选择器

搜索指定元素标签名的所有节点,这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持

JavaScript的实现方法

var divs = document.getElementsByTagName(‘div‘);      //获取页面中的所有的div元素

jQuery的实现:

$("div");//对比发现jQuery的选择器功能要比原生的JavaScript简便的多

选择name属性为‘setColor‘的a标签

$("#menu_con a[name=‘setColor‘]").css(‘color‘,‘blue‘);

d. 全选择器(*选择器)

全选择我们早在css中使用过,如:

*{padding:0px;margin:0px}

同样在jQuery和原生JS中全选择也被使用:

js:

var elements1 = document.getElementsByTagName(‘*‘);

jQuery:

var elements2 = $("*");

e.层级选择器

子元素

$(‘div > p‘)      //div下的第一个p元素

后代元素

$(‘div  p‘)       //表示div下的所有p元素

兄弟元素

$(".prev + div")         //选取prev后面的第一个的div兄弟节点

相邻元素

$(".prev ~ div")         //选取prev后面的所有的div兄弟节点

f.基本筛选选择器

g.内容选择器

$(".tag:first a:contains(‘更多‘)").css(‘color‘,‘#C71585‘);

h. jQuery选择器之子元素筛选选择器

$(‘.first-div a:first-child‘)

//查找该div下的所有的父级元素的第一个a标签

$(‘.first-div a:last-child‘)

查找该div下的所有的父级元素的最后一个a标签

$(‘.first-div a:only-child‘)

查找该div下所有父级元素下只有一个a标签的元素

$(".last-div a:nth-child(2)")

//查找class="last-div"下的第二个a元素

$(‘.last-div a:nth-last-child(2)‘)

查找class="last-div"下的倒数第二个a元素

例子:

<div class="left first-div">

<div class="div">

<a>:first-child将被选中</a>

<a>第二个元素</a>

<a>:last-child</a>

</div>

<div class="div">

<a>:first-child将被选中</a>

</div>

<div class="div">

<a>:first-child将被选中</a>

<a>第二个元素</a>

<a>:last-child</a>

</div>

</div>

//查找class="first-div"下的第一个a元素

//针对所有父级下的第一个

$(‘.first-div a:first-child‘).css("color", "#CD00CD");

i.表单元素选择器

<script type="text/javascript">

//查找所有 input, textarea, select 和 button 元素

//:input 选择器基本上选择所有表单控件

$(":input").css("border", "1px groove red");

</script>

<script type="text/javascript">

//匹配所有input元素中类型为text的input元素

$(":text").css("background", "#A2CD5A");

</script>

<script type="text/javascript">

//匹配所有input元素中类型为password的input元素

$(":password").css("background", "yellow");

</script>

<script type="text/javascript">

//匹配所有input元素中的单选按钮,并选中

$(":radio").attr(‘checked‘,‘true‘);

</script>

<script type="text/javascript">

//匹配所有input元素中的复选按钮,并选中

$(":checkbox").attr(‘checked‘,‘true‘);

</script>

<script type="text/javascript">

//匹配所有input元素中的提交的按钮,修改背景颜色

$(":submit").css("background", "#C6E2FF");

</script>

<script type="text/javascript">

//匹配所有input元素中的图像类型的元素,修改背景颜色

$(":image").css("background", "#F4A460");

</script>

<script type="text/javascript">

//匹配所有input元素中类型为按钮的元素

$(":button").css("background", "red");

</script>

<script type="text/javascript">

//匹配所有input元素中类型为file的元素

$(":file").css("background", "#CD1076");

</script>

时间: 2024-10-20 20:04:06

jQuery学习之------选择器的相关文章

JQuery学习笔记-选择器-(一)

选择器的简单使用 <%-- Created by IntelliJ IDEA. User: cxspace Date: 16-8-25 Time: 下午2:29 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html&

JQuery学习笔记-选择器-1

在jQuery中 $()方法等价于jQuery()方法,前者比较常用,是后者的简写.一般只有在$()与其它语言冲突时才会使用jQuery()方法. parent > child选择器的范围,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式:$("parent > child"),child参数获取的元素都是parent选择器的子元素,它们之间通过">"符号来表示一种层次关系. prev + next选择器就可以查找与&

jQuery学习之选择器

jQuery选择器总结:http://www.cnblogs.com/onlys/articles/jQuery.html

jQuery学习- 子选择器与可见性选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>子选择器与可见性选择器</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //出现在其父元

jQuery学习- 内容选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内容选择器</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //利用:contains获

jQuery学习&lt;五&gt; — — 选择器(下)

七.子元素过滤选择器 :nth-child : $("ul li:nth-child(2)") 将所有ul中第二个li作为Dom对象放进jQuery包装集并返回 $("ul li:nth-child(odd)") 将所有ul中第奇数个li(从1开始)元素作为Dom对象放进jQuery包装集并返回,注意这里是从1开始.基本过滤器中eq是从0开始 :first-child : $("ul li:first-child") 将所有ul中的第一个li元素

jQuery学习- 层叠选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层叠选择器</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //基准节点 +空格 +目标

Jquery学习笔记 - 选择器

Jquery选择器与CSS选择器非常相似,CSS选择器提供诸多功能,同时两者在解析上均采用从右向左解析,因为在建立Render Tree时,若采用自左向右解析,没词匹配不成功均需要退回再进行匹配,而反向解析利用排除法,逐步缩小元素候选集,优化了从子元素找父元素的过程,对于大量元素很有效(所以采用通配符很低效) CSS的基础选择器: 群组选择器:selector1, selector2, selector3... 简单选择器:ID" #id ",标签" tag ",类

jquery学习:选择器&amp;dom操作

分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值")  获得与指定id属性值匹配的元素 3.类选择器 *  语法:$(".class的属性值")  获得与指定的class属性值匹配的元素 4.并集选择器: *  语法:$("选择器1,选择器2....")  获得多个选择器选中的所有元素 $(function (){ /