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中伪元素和伪类选择器的更多相关文章

  1. CSS的伪元素和伪类

    css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-l ...

  2. CSS伪元素与伪类的区别

    伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...

  3. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  4. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

  5. CSS和CSS3中的伪元素和伪类（总结）

    好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...

  6. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

  7. CSS——伪元素与伪类

    伪类与伪元素 伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :vi ...

  8. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  9. CSS3伪元素、伪类选择器

    伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...

  10. CSS（二）- 选择器 - 伪元素和伪类（思维导图）

    伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...

随机推荐

  1. uva 10537 Toll! Revisited(优先队列优化dijstra及变形)

    Toll! Revisited 大致题意:有两种节点,一种是大写字母,一种是小写字母. 首先输入m条边.当经过小写字母时须要付一单位的过路费.当经过大写字母时,要付当前財务的1/20做过路费. 问在起 ...

  2. 【Android】10.1 扩展组件库和其他视图--本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-02-18 1.主界面运行截图 2.MainActivity.cs文件中对应的代码 chItems.Add(new Chapter() ...

  3. 【Android】7.8 MyDemos项目的结构和主界面相关代码

    分类:C#.Android.VS2015: 创建日期:2016-02-17 一.简介 上一讲已经说过,系统升级为Win10后,重新创建了一个新的项目:MyDemos,并把前7章合并到了这个项目中,这次 ...

  4. 【Android】4.0 Android项目的基本结构

    分类:C#.Android.VS2015: 创建日期:2016-02-06: 修改日期:2016-02-27 一.简介 第3章虽然通过百度地图应用展示了你可能感兴趣的内容,但是,如果你是一个初学者,一 ...

  5. Winform文件夹图片批量压缩整理修改

    效果图: 窗体设计器生成的代码: namespace ImageCompact { partial class MainForm { /// <summary> /// 必需的设计器变量. ...

  6. Java IP地址字符串与BigInteger的转换, 支持IPv6

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. Extjs 表单提交送给新手

    Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 1.表单ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的btn函数,按照表单的name进行提交.提 ...

  8. LeetCode 新题: Find Minimum in Rotated Sorted Array 解题报告-二分法模板解法

    Find Minimum in Rotated Sorted Array Question Solution Suppose a sorted array is rotated at some piv ...

  9. FreeRTOS 低功耗之待机模式

    STM32F103 如何进入待机模式在 FreeRTOS 系统中,让 STM32 进入待机模式比较容易,调用固件库函数PWR_EnterSTANDBYMode 即可. STM32F103 如何退出待机 ...

  10. [转]关闭word进程

    命名空间 :System.Diagnostics 以前在word的时候,经常碰到word进程产生一大堆,怕关错了,把用户自己打开的word也关闭,一直搞忽悠,今天上网花了10块钱,下了个文件,给我了一 ...