您的位置：首页 > Web前端 > CSS

基本标签应用，移除CSS，在div中间追加加载标签和事件

2012-10-30 14:44 369 查看 
<div><label>Some images:</label></div>
<div>
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
<img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
<img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
<img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
<img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
<img src="images/image.6.jpg" id="coffeePot"/>
</div>

<div id="someDiv">This is a <div> with an id of <tt>someDiv</tt></div>
<div title="myTitle1"><span>Hello</span></div>
<div title="myTitle2"><span>Goodbye</span></div>

<ul class="myList">
<li><a href="http://jquery.com">jQuery supports</a>
<ul>
<li><a href="css1">CSS1</a></li>
<li><a href="css2">CSS2</a></li>
<li><a href="css3">CSS3</a></li>
<li>Basic XPath</li>
</ul>
</li>
<li>jQuery also supports
<ul>
<li>Custom selectors</li>
<li>Form selectors</li>
</ul>
</li>
</ul>

<table id="languages" border="0" cellspacing="1">
<thead>
<tr>
<th>Language</th>
<th>Type</th>
<th>Invented</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>Static</td>
<td>1995</td>
</tr>
<tr>
<td>Ruby</td>
<td>Dynamic</td>
<td>1993</td>
</tr>
<tr>
<td>Smalltalk</td>
<td>Dynamic</td>
<td>1972</td>
</tr>
<tr>
<td>C++</td>
<td>Static</td>
<td>1983</td>
</tr>
</tbody>
</table>

<form action="" method="put" onsubmit="return false;">
<div>
<label>Text:</label> <input type="text" id="aTextField" name="someTextField"/>
</div>
<div>
<label>Radio group:</label>
<input type="radio" name="radioGroup" id="radioA" value="A"/> A
<input type="radio" name="radioGroup" id="radioB" value="B"/> B
<input type="radio" name="radioGroup" id="radioC" value="C"/> C
</div>
<div>
<label>Checkboxes:</label>
<input type="checkbox" name="checkboxes" id="checkbox1" value="1"/> 1
<input type="checkbox" name="checkboxes" id="checkbox2" value="2"/> 2
<input type="checkbox" name="checkboxes" id="checkbox3" value="3"/> 3
<input type="checkbox" name="checkboxes" id="checkbox4" value="4"/> 4
</div>
<button type="submit" id="submitButton">Submit</button>
</form>


body,th,td {
font-size: 8pt;
background-color: white;
}

.redBorder, .wrappedElement {
border: solid red 1px;
}

.thickBorder {
border-width: 3px;
}

.seeThrough {
opacity: 0.5;
filter: alpha(opacity=50);
}

table {
background-color: black;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../common.css">
<link rel="stylesheet" type="text/css" href="sample.css">
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript" src="../scripts/support.labs.js"></script>
<script type="text/javascript">
function performOperation(operation) {
$('*').removeClass('wrappedElement');
eval('var wrappedSet='+operation+';');
wrappedSet.addClass('wrappedElement');
return wrappedSet;
}

$(function(){
$(document.body).load('sample.dom.html');
});
</script>
</head>

<body class="plain">
</body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>New <div>s Example</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$("<div class='foo'>I have foo!</div><div>I don 't</div>")
.filter(".foo").click(function() {
alert("I'm foo!");
}).end().appendTo("#someParentDiv");
});
</script>
</head>

<body>
<div>Div 1</div>
<div id="someParentDiv">Div 2</div>
<div>Div 3</div>
</body>
</html>


$("<div class='foo'>I have foo!</div><div>I don 't</div>")
.filter(".foo").click(function() {
alert("I'm foo!");
}).end().appendTo("#someParentDiv"); 加载到某个标签后

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../common.css">
<link rel="stylesheet" type="text/css" href="sample.css">
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript" src="../scripts/support.labs.js"></script>
<script type="text/javascript">
function performOperation(operation) {
$('*').removeClass('wrappedElement');
eval('var wrappedSet='+operation+';');
wrappedSet.addClass('wrappedElement');
return wrappedSet;
}

$(function(){
$(document.body).load('sample.dom.html');
});
</script>
</head>

<body class="plain">
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航