jQuery prev ~ siblings选择器使用介绍_Javascript教程-查字典教程网
jQuery prev ~ siblings选择器使用介绍
jQuery prev ~ siblings选择器使用介绍
发布时间:2017-01-14 来源:查字典编辑
摘要:1、prev~siblings:匹配prev元素之后的所有siblings元素2、(1)prev:任何有效选择器(2)siblings:一个...

1、prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素

2、

(1)prev:任何有效选择器

(2)siblings:一个选择器,并且它作为第一个选择器的同辈

3、示例

(1)源码

siblings.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=gb2312" />

<title>prev ~ siblings选择器</title>

<script type="text/javascript" src="jquery-2.0.3.js"></script>

<style type="text/css">

body{

width:100%;

height:100%;

font-size:18px;

color:#00FF00;

}

</style>

<script type="text/javascript">

$(function(){

//匹配所有元素

$("*").css("background-color","#FFE4E1");

//prev ~ siblings选择器运用

$("label ~ input").css("font-size","30px");

//点击事件,prev ~ siblings选择器运用

$("#pwd").click(function(){

alert("我被选中!");

});

});

</script>

</head>

<body>

<form id="form_body">

<label>用户名:</label>

<input type="text" id="username" name="username"/>

<label>密 码:</label>

<input type="password" id="password" name="password"/>

<input type="button" id="login" name="login" value="登录"/>

<input type="reset" id="reset" name="reset" value="重置"/>

<input type="checkbox" id="pwd" name="pwd"/>记住密码

</form>

</body>

</html>

(2)显示结果如下

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类