怎样更尖锐的知道种种选拔器,强大的伪接纳器

CSS之旅(3):强大的伪接纳器

2015/05/08 · CSS ·
CSS,
伪选取器

初稿出处:
一线码农   

说到伪选拔器,真的让自家体会到了CSS的但是强大,强大到自己一般都不认识CSS了,有点C#
6.0中一些语法糖带给大家的震动。。。首先我们得以在VS里面提前预览一下。

亚洲必赢官网 1

可以见到,上边的伪类有广大广大,多的让自身眼都快瞎了。。。上面就挑一些实用性相比较强的说一说。

一  :nth-child 伪拔取器

我们领略在jquery中有一种选择器叫做“子类选拔器”,对应的有:nth-child,:first-child,:last-child,:only-child,那回在CSS中一致

可以办到,可以说肯定程度上解决了jquery的压力,下面简单举个例证。

XHTML

<html xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> ul
li:nth-child(1) { color: red; } </style> </head>
<body> <ul> <li>1</li> <li>2</li>
<li>3</li> <li>4</li> <li>5</li>
<li>6</li> </ul> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        ul li:nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

亚洲必赢官网 2

可以看看,当我灌的是:nth-child(1)的时候,ul的首个li的color已经化为red了,要是复杂一点的话,可以将1改成n,浏览器在解析css的伪类

采用器的时候,内部应该会调用相应的情势来分析到对应dom的节点,首先要明白n是从0,步长为1的递增,这几个和jquery的nth-child类似,没

怎么样好说的,然后我们品尝下:first-child 和 last-child。

XHTML

