使用css()为指定的元素设置样式值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#pic1").css({"border":"3px solid #00ff00","opacity":"0.1"});
});
</script>
</head>
<body>
<img src="img/lift_product_1.jpg" id="pic1" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
list-style: none;
}
.show{
color: azure;
background-color: blueviolet;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("li").hover(function(){
$(this).toggleClass("show");
});
});
</script>
</head>
<body>
<ul>
<li>葫芦娃</li>
<li>苏克和贝塔</li>
<li>黑猫警长</li>
<li>铁臂阿童木</li>
<li>圣斗士星矢</li>
<li>魔神坛斗士</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
/*
var content=$("#left").html();
alert(content);
$("[type=button]").click(function(){
$("#left").html("<div id='content1'><img src='img/headimg.jpg' /></div>");
});
*/
var content=$("#left").text();
alert(content);
$("[type=button]").click(function(){
$("#left").text("<div id='content1'><img src='img/headimg.jpg' /></div>");
});
});
</script>
</head>
<body>
<div id="left">
<img src="img/lift_product_1.jpg" />
<p>这是一把小雨伞</p>
</div>
<input type="button" value="点我换内容" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#content1").focus(function(){
var contents=$("#content1").val();
if(contents=="冰箱"){
$("#content1").val("");
}
});
$("#content1").blur(function(){
var contents=$("#content1").val();
if(contents==""){
$("#content1").val("冰箱");
}
});
});
</script>
</head>
<body>
<input type="text" value="冰箱" id="content1"/><input type="button" value="搜索" />
</body>
</html>
元素外部插入同辈节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
list-style: none;
};
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
// $("h2").hide();
// $("li").css("background-color","aqua");
//创建节点
var $newNode1=$("<li>犬夜叉</li>");
//添加子节点
//$("ul").append($newNode1);
// $newNode1.appendTo("ul");
//前置插入子节点
//$("ul").prepend($newNode1);
//$newNode1.prependTo("ul");
//元素之后插入同辈节点
//$("ul").after($newNode1);
//$newNode1.insertAfter("ul");
//元素之前插入同辈节点
//$("ul").before($newNode1);
//$newNode1.insertBefore("ul");
//删除、清空节点
//$("ul li:eq(1)").remove();
//$("ul li:eq(1)").detach();
//$("ul li:eq(1)").empty();
//替换节点
//$("ul li:eq(1)").replaceWith($newNode1);
//$newNode1.replaceAll("ul li:eq(1)");
//复制节点
//$("ul li:eq(1)").clone(true).appendTo("ul");
//获取和设置节点的属性
var $newNode2=$("<img src='img/headimg.jpg' alt='这是一个小可爱' />");
$newNode2.appendTo("ul");
alert($($newNode2).attr("alt"));
$("img").attr({"height":"100","width":"50"});
$("img").removeAttr("width");
});
</script>
</head>
<body>
<h2>动画片</h2>
<ul>
<li>葫芦娃</li>
<li>苏克和贝塔</li>
<li>黑猫警长</li>
<li>铁臂阿童木</li>
<li>圣斗士星矢</li>
<li>魔神坛斗士</li>
</ul>
</body>
</html>