演示-JQuery中伪元素和伪类选择器
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#of").focus();//使元素提前获得焦点,以便捕捉
}) $(function(){
$(":disabled").css("color","red");
console.log("选择被选中(:checked)的元素,其长度为:"+$(":checked").length);
$(":focus").css("background-color","black");
$(":required").css("font-size","20px");
console.log("选择enabled的表单元素,其长度为:"+$(":enabled").length);
console.log("选择不是required的元素,其长度为:"+$(":optional").length);
console.log("选择div中的empty的元素,其长度为:"+$("div :empty").length);
console.log("id为t的第一个子元素的value值是:"+$("#t :first-child").val());
$("li:last-child").css("background-color","red");
$("ul:last-child").css("color","blue");
$("#ull :nth-child(even)").css("color","red");
$("div :nth-of-type(2)").css("color","gray");
$("#ull :nth-child(4)").css("background-color","yellow");
$("#only-type :only-of-type").css("background-color","yellow");
$("#only :only-child").css("color","green");
}
);
</script>
</head>
<body> <div style="border:1px solid;">
<div>
<a id="last" value="123" href="#">haha</a>
<a id="last" value="123" href="#">haha</a>
<p>兴趣:</p>
<p>兴趣:</p>
</div>
<div id="t">
<input type="checkbox" checked="checked" title="aa" value="我是first-child吗?" readonly="true"/>
<input type="text" value="运动" id="of"/>
<input type="checkbox"/>
<input type="text" value="睡觉" disabled="disabled" />
<input type="checkbox"/>
<input type="text" value="读书" required="required"/>
<input type="checkbox"/>电影
</div>
</div>
<ul id="ull">
<li>I</li>
<li>II</li>
<li>III</li>
<li>IV</li>
<li>V</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="only" style="border:1px double"><p>我是唯一元素^_^</p></div>
<div id="only-type" style="border:1px double"><p>我是唯一的p元素^_^</p><a>not only one~</a><br /><a>not only one~</a></div>
</body>
</html>
结果:
演示-JQuery中伪元素和伪类选择器的更多相关文章
- CSS的伪元素和伪类
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-l ...
- CSS伪元素与伪类的区别
伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...
- css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
- Jquery中删除元素方法
empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- css3 伪元素和伪类选择器详解
转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...
- CSS——伪元素与伪类
伪类与伪元素 伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :vi ...
- CSS 基础 例子 伪元素和伪类 & 区别
一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...
- CSS3伪元素、伪类选择器
伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...
- CSS(二)- 选择器 - 伪元素和伪类(思维导图)
伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...
随机推荐
- [svc]samba服务搭建
说实话搞这些很蛋疼, 没啥技术含量. What is Samba? 这个历史悠久了 Since 1992, Samba has provided secure, stable and fast fil ...
- [svc][op]Ubuntu初始化安装-py用机器优化
参考: centos7安装优化 关闭防火墙 ufw disable pip换源 yum install python-pip -y mkdir ~/.pip cat > pip.conf< ...
- IAsyncResult 接口
IAsyncResult 接口由包含可异步操作的方法的类实现.它是启动异步操作的方法的返回类型,如 FileStream.BeginRead,也是结束异步操作的方法的第三个参数的类型,如 FileSt ...
- maven(6)------maven坐标分析
在不使用maven管理项目,直接使用IDE开发项目时,一个web项目中会涉及到很多技术, 比如struts2,hibernate,spring,mybatis等等,这个时候,我们就需要去各大官网下载不 ...
- How it works: Linux audio explained
from: tuxradar.com/content/how-it-works-linux-audio-explained How it works: Linux audio explained Po ...
- [转]编写 android.mk 中 LOCAL_C_INCLUDES 的技巧
看原文请移步:编写 android.mk 中 LOCAL_C_INCLUDES 的技巧 在编写android.mk的过程中,免不了要修改LOCAL_C_INCLUDES来设置头文件的include目录 ...
- Windows server 2012公用网络修改为专用网络
普通环境路径如下: [控制面板]--[系统和安全]--[管理工具]--[本地安全策略]--[网络列表管理器策略]--[网络]--[网络位置],设定之后也可以设定一下[用户权限] 域控环境路径如下: 不 ...
- 多行文字在一个div中上下左右居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Servlet打印HTML页面乱码问题
代码就在下面,最开始我以为是request和response的编码问题,还去搞了一个filter,结果最后发现跟filter半毛钱关系都没有,都是因为没有打印这么一句 out.println(&quo ...
- mysql show full processlist
processlist命令的输出结果显示了有哪些线程在运行,可以帮助识别出有问题的查询语句,两种方式使用这个命令. 1. 进入mysql/bin目录下输入mysqladmin -u -p -h127. ...