<html xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> ul
li:first-child { color: red; font-weight:800; } ul li:last-child {
color: blue; font-weight: 800; } </style> </head>
<body> <ul> <li>1</li> <li>2</li>
<li>3</li> <li>4</li> <li>5</li>
<li>6</li> </ul> </body> </html>

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        ul li:first-child {
            color: red;
            font-weight:800;
        }
 
        ul li:last-child {
            color: blue;
            font-weight: 800;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

亚洲必赢官网 3

二 :checked,:unchecked,:disabled,:enabled

平等在jquery中,有一组选用器叫做“表单对象属性“,大家可以看看jquery的在线文档。

亚洲必赢官网 4

同样大家很心潮澎湃的发现,在css中也设有这么些属性。。。是否早先有点醉了。。。如故先睹为快。

  1. disabled,enabled

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> input[type=’text’]:enabled { border: 1px solid
red; } input[type=’text’]:disabled { border: 1px solid blue; }
</style> </head> <body> <form> <input
type=”text” disabled=”disabled” /> <input type=”text”/>
</form> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        input[type=’text’]:enabled {
            border: 1px solid red;
        }
 
            input[type=’text’]:disabled {
                border: 1px solid blue;
            }
    </style>
 
</head>
<body>
    <form>
        <input type="text" disabled="disabled" />
        <input type="text"/>
    </form>
</body>
</html>

亚洲必赢官网 5

  1.  checked,unchecked

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> form input[type=”radio”]:first-child:checked {
margin-left: 205px; } </style> </head> <body>
<form> <input class=”test” type=”radio” value=”女”
/><span>女</span><br/> <input class=”test”
type=”radio” value=”男” /><span>男</span> </form>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        form input[type="radio"]:first-child:checked {
            margin-left: 205px;
        }
    </style>
 
</head>
<body>
    <form>
        <input class="test" type="radio" value="女" /><span>女</span><br/>
        <input class="test" type="radio" value="男" /><span>男</span>
 
    </form>
</body>
</html>

亚洲必赢官网 6

  1. selected

其一在css中即便尚无原装的,可是可以用option:checked来代表,比如下边那样。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> option:checked { color: red; } </style>
</head> <body> <form> <select>
<option>1</option> <option>2</option>
<option>3</option> </select> </form>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        option:checked {
            color: red;
        }
    </style>
 
</head>
<body>
    <form>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </form>
</body>
</html>

亚洲必赢官网 7

三  empty伪拔取器

那么些拔取器有点意思,在jquery中称之为”内容选拔器“,就是用来搜寻空元素的,借使玩转jquery的empty,这么些也不曾怎么难点,

上边举个例证,让第二个空p的背景变色。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> p:first-child{ width:500px; height:20px; } p:empty {
background:red; } </style> </head> <body>
<p></p> <p>他好</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
 
        p:first-child{
            width:500px;
            height:20px;
        }
 
        p:empty {
            background:red;
        }
    </style>
 
</head>
<body>
    <p></p>
    <p>他好</p>
</body>
</html>

亚洲必赢官网 8

四:not(xxx) 伪选用器

同一那几个也是那几个经典的not选用器,在jquery中称之为”基本接纳器“,想起来了并未???

亚洲必赢官网 9

由此看来,当您看完上边这个,是否认为css3中一度融入了一些”脚本处理作为”,那种感觉就是老大css再也不是你曾今认识的更加css了。

赞 1 收藏
评论

亚洲必赢官网 10

CSS之旅(2):怎么着更长远的驾驭种种选择器

2015/05/08 · CSS ·
CSS

初稿出处:
一线码农   

上篇我们说了怎么要运用css,这篇大家就从选取器说起,我们都领悟浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成了xml格式,否则的话就是一堆“杂乱无章”的string,那样的话没人知道是哪些鸟东西,js也惊慌失措什么各个getElementById,所以当浏览器解析成dom结构后,浏览器才会很便宜的根据css各样条条框框的拔取器在dom结构中找到相应的义务,那下一个题材自然就严重了,那就是必须深刻的领悟dom模型。

一:理解Dom模型

率先大家看上边的代码。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> </head>
<body> <p>出名的信用社一栏</p> <hr /> <ul>
<li>百度</li> <li>今日头条</li>
<li>阿里</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <p>有名的公司一栏</p>
    <hr />
    <ul>
        <li>百度</li>
        <li>新浪</li>
        <li>阿里</li>
    </ul>
</body>
</html>

用那一个代码大家很不难的画出dom树。

 

亚洲必赢官网 11

当你看来那几个dom树的时候,是还是不是立刻觉得音信量越发大,很简短,因为是树,所以就有所了一些树的性状,比如
“孩子节点”,“公公节点”,

“兄弟节点”,“第四个左孩子”,“最后一个左孩子”等等,对应着继续我要说的种种情状,一起来看望html被脱了个精光的痛感是不是很爽~~~~

1:孩子节点

找孩子节点,本质上的话分二种,真的只找“孩子节点”,“找到所有子女(包含子孙)“

<1> 后代接纳器

先是看上边的html,我想你能够轻易的绘图出dom树了,这上边的题材就是怎么将body中装有的后人span都绘上red。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> body span { color: red; } </style>
</head> <body> <span>我是span1</span> <ul>
<li> <ul><span>我是span2</span></ul>
</li> </ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body span {
            color: red;
        }
    </style>
</head>
<body>
    <span>我是span1</span>
    <ul>
        <li>
            <ul><span>我是span2</span></ul>
        </li>
    </ul>
</body>
</html>

亚洲必赢官网 12

  1. 儿女选拔器

<1>  “>”玩法

这几个也是本身说的第二种情况,真的只找孩子节点,在css中也很不难,用 >
号就足以了,是或不是很风趣,跟jquery一样的玩法,对不对。

XHTML

<html xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”> body > span
{ color: red; } </style> </head> <body>
<span>我是span1</span> <ul> <li>
<ul><span>我是span2</span></ul> </li>
</ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body > span {
            color: red;
        }
    </style>
</head>
<body>
    <span>我是span1</span>
    <ul>
        <li>
            <ul><span>我是span2</span></ul>
        </li>
    </ul>
</body>
</html>

亚洲必赢官网 13

<2> ”伪选用器”玩法

而外上边那种玩法,在css3中还足以使用”伪选拔器”玩法,真tmd的精锐,下一篇会专门来教学,那里只介绍一个:nth-child用法,若是

您玩过jquery,一切都不是题材。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> body > span:nth-child(1) { color: red; }
</style> </head> <body>
<span>我是span1</span> <span>我是span2</span>
<ul> <li>
<ul><span>我是span3</span></ul> </li>
</ul> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body > span:nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
    <span>我是span1</span>
    <span>我是span2</span>
    <ul>
        <li>
            <ul><span>我是span3</span></ul>
        </li>
    </ul>
</body>
</html>

亚洲必赢官网 14

  1. 哥俩节点

手足节点也是很好领悟的,在css中用
“+”就足以缓解了,可以看看上面我成功将第三个p绘制成了黄色。

XHTML

<!DOCTYPE html> <html xmlns=”怎样更尖锐的知道种种选拔器,强大的伪接纳器。;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> .test + p { color:red; } </style>
</head> <body> <p
class=”test”>我是第三个段落</p>
<p>我是首个段落</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .test + p {
            color:red;
        }
    </style>
</head>
<body>
    <p class="test">我是第一个段落</p>
    <p>我是第二个段落</p>
 
</body>
</html>

亚洲必赢官网 15

  1. 属性选拔器

假若玩过jquery,那个特性接纳器我想那多少个清楚,首先看个例证,我想找到name=test的p元素,将其标红。

XHTML

<html xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title> <style type=”text/css”>
p[name=’test’] { color: red; } </style> <script
src=”Scripts/jquery-1.10.2.js”></script> </head>
<body> <p name=”test”>我是率先个段落</p>
<p>我是第一个段落</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        p[name=’test’] {
            color: red;
        }
    </style>
    <script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
    <p name="test">我是第一个段落</p>
    <p>我是第二个段落</p>
</body>
</html>

亚洲必赢官网 16

到明天了却,有没有感觉到和jquery的玩法一模一样,而且感觉更加引人侧目,已经到了
”你懂的“ 的程度。

二:css内部机制的臆度

文章起首也说了,浏览器会根据css中定义的”标签”,然后将这一个标签的体裁应用到dom中指定的”标签“上,就比如,我在css中定义了一个

p样式,但浏览器怎么就能找到dom中的所有的p元素呢???
因为闭源的原由,大家无能为力得知其内部机制,不过在jquery上边,或者大家可以窥知一

二,因为css能显得的取舍器用法,在jquery中都能做得到,然后我就很心急的去探视jquery怎么着提取本人的各个选用器写法,上边我们看看源码。

XHTML

<!DOCTYPE html> <html xmlns=”;
<head> <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> <title></title> <style
type=”text/css”> p[name=’test’] { color: red; } </style>
<script src=”Scripts/jquery-1.10.2.js”></script> <script
type=”text/javascript”> $(document).ready(function () {
$(“p[name=’test’]”).hide(); }); </script> </head>
<body> <p name=”test”>我是率先个段落</p>
<p>我是首个段落</p> </body> </html>

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
 
    <style type="text/css">
        p[name=’test’] {
            color: red;
        }
    </style>
 
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
 
        $(document).ready(function () {
 
            $("p[name=’test’]").hide();
        });
    </script>
</head>
<body>
    <p name="test">我是第一个段落</p>
    <p>我是第二个段落</p>
</body>
</html>

亚洲必赢官网 17

在jquery里面经过一番找寻,最终可以看出只有是调用了queryselectorAll这一个dom的原生方法,你也足以在console中通晓的看到,最终的

results就是找到的p元素,为了表达,我在taobao
page下开一个console。亚洲必赢官网 18

到如今,我大概粗略的狐疑,也许至少在chrome浏览器下,浏览器为了找到dom中指定的因素,或许也是调用了queryselectAll方法。。。

好了,大致也就说这么多了,精晓dom模型是重大,那样的话才能分晓后续浏览器的渲染行为。

赞 1 收藏
评论

亚洲必赢官网 19

本文实例讲述了jQuery中add()方法用法。分享给我们供大家参考。具体分析如下:

1:默许情形下,日期输入文本框得到页面宗旨的时候,日期拔取器组件会在一个覆盖层中开辟日历选拔面板,当日期输入文本框失去主题或者选择一个日期的时候,将活动关闭该日历选拔面板
$(selector).datepicker([options]);
大约实例:

此函数在匹配元素中添加与表明式匹配的因素。
add()函数重返的结果将平昔以元素在HTML文档中冒出的相继来排序,而不再是粗略的增加。

复制代码 代码如下:

语法:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>DatePicker Local</title>
<link rel=”stylesheet” type=”text/css”
href=”themes/ui-lightness/jquery.ui.all.css”/>
<script type=”text/javascript”
src=”JS/jquery-1.4.2.min.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.core.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.datepicker.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
 $(“#inputDate”).datepicker({
  /* 区域化周名为普通话 */
  dayNamesMin : [“日”, “一”, “二”, “三”, “四”, “五”, “六”], 
  /* 周周从星期二开班 */
  firstDay : 1,
  /* 区域化月名为华语习惯 */
  monthNames : [“1月”, “2月”, “3月”, “4月”, “5月”, “6月”,
     “7月”, “8月”, “9月”, “10月”, “11月”, “12月”],
  /* 月份体现在年前面 */
  showMonthAfterYear : true,
  /* 年份后缀字符 */
  yearSuffix : “年”,
  /* 格式化普通话日期
  (因为月份中曾经包括“月”字,所以那边大致) */
  dateFormat : “yy年MMdd日”  
 }); 
});
</script>
亚洲必赢官网,<style>
*{ font-size:12px; }
</style>
</head>
<body>
请输入一个日子:
<input type=”text” id=”inputDate” />
</body>
</html>

