初学jQuery之jQuery选择器
今天我们就谈论一下jquery选择器,它们大致分成了四种选择器!!!!
1.基本选择器(标签，ID,类，并集，交集，全局)
1.0(模板)
<body>
<div id="o" class="myc">我是第一个div</div>
<div><span>我是第二个div</span></div>
</body>
1.1（标签)
//标签
$(function(){
$("div").css("background-color","red");
});
1.2（ID)
$(function(){
$("#o").css("background-color","green");
});
1.3（类）
$(function(){
$(".myc").css("background-color","red");
});
1.4(并集)
$(function(){
$("div,#o").css("background-color","red");
});
1.5（交集）
$(function(){
$("div#o").css("background-color","yellow");
});
1.6(全局)
$(function(){
$("*").css("background-color","blue");
});
2.层次选择器（后代，子，相邻，同辈，）
2.1(后代）
$(function(){
$("div span").css("background-color","green");
});
2.2（子）
$(function(){
$("div>span").css("color","blue");
});
2.3(相邻）
$(function(){
$("div+div").css("color","green");
});
2.4(同辈）
$(function(){
$("div~div").css("color","red");
});
3属性选择器
3.0（模板）
<body>
<a id="12" href="#123">第一个链接</a>
<a id="23" href="@">第二个链接</a>
<a id="34" href="#">第三个链接</a>
</body>
语法：
3.1
[attribute] 选取包含给定属性的元素
$(function(){
$("[href]").css("color","red");
});
3.2 [attribute=value] 选取等于给定属性是某个特定值的元素
$(function(){
$("[href=#]").css("color","red");
});
3.3[attribute!=value] 选取不等于给定属性是某个特定值的元素
$(function(){
$("[href！=#]").css("color","red");
});
3.4[attribute^=value] 选取给定属性是某个特定值开始的元素
$(function(){
$("[href^#).css("color","red");
});
3.5[attribute$=value] 选取特定值是以某些特定值结尾的元素
$(function(){
$("[href$=123]").css("color","red");
});
3.6[attribute*=value] 选取给定属性是包含某些值
$(function(){
$("[href*'2']").css("color","yellow");
});
3.7[selector][selectorN] 选取满足多个条件的复合属性的元素
$(function(){
$("a[href][id=12]").css("background-color","red");
});
4.过滤选择器(规律选择器两大类：基本过滤选择器，可见性过滤选择器)
4.0（模板）
<body>
<h2>你的生命值</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="a">4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
4.1
语法 ：
：first 选取第一个元素
$(function(){
$("li:first").css("background","red");
});
4.2
：last 选取最后一个元素
$(function(){
$("li:last").css("background","blue");
});
4.3
：not（selector） 选取去除所有与定选择器匹配的元素
$(function(){
$("li:not(.a)").css("background","blue");
});
4.4
：even 选取索引是偶数的所有元素（index从0开始）
$(function(){
$("li:even").css("background","blue");
});
4.5
：odd 选取索引是奇数的所有元素（index从0开始）
$(function(){
$("li:odd").css("background","blue");
});
4.6
：eq（index） 选取索引等于index的元素（index从0开始）
$(function(){
$("li:eq(1)").css("background","blue");
});
4.7
：gt（index） 选取索引大于index的元素（index从0开始）
$(function(){
$("li:gt(1)").css("background","blue");
});
4.8
：lt（index） 选取索引小于index的元素（index从0开始）
$(function(){
$("li:lt(1)").css("background","blue");
});
4.9
：header 选取所有标题元素，如h1~h6
$(function(){
$(":header").css("background","blue");
});
4.10
:focus 选取当前获取焦点的元素
$(function(){
$(":focus").css("background","red");
});
5.0（模板）
<body>
<p id="text_hide">点击按钮，我会被隐藏</p>
<p id="text_show">隐藏的我，被显示了，嘿嘿</p>
<input name="shwo" type="button" value="点击显示文字"/>
<input name="hide" type="button" value="点击显示文字"/>
</body>
语法：
5.1
hideen 选取所有隐藏的元素
$(function(){
$("p:hidden").show(100);
});
5.2
visible 选取所有可见的元素
$(function(){
$("p:visible").hide(100);
});
初学jQuery之jQuery选择器的更多相关文章
- JQ001-认识jQuery 和 JQ002-jQuery选择器
JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...
- 【Java EE 学习 32 上】【JQuery】【选择器】
一.JQuery简介 1.JQuery是JavaScript库,封装了很多预定义对象和实用函数. 2.JQury的优势: (1)简洁,其宗旨就是写更少的代码做更多的事. (2)文档声明非常全面:htt ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jQuery-认识JQuery，jQuery选择器
认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- JQuery：JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
- JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
随机推荐
- STM32——timer
原文地址: http://blog.sina.com.cn/s/blog_49cb42490100s6ud.html 1. STM32的Timer简介 STM32中一共有11个定时器,其中 ...
- Jconsole连接远程服务器
本地服务器.win7,安装JDK8 远程服务器:centos6.5 ,tomcat7,java8 配置方法: 1)修改远程服务器的~/tomcat/bin/catalina.sh 文件 在 # -- ...
- 2781: [JSOI2007]文本生成器
2781: [JSOI2007]文本生成器 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 8 Solved: 4[Submit][Status][We ...
- 330. Patching Array
Given a sorted positive integer array nums and an integer n, add/patch elements to the array such th ...
- java中String相等问题
java中判断两个字符串是否相等的问题 判断两个字符串是否相等的问题.在编程中,通常比较两个字符串是否相同的表达式是"==",但在java中不能这么写.在java中,用的是eq ...
- 支持wmv、mpg、mov、avi格式的网页视频播放代码
这2天一直在整金网奖的相关项目,比较头大的就是网页视频播放了,需要考虑各种不同格式的视频,然后找相应的视频播放器. 这次使用了2种方法对这些视频进行处理: 1.使用ckplayer网页视频播放器 ck ...
- abstract、override、new、virtual、sealed使用和示例
abstract修饰类名为抽象类,修饰方法为抽象方法.如果一个类为抽象类,则这个类智能是其他某个类的基类.抽象方法在抽象类中没有函数体.抽象类中的抽象方法是没有方法体的,继承其的子类必须实现抽象类的抽 ...
- Java泛型类定义，与泛型方法的定义使用
package com.srie.testjava; public class TestClassDefine<T, S extends T> { public static void m ...
- html标签大全（2）
http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...
- 实际开发中，实用的辅助iOS开发的工具
就目前所知,开发iOS绝大部分都是用Xcode,除此工具之外,还有几个好用的可以辅助实际开发中遇到的问题,拥有这种辅助开发技能,在工作中,甚至是以后的面试中,都可能会有不小的帮助. 下面推荐三个实用的 ...