DOM操作
样式操作
JSON简介：一种轻量级的数据交互格式，JSON的数值可以是数字、字符串、布尔值、数组或者对象、null 。
设置样式：css( )
追加类样式：addClass( )
移除类样式：removeClass( )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>样式操作</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
// 设置样式
$("#m").css("color","blue");
$("#m").css({"font-size":"25px","background-color":"yellow","font-weight":"900"});
// 追加类样式
$("#mydiv").addClass("aa bb");
setTimeout( function(){
// 5s后，移除类样式
$("#mydiv").removeClass("aa bb");
},5000);
});
</script>
<style type="text/css">
.aa{
font-size: 40px;
}
.bb{
color: red;
}
</style>
</head>
<body>
<p id="m" class="mjsw">墨渐生微</p>
<div id="mydiv">
<p>欢迎关注！！！</p>
</div>
</body>
</html>
内容及value属性值操作
HTML代码操作：html( )
文本操作：text( )
vaule值操作：val( )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html、val、text</title>
</head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
/************html()************/
//alert($("#mydiv").html());
//$("#mydiv").html("<input value='欢迎关注！！！'/>");
/************text()************/
//alert($("#mydiv").text());
//$("#mydiv").text("<input value='欢迎关注！！！'/>");
/************val()************/
//alert($("#inp").val());
//$("#inp").val("随心！！！");
/*
* 总结：
* html( )会对HTML标签进行解析；
* text( )只会操作文本对象
* val( )操作的是value属性值
*/
});
</script>
<body>
<div id="mydiv">
<div>墨渐生微</div>
<input id="inp" value="放荡不羁的活着！！" />
</div>
</body>
</html>
节点操作
查找节点
创建节点
$(“创建含文本与属性的元素节点”)
插入节点
元素内部插入子节点
元素外部插入同辈节点
删除节点
remove()：删除整个节点
detach()：删除整个节点，保留元素的绑定事件、附加的数据
empty()：清空节点内容
替换节点
replaceWith()和replaceAll()用于替换节点
复制节点
clone(true)用于复制节点；会克隆ID，参数true表示复制其事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
//创建节点：直接字符串写标签
var $li = $("<li>不良人</li>");
//追加子节点
//$("ul").append($li);
//$li.appendTo("ul");
//前置插入子节点
//$("ul").prepend($li);
//$li.prependTo("ul");
//元素之后插入同辈节点
//$("ul").after($li);
//$li.insertAfter("ul");
//元素之前插入同辈节点
//$("ul").before($li);
//$li.insertBefore("ul");
//替换节点
//$("ul li:odd").replaceWith($li);
//$($li).replaceAll("ul li");
//克隆节点
//$("ul li:eq(1)").clone(true).appendTo("ul");
//输出元素本身html
//alert($("<div></div>").append($("ul li:eq(1)").clone()).html());
//删除、清空节点
//$("ul li:eq(1)").remove(); // 移除标签
//$("ul li:eq(1)").detach(); // 分离标签，但不解除时间
//$("ul li:eq(1)").empty(); // 清空结点内容
});
</script>
</head>
<body>
<h2>热门动画排行</h2>
<ul>
<li>名侦探柯南</li>
<li>阿拉蕾</li>
<li>海贼王</li>
</ul>
</body>
</html>
节点属性操作
attr()获取或设置匹配元素的属性值
removeAttr()匹配的元素中删除一个属性
节点遍历
获取元素的所有子元素children()
jQuery可以获取紧邻其后next()、紧邻其前pre()和位于该元素前与后的所有同辈元素siblings()
jQuery中可以遍历前辈元素:获取元素的父级元素parent(),获取元素的祖先元素parents()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*$("img").attr({
"title": "图片",
"width": "200px"
});
$("img").removeAttr("width");*/
alert($("body").children().length);
alert($("li:eq(1)").next().html());
alert($("li:eq(1)").prev().html());
$("li:eq(1)").siblings().css({
"background-color": "red"
});
alert($("li:eq(1)").parents().length);
alert($("li:eq(1)").parent().length);
});
</script>
</head>
<body>
<img src="img/headimg.jpg" />
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</body>
</html>
jQuery遍历– each()
查找方法– find()
CSS-DOM操作
除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.js">
</script>
<script type="text/javascript">
$(function() {
//each用法一
/*var arrys = ['a', 'b', 'c'];
$.each(arrys, function(k, v) {
alert(k + '-' + v);
});*/
//each用法二
/*$("span").each(function(i) {
$(this).text(i);
});*/
//搜索与指定表达式匹配的元素并返回
/*var pp = $("p").find("span");
alert(pp.html());*/
alert($("#mydiv").height());
$("#mydiv").height("500px");
$("#mydiv").width("500px");
//默认上外间距是8px,左外间距8px
var off = $("#mydiv").offset();
alert(off.left);
alert(off.top);
});
</script>
</head>
<body>
<div id="mydiv" style="background-color:red;width:200px;height:200px;margin-Top:20px;margin-left:20px;"></div>
<p>
<span>我是span1</span><br />
<span>我是span2</span>
</p>
<span>我是span3</span>
</body>
</html>
事件
基础事件
window事件
鼠标事件
键盘事件
表单事件
复合事件
鼠标光标悬停事件：hover(fn1,fn2)，相当于mouseover与mouseout事件的组合
鼠标连续点击事件：toggle()方法用于模拟鼠标连续click事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bn").click(function(){
$(this).css("background-color","green");
});
$("#bn").mouseover(function(){
$(this).addClass("h");
});
$("#bn").mouseout(function(){
$(this).removeClass("h");
});
$("input:button").hover(
function(){
$(this).css("font-size","25px");
},
function(){
$(this).css("font-size","10px")
}
);
//注意toggle此方法要用1.8的js文件
$("#btn").toggle(
function(){
$(this).text("点");
},
function(){
$(this).text("点点");
},
function(){
$(this).text("点点点");
}
);
$("#it").focus(function(){
$(this).val("点进来干嘛？");
});
$("#it").blur(function(){
$(this).val("别走啊！！！");
});
$("*").keypress(function(){
alert("别乱碰按键！！！");
});
});
</script>
<style type="text/css">
.h{
color: red;
font-size: 15px;
background-color:yellow;
}
</style>
</head>
<body>
<button id="bn" value="变">变</button><br />
<button id="btn" value="变">点点点</button><br />
<input type="button" value="走你" /><br />
<input id="it" type="text" value="请输入" />
</body>
</html>
事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
// 添加
$("#bn").click(function() {
$("ul").append($("<li>SQL</li>"));
});
//绑定事件方式一：
/*$("ul li").hover(
function(){
$(this).addClass("add");
},
function(){
$(this).removeClass("add");
}
);*/
//绑定事件二:
/*$("ul li").bind({
mouseover: function() {
$(this).addClass("add");
},
mouseout: function() {
$(this).removeClass("add");
}
});*/
//事件解除
//$("ul li").unbind("mouseover");
//$("ul li").unbind("mouseout");
//绑定事件三:
//普通的绑定事件
/*$("ul li").on({
mouseover: function() {
$(this).addClass("add");
},
mouseout: function() {
$(this).removeClass("add");
}
});*/
//事件委托：可以定位到新增的事件
$("ul").on("mouseover" ,"li" ,{} ,function(){
$(this).addClass("add");
});
$("ul").on("mouseout" ,"li" ,{} ,function(){
$(this).removeClass("add");
});
//事件解除
//$("ul").off("mouseover" ,"li");
//$("ul").off("mouseout" ,"li");
});
</script>
<style type="text/css">
#u1 {
font-size: 20px;
}
.add {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<button id="bn">添加</button>
<ul id="u1">
<li>HTML</li>
<li>JQurey</li>
<li>Java</li>
<li>JavaScript</li>
</ul>
</body>
</html>
jQuery的动画效果
控制元素显示show()与隐藏hide()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>显示与隐藏</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
$(function() {
$(":button:eq(0)").click(function() {
$("#img1").show("slow", function() {
alert("show on");
});
});
$(':input:eq(1)').click(function() {
$('#img1').hide("slow");
})
});
</script>
</head>
<body>
<input type="button" value="显示" id="bn1">
<input type="button" value="隐藏" id="bn2"><br/>
<hr/>
<img id="img1" src="img/ad.jpg" />
</body>
</html>
控制元素淡入fadeIn()淡出fadeOut()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淡入淡出效果</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[name=fadein_btn]").click(function() {
$("img").fadeIn(3000);
});
$("input[name=fadeout_btn]").click(function() {
$("img").fadeOut(5000);
});
});
</script>
</head>
<body>
<img src="img/ad.jpg" style="display:none;" />
<input name="fadein_btn" type="button" value="淡入" />
<input name="fadeout_btn" type="button" value="淡出" />
</body>
</html>
切换元素可见状态toggle()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可伸缩的菜单</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li:gt(2):not(:last)").toggle();
});
});
</script>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
<button>更多</button>
</body>
</html>
改变元素高度slideDown(),slideUp()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>改变元素高度</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h2").toggle(
function() {
$(".txt").slideUp("slow");
},
function() {
$(".txt").slideDown("slow");
}
);
});
</script>
</head>
<body>
<div id="box">
<h2>窗边的小豆豆</h2>
<div class="txt">
<p>本书讲述了作者上小学的一段真实的故事。</p>
<p>作者因淘气被学校退学后，来到巴学园。在小林校长的爱护和引导下，一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。</p>
<p>这本书不仅给世界千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>
</div>
</div>
</body>
</html>
自定义动画: $(selector).animate( params [, speed] [,easing] [,fn] );
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义动画</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
/*animate: 1.css样式 ，2.时间，3.效果 ，4.回调函数*/
$("div").animate({
"font-size": "200px",
}, 3000, "swing", function() {
$("div").text("欢迎关注！！");
});
});
</script>
<style type="text/css">
* {
width: auto;
height: auto;
background-color: lavender;
color: blue;
font-size: 100px;
}
</style>
</head>
<body>
<div>墨渐生微</div>
</body>
</html>
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