语法一:

效果图:  亚洲必赢官网 20

复制代码 代码如下:

2:指定弹出日期接纳器的图样按钮 须求加上响应的资源文件:

$(selector).add(expr,context)

复制代码 代码如下:

参数 描述
expr 可选。用于匹配元素的选择器字符串。
context 可选。作为待查找的 DOM 元素集、文档或 jQuery 对象。

         $(document).ready(function() {
                  $(“#datepicker”).datepicker({
                               showOn: “button”,
                               buttonImage: “Images/calendar.gif”,
                               buttonImageOnly: true
                 });
          }); 

实例:

复制代码 代码如下:

实例一:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>DatePickerIcon</title>
<link rel=”stylesheet” type=”text/css”
href=”themes/ui-lightness/jquery.ui.all.css”/>
<script type=”text/javascript”
src=”JS/jquery-1.4.2.min.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.core.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.datepicker.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
 $( “#datepicker” ).datepicker({
  showOn: “button”,
  buttonImage: “Images/calendar.gif”,
  buttonImageOnly: true
 });
});
</script>
<style>
*{ font-size:12px; }
body{ padding : 30px; }
#datepicker{ margin:0; height:13px; }
</style>
</head>
<body>
<div>请选用一个日期:<input type=”text”
id=”datepicker”></div>
</body>
</html>

