jQuery 拥有可操作 HTML 元素和属性的强大方法
一. jQuery DOM（文档对象模型） 操作
jQuery 提供一系列与 DOM （Document Object Model）相关的方法，访问和操作元素和属性变得很容易
DOM 定义访问 HTML 和 XML 文档的标准
W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式
获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取属性 - attr()
jQuery attr() 方法用于获取属性值
<body>
<p class="text">我是一个段落文本</p>
<p>我是一个p标签</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 返回p元素的文本内容<取值>
// var text = $(".text").text();
// 设置所有 p 元素的文本内容
// var p = $("p").text("其实ta是个美女 ！");
// 使用函数来设置所有匹配元素的文本内容
$("p").text(function(i,h){
return "这个 p 元素的 index 是：" + i+"========="+h;
});
</script>
</body>
///////////////////////////////////////////////////////////
<body>
<div>
<p>
中山学院Ming ！
</p>
</div>
<div>我是Ming ！</div>
<div>我是Ming 2</div>
<div>我是Ming 3</div>
<div>我是Ming 4</div>
<div>我是Ming 5</div>
<div>我是Ming 6</div>
<div>我是Ming 7</div>
<div>我是Ming 8</div>
<div>我是Ming 9</div>
<div>我是Ming 10</div>
<div>我是Ming 11</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 获取div元素中的 标签+文本
// var html = $("div").html();
// 获取div元素中的 文本
// var text = $("div").text();
// 设置div元素中的html内容
// $("div").html("<div style=‘width:300px;height:100px;background:red;‘>中山学院</div>");
$("div").html(function(i,h){
return "这是利用html()方法设置 div内容"+i+"-----------"+h;
});
</script>
</body>
/////////////////////////////////////////////////////////////////////
<body>
<input type="text" class="items" value="请输入用户名..."/>
<input type="text" class="items" value="Allen" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 获取文本框中的值
// var val = $("input").val();
// 设定文本框的值
// $("input").val("ming");
// 设定文本框的值
$(‘input:text.items‘).val(function() {
return this.value + ‘ ‘ + this.className;
});
// alert(val);
</script>
</body>
////////////////////////////////////////////////////////////////////
<body>
<img ming="太帅了" class="logo" src="http://soft.tanzhouedu.com/images/logo.png" alt="中山学院" width="215" height="66" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 返回文档中所有图像的src属性值。
// var val = $("img").attr("src");
// 为所有图像设置src和alt属性(多个图片或属性)
$("img").attr({src:"http://static.youku.com/index/img/header/yklogo.png",alt:"优酷",width:"140",height:"50"});
// 为图片设置src属性
$(".logo").attr("src","http://gtms01.alicdn.com/tps/i1/TB1.lRWGXXXXXblXpXXGI4UIXXX-250-100.gif");
</script>
</body>
通过 jQuery，可以很容易地添加新元素/内容
添加新的 HTML 内容
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<body>
<p>one</p><span>ming 依然还是那么帅 ！</span>
<p>two</p>
<div>prepend - 1</div>
<div>prepend - 2</div>
<b class="txt">一直都是小弟</b>
<b class="txt">我已不做大哥好多年</b>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 在每一行文字后边追加内容
// $("p").append("<span style=‘color:red;‘>我是Ming ！</span>");
// 将一个DOM元素前置入所有段落
// $("p").prepend("<span style=‘color:red;‘>我是Ming ！</span>");
//向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
// $("p").prepend($("span"));
// 将一个DOM元素前置入所有段落
$("div").prepend($(".txt")[0]);
</script>
</body>
通过 jQuery，可以很容易地删除已有的 HTML 元素
删除元素/内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
<body>
<p>我是一个小苹果 ！<span class="txt">太帅了！</span></p> 小呀小苹果
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// $("p").remove();
// $("p span").remove(".txt");
// empty清空（把所有段落的子元素（包括文本节点）删除）
$("p").empty();
</script>
</body>
jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
ul li{border:1px solid red;float:left;list-style:none;line-height:30px;
padding:0 20px 0 20px;
}
/* ul li:hover{background:red;color:#fff;} */
.sel{background:red;color:#fff;}
</style>
<body>
<ul>
<li>javaVIP</li>
<li>SEO</li>
<li>网络营销</li>
<li>淘宝</li>
</ul>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// addClass() , removeClass();
/*$("ul li").hover(function(){
$(this).addClass("sel");
},function(){
$(this).removeClass("sel");
});
*/
// 如果存在（不存在）就删除（添加）一个类
$("ul li").hover(function(){
$(this).toggleClass("sel");
});
</script>
</body>
通过 jQuery，很容易处理元素和浏览器窗口的尺寸
一. 尺寸方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() 方法返回元素的宽度（包括内边距）
innerHeight() 方法返回元素的高度（包括内边距）
outerWidth() 方法返回元素的宽度（包括内边距和边框）
outerHeight() 方法返回元素的高度（包括内边距和边框）
<style type="text/css">
*{margin:0;padding:0;}
div{width:100px;height:100px;background:#690;border:10px solid red;padding:20px;}
.one{width:100px;height:100px;background:#FC0;}
</style>
<body>
<div></div>
<div class="one"></div>
<div></div>
<input type="button" value="点击变大" id="btn"/>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 获取第一段的宽
var width = $("div").width();
var height = $("div").height();
// alert("width:"+width+" ; height:"+height);
// 10 px = 1em
// $(".one").width(300);
/*
$("#btn").click(function(){
$(".one").width(function(i,w){
return w*1.2;
});
});
*/
// 获取第一div内部区域高度innerHeight
var p = $("div:first");
// alert(p.innerHeight());
//$("div:last").text( "innerHeight:" + p.innerHeight() );
// 获取第一段落外部宽度outerWidth()
var p = $("div:first");
alert(p.outerWidth());
var width = $("div").width();
alert(width);
</script>
</body>
时间： 2024-10-10 11:24:24