将span元素添加的匹配元素中去,并将它们的字体颜色设置为紫色。

效果图:   亚洲必赢官网 21

复制代码 代码如下:

3:突显带年、月份下拉列表和按钮面板的日期选择器

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
   ul
   {
          width:200px;
          height:200px;
          border:1px solid blue;
   }
   div
   {
          height:300px;
   }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        $(“p”).add(“span”).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

复制代码 代码如下:

实例二:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>DatePicker Local</title>
<link rel=”stylesheet” type=”text/css”
href=”themes/ui-lightness/jquery.ui.all.css”/>
<script type=”text/javascript”
src=”JS/jquery-1.4.2.min.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.core.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.datepicker.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
 $(“#inputDate”).datepicker({
  changeMonth: true,  //可以选用月份
  changeYear: true,   //可以挑选年份
  showButtonPanel: true,  //呈现按钮面板
  currentText: ‘明天’,  //当今天期按钮上出示的文字
  closeText: ‘关闭’,    //关闭按钮上体现的文本
  yearRange: ‘c-60:c+20’

复制代码 代码如下:

 }); 
});
</script>
<style>
*{ font-size:12px; }
</style>
</head>
<body>
请输入一个日子:
<input type=”text” id=”inputDate” />
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
    ul
    {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    div
    {
        height:300px;
    }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        $(“p”).add(“span”,”ul”).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

效果图:   亚洲必赢官网 22
4:同时展现半年份的日期选拔器

语法二:

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>DatePickerButton</title>
<link rel=”stylesheet” type=”text/css”
href=”themes/ui-lightness/jquery.ui.all.css”/>
<script type=”text/javascript”
src=”JS/jquery-1.4.2.min.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.core.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.datepicker.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
 $( “#datepicker” ).datepicker({
  numberOfMonths : 3,  //突显月份的个数
  showCurrentAtPos : 1,  //当前月份在第一个岗位
  stepMonths : 3  //翻页时五次跳过半年份
 });
});
</script>
<style>
*{ font-size:11px; }
#datepicker{ margin:0; height:13px; }
</style>
</head>
<body>
请选拔一个日子:<input type=”text” id=”datepicker”>
</body>
</html>

$(selector).add(element)

效果图:   亚洲必赢官网 23

参数列表:

5:日期拔取器的一些办法 dialog, isDisabled, hide, show, refresh, getDate, setDate

参数 描述
element 可选。被添加的DOM元素或者jQuery元素。

复制代码 代码如下:

实例:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>DatePicker Dialog</title>
<link rel=”stylesheet” type=”text/css”
href=”themes/ui-lightness/jquery.ui.all.css”/>
<script type=”text/javascript”
src=”JS/jquery-1.4.2.min.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.core.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.datepicker.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
 $(“#inputDate”).datepicker(); 
 $(“#showDialog”).click(function(){
  $(“#inputDate”).datepicker(“dialog”,””,function(dateText, inst){
   $(“#inputDate”).val(dateText);
  });
 });
});
</script>
<style>
*{ font-size:12px; }
</style>
</head>
<body>
请输入一个日期:
<input type=”text” id=”inputDate” />
<button id=”showDialog”>Show</button>
</body>
</html>

实例一:

效果图:   亚洲必赢官网 24

复制代码 代码如下:

6:日期选取器的一部分事变 6.1 beforeShow事件:展现日期拔取器从前触发该事件。
6.2 beforeShowDay事件:日期选用器上天天接纳从前都将触发该事件 
function(date) {}
6.3 onChangeMonthYear:
当日期拔取器选定新的年度或者月份时触发该事件function(year, month,
inst);
6.4
onClose事件:当关闭日期选用器控件的时候触发此事件。function(dataText,
inst) {}
6.5
onSelect事件:当日期选取器选中一个日期时触发该事件。function(dataText,
inst) {}   //dataText为所选的日期的字符串,inst为日期采用器实例

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
    }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
       
$(“p”).add(document.getElementById(“myspan”)).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id=”myspan”>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

复制代码 代码如下:

实例二:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>DatePicker Dialog</title>
<link rel=”stylesheet” type=”text/css”
href=”themes/ui-lightness/jquery.ui.all.css”/>
<script type=”text/javascript”
src=”JS/jquery-1.4.2.min.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.core.js”></script>
<script type=”text/javascript”
src=”JS/jquery.ui.datepicker.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
 /* 有日记的日期集合 */
 var hasLog=[{ month:10,  day:1 },
    { month:10, day:5 },
    { month:10, day:20 }];

复制代码 代码如下:

 function hasToday(date){
  /* 测试当前天期是不是在汇集中存在有一致项 */
  for(var i in hasLog){
   /* 因为js中的Date类型的月度取值范围是0-11,
    所以那里调用getDate()将来要加1才是如今月份 */
   if(hasLog[i].month == (date.getMonth()+1) &&
    hasLog[i].day == date.getDate()){
    return true;
   }
  }
  return false
 }

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
    ul
   {
           width:200px;
           height:200px;
           border:1px solid blue;
    }
    div
   {
           height:300px;
    }
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        $(“p”).add($(“#myspan”)).css(“color”,”green”)
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
    <span id=”myspan”>我是span</span>
  </ul>
  <span>我是span</span> </div>
</body>
</html>

 $(“#datepicker”).datepicker({
  beforeShowDay : function(date){
   /* 在呈现日期从前,
    测试如若当前些天期在会聚中存在,
    则为当下日子添加一个class */
   var dat = new Date(date);
   var css =”” ;
   if(hasToday(dat)){
    css=”light_day”;
   }
   return [true, css];
  },
  onSelect : function(dateText,inst){
   /* 在选中国和东瀛期未来,
    测试倘若当今天子在聚集中存在,
    则向页面打印相应的提示音信 */
   var dat = new Date(dateText);
   if(hasToday(dat)){
    var msg=”得到了日期:” + dateText +
     “,大家得以在此处询问当今日期的日志列表”;
    $(“#logList”).text(msg);
   }
  }
 });
});
</script>
<style>
body{ padding:30px; }
*{ font-size:12px; }
#logList{ margin:10px 0; padding:8px; }
.light_day .ui-state-default{ background:#fdc; }
.light_day .ui-state-default:hover,
.light_day .ui-state-default:active{ background:#fed; }
</style>
</head>
<body>
<div id=”datepicker”></div>
<div id=”logList”></div>
</body>
</html>

语法三:

效果图:   亚洲必赢官网 25

复制代码 代码如下:

你或许感兴趣的篇章:

  • jQuery落成简单的日期输入格式化控件
  • 依照jquery的web页面日期格式化插件
  • jquery获取当前天期的不二法门
  • datePicker——日期采纳控件(with
    jquery)
  • jquery中落实时间戳与日期互相转换
  • jQuery
    Mobile开发中国和日本期插件Mobiscroll使用表明
  • 获得客户端电脑日期时间js代码(jquery)
  • JQuery日期插件datepicker的行使办法
  • jquery
    日期控件datepicker属性详细分析
  • jQuery完结简单日期格式化功用示例

$(selector).add(html)

参数列表:

参数 描述
html 可选。被添加的html代码片段。

实例:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
    $(document).ready(function(){
        alert($(“p”).add(“<span>新增加的</span>”).length);
    })
</script>
</head>
<body>
<div>
  <ul>
    <li>
      <p>我是p</p>
    </li>
  </ul>
</body>
</html>

企望本文所述对大家的jQuery程序设计具有协助。

您可能感兴趣的稿子:

  • 效仿SQLSERVER的八个函数:dateadd(),datediff()
  • JavaScript 模仿vbs中的 DateAdd()
    函数的代码
  • jquery中.add()的使用分析
  • js达成类似于add(1)(2)(3)调用格局的措施
网站地图xml